D/Films: Creating a Smart TV and Mobile Interface
This report requires me to adopt the role of a user interface and user experience designer, producing an interactive Smart TV player interface alongside a corresponding Mobile/Table clickable concept app. According to Ofcom paid TV subscriptions fell 2.7% in 2017 with more paid subscriptions in the UK to leading online streaming services than there are traditional paid TV services. The report will look into the process taken in creating a movie player app which includes the research & analysis, design process (planning & implementation) and the methods & specification. I will be looking improve the user experience for publicdomainmovies.net, creating two high fidelity prototypes one for Smart TV that can be controlled via remote control and another for a mobile phone.
Public Domain Movies
The publicdomainmovies.net website homepage has an awful design that can be improved heavily. The colour scheme that the site uses, has little to no colour and can be considered extremely dull. The layout of the website is okay although there is minimal information, the main header on the home page is unnecessary and can be shortened. The site has poor functionality with the only way for users to search for films is to click through pages of movies until they find the movie they want which can a tedious task as there are 60 pages. Navigation on the site is terrible due to the home navigation bar having limited category links and some links which can only be found on specific pages. Overall the functionality and navigation within the website need to be improved as the website is hard to use in its current state as it’s outdated and dull.
The publicdomainmovies.net movie player page consists of a large player window followed by a download link and a description of the movie. The description has very brief information about the movie, how to view the downloaded movie and a link to the IMDb page for the movie. Below the description contain tons of unnecessary information that isn’t needed for example references to further read. The layout of the page only uses the middle of the browser window to the left and right sides of the page are wasted. Overall the movie player page is cluttered with information that’s not needed and doesn’t utilize the white space.
Looking at the public domain movies mobile website it’s clear to see it’s the exact same website on desktop as it is on mobile only scaled down. Not only does the website look bad, but it’s also impractical as the navigation bar can hardly be seen. Looking into the media player it’s hard to control due to the buttons on it being so small as they’re meant for desktop use and not mobile.
BBC iPlayer
Looking at the BBC iPlayer desktop design it has a dark design, which uses white text as a nice contrast. The navigation bar is at the top of the page and has five headings. Below rows of TV shows are lined up side by side and use a side-scrolling design which when an arrow is clicked moves onto more shows. Each show has an image, title, and description, I find that the website is easy to use and easy to see. The media player page includes a large window for the player and below has information about the show including, length, date aired and a short description. A download link and add to favorites link can also be found here too. The media player page mirrors the desktop website but is scaled down, the only difference is text is slightly adjusted to be bigger and it features the new menu navigation.
The mobile website uses a similar design to the desktop but utilizes the functionality of mobile devices. The top right uses a menu as navigation instead of the navigation bar featured on the desktop version. Another feature is the side-scrolling feature no longer uses arrows but just allows users to swipe right to left to view other TV shows. It now uses a huge search bar that spans the whole site that users can use to search.
NOW TV
Looking at the NOW TV desktop website it has a very clean minimal design that focuses solely on the video thumbnails. Text is rarely used on this design but when hovering over the details of the thumbnail about movies are displayed. The colour scheme changes depending on what package you’re viewing e.g. entertainment (TV Shows) is orange and movies are blue. Navigation is located at the top of the page with a hamburger menu in the left. When clicked a menu pops out from the side. The service doesn’t use a page to display media but instead an application that you have to download.
The mobile application uses a similar design with the same colour scheme system. Although the hover feature isn’t on mobile to find the details about a movie you need to click onto the thumbnail where you’re redirected to the movie’s page. Mobile has a media player built in which is much more convenient for users. Also, users are able to download movies/shows so they can watch them offline.
Experimentation
I decided to test out the designing and prototyping tools for when I start designing and when making the working prototypes.
Sketch
My first experimentation was using sketch where I created a small photo gallery, it allowed me to explore the features of sketch. I found that it had a lot of features but was only available on Mac which limits its user base although it’s the most used design tool in the industry. It also allows for prototyping so applications can be designed than the prototyped on the same software, this would cut down learning time.
Adobe XD
Secondly, I tried out Abobe XD where I made some storyboards to display users for a fitness application. It’s a free application but isn’t as popular as sketch or offer as many features although it receives regular updates with new features. Like sketch it has prototyping which I liked a lot because it’s easy to go from design to prototype. I found this tool really easy to get the hang of as I’ve previously used Adobe applications.
Samsung Smart TV Principles for Designing Applications
Samsung has some guidelines for designing applications for its Smart TVs, it follows six main considerations when designing an application.
Simplicity
Make sure that applications are easy to use, this is done by making sure that all layouts are user-friendly and have clear easy to access features. Applications that aren’t simple aren’t likely to retain the user.
Clarify
It’s the most important factor that navigation is clear and accurate for users. If navigation is confusing it will lead to users closing the application and never using it again, so simply users should know where they are at all times where ever they are on an application.
User Control
The control method should match the control device, this is done by the button names and icons on the remote control need to match the actions which happen on the screen. Consistency within user control is a must because users want to have a hassle free time whilst when using their TV.
Consistency
This looks into making sure usability and learnability are easy for users, although it’s impossible for every UI to be the same throughout every application following certain components will make learning a new application easier. There should be consistency in three areas controls, screen layout, and navigation. Keeping consistency in the controls of how to use applications can make the learning process quicker because if they enter an application and the back button is used a home button it will confuse uses and they’ll have to learn this new way. Screen layout should effectively show information in every application, information that’s unneeded shouldn’t be displayed. Navigation should follow basic features such as four-directional, navigation, going into levels and being able to return to previous screens with a press of a button.
Feedback
Items that can be selected using focus, need to be easily identifiable for users whether it’s focused or not. When a user selects an object within an application and ENTER button is pressed some sort of feedback should happen on the screen, for example, an element is highlighted yellow.
Aesthetic Considerations
Applications need to have aesthetically pleasing designs which look simple, as it increases the chances of users reusing the application again but also gives users good experiences. If applications are designed specifically for the TV, the TV design guidelines should be followed which include colour, resolution and screen composition which are different to the computer and mobile guidelines.
User Environment
Another factor that needs look at when designing for Smart TV is the distance between the user and the TV. The average distance between users and a TV is 3 meters, the distance means that designing an application needs to be adjusted. To do these elements such as images, text and buttons need to be larger so they can be seen from much further away. This also means users want a simple layout that’s easy to navigate.
Focus
Focus allows users to locate where they are on the screen quickly and allows for smooth navigation. This can be done highlighting certain elements when users hover over them.
Android Guidelines
Android provides some guidelines about designing for Android TV.
Designing for Apple TV
Apple has some guidelines which should be followed when designing for Apple TV.
Interface
When designing applications for Apple TV the application should allow users to know what to do and where they are. Grids provided by Apple should be used to layout information, the text needs to be readable from a distance and the application’s interface shouldn’t be cluttered with unneeded information. Applications need to be designed for Apples set resolution which is 1920 x 1080 (1080p).
Navigation
Navigation should be fast and content should be easy to get to so make sure the application is organized where it has the fewest screens possible. Touch gestures should be used to make it moving through applications quickly and easily but using the least amount of gestures as possible. Don’t display a back button on the screen as it’s not needed because users know that the menu button takes them back.
User Control
Apple TV uses a remote which allows for gestures that users use to navigate through applications. It has three main gestures swipe, click, and tap. It also has volume buttons, voice button, home, and play/pause. New gestures should be introduced only when it makes sense as users already know the standard ones and don’t want to learn more. The voice button allows users to speak in real life and Apple TV will search for what the user has said.
Designing for Apple IOS
Apple expects application developers to meet their high expectations when designing for iOS, this is through quality and functionality.
Aesthetic Integrity
This refers to how applications look and how they work with their primary function. An example given by Apple is an application that users can use when performing serious tasks keep users focused by using subtle, graphics, standard control mechanics and predictable behaviours. Put simply it looks at making sure that the experience that users get from apps match what the app is.
Consistency
Keeping applications design consistent will allow for high quality and good user experience, this is done by using features and behaviors that user expects, for example, a back button taking a user back when clicked. This button should have the same function when clicked on any page. This also includes using the same text styles and icons throughout the application.
Feedback
This looks at when an action happens some sort of visible feedback happens, for example when tapping to open an application the icon slightly fades this is feedback. Feedback can sounds, animations, and many other things.
Metaphors
Users are able to learn quickly when applications are metaphors for familiar experiences in real life or digitally. For example book applications on iOS allow users to swipe to change page, just like in real life.
User Control
iOS allows users to be in control, full decision making should be in the hands of the users. This is why balance should be found between helping users use applications and giving them unwanted outcomes. An example of this is to allow users to cancel operations.
Mobile Accessibility Guidelines
The BBC have created some mobile accessibility guidelines for designing prototypes. The guidelines have ten points, five of these have been selected as part of the research as they are most relevant.
Design: When designing a prototype, the wireframes should be annotated, certain parts such as colour contrast, colour, useable elements and many more.
Editorial: Buttons, links, and headings should all be labelled, this is so that when working with others they are able to easily identify elements.
Focus: Content should be ordered in a way that’s logical and meaningful for users.
Forms: Forms should have clear labels and should be in order which users can understand for example a username input should be followed by a password input.
Images: Don’t use images of text only provide through text boxes and don’t provide key information by using background images.
These guidelines allow for strict rules to be followed when designing, following these will increase user experience due to the application being more accessible.
Method
This project allows for 148 hours to be spent on researching, analyzing, planning, designing, feedback, and prototyping. I plan to distribute these hours out accordingly depending on the certain task.
Researching it took me 32 hours because I need to find relevant sources that could give me an insight into how to design a good application not only for mobile but for smart TV. After the researching was done it needed to be analyzed to find the best pieces of information so 15 hours was taken to make sure I had all the information I need. Planning took 20 hours as I wanted to follow the researched guidelines and created a plan to follow these whilst finding a good way to gain useful feedback. The designing took the most amount of time because I was constantly tweaking it to feedback and personal likes. The prototyping took 20 hours as I experimented with some different tools after I that XD was my favourite I made the design functional. Overall the feedback took 12 hours to get and create the surveys. Information was gain both through user testing and surveys created on Survey Monkey. 12 hours were used to reflect on the whole project at the end.
The Design Process
Specification
The user needs for this project are two separate parts as two prototypes are being created the first a smart tv and the second mobile. The smart TV users required a prototype that can be seen from a distance and controlled using a remote control. Whereas mobile users need a prototype that fit all the most important features on a small screen whilst using the built-in features of their mobile. From the research conducted above, I’ve chosen to develop at a resolution of 1920 x 1080 for smart TV and 375 x 812 for Mobile. The mobile prototype will be designed for the latest iPhone which is the XS. I found that designing for simplicity is a must as users want to easily use applications, they won’t want to learn new ways of controlling because if an application is difficult to use it lowers the chances of users returning to it. Whilst looking into current media players I found that successful players only provided meaningful information, which led to an aesthetically pleasing application that was easy to use on both smart TV and mobile. I want to make sure that the design cross both devices are similar so keeping a consistent design style is key.
Low Fidelity
I decided to produce my first designs on paper which can then later be digitalized, the reasoning behind this it’s easy to get feedback on paper rather than digitally as you can show someone instantly. The tools used were a pencil, ruler, paper, and a rubber. The low fidelity sketches provided a base structure, I knew that I wanted four main pages these being a landing page, genres page, favourites page, and a media player page. The designs feature minimal typography as I hadn’t completely made my mind up on headings at this point.
My reasoning behind choosing a separate page for the navigation menu for mobile is it’s more accessible because of the large text and clear boxes. The landing page has arrows to control a carousel that will contain three images, it will be the main focus of the page.
Medium Fidelity
Based on the low fidelity sketches I digitalized the designs using Adobe XD and this included some slight improvements to make the designs look better and allow for better functionality when it gets to prototyping. As the design process was still in its early stages so placeholder text and minimal colouring would be used to the structure of the application could be designed first.
The first main change to smart TV was to remove the search bar at the top of the smart TV design and replace it with an icon it looks better and when it comes to making it functional it would be more efficient. Another change was to separate the “you’ve searched for text” and the keyboard as they’re two separate elements, this was done by two different rectangles. The first main change to mobile was to remove the navigation arrows on the land page as testers pointed out that users know about iPhones ability to swipe left and right. Another change was to introduce the default Apple keyboard, for when users search. Both of the devices now have media player controls and a large circle play button.
Two surveys were created to gain some feedback on the current medium designs, which were used to create the high fidelity they were asked questions about the designs such as out of 5 how much did they like them and how they could be improved. Three images were used on both surveys landing page, media player page, and menu. The main points that were taken from the feedback were some of the icons are jagged, some text is hard to see so needs adjusting and both of the carousels featured on the devices landing pages don’t have an indication of how many images are in it or what one you are on.
High Fidelity
This saw the design taking a step up with colour, typography, icons, and images. The chosen colours were red, dark blue and white although black was used as a border colour in places. My reasoning behind these colours is that they contrast each other really nicely and it’s aesthetically pleasing. One of the main improvements was the new logo which features a play button followed by some text. Based on the feedback given on the medium fidelity improvements were made to different pages. Three dots to indicate what part of the carousel has been added and the icons the testers found jagged are now polished and smooth. Arrows now have a clear use as more artboards were created and a logo was added and made large so the user can a see.
Style Guide
Heres my style guide that contains sizes of text, icons, buttons and the colours used. Some elements colour has been changed as they clash with a white background.
Prototype
Both prototypes were created using Adobe XD, it has a built-in prototyping tool that allows you to select elements and apply actions to them. I found that this was really useful when doing the mobile prototype as it allows users to swipe to change on the carousel instead of using the arrow buttons that Smart TV users have to. The actions also allowed me to simulate a keyboard coming up when the search bar is clicked. On Smart TV the actions allowed for a smooth overlay of the menu to pop up instantly when the menu button is clicked. Final feedback was conducted where I got three people to test my prototype. They were impressed and when asked if they’d use this to watch movies all three said they would, one of the tests pointed out that some of the transitions can be quite glitchy and clip through content.
Conclusion
Looking back on all of the feedback gained throughout this project, I’ve found it very useful. The continuous feedback allowed me to constantly progress into a better more efficient designs. Looking back on the final feedback where I got users to give me feedback on my prototype I believe that when creating prototypes again another prototyping tool should be used as it lacked some of the features that I researched about such as a focus, I was unable to find a way to do this efficiently. Spending more time to learn how to use the software would benefit the quality of the end product as well because although I’m extremely happy with the final outcome it could be polished more. Overall users enjoyed using my prototype and liked my designs throughout the design process.