DES500_AE1 Moving Image Archive Report Gabriel Ganchev

Introduction

The aim of this report is to research in depth, what are the current trends in User Interface for Smart TV movie player application and also a mobile version of the same app, what makes a successful application and also to redesign the current moving image archive section for the website archive.org.

According to Telegraph (2016) the most important thing for an app to become successful is the app to be tested on real users at real places. This means that, by the real feedback the designer or developer gains a better understanding of what exactly the customers want and if they don’t like something he will still have time to make changes. As Graham (2016) believes, it is important for the creators of applications to be able to adapt on the market and this step requires the creator to get to know his users before standing out in the market. According to Wang (2012) the fewer sign up buttons is better as users might become impatient and will look for an excuse to not downloading or delete the app, also the app must have been created on idea and it is important to be sketched out before doing it, she also suggest the design to be flexible and intuitive and everything must be considered in terms of functionality and the most important part is to promote the app in one way or another, as not every app manages to go viral.

Johnson (2016) states that to make good app for a mobile device, the most important thing is to keep it simple. The user experience has a huge impact when it comes to making an app successful. For the customers to like it, it is important to be simplistic and easy to use as this improves the level of success on the app. At the first version of the app it is important the features to be kept to the minimum as if they are much the launching would be delayed and the users might not like those features or get confused, which in both cases ends up with the worst scenario of losing money and customers. The same thing goes with the designing of a Smart TV app. The design must be simple and easy to navigate, because here the navigation happens with just a simple remote control.

In the end of the report would be presented a low fidelity sketches, a medium fidelity wireframes and a high fidelity final concepts for both Smart TV and smartphone, plus a user interface style guide.

Methods/design process

Agile

The method for this report is chosen to be the agile methodology. By following each step to in this method it is important every step to be finished on time. The total amount for the project is set to be 148 hours. This project has several aims that has set to achieve at the end.

1. Make a research about successful app.

2. Evaluate the current look of the moving images archive at the archive.org website.

3. Compare different movie app players for smart tv and mobile phones.

4. Start writing the 4000 words report around 10 hrs.

5. Create the mock ups.

6. Get feedback from other people.

7. Release the final version with the report.

It is important that all those aims are achieved in those 148 hours. The time is separated between all of the steps needed for this project. The first part of the project is the researching. The aim is to understand what makes a successful app for a smart tv and mobile device. Another part of the research is to look for other movie player platforms and evaluate their design and functionality around 40 hrs. Then compare everyone, of them and evaluate what is good and what is bad in their design and why. Then based on the evaluation the good stuff would be taken and somehow implemented in the redesigning of archive.org moving image section and player. The next step is based on that research to start sketching the idea of how the current moving image archive can be redesigned and improved around 4hrs.. Here would come the production of the low and medium fidelity wireframes approximately 4 hrs. Then based on those sketches and wireframes, comes the part of the production of the high fidelity screens and user interface style guide around 10hrs.

The final part is creating the prototype, which would be based on the high fidelity screens around 80 hrs. The prototype screens are going to be the smart tv app version with a screen of the page moving image archive and one for the player. The other screen is going to be presented as a smart phone app, again with the player page and moving image section. This prototype is going to be created by the agile method. First of all comes the planning where the sketches and the wireframes take part. Then it is the build part where the final concepts are done and are made as a clickable prototype. Then the prototype is launched for testing by users. By doing this the project moves to the last phase which is feedback from the users. By doing this the designer gets another point of view through the eyes of the normal everyday user and this gives better understanding, whether there is something that has to be improved and if the customers find it easy to use, as this is important because users prefer clean and easy interface, especially when it comes to using the product on a smart tv or a phone.

Research and Analysis

Clickable prototypes

Prototypes

