25
Usability Findings Deliverable D3.2

Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Usability Findings

Deliverable D3.2

Page 2: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 1

MPAT File ID: d3.2_v1.0.docx

Version: 1

Deliverable number: D3.2

Authors: Matthew Broadbent (ULANC)

Contributors: Doreen Ritter (RBB), Nico Patz (RBB), Simona Tonoli (Mediaset)

Internal reviewers: Nicholas Race (ULANC)

Work Package: WP3

Task: T3.2

Nature: R – Report

Dissemination: PU – Public

Status: Living

Delivery date: 30.06.2016

Page 3: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 2

Version and controls:

Version Date Reason for change Editor

0.1 24.06.2016 Initial draft version Matthew Broadbent

0.9 29.06.2016 Internal review Nicholas Race

1.0 30.06.2016 Final submission Matthew Broadbent

Page 4: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 3

Acknowledgement: The research leading to these results has received funding from the European Union's Horizon 2020 Programme (H2020-ICT-2015, call ICT-19-2015) under grant agreement n° 687921.

Disclaimer: This document does not represent the opinion of the European Community, and the European Community is not responsible for any use that might be made of its content.

This document may contain material, which is the copyright of certain MPAT consortium parties, and may not be reproduced or copied without permission. All MPAT consortium parties have agreed to full publication of this document. The commercial use of any information contained in this document may require a license from the proprietor of that information.

Neither the MPAT consortium as a whole, nor a certain party of the MPAT consortium warrant that the information contained in this document is capable of use, nor that use of the information is free from risk, and does not accept any liability for loss or damage suffered by any person using this information.

Page 5: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 4

Executive Summary

In previous work, we outlined a plan for executing a series of focus groups. These focus groups are intended to solicit feedback on a series of wireframe designs. These designs include examples of the applications that can be created through MPAT. In addition to this, the designs also encompass the workflow undertaken to create such applications. This document presents the results of soliciting feedback on both of these designs. This process was simultaneously conducted across multiple institutions, using a consistent set of procedures to allow for consistency. Furthermore, this document describes the questions asked to participants, includes previews of the wireframes used in the sessions and provides a summarised list of the feedback received. Finally, we look to prioritise this feedback into three categories. Subsequently, this feedback will be used to modify and improve the designs, which will later be implemented within the MPAT project.

The feedback received during these focus groups was generally positive, with designs well received in all cases. A number of improvements and suggestions were also gathered as part of this process. These include changes to the look and feel of the example applications, as well as modifications to the underlying user interfaces. Prioritisation was given to these changes based on impact on the overall experience, as well as their commonality across the diverse focus groups.

Page 6: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 5

Table of Contents

Introduction

Focus Group Implementation

Focus Group Methodology

Focus Group Questions

User Interface Designs

Slideflow – Consumer Perspective

Interactive Advert – Consumer Perspective

Slideflow – Creator Perspective

Interactive Advert – Creator Perspective

Focus Group Demographics

Usability Findings

ULANC (UK)

Introductory Questions

Guiding Questions – Slideflow Design

Guiding Questions – Interactive Advertising Design

RBB (Germany)

Introductory Questions

Guiding Questions – Slideflow Design

Mediaset (Italy)

Introductory Questions

Guiding Questions – Interactive Advertising & Slideflow Design (Combined)

Prioritised Findings

Creator-focused Findings

Consumer-focused Findings

Conclusion

Glossary

Partner Short Names

References

Page 7: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 6

1 Introduction

In this document, we outline the specific details of a number of focus groups conducted within the scope of the MPAT project. With preparation undertaken in D3.1, this document outlines the execution of these focus groups. In the first instance, we detail a common set of questions used across all sessions. This was an intentional effort to ensure that results are comparable despite the geographical and group diversity.

Further to this, we describe the user interfaces and processes that were also used in each group. This includes the visual wireframes intended to solicit detailed feedback and generate discussion amongst group participants.

Three focus groups took place in the scope of this deliverable. These were conducted at partner facilities in the United Kingdom, Italy and Germany. Participants were drawn from a wide range of backgrounds and professions. The results of these focus groups are presented in a summarised form.

Continuing this process further, we sought to find commonality in the feedback obtained across these sessions. These recommendations were then prioritised both on the severity of the impairment, as indicated by participants across all groups.

2 Focus Group Implementation

Focus Group Methodology

In our previous deliverable, D3.1, we outlined a methodological approach for conducting a series of focus groups. These focus groups are intended to discover impairments in a set of initial user interface designs. D3.1 contained a number of important components necessary to conduct such a focus group, including an identification of participants, a procedure for conducting the focus groups and ethical considerations that must be considered beforehand. For more details, please refer to D3.1.

In the remainder of this section, we explore a number of different pre-requisites that were put into place before the focus groups. More specifically, this includes the questions asked during the focus group, as well as the designs that the participants were exposed to.

Page 8: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 7

Focus Group Questions

A common set of questions to be used in each focus group were designed and agreed on by all partners, and were felt to encompass a wide range of topics. Importantly, we wanted to solicit feedback on the designs themselves, with the main focus being around these designs. The designs used in the focus group (of which there are two), are shown later in this document. The questions used in the focus groups are as follows:

● Warm Up Questions

○ Can each of you briefly introduce yourselves?

● Introductory Questions

○ Have you had much experience using interactive applications on the TV? ○ Do you see other platforms (mobile, web) as an important part of a combined

experience?

● Guiding Questions Each UI design is shown in turn, and questions repeated

○ What do you like best about this design? ○ What do you think could be done better? ○ Does it include all of the functionality that you would expect? Is anything obvious

missing? ○ Does the interface seem familiar? ○ What would you change about it?

● Concluding Questions

○ Of all the things discussed today, which would you say is the most important aspect that needs to be changed?

User Interface Designs

To complement the aforementioned questions, a number of wireframe designs were developed. These targeted two specific use cases, and are discussed in more detail below. Each design was split into two distinct parts: 1) an example of the finished end-user application, and 2) an example workflow used to build that application (within MPAT itself).

Page 9: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 8

In all cases, the focus groups were shown the example finished end-user application first, so that they could better understand what was possible. They could also visualise exactly what the end product would hypothetically look like. In this way, the participants had a better appreciation of what was missing or omitted from the design, as well as any potential hindrances to that process.

These specific designs were driven and prioritised by previous work in WP2. This included defining, and further describing, a large set of scenarios. To focus work, especially in preparation for the pilot phase of the project, the consortium used a forward-facing approach to select a subset of scenarios. This was strongly guided by the scenarios and aspects necessary to successfully complete the pilots. This ensures that a valid and useful outcome was achieved.

Slideflow – Consumer Perspective

The first set of wireframes are derived from a scenario based around the visual presentation of a narrative. In much the same way as a physical book, the Slideflow application is made up of a series of pages. Each page consists of a number of components, and is by default a fullscreen application. The basic, and often most used, format of a page is focused around a static background image with some well-placed text. Users can then navigate between pages using the directional keys, typically by scrolling up or down. This presentation and interaction technique has many web-focused implementations, including Pageflow [1]. However, none of these are tailored for a TV experience, nor can be easily built using a toolkit designed specifically for TV application creation.

To supplement the basic components with a page, multiple components can also be deployed on the same page. These may be repeated, such as multiple text boxes, or may include other more novel components. These include replacing the static background image with video, that can play automatically when a page is navigated to. In addition to this, a page may also contain a short questionnaire or quiz. In these cases, the user makes a selection from a list of options. Following this, the user is thanked for their participation, and the user can continue in the normal flow of the narrative using the up and down navigation style. Furthermore, this scenario also includes hotspots, which are locations, usually laid over an image, that indicate a point of interest. By moving between these, a user can access additional information or content, including audio tracks. Finally, the other technology presented in these wireframes is a 360-video experience. Whilst on this page, users can navigate around a 360-video related to the story itself.

This design is visualised using the wireframe designs shown in Figure 1. This includes all of the components described in the aforementioned text. In the case of these wireframes, the presentation is centred around a music contest, with content relating to various aspects of this. This includes predicting the winner using the questionnaire, providing artist's biographical information using hotspots and a play-along feature using alternative audio tracks. This design also contains a deviation on the above mentioned navigation method; in addition to up and down navigation, users can also navigate left and right, outside of the normal flow of the application. This allows for additional pages to be included in the flow without disturbing the narrative storytelling.

Page 10: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 9

Figure 1. – Example Slideflow Application

Interactive Advert – Consumer Perspective

The second set of wireframes are derived from a scenario concerning a interactive TV advertisement. This is designed to add a level of engagement to an otherwise passive commercial. In this case, a small popup is presented during the broadcast segment. This offers related additional information to the user if they chose to press the red button on their remote. Here, the application diverges down two distinct paths: if the user does not indicate interest (using the red button), then a carousel of alternative adverts is given. The user can select one of these in the same way as the original popup.

At this point, the remaining interaction is consistent in both cases. If the user presses the red button on the original popup, then a full screen page is displayed. This gives information relating to the product or service on offer. This can be done through the presentation of images or text. In addition to this, users are given the option to retrieve further information, perhaps relating to a specific aspect of the product. This information is accessible using a simple menu system, that can be used to navigate to the required option. An additional method of interaction is offered through the inclusion of a QR code displayed on the page; this allows users to load a web page to be viewed later.

Page 11: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 10

The wireframes used for the purpose of our focus groups are centred around the advertisement of a car. These are illustrated in Figure 2. The popup is displayed during an advert for the same car on broadcast television. When a user chooses to respond to the advert, then, as described before, a full screen page is loaded. In this case, this includes a secondary image of the car, as well as marketing slogans and promotional material. Each of the menu options describe a specific aspect of the automobile in question, such as additional content (videos) relating to the vehicle, additional product information and specifications, as well as the ability to book a test drive.

Figure 2. – Example Interactive Advert Application

Slideflow – Creator Perspective

To complement the wireframes outlined in the previous section, we also created a set to resemble the process of actually creating the application. That is, the user interface used to build and form the application that was described in the previous subsection. For brevity, we will not include a full description of this process, but we will nonetheless provide a brief summary of this in the following section.

Page 12: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 11

Content creators begin by choosing an application model; this is an archetype for the app that they wish to create. In this case, a Slideflow application was selected. From here, a content creator then begins to add pages to the application. The initial page layout is a simple page with a background image and some textual information. The creator proceeds to add or provide a link to the image to be used, as well as entering the required text. This page is now considered complete, and the creator moves onto the next page.

This process continues, adding any number of pages as required. This includes more complex variations, such adding hotspots to the page in specific locations, building a questionnaire, including determining the available voting options, and uploading and using a 360-video component. Each page within the app is displayed visually in a left hand pane. Creators can also create subpages; that is pages outside of the main application flow. In this case, these are used to host the questionnaire. This is visually represented in the content creator interface by indenting the page in the visual page order, as well as providing a connection between it and the parent page.

To help participants with continuity, this creation process also considers the same music competition. The same components and layouts are used between this set of wireframes and the consumer application demonstrated previously. This is evidenced in the wireframes presented in Figure 3. For brevity, only a small subset of the wireframes are presented in this document.

Page 13: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 12

Figure 3. – Example Slideflow Creation

Page 14: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 13

Interactive Advert – Creator Perspective

As with the Slideflow user interfaces, we also created a set of wireframes for the content creator in respect to the interactive advert. Similarly, these describe the workflow within the scope of MPAT. These steps are those necessary to build the final application described in the previous subsection.

To begin with, a content creator again selects a page model. In this case, 'Interactive Ad' is chosen. New pages can then be added to the application, the first of which will be the popup. This serves as a gateway to the user, and subsequently, the rest of the application. The creator will then determine the content to be used in this popup, including the textual prompt used to inform the user as to how to interact with the advert.

Once the creator is satisfied with this layout and content, a new page can be added to the application. In this case, an 'Advanced 4 Item Navigation' page is chosen. In addition to creating the initial full screen landing page, it also determines the need for 4 subpages, underneath this page. The creator can then proceed to edit these pages, adding content to each and modifying them as required.

To again aid continuity for focus group participants, the wireframes of this application use the interactive car advertisement as an example. This includes the same layout and content as illustrated in Figure 1. A subset of these specific wireframes are illustrated in Figure 4.

Page 15: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 14

Figure 4. – Example Interactive Advert Creation

Focus Group Demographics

Three distinct focus groups took place during the month of June 2016. These were conducted across Europe at institutions based in Italy, Germany and the United Kingdom. Conducted independently, each group nonetheless used the same set of questions (as described previously). This enabled a level of continuity between answers received in each case. The same procedure for conducting the focus groups was also adhered to in each case, further increasingly the comparability between groups.

Participants were from a diverse range of backgrounds. This diversity extended not only between focus groups, but also within them. Those engaged included arts organisations, content providers (both small and large) and broadcasters (both private and public). This also helps to create a generalisable result, and furthers the usefulness of our findings. It is worth noting that all participant were involved in the

Page 16: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 15

creation, production or broadcast of media in some way, albeit with very different skillsets and competencies.

3 Usability Findings

In this section, we outline a summarised list of findings according to each focus group. It is important to note that these have been summarised for brevity, and to ensure the anonymity of participants. Due to the richness of the discussion, comments are attributed only to a discussion topic, and not associated to a specific question.

ULANC (UK)

Participants: Arts organisations, small/medium content creation businesses

Introductory Questions

● Interactive TV used mainly for multi-stream sports and music events ● Consensus that broadcasters were pushing consumers towards VoD platforms

○ There appeared to be a certain consistency in interaction techniques and access patterns between platforms and providers, with some irritating and noticeable exceptions

● Converged VoD and live broadcast platforms (such as YouView and Freeview Play in the UK) becoming more popular – all participants were familiar with these technologies

● Participants often used multiple screens, apps and devices to view scores and/or social media alongside live broadcasts

● Frustration with the performance and experience of some TV-based experiences, including the restrictions imposed by interaction techniques (TV remote)

● Television evoked feelings of community; drew the family together as an occasion

Guiding Questions – Slideflow Design

● Intuitive and straightforward in design, with some clear familiarity with other similar design interfaces

● Uncertainty around the placement of components; how is this achieved? Is it possible to move them when they are in place? Can you resize them?

● The ad carousel seems to be missing between the illustrated example application and the creation interface

● Appreciate the fact that you could directly upload to the app; no need to use an external CMS ● Like the visual hierarchy/flow of the app in the left pane ● How are styles handled? Would it be possible to have application themes, and then change the

styles on a per page/per component basis? Can this also be done for an entire company (corporate branding)?

● There should be a consistent set of guidelines and rules to build applications ○ Alerts should then be triggered when rules are broken ○ However, these should not impede the users, and should not impose restrictions ○ There may be exceptions to this though, especially in the case of accessibility

Page 17: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 16

● Live and realistic preview; however, this needs to be 100% realistic, as otherwise it is more of a hinderance

● The capability to duplicate apps to make similar (but not identical) versions of existing examples ● Reorder application flows without having to recreate entire pages

Guiding Questions – Interactive Advertising Design

● Familiar design, especially when compared with the previous Slideflow design ● Downwards page navigation seems counterintuitive when compared to swipe-left/right, which is

common mobile platforms ● Again, the need to enforce accessibility requirements, particularly around text size ● The addition of an overall settings page is good; ability to change everything in one go would be

appreciated, although it is unclear specifically what should be present here ● Performance seemed key to enable the smooth transitions that are commonly found in these

type of presentations; all the participants agreed that the transitions had to be smooth or instant ● There was a need for some form of progress bar or breadcrumbs during both creation and

consumption process. This would prevent users from becoming disorientated in relatively lengthy applications.

● In regards to the hierarchical page navigation; could this be extended to include (or at least visualise) 'sideways' navigation?

○ As this would likely require lots of space, is this an item that should be displayed on the 'overall' settings page

RBB (Germany)

Participants: Editors, project managers, super users, technicians, production assistant

Introductory Questions

● Media consumption is increasing; many hours per day ● Media is consumed on a variety of devices, including smartphones, TVs, print and radio ● All participants use apps every day ● Participants are split on their usage; some using multiple devices at once, other focusing on a

single source ● Red button interaction seems familiar and intuitive ● Most participants hadn’t launched applications using the TV ● There was a feeling that merging web and TV in a single device was a natural progression, but

others preferred the separation offered by the different platforms

Guiding Questions – Slideflow Design

● Font sizes too small ● Unintuitive playback designs ● Navigational model was not clear in some cases ● Don’t override the red button; it has set safe functionality already ● Icons do not contrast well against background ● Hints missing to give context to pages ● Screen reading functionality

Page 18: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 17

● Option to add pages for left/right navigation ● Liked:

○ Semi-transparent text box ○ 360° video feature ○ Simple and intuitive navigation, yes

● Familiarity: ○ Probably navigation could be much more complex and would still be okay ○ In general, yes, very much; style and perception may depend a lot on good editorial

choice e.g. of images and texts ● Changes:

○ Hotspots should link to extra pages; the functionality shown above is also very attractive!

○ Would a sitemap make sense? I like taking a look at them to see what an app or website has to offer

○ Fonts must be adaptable to CI of the programme ● Workflow:

○ Preview should be shown earlier ○ Publish button displayed too early ○ ‘Create new page’ should not be shown early on ○ ‘Settings’ seems ambiguous; what can be set from here? ○ Button design not consistent ○ It was unclear how the text boxes could be adapted (in any way) ○ Hints as to optimal image size and resolution would be helpful ○ Drag & drop functionality desired ○ Changing and manipulating images and text are missing, as well as editorial features

such as exposure and transparency. ○ Liked the view of the pages, but felt that these should be previews rather than textual

depictions ○ When audio plays it should be automatically muted; only turned on by user ○ If no other buttons are clicked, button controls must be shown for the video player ○ If more than one page, then previews must be enabled ○ Felt restricted by the page models; it should be easy to change these on the fly and

without restriction ○ Can components be moved and edited? ○ Can fonts be changed freely? ○ Unsure about the page navigation model when components are added; particularly the

voting component ○ Preview of the whole application! ○ Hotspot editing, including setting titles and more configuration options ○ Flexibility in settings parameters and style ○ How to delete and edit a hotspot? ○ Consideration for existing broadcaster guidelines

Mediaset (Italy)

Participants: Project managers, editors, web designer, developers and user experience expert

Page 19: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 18

Introductory Questions

● Limited experience, apart from one participant who works actively in this area ● It was felt that second screen experience is generally agreed to be fundamental for content

enrichment of most TV programs and for making content more “appealing” to the viewer

Guiding Questions – Interactive Advertising & Slideflow Design (Combined)

● Preview feature: As similar CMS are being launched on the market, it could be wise to focus on some innovative features like second screen interaction or “preview mode” at any step of app creation ( like “what you see is what you get before publishing”)

● Settings buttons: Possibility of clicking on any component of the page to accede the setting change mode. Add possibility to change colour/font of all components that are not images (titles, buttons, arrows…)

● Image Editing: ○ For image (and video) uploading it would be necessary to accede not only the MPAT

gallery but also external repositories, ○ Returning feedback messages if the format is not appropriate or, better, ○ The acquisition of the image should be done once at the maximum possible resolution ○ The tool is then able to automatically resize or reformat the content and adjust it

according to the component requirement ○ Add automatic centering and cropping of any image within the tool.

o Add automatic contrasting or on the contrary force contrast option if background image

is in conflict

● Carousel: Add possibility to carousel images within a box in a page ● Video uploading: All videos might be stored on a MAM. A conversion tool might enable

automatic format and resolution adjustment, possibly the video file is then linked to the app with no direct upload on the CMS

● Permissions and Role management:

○ It is confirmed the need of having flexible but “lockable” editing options according to

specific roles (eg. defining a specific number of pages already at the app creator level

or not, can vary according to the scenario).

○ The roles and permission perimeter should be re-thought in case of massive or

frequently reiterated app production: the role of the “uploader” (besides the content and

app creator) should be introduced having strong restrictions (maybe only content

uploading and text writing). The “content creator” (or editor) could be on the contrary

the real app “shaper and styler” with a considerable degree of freedom in

font/logo/image editing, adding extra pages/extra components. The “app creator” should

be able to define the degree of freedom for the uploader and content creator, and would

only have the role of developing new page macro layout, new modules/components,

defining the number of pages and the page model of each page

● Style and Font editing give the possibility to select different fonts and font sizes but restricting to all those fonts that are really adapt to be viewed on TV screen (about 10)

● Voting module: might need to be described not only by text but maybe also by a combination of text & image

Page 20: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 19

● Second screen interaction: The tool needs to consider some innovative aspects in workflow creation like easy parallel app publication on second screens

● Tutorial: Consider the idea of producing some guide tutorial and/or info bullet besides each

component

● Buttons:

○ The choice on which action buttons should produce which action, needs to be carefully

considered; eg. What is the proper use of button “exit” versus “back”?, do we need to

define some HbbTV standards or best practice about the action that is linked to certain

buttons and should this remain the same for any app in order to avoid confusion?)

○ Use of colored buttons on remote control at least in MHP experience did not prove to be

terribly successful because TV is normally watched in scarce light conditions and colors

are not terribly distinguishable, arrows are more “mnemonic”, also in consideration of

the fact that new generation controls are increasingly “touchless”.

● Placeholders: add placeholders in editing mode in order to be able to recognize fields when

they are empty and possibly placeholders also in published mode when required (on hotspots

for example)

● Navigation: Cross navigation (horizontal and vertical) is OK only if the viewer is guided through

the navigation (bar?) knowing where he is at any moment.

Prioritised Findings

There was a clear consensus amongst all of the focus groups that the design was both appropriate and intuitive. The designs were familiar to users, with a number of features clearly appreciated. This includes the visual overview of the application in creation, as well as the simple WYSIWYG interaction.

In addition to these positive remarks, the focus group participants also noted a number of changes and recommendations to improve the interface design. These are collected in this section. Many of the comments raised were common across the focus groups, despite the diversity of participants.

This feedback has then been prioritised given the severity and commonality. The values associated with each comment have been agreed amongst all participating partners. This prioritised list will be used to inform and influence changes made to the initial set of user interface designs, to be delivered in D3.3. Moving forward, these interfaces will be implemented within MPAT. As MPAT follows an iterative design process, these will then be further tested in subsequent usability testing and also during the piloting phase of the MPAT project.

These findings are broken into two distinct categories: creator-focused and consumer-focused. These are mainly driven by the feedback received during the different phases of the focus groups. For

Page 21: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 20

example, creator-focused findings relate to the workflow and creation of the application, whereas the consumer-focused findings relate to the example application shown to participants.

Creator-focused Findings

High Priority (Priority 1)

● Application Styles: Handling of overall, application-wide, styles for an application, including fonts, images such as logos and colour palettes should be included. These can be used both to ensure consistent branding across multiple applications, but also to comply with corporate branding guidelines.

● Component Styles: To complement the overall styles outlined in Application Styles, it is important to override these settings of a per-component basis to allow for customisation.

● Warnings and Alerts: The user should be alerted when specific rules are violated. These rules are formed based upon style and accessibility guidelines, as well golden rules for creating applications for TVs. However, there should be no restrictions on creators if they want to ignore these warnings.

● Previews: Accurate and live previews of the current state of the page that is being edited should be included. This encompasses a WYSIWYG interface in which elements can be placed and manipulated freely.

● Page Management: The ability to create new pages, particularly in different places within the existing application structure, would be welcomed. This also includes the ability to delete and reorder pages at will.

● Application Settings: An overall settings page to be able to change settings application-wide is desired. It is unclear however what settings should be here. One example would be control over Application Styles.

● Content Upload: Direct upload of media through the creator interface was requested. This may include integration with existing hosted services on either internal or external platforms. It may also include provision for existing CMSs that handle asset conversion.

Medium Priority (Priority 2)

● Image Editing: Simple functionality should be included to manipulate images within the interface. This includes cropping, exposure, and transparency.

● Tutorials and Hints: Information should be presented to the user to aid them in developing the application. This may include unobtrusive informational prompts to alert users as to the purpose of certain buttons or tools within the interface.

● User and Role Management: It should be possible to determine the permissions given to a specific role within MPAT. This includes administering these roles, and allocating them to specific users. These permissions impose restrictions on the user in such a way that only certain actions or modifications can be made, in accordance with their predefined role.

● Application Management: The ability to manage entire applications is desired. Much like Page Management, this includes the ability to create, delete and clone applications

● Second Screen: The creation and configuration of companion screen applications within the same interface is requested. Particularly, offering a combined experience whereby both interactions can be designed together.

Low Priority (Priority 3)

Page 22: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 21

● Screen Reading Functionality: To increase accessibility, textual information on a page can be represented using an audio alternative for those unable to read the text.

● Placeholders for Empty Components: When new components are added to a page, it must be visually clear to see where their boundaries are, particularly when they are transparent.

Consumer-focused Findings

High Priority (Priority 1)

● Font Sizing: Font sizes used in the example are unreadable at a distance. This should be changed to a useable minimum size.

● Visible Progress: A visual indication as to how far a user has progressed through an application should be included. This may include the use of breadcrumbs or progress bars.

● Navigational Hints: Provide the user with textual or visual indications as to how to navigate between pages. This includes representing the current selection when there are multiple choices available on a single page.

Medium Priority (Priority 2)

● Intuitive and Clear Iconography: Icons could be improved to better illustrate their functionality. This includes both as a navigational aid (as described in Navigational Hints) and when there is underlying functionality thats presence should be indicated to the user.

● Media Playback Controls: When audio or visual content is included within a page, control should be given to the user to play, stop and rewind this content.

Low Priority (Priority 3)

● None

Conclusion

This deliverable has outlined the implementation and findings from a number of focus groups that were designed to solicit feedback on a series of wireframe designs. Using a common set of questions and designs, feedback on a wide range of aspects and topics has been obtained. By combining this feedback, it is clear that there is a level of consistency between the comments made by focus group participants. Using this process as a basis, the findings have been prioritised. These ordered findings will be used to ensure that those deemed important will be addressed in future iterations of the user interface designs. These will be included in the next iteration of this process, to be delivered in D3.3.

Page 23: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 22

Glossary

CA Consortium Agreement

CoA Coordination Agreement

DoW Description of Work

EC European Commission

IPR Intellectual Property Rights

NDA Non-disclosure agreement

PO Project Officer

QA Quality Assurance

R&D Research and Development

WP Work Package

UI User Interface

VoD Video-on-Demand

WYSIWYG What You See Is What You Get

CMS Content Management System

MHP Multimedia Home Platform

Page 24: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 23

Partner Short Names

Short Name Name

FRAUNHOFER Fraunhofer-Gesellschaft zur Förderung der angewandten Forschung e.V. (DE)

IRT Institut für Rundfunktechnik GmbH (DE)

RBB Rundfunk Berlin-Brandenburg (DE)

ULANC Lancaster University (UK)

MEDIASET Reti Televisive Italiane S.p.A. (IT)

LEADIN Leadin Oy (FI)

FINCONS Fincons SpA (IT)

IMT Institut Mines-Telecom (FR)

Page 25: Usability Findings - MPAT websitempat.eu/wp-content/uploads/2016/07/d3.2_v1.0.pdf · 30.06.2016 D3.2 Usability Findings page 4 Executive Summary In previous work, we outlined a plan

Version of 30.06.2016 D3.2 Usability Findings

page 24

References

[1] Pageflow – http://pageflow.io