Interactive Design — Research Report

Objectives

· Conduct on audit on the existing design of the Moving Image archive, getting feedback from users.

· Research designing applications movie player applications for TV and other devices as well as the best approaches to creating clickable prototypes.

· Create a specification outlining the needs of the project, the functions, features and creating a notional client invoice.

· Create low-fi mock-up designs of the movie player app for mobile and TV devices and create a user interface style guide.

· Produce a medium fidelity wire-frame and storyboards for the clickable prototype.

· Complete final high fidelity designs of the produced concepts.

· Write a report including the research completed, and the documentation of the design process in creating the design for the movie application.

Methodology

The methodology that is to be used is the waterfall method, show in Appendix A. Telegraph (2016) states that the waterfall method is best used for smaller projects with well-defined requirements, as each stage within the waterfall must be completed before the next. Rouse (2007) adds that each stage of the development can have a schedule with a set deadline, allowing the project to be delivered in the time needed. Given that the requirements of the project are pre-defined with a set deadline, the waterfall methodology is an appropriate choice.

In total, 148 hours is to be spent on the project, with a final deadline of 12th May. For it to be completed by the required date, clear set objectives with deadlines are in place. Appendix B shows a Gantt chart outlining these objectives and the timeline in which they are to be completed by.

Research

Designing a Smart TV Application

10ft UI

(Potvin 2016) Most users when using a television will sit 10 feet away from their device, therefore a UI is needed that reflects this and fixes the challenges faced by designing an application for users who view it at a distance.

Navigation

The way in which the user navigates a smart TV application can be very restricted, with most TV’s the most basic control being the four-directional control using a D-pad on the remote, limiting movement to only four directions: up, right, down and left (Lafferty 2016). Therefore, navigational movements must be able to be predictable by the user, with a simple grid being one of the best ways to minimise any confusion in navigation movements, states Samsung (n.d.).

Grid Navigation (Samsung n.d.)

Overscan

Amazon (n.d.) explains that manufactures of TV hardware reserves space around the displayable area of the screen, which can vary between different TV devices. Android Developers (n.d.) recommends that a margin of 5% is built into designs to account for the overscan on screens, so that content is displayed correctly.

Overscan spacing (Android Developers n.d.)

Typography

Amazon (n.d.) suggests text on Smart TV apps should be kept to a minimum, the reason being that reading a lot of text across the room can strain the user’s eyes. Instead of text, use images or animations to communicate instead.

When it comes to fonts, most TV’s, such as the Google Android TV, have a built-in system font which can be used Pacheco (2017). However, if wanting to use a custom font, it needs be view-able at a distance. Android Developers (n.d.) adds that due to the contrast and sharpness settings on some TV’s, thin and light typefaces should be avoided, otherwise they can end up looking jagged and difficult to read.

Colour

Potvin (2016) says that saturated colours, such as red, as well as the use of white in backgrounds or large elements should be avoided due to televisions using a much higher gamma value than other devices which can cause them to be too bright in a dark room. Amazon (n.d.) adds to this, stating that cool colours, such as blue, grey and purple, work better for TV apps over warmer colours due to high contrasts.

Recommended Colours for TV apps (Amazon n.d.)

Mobile Video Applications

According to the BBC iPlayer performance report from April 2017 (BBC 2017), tablets were used to request 26% of TV programs in the month of April, compared to smart phones which were used to request 12%, showing tables to be more commonly used to watch video. Data ‘N Charts (2015) shows smartphones being used by more people to access video content. However, an average of 5 minutes was spent more watching video on tablets than mobile devices, which indicates that tablets are used more longer content such as TV shows. Therefore, the mobile device the video application is to be designed for is the tablet.

Specification

The specification of the project is to re-design the Moving Image Archive into a Smart TV and mobile applications. The final designs must be clickable prototypes, which will be made using the Invision App.

The design for Smart TV devices must have a 5% margin spacing between the edge of the screen and the content due to overscan. Cool colours, likely blue and grey, will be used in the colour scheme of the app with primarily white text to stand out from the background. The default system fonts, with the recommended text sizes shall be used, designing the application to the Google Android TV guidelines (Android Developers n.d.) The app should be easy to navigate, designing around a grid system making it simple for the user to use the app with a D-pad control.

The tablet application is to be designed to be used vertically and must have a consistent design with the TV app. Given that android has the largest market share in the tablet market and the TV application is to be designed to Google Android TV’s guidelines, the app is to be designed for an android tablet, the Nexus 10, which has a 2560px x 1600px resolution at 2.0 xhdpi (Material.io n.d.).

Design

Low fidelity Mock up

Smart TV App Home Page
Smart TV App Video Page
Smart TV App Search Page
Smart TV App Categories Page

UI Style Guide

Wire-frames

Smart TV App Home Page
Smart TV App Categories Page
Smart TV App Search Page
Smart TV App Video Page

Final Designs

Smart TV App Home Page
Smart TV App Categories Page
Smart TV App Search Page
Smart TV App Video Page

References