The prototype is not the final product. According to Banerjee (2014) a prototype is a stimulation for the final product and that it is some sort of interactive mock up, that can have any degree of fidelity. A prototype can be created as a low fidelity or high fidelity. They both have their advantages and disadvantages. The easiest way is the low fidelity prototype, which is created on paper and in case to make it clickable it is required a software. The high fidelity, the designers still make it on paper first, but when it comes to making it live and able to be clickable again it is made on different software, but in the high fidelity it is required much more time and effort as it needs to be well designed and must look realistic, which in the low fidelity they are not designed and are mainly used for rough ideas. Both methods are useful, but it depends from what the user would want and how much time the designer has. Denkov (2014) believes that the high fidelity prototypes fall short and that the answer to prototyping is making click through or clickable prototype, which he believes are connecting multiple screens with hotspots and that there are two types of clickable prototypes, so the first one is photographs of whiteboards on a prototyping software or reproducing the sketches using interactive widgets with UI interactivity. According to Mears (2013) the prototype should contain as much as needed in order to get the desired outputs. The prototype must always be tested by users before releasing as by this feedback the designer would know if the design is good enough to be launched. Pernice (2016) believes that to make the prototype to respond to the users, actions the interaction can be implemented or it can be faked during the test, but with the interactive one the designer must spent some time to set a response for each possible user reaction.

UI

UI

According to Rouse (n.d.) the user interface term in the information technology is basically everything designed into an information device with which a person may interact with. The user interface plays a very important role in any program as it determines how easy that program can be made. The design has a huge impact on users, because the first thing they see when opening a website is the layout, that is why a powerful program that has a poorly design has no value and it would be easily forgotten. According to Usability.gov (n.d.) some of the elements that UI includes are the input controls such as text fields and buttons, also the navigation controls such as breadcrumbs, slider, tags and icons the others are the informational components and the containers. They also suggest that the interface must be kept simple, use common UI elements as this makes the user feel more comfortable and allows them to work easily, the colour and the text has to be done strategically and the typography must create clarity and hierarchy and the relationships between the items and the structure have to be based on importance. The three main types of user interface are a command language so that means that the user must know the specifics of the programme, the other is menus the user choses the commands from the list displayed on the screen and a graphical user interface the user gives commands by selecting and clicking icons that are displayed on the screen. Businessdictionary.com (n.d.). The conclusion here everything that is created on a device that the user can interact is actually the user interface.

UX

UX

User experience UX is how the user feels when is interfacing with a system, this system could be a website, a web application or a desktop software Gube (2010). This way of designing is more a human-first way of designing products. Lamprecht (2017) believes that user experience design is a process of enhancing and satisfy the customers by improving usability, make it easy to use and provide pleasure in the interaction between the customer and the product. According to White (2017) there are initial stages where the research starts and where the designer gets a brief idea of what the client wants, then it is the personas and information architecture, user testing and wireframes, visual design and usability testing and launching. The personas in UX are playing a huge role as by them the designer can create his idea based on those different fictional characters and is able to refine the content that he needs. Wireframes are basically black and white and are created to gain a better perception of what the design could look on actual device and are able to be made interactive so it can be tested on users before creating the high fidelity screens. Then the visual design is where the wireframes are converted into mock ups. Then when the prototype is ready it can be usability tested by people who match the identified personas.

Designing a UX for mobile

When designing for a mobile phone it is important to be considered the way the device is going to be used and the specifications of the chosen device. As most of the UX designs, designing for a mobile device it follows similar pattern as desktop, as the most important part is a user research. The designer has to create some personas, as by that he understands the behaviour of the users and is focused to create the app for those particular characters. According to Schenker (2015) the design must be kept minimalistic as it needs to be clean and simple, also the designer must think about different devices and environments as not every mobile devices is created equal to the other and the most important part is to use familiar but highly functional navigation and some common features that mobile app must include the most popular categories or site pages, the navigation menu as a hamburger menu as users are very familiar with it, high quality images and clear call to action buttons. It is important for mobile apps to be clear with focused content as many people are using their devices in a hurry and most of the time they just want to do stuff with just a few gestures. The users must be able to know how to navigate through the features of the website with small arrows or hovering message. The mobile users appreciate the small things that makes their experience easier. According to Jain (2015) it is important to create fluid layouts as the layout must be flexible and fluid ensures that it displays properly on different screen sizes. So if the creator wants his app to be successful it has to be adaptive to different screens, as smartphones today are having different screen and different characteristics. Some devices are more powerful than others and it is important for an app to work smoothly on different devices. So again here the most important thing when designing a mobile user experience is to keep everything simple and get to know what kind of users are going to use this product as this will allow the creator to easily fulfil the user’s needs and it will make the project successful.

Smart TVs

Smart TV

Smart TVs are becoming more popular every single day. Most of the people today prefer to buy a smart tv rather than the average lcd or led tv. As Laughlin (2015) believes the benefits of the new smart tv’s are that they have web browsing, applications and some other additional services. The web browsing is a very nice feature as the normal user prefers to lay down and view pages or photos. The apps are making life much easier not only for smart tvs but in general for all kind of device. The most common apps for smart tv are as usual for a tv the movie streaming ones such as Netflix, BBC iPlayer and off course the social media Facebook and Twitter. Some TV brands offer some services like changing the home screen and recommendations for what to watch. According to Quain (2017) smart TVs offer some other advantages as well, because they have built in computers and connections some manufacturers might add other features like small games and this is becoming quite popular, another good features is calling services like Skype thanks to the built in camera which not every Smart TV has and the others are voice recognition for searching and gesture recognition for switching into different screens. Hoffman (2015) has another theory and he believes that Smart TVs are not that great and that their software is not that good and that smart tvs have usually confusing and often baffling interfaces and the main problem for him is that smart tv are spying on what the users watch and are sharing this information with advertisers. The problem with most of the smart tvs is that the don’t receive updates very often or at all. According to Rowinski (2014) people don’t like to do unnecessary work when watching tv and that the people who watch TV are viewers and not users and that there are some common rules for smart tv applications such as text must be large enough to read, the text must be less, the screens must be simple, clear focus of menu items, the navigation must be easy to use and without much clicks, the background must be neutral and in a good contrast with the text, the irrelevant choices must be reduced to minimum as viewers do not need to make decisions, and transitions of how one screen goes to another.

Colours

Colours

Colour is the most powerful tool for the designer. According to Alvarez (2014) the usage of colour can impact users emotions, draw their attention and put them in the right frame of mind to make a purchase. The primary colours are red, yellow and blue. The secondary are green, purple and orange. According to proto.io (2015) there is no wrong or right about colours with high or low contrast, as sometimes an app will call for bright colours that contrast against one another, other times something a bit gentler, but the more something must stand out, the more contrasting colours the designer needs.

Netflix

Netflix

Netflix is a platform for watching movies and tv shows. It is supported on mobile devices, desktop and also smart tv. According to Ramedia (2017) Netflix showed a better way for the users to watch their favourite movies thanks to the easy to use user interface that shows how simple watching content on the Internet can be as the let users consume what they want when they want it without penalty in the form of ads or other stuff like time restriction. Netflix are winning the users thanks to the politic that the user always comes first O’Brian (2016). Netflix in their tv app are using dark colours with a very good contrast between the content and the background colour. The movies category has a great layout and it is very easy to use with a remote control. Selecting a movie is created like some sort of a carousel which makes it very easy to use. When the movie is selected it shows the cover picture of the movie on a nice dark background and there is not much of a text except information and a brief resume about the movie.

BBC iPlayer

iPlayer BBC

The BBC iPlayer is another movie platform, but here users can watch BBCs channels. The design of this app for smart tv follows the similar path as Netflix. Again dark colours , black background with a nice contrast with white text. The navigation is slightly different than Netflix but it is based on carousel again. It is visible that the designers kept the design clean and minimalistic. The text is to the minimum level which is good as that is exactly what an average everyday user wants, especially on their TV. In overall the BBC iPlayer has a nice and user friendly design.

Amazon Instant Video

Amazon Instant Video

Amazon Instant Video is another competitive app on the market. It allows you to watch movies and tv shows. Basically is maybe doing the same thing as Netflix. Again the company created the app similar to the other movie players. Again the design is kept simple with black background and contrast colours for the other objects. Everything is symmetrical which is very important especially for TV app. The navigation is a bit different as the user is scrolling between the movies and categories and it is not like with arrows or clicking right to move to the other movie like Netflix. In general the design is clean and simple.

Moving Image Archive Audit

Currently this website does not have a smart tv app or even a mobile. Now the website looks bad and unprofessional. Everything is scattered and the boxes where the movies and categories are, some of them are bigger than the other. There is too much content and it is very confusing for the users. On the first page some of the boxes are another categories and some redirect you directly to the page with the player, which is very confusing. Currently the quality of the pictures and icons is very bad and it has to be changed. There are two search bars one on the top right and one on the left side. This is confusing as the users won’t know which one to use so in the redesign would be kept only one. The option on the left side are too much and it is confusing the users. Users do not need much choices and to make any decisions, as the all want to find what they are looking for without any difficulties. The new app must be simple with clear interface and user friendly.

Specification

Based on the research it is obvious that the current section of moving image archive is very outdated. It is not created to be able to look at it through a mobile device or a smart tv. Everything needs to be redesigned and made to be able to fit in different screen sizes.

It is important everything to be symmetrical as currently every object on that website is with different size and different shape and place. Idler (2011) believes that using some of the Laws of the gestalt is important in User Experience. By those laws the redesigning would be easier to do.

The website needs to have more modern feel. Currently it cannot be easy to access from a smart tv, due to the fact that would be very difficult to navigate with remote control. This has to be changed and the prototype version of the website would be created to be easier for the users to navigate with just a remote. There are some sections that would be removed like the collection and creator. The other sections would be moved and they would be hidden in the search bar as a filter if the users want to filter their search.

The prototype would have more, darker colours as they give more modern and professional look. The collection part would be redesigned to be navigated easily and would be done on the carousel base.

At the end would be provided sketches for both Smart tv and mobile phone for both the home screen of moving image archive and player. A wireframe for both devices and a high fidelity concept and a user interface style guide. They are going to be a little different than the final concept.

Design, Planning and implementation

Low Fidelity Sketches

Smart TV Category page
Smart TV Player
Mobile Category
Mobile Player

Wireframes

Mobile Category
Mobile Player
Smart TV Category
Smart TV Player

High Fidelity Final Concept

Mobile Homepage
Mobile Categories
Mobile Movie Category
Mobile Watch or Download Movie
Smart TV Homepage
Smart TV Category
Smart TV Movie Category
Smart TV Watch or Download Movie

User Interface Style guide

User Interface Style guide

Conclusion

In conclusion from all of the research there is one main key point in every design. This is to keep everything clear and simple. From the research it is found that users prefer to use clean website, without any useless content and most importantly to have a familiar icons and navigation. People often are confused if they see different navigation and icons rather than the usual stuff. It is difficult to adapt people to new features and this requires a lot of testing to find out how would they react and this takes a lot of time which most of the designers do not have. Also for the best impact on the users colours are playing a huge role. With colours the creators can unconsciously create different emotions in the users heads. That is important because of colours some users might like the website and also because of colours the website or app can fail, just because the designer used colours that the users do not like or, like but the contrast is bad and that pushes the away from downloading or recommending the app or website to other users.

Designing an app for a Smart TV and mobile phone only can be a bit tricky. Both devices have very different sizes, but both apps must have a similar style. The good thing here is that for both devices the design is tended to be simple and minimalistic. Both apps have different ways of using. The Smart TV is used with a remote control that is why there are arrows to click to navigate. The smart phone, people use their fingers to tap on the desired icons and scroll just by swiping up and down that is why for a mobile might be a bit difficult to design.

For the design of moving image archive the feedback was mixed with good and bad points. Most of the people said that it is very easy to use and navigate. Others did not liked the design with black background. There were critics about the homepage, because there is not much on it, but others liked it due the fact that it was clean and without any useless content on it. In overall they gave 3 from 5 stars for example thanks to the fact that they find it easy to use.

Links to prototype

Mobile App click here

Smart TV App click here