TV & Mobile streaming prototypes.
Hello! My name is James Fuller, I am a Web design and development student at Solent university.
This blog article is my current design assignment. It looks at designing for TV interfaces for video streaming services. The following provides an analysis of the design effectiveness of an existing site — Public Domain Movies — and creates example screens for both Television (TV) and mobile video screening applications. The work is set against standard design principles to increase effectiveness, especially in terms of the User Interface/Experience (UI/UX).
So, what is video streaming and why is it an important development area at the present time. Basically, video streaming delivers media based content through the internet to a variety of different platforms. This technology has been made possible by the improved broadband systems with high internet speeds across the globe and advances in audio and visual compression processes. As a result the video streaming industry is rapidly expanding. Revenue from these services amounts to £10.5Bn worldwide and is forecast to increase to nearly £14Bn by 2022. I am basing this on an analysis by Statistica of video streaming. In the UK their figures show that in 2018 revenue from this source amounted to £805M and is projected to grow to over £1Bn by 2022.
User numbers in the UK are set to rise from just over 12M today to some 14.5M by 2022
Users tend to be more prominent in the younger age range, but there is a noticeable willingness in older users to experiment with new platforms too.
The range of compatible platforms has also increased over recent years — for example the rise in Smart TVs — as has performance (with ultra High Definition content). The growth in this market has generated a range of content suppliers, such as Play/Apple, Netflix and Amazon with new applications arriving every day. This therefore gives me plenty of content to examine, showing what trends are typical and identifying the standard User Interface (UI) requirements.
OK. That has helped to set the scene for this work. Now I’m going to have a look at the User Experience of one existing video streaming service: Public Domain Movies
I’ve set out my analysis under a series of headings to clearly identify the different aspects that I think are important in creating a good user experience, as follows:
Clear communication — Apart from the name, it is not immediately clear that the site provides access to old movies. It could simply be showing you old movie posters. It really needs a statement of intent to clearly set out what it is offering and who it is aimed at — presumably its target audience are old style film enthusiasts in the main given the age of the offerings.
The supporting information for each film is about the right amount, but can sometimes be misleading — for example one on Africa says that the Serengeti is in Uganda, when it is in Tanzania/Kenya. From what I have seen it is clear and well written in the main.
There is no notification of new content to get the interest of new or even frequent website users.
Brand Consistency & Aesthetic Appeal — The logo is quite clever, given that it demonstrates the ‘no copyright’ free access to content. Its black on white style reflects a retro film that suits much of its vintage content. It’s used consistently across the site pages to reinforce presence. However, stylistically it is very flat, uncreative and uninviting. The site relies on its film poster links to provide excitement and interest.
User Friendliness and Ease of Navigation — There is a simple and clear navigation top bar based on a limited range of genres. However, given the large amount of content on the site, there is no ability to search by film title, actor or date. Trying to access a specific title therefore requires you to search page by page or to undertake an independent Google search in the hope that this throws up the link to Public Movies Domain content.
After accessing a number of the pages available, most work effectively but some are slow to load or lag significantly — on occasion simply buffering without ever downloading content. This is most likely due to the site not hosting the copyright free content itself, but instead linking to external sources.
Content & Contact — There is no ‘Additional value’ content available and produced by the site itself eg. articles reviewing films when first released, genre overviews by year; actor biographies etc. It relies on links to second hand content on other sites.
Generated viewing suggestions which appear at the foot of the page, after the one to be viewed, do not seem to be related by genre eg. African documentary additional viewing suggestions included drama, romance, science fiction and comedy films not other factual content.
There is a simple contact e-mail form but the general disclaimer on accuracy, compliance, copyright, legality, decency, or any other aspect of the content leaves me to question what else remains to enquire about?
That analysis done, I’m now going to look at current TV trends and the design aspects that I need to consider for my application.
Streaming may have initially started on one of your mobile devices, but has probably now migrated to your TV screen. I myself have subscriptions to multiple streaming services, all of which I signed up to using a laptop. It was therefore with a mild jolt of surprise that I discovered during my research that the majority of streaming now takes place on TV/Smart Televisions. A 2016 Business Insider report showed how the way in which consumers watch streaming media has changed in the US in recent years — see the graph below:
This finding is supported by Netflix’s own statistics release visualised by Recodes graphic (see below), and Nielsen’s comparable metrics report. Netflix statistics revealed that viewing in the first months is dominated by laptops/desktops at around 45%, but by month 6, Smart TVs take the lead with 70% of all viewers using the device as their preferred platform. The last 30% is shared between laptops and portable devices.
Hardware
I was born in 1988 and my first tv was passed down to me at the age of 12/13. I tried to find the exact model through google image search to no avail but it was very similar in design to the Hitachi below(left), most likely an imitation.
Although you might still see these in relatives’ houses, televisions today tend to look more like the above right.
These images show how televisions have changed in recent years, moving from the cumbersome chunky dimensions of the Cathode Ray Tube (CRT) to the sleek, slight, ultra/high definition displays of today.
So, what aspects should I take into account in designing for this medium? I’ve set these out under different headings below.
Layout
According to Apple developer guidelines, televisions vary in size hugely but applications will show the exact same interface on each display. Accordingly they must be designed carefully. Content must be kept away from the edges of the screen due to a variety of bezels used by manufacturers and cropping that occurs due to ‘over scanning’. Overscan is a term used to describe the cropping of an image and then stretching what is left in order to fit the dimensions of a TV screen (so you’re usually not viewing all the pixels you paid for). This exists due to old CRTs not being able to reproduce images at the edges of tubes and still exists due to broadcasters assuming that the TV will crop the image automatically. They therefore do not worry so much about edge finish when editing/broadcasting.
Bearing this in mind I have decided upon a recommended margin, following the specification pixels above, which will be used to avoid any chance of the UI designed being obscured.
Typography
Research has shown that the main user interfaces we interact with everyday are smartphones. These are followed closely by desktop and laptop computers. A key difference between UIs used with these devices, and those of smart TV’s, is the distance at which they are viewed. Smartphones and desktops are typically viewed no more than two feet from the user’s vision. A TV, by comparison, is usually viewed from a much further distance.
Enter the ‘Ten-foot user interface’, a term used to differentiate this particular style of UI from others. Youtube’s Lean back and Vimeo’s couch mode are both examples of popular streaming websites adapted for Ten foot UIs. These are more suited to this kind of more distant viewing experience.
As a result of to these increased distances legibility becomes. This issue requires the font size to be much larger and the typography used to be more clear. This is because reading swathes of text from across the room can be an overwhelming strain on the eyes. Appletv’s size guide (see below ) will be utilised in my design to ensure legibility of all typography within the prototype produced. Font sizes will be no smaller than 23px the largest size may vary depending on the font chosen.
Simplicity
Despite being called ‘Smart’ TV’s, the user input is still extremely basic and is operated via your standard remote control. This utilises a standard ‘up, down, left, right, select’ system, an interface that most gamepads adopted previously, known as the Directional pad (D-pad — see below).
This creates a user environment that steers our design method away from more complicated interactions that we might otherwise rely on in applications designed for other platforms, e.g. smart phone user interfaces.
Highlighting (similar to an on-hover effect in web design) is an extremely important consideration due to this interface convention, providing feedback to the user of their location within the pages interactable objects.
Colour
Colour is a useful tool alongside typography to make sure that fonts are legible and that graphics and messages stand out from the pack. Pure white and high contrast colours are known to create ‘halos’ (an issue where the colour will bleach its surrounding colours) in some TVs against a darker background. In order to avoid this potential disadvantage, I will instead use slightly off white colours tones (#F1F1F1 instead of #FFFFF).
Colour bleaching can be also be an issue in higher contrast colours, notice how some colours bleed more signicantly than others when blurred. Care should be taken when combining these high contrast blurred. Care should be taken when combining these high contrast spectrums (see below)
Dark or bright UI
An important choice when considering the design of an application, is the environment, or range of environments it will be used in. For example, will the app be used during the day or mostly at night? Do you want the content to draw the most attention or the UI?
I think in this situation personally, I am biased. I tend to lean more toward the dark UI as I consistently use computer and mobile screens late at night. This preference started at a program called flux (abandoned since Windows 10 added light temperature changes) but has since developed to extremes. I now seek out a dark UI option for almost every program I use e.g. Chrome themes to adapt the window it uses; Dark reader chrome extension (now even better since their ‘dynamic’ update) for website css (cascading style sheets) adaptation; Stylish extension for the popular sites that dark reader struggles to convert; YouTube’s dark theme; Dracula theme for Microsoft visual studio; Windows registry edits to stop flashes of light in-between web page loads and also to dim the address bar. Even as I write this first draft for medium blog in Microsoft Word I am using the dark theme provided by Windows.
An excellent 6 minute read (on Medium) by Constantina Maltezou iterates the main points to consider when deciding on a dark or light UI: readability; accessibility and age factor; more energy efficient (in the case of AMOLED & OLED); and also matching the user’s environment.
Matching the user’s environment is the point that I think should have most focus here. According to Nielsen’s, prime time for entertainment in western cultures is in-between the hours of 9:15 and 11 o’clock. This means that a user’s surroundings will most likely be dim during that entertainment and that UI’s used at these times should mirror that light.
Michelle Kadir on Spotify’s dark UI update.
“When the lights dim, the movie, not the theatre, becomes the experience”
I have therefore concluded that, even recognising my pre-existing preference for a dark UI, this ‘dark’ environment is best suited to the task I require it to perform.
Scan lines
Images on some tv screens are made up of odd and even scan lines at a pixels width. These are alternated at speed between the odd and even. This means that any single pixel or line of pixels that fall on a single scan line will flicker (see gif below) causing a very destracting effect. To avoid this all lines used within the design should be kept to even numbers. As more and more people upgrade their television this will eventually become a design consideration of the past, but seeing as I myself still own the tv I bought in 2009, it may still be a while yet. Below is an example of what you might experience should the design have been made using odd width lines on certain TV screens. Quite distracting huh?
Implementation
Design sprinting is a method for going through all collaborative ideas for design, prototyping and user testing in only five days. This is an extremely fast, modern process (compared to an unstructured traditional group discussion or brainstoring session) that involves little risk and a offers the potential for a great deal of insight.
These five days cover five activities:
· Mapping — A process that involves addressing all the problems you might face and thinking what solutions might address those problems. These problems and solutions are then ranked in order of the amount of effort vs the impact they would have and this then provides a priority structure to address issues. User journeys are also a key activity in this stage.
· Wireframing — A rough outline sketch to decide layout form options.
· Decision making — Selecting the best solution and using this to revise the wireframe and user journeys.
· Prototyping –Using a design software to link high fidelity screens to provide insight to a client and/or audience as to how a digital product would function or interact with its user. This is what this assignment is all about.
· Testing and Feedback — Ensuring that the prototype is functional and obtaining views on the effectiveness of its operation. Basically does it do what it says on the tin.
Mapping
Although all research has identified the potential issues I might face so far, making this process a little redundant, I thought I’d familiarise myself with the process for future awareness and ensure logical approach.
First stage — problems
Here we identify the main problem we face when designing for each platform
Second stage — ‘How might we’ solutions
Final mapping stage — Impact vs effort chart
User journey
This is a simple customer journey to show how each user would travel through the site to achieve their target; in this case their search for a particular form of entertainment. A user loops from a browse screen to a content screen using a very simple application navigation system, limiting the chance for a customer to get lost. This also mirrors the solutions set out in the mapping
Design process documentation
Design and Prototyping Solution
Currently designers are spoilt for choice when it comes to design and prototyping options, Adobes new XD (Experience design, made with prototyping in mind), Sketch with all it’s plugins, Invision App and Figma.
A key difference between these softwares is price, and Figma is free. Being I student, I found this very appealing and after a short trial, selected it as my option. Figma is a specific design and prototyping software much like XD but with an intuitive interface perhaps inspired by Sketch’s application. It’s only downside is that it’s web based causing some slight lag issues and longer load times.
Logo
Below are some of the initial logo sketches / brand name ideas I conducted during lectures. There were others but I’ll spare you the pictures as I’ve never been a particularly good sketcher. My most popular ideas from peer feedback were Reel tv, Vox set, Fix & Viddiction / Viddict. I settled on Viddict due to the binge watching culture of today’s streaming services (Netflix even pay people to do it).
My first instinct was to use some drug related paraphernalia image inside the CRT (cathode ray tube outline) as I thought this would be easy to keep flat, but scrapped this due to it feeling a little too dark and depressing.
Below are my final high fidelity logo options created using Figma. Here I play with the old cathode ray tube colours to provide a retro feel, but in the end found it too busy and hard to pick out brand characters against certain background colours. I also liked the idea of using white noise static in the background but found the logo lacked warmth and didn’t stand out against dark backgrounds.
I used HelvLight for the font, a similar style to Helvetica which is consistently chosen for logos throughout time due to its professional simple and timeless design. The CRT style shape backing the logo was a vector rectangle with its corner radius adjusted to round the shape and then object edit to mimic the bulbous shape screens used to have (see below). Small and simple Inner shadow and drop shadows were added to provide some depth and to mimic the shadows cast by a bezel around a screen. The V consisting of two triangles resembles the play button icon used on most remote controls. I settled on yellow/gold as my logo colour choice to promote a warm and optimistic feeling so the target audience can settle into their safe cotton box film binge environment.
TV UI Wireframe
Below is the simple wireframe I settled on for the general TV UI layout.
TV UI Screens
Below are the screens that were created for the simple TV UI prototype concept.
Above is the landing page. Here I used royalty free high definition images for the background, a theatre to set the scene for what's to come. The logo and statement of intent (SOI) provide balance for one another and brand identity. I used the google font ‘Six caps’ for the SOI and other titles throughout the prototype to further enforce a film and theatre feel (a similar font to that used at the bottom of film posters to credit actors / directors due to its slim kernels which I widened by five percent). A transparent gradient was used to provide a darker background than the image offered so the off white font could stand out. Guidelines were used to align page features and so that content was kept within potential overscan areas of the television set.
The browse page. Here the user can scroll through carousels of categorised media. On load the main background space is intended for any content the company wants to push i.e. fresh releases, exclusive content etc. When users scroll through films each will be highlighted and their size increased demonstrated by the Superman option center field. I created components (An extremely useful tool within figma) out of the elements that would be re-used and re-styled if needed just by adjusting the master component. In this case buttons on the page and the image carousel. Transparency was increased for content off the screen affording that films were available upon cycling through the menu. The search icon was created from a combination of simple vector shapes.
Content pages. Very Similar in design to the browse but providing more information about the media they have selected. Linear gradients were again used to highlight text content on the page. Carousels were positioned slightly off screen to afford more content available.
The search page. Here I use to two off the same page to show interaction with the search field.
Mobile companion application
A landing screen created using the artwork from film posters / DVD covers. Here I use browse carousel component detaching its instance so that I can alter it independently of the rest of the components. The logo and statement of intent are centred to provide symmetry. The enter button follows pattern affordance set by convention (familiar)
The browse contains less information than the smart tv keeping it’s interface less cluttered. The carousel size has been reduced but still includes content spanning into the offscreen affording further media availability.
The Media content screen is the biggest layout change with the inclusion of a new play icon made with simple vector shapes. The layout is spaced to maximise the use of vertical space.
Style Guides
Style guides of figma components are displayed below. Created so that other designers can easily create more screens for the application.
Prototypes
To create the feel of a modern application and see how simple interactions might work the prototype phase must be carried out. Figma has the option to prototype natively within the design software (now with transitions) below are the maps created for both TV and mobile.
Links
SMART TV PROTOTYPE
MOBILE PROTOTYPE
Feedback
Usability testing is a key part of assessing a users experience with the functionality of the prototype / website / product. Goals are set and measured to assess how easily those goals were met.
In the case of these prototypes each user was asked to find both the Superman and Sintel media page and to use the search function. Results are located here
Feedback from each of the users conclusively suggested that the back button vector graphic was not clear enough and might need revising. This advice was taken onboard and the designs rectified. Revision below.
Conclusion
When i was rst given this assignment I had hoped to use the Sketch design platform to complete design aspects. Unfortunately this software is currently only available to MAC operating systems which I didn't have the ability to access. I therefore had to look for an alternative. I selected Figma but with expectations that, as a free alternative. I selected Figma but with expectations that, as a free product, was likely to lack functionality. However, I was proved wrong and it more than met requirements, even improving as I used
it with recent updates. I found the task stimulating and enjoyed experimenting with figma to find solutions that worked for me. This made me apply various techniques to analyse requirements in detail and transfer them into the prototypes that i could then fine tune. Whilst time consuming and occasionally frustrating. This methodical approach to issues ensured that I could assess things logically— against the background of my existing design knowledge — and achieve a satisfactory outcome. The result, I hope is both a functional and aesthetically pleasing product.