Amazon. n.d. Design and User Experience Guidelines for Fire TV [viewed 6 May 2017]. Available from: https://developer.amazon.com/public/solutions/devices/fire-tv/docs/design-and-user-experience-guidelines#10-foot-ui

Android Developers. n.d.Style for TV | Android Developers [viewed 6 May 2017]. Available from: https://developer.android.com/design/tv/style.html

BBC, 2017. BBC iPlayer Performance Report — April 2017. 1st ed. BBC

Data ‘N Charts, 2015. Mobile vs Desktop Video: How does mobile compare against desktop in video usage? [viewed 6 May 2017]. Available from: http://www.data-charts.com/mobile-vs-desktop-video-how-does-mobile-compare-against-desktop-in-video-usage/

Lafferty, M., 2016. Designing for Television, Part 1 — Medium [viewed 6 May 2017]. Available from: https://medium.com/this-also/designing-for-television-part-1-54508432830f

Material.io. n.d. Device metrics — Material Design [viewed 6 May 2017]. Available from: https://material.io/devices/

Pacheco, A., 2017. TV Guidelines: A quick kick-off on designing for Television Experiences [viewed 6 May 2017]. Available from: https://uxdesign.cc/guidelines-designing-for-television-experience-524f19ab6357

Potvin, P., 2016. Designing a 10ft UI — Medium [viewed 6 May 2017]. Available from: https://medium.com/you-i-tv/designing-for-10ft-ceeb202c1315

Rouse, M., 2007. What is waterfall model? [viewed 6 May 2017]. Available from: http://searchsoftwarequality.techtarget.com/definition/waterfall-model

Samsung. n.d. Principles for Designing Applications for Samsung Smart TV [viewed 6 May 2017]. Available from: http://developer.samsung.com/tv/develop/legacy-platform-library/2014/01_principles_for_designing_applications_for_samsung_smart_tv

Telegraph, 2016. Waterfall Project Management Explained [viewed 6 May 2017]. Available from: https://courses.telegraph.co.uk/article-details/86/waterfall-project-management-explained/

Biblography

Apple. Visual Design — tvOS Human Interface Guidelines [viewed 6 May 2017]. Available from: https://developer.apple.com/tvos/human-interface-guidelines/visual-design/typography

base36. Agile & Waterfall Methodologies — A Side-By-Side Comparison [viewed 6 May 2017]. Available from: http://www.base36.com/2012/12/agile-waterfall-methodologies-a-side-by-side-comparison/

Bowes, J., 2014. Agile vs Waterfall — Comparing project management methods [viewed 6 May 2017]. Available from: https://manifesto.co.uk/agile-vs-waterfall-comparing-project-management-methodologies/

Hajdarbegovic, N. Android TV Development — Big Screens Are Coming, Get Ready! [viewed 6 May 2017]. Available from: https://www.toptal.com/android/developing-for-android-tv-big-screens-are-coming-get-ready

Hines, S. et al. Designing the 10-Foot User Interface [Book] [viewed 6 May 2017]. Available from: https://www.safaribooksonline.com/library/view/building-web-apps/9781449307998/ch03.html

Hoober, S., 2014. Insights on Switching, Centering, and Gestures for Touchscreens [viewed 6 May 2017]. Available from: http://www.uxmatters.com/mt/archives/2014/09/insights-on-switching-centering-and-gestures-for-touchscreens.php

Itzkovitch, A., 2012. Designing For Device Orientation: From Portrait To Landscape [viewed 6 May 2017]. Available from: https://www.smashingmagazine.com/2012/08/designing-device-orientation-portrait-landscape/

Lafferty, M., 2016. Designing for Television, Part 2 — Medium [viewed 6 May 2017]. Available from: https://medium.com/this-also/designing-for-television-part-2-f31793e7d2e9

Material Design. n.d. Metrics & keylines — Layout [viewed 19 May 2017]. Available from: https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing

Microsoft, 2017. Designing for TV [viewed 19 May 2017]. Available from: https://github.com/Microsoft/TVHelpers/wiki/Designing-for-TV

Rowinski, D., 2014. Expert Design Tips To Build The Perfect Smart TV Apps — ARC [viewed 6 May 2017]. Available from: https://arc.applause.com/2014/11/13/tips-to-develop-smart-tv-apps/

Smyk, A., 2015. Designing User Experiences for the 10-Foot UI | Creative Cloud blog by Adobe [viewed 6 May 2017]. Available from: https://blogs.adobe.com/creativecloud/designing-user-experiences-for-the-10-foot-ui/

Turnbull, C., 2011. Designing With Tablets in Mind: Six Tips to Remember [viewed 6 May 2017]. Available from: https://webdesign.tutsplus.com/articles/designing-with-tablets-in-mind-six-tips-to-remember--webdesign-4362

Wesolko, D., 2016. Keeping It Simple — A Better Way To Navigate Smart TV Apps [viewed 6 May 2017]. Available from: https://medium.com/@danewesolko/keeping-it-simple-a-better-way-to-navigate-smart-tv-apps-801015a3041f

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.