Designing a newinteractive system COMP1649 Interaction Design http://stuweb.cms.gre.ac.uk/~ .............COMP1649 Interaction Design Contents 1................................................................................................................... Introduction ...........................3....6 3.....................................................................................................................................................................................2....................... Methodology Used .16 Appendix B – Table of Figures ................................. 4....9 6.......................................................9 5..................... Product Evaluation ........................................................................................... Evaluation Criteria .................................................................................................................................. 8 4.. 4 2.............. Cognitive Frameworks ....... 5...............................................................................1................................................................................................................................................................................................................................................ 9 5............................. Cognitive Processes .................................................................................................................................................................................................................................1...............................3 2..........................2.......................... Conclusion ...................................................................... Conclusion .... Design Principles ...............18 Page 1 of 18 ....................................15 Appendix A – Prototype Functional Pages / Options ...................................7 Using Multimedia Content .. Cognitive Psychology and the User .....................8 Evaluation .................................................................................. References and Bibliography .............. Multimedia use rationale ..................................................................................2..................................................................................................... Identifying the User ...........................................................................2.. 6 3......................................................1...............................................................8 4............................................................................ 3 3......................2.............2..........................................14 7................... Multimedia types used.......................................................... 2 2......................... 2....................1.....................................................................................................................2........................ 3 2............................................................................................................................................................................................1........................................................................................... How will cognitive psychology affect the user?........................................................................................ 5 Design Principles and Methodology ..............................................3 2......2................................... COMP1649 Interaction Design 1. The scenarios were to design a music and/or movie preview applet that could be used as a “try before you buy” ecommerce solution. A welcome to University of Greenwich for new students. The application could be mobile web or a platform specific applet. The scenario considered for this report is to design the music and movie preview applet for touch screen devices (such as Apple iPhone and iPad). Page 2 of 18 . Introduction The brief required that a mobile applet needed to be designed based on one of four scenarios. Social networking for current students within the university or a game for 5 to 7 year olds to promote green environment issues. The applet needed to include multimedia artefacts. this could be on a mobile phone or a tablet device. to cover everything they would need to know. In either case. The report also states that of the males with smartphones. To ensure that users are able to correctly perceive the meaning of the information presented to them. which can be interdependent. Cognitive Psychology and the User 2. 2007). they will be visiting with a purpose . 18. How will cognitive psychology affect the user? The brain acquires processes and stores various data. particularly being quite small on smart phones (over larger mobile tablets). 19% selected music apps amongst their top 3 most used apps. Cognitive Psychology is a branch of psychology that looks at the way the brain handles this data. I must follow this link to get to category X.. 2. Identifying the User According to statistics from a report by YouGov (2011).” It is therefore important that the information provided to the user is relative to the environment and the given task.7% of users are 25 to 34. with 16% using music apps and again. careful consideration should be given to the following: icons (and other graphical representations) should clearly define meaning and where the visual representation is abstract. will be required to analyse the current interface and decide whether it follows the same usage patterns. cited in Sharp. as the previous experience with various interfaces will determine how they interact. et al. rather than focusing on the sale. Female smartphone users had similar figures. whilst shopping apps were only ranked in the top three by 8% of users.5% are 45 to 54. Therefore. Will this icon with text that looks like a button perform like the buttons I have used before? Will this link take me to the film preview I was looking for? This is comparing and decision making. key attributes of reflective cognition.2. This is because the user.to preview a multimedia artefact. There are two types of cognition. 2. Culture and previous exposure to stimuli are experiential factors. How people process information can be affected by many factors. they will be able to view short videos of films and audio clips of music. although they may already have experience of similar interfaces. they will assess the presented information to map it to their goals. The screen. 17. It should also be ordered in a logical and useful manner. Perception The process of perception follows on from attention.2. et al. The effectiveness of design is a reflective factor. This includes problem-solving. where on the same page Page 3 of 18 . should avoid be too cluttered and space used effectively.5 % are 35 to 44. 13. rather than coloured backgrounds. 26.e. how does a user decide what button to press. When a user has a specific goal in mind. 1993. experiential and reflective (Norman. i. as they may be expecting information to be represented in a specific manner. in that it mainly regards how information is presented. 23. 54% of smartphone users are male.1. the majority of smartphone users could be considered to be males between the ages of 25 to 34. it would suggest that the primary focus of the applet should be the multimedia content. such as “Is the information I want on this page? No. There are six main cognitive processes.6% are 55+.COMP1649 Interaction Design 2.7 % of users are 18 to 24. only 8% using shopping apps. In the context of this applet. should be clearly labelled. Cognitive Processes Attention When the user visits the mobile web application. From these figures.1. defined by borders. meaning that several processes may be required for any given task (Sharp. as will their culture. grouped items should be spaced well and where possible. 2007). Reading. or through recognition. This could be thought of as an accessibility consideration. the more frequently a task is completed. the easier it becomes to recall. text should be legible. as this is the main reason that visitors will be using the mobile web application. Within perception. Such conventions would be using familiar icons such as the standard “play” and “pause” icons when viewing or listening to the media clips. An example cited by Sharp et al (2007) is the distinction between a running tap and central heating.2. This can be based on assumptions or facts. 2007). despite the information being previously known (Sharp. Speaking. The use of icons. Memory Memory is the recalling of knowledge. rather than recall. Cognitive Frameworks There are several cognitive frameworks that are used to predict and explain human behaviours. Listening Language processing is governed by “Reading. however. It has been shown that a change of context can affect the ability to recall knowledge. This is how information is actually taken in by the user. et al.COMP1649 Interaction Design (Weller. buttons and links should work in a familiar way. in terms of human-computer interaction can be thought of in two ways: learning how to use or using to learn. therefore the interface should encourage exploration. the perception that users have of the way things work or can be used. This could be achieved by using the correct icons to play a video or add a purchase to the shopping cart. there is also “perceived affordance” (Norman. Reasoning. which will simplify the tasks for the user and reduce memory load. Planning. but also guide users into selecting the most appropriate actions. The interface should not be so complex. 2004. the main issue will be regarding the ability to read the text on screen.. the user will be able to quickly adapt to using the interface. 1990 cited in Sharp et al. that the user must figure out how to use it. as the main design implication is that text on screen should be able to be resized by the user. Problem-solving. 2004). Assumptions are usually based on previous experience. rather than reading (Caroll. with good text to background colour contrast. This can be linked to the cognitive framework of mental models. Learning Learning. However. Speaking and Listening”. 2007). when shown a picture and asked to recall a fact. 2. 2007).. The quality of the audio and video files could also be taken into consideration. We assume that because a running tap Page 4 of 18 . Users tend to learn through doing. Decision-making The principle issue surrounding problem-solving and decision-making is that a user of the mobile web application should be able to make rapid decisions. 1997 cited in Sharp et al. such as a button that says “next page” is perceived to have the affordance of being able to be clicked and the action will take the user to the next page. By following some standard and anticipated conventions. Therefore. This could be through having to provide the answer to a question. Galitz..2. the three discussed below will be taken into consideration for the design. it is necessary to ensure that the user is not required to undertake complicated tasks to achieve their goal in watching a preview or listening to a sound clip. There are five main theories in relation to interaction design. Mental Models Mental models are the conceptual ideas that humans have regarding how things work. to promote recognition. before they proceed. As this will be a mobile web application. highlighting the product in some way. This conceptual model of how a central heating system works is flawed.COMP1649 Interaction Design increases “flow” when the tap handle is repeatedly turned. Interface should be intuitive. they perform actions (this could be a specific sequence). or if a product is already in the users basket. This reduces the memory load for the user and relies on visual cues. 2. with clear instructions and where necessary. The aim should be to reduce the cognitive effort of the user. Ordering/sequence of information/options. which requires a tool to solve a problem. The first is externalising. The mental model does not have to be correct in its interpretation to exist. This is a goal driven framework. The interface design can use externalising. The third is annotating and cognitive tracing. Interface should promote recognition rather than recall. Therefore. by providing visual clues as to what pages have been visited. such as a shopping list. they interpret the information they receive and evaluate whether the information received has met the original goal. They then receive feedback from whatever interface they have used to perform the actions (such as a browser). It should reduce cognitive effort. context relevant guidance. Theory of Action The theory of action framework is related to the concepts of “gulf of execution” and “gulf of evaluation”. with an underlying possibility to purchase. Interface should encourage the user to explore. Interface should allow for rapid-decision making. such as a to-do list. they decide how they will achieve it. Conclusion The interface should aim to take into consideration the following: Goal of the user. which is the manipulation of external data. Another cue that could prompt the user is the use of showing the number of items in the shopping basket. A user has a goal. such as a calculator to answer a mathematical question. Interface should prompt the user to take certain actions. Icons should be clear or labelled where not obvious. by providing intuitive ways to interact. External Cognition External cognition has three main activities / processes. Keep the interface simple and uncluttered. Obtaining the goal is easy. the higher temperature we set it at. The main goals of visitors to the mobile web application will be to preview video and music content. that the same is true for the speed at which the temperature rises with central heating.3. Text should be legible. Information on screen is relevant. yet it persists. good foreground to background contrast. the interface for the mobile web application should aim to follow standard concepts. The aim of the web application should be to easily allow users to view or listen to the desired content. such as visited links. to prompt the user to complete their transaction. Page 5 of 18 . The second is computational off-loading.2. to be more effective when in store (cognitive tracing). such as crossing off items on a shopping list list (annotation) or re-sequencing items. which could be user generated. 2008). including use of colour. as the product will be designed for mobile devices. the perceived affordance will be evaluated based on how universally accepted the icons and buttons will be received. Learnability of. 2012). Benyon’s principles have been chosen for this product development. 2004)) is the inferred use or property of a button. described by David Benyon (2010). Effectiveness of and the Accommodation of the interface design. In the case of this product. the interface will be evaluated on the visibility of text. This means that users are less likely to inadvertently select the wrong option. User accommodation relates to how flexible the system is. are broken into three categories. how attractive the interface is. Page 6 of 18 . the visual style of the product. but will take into consideration Fitts’s Law (Göktürk. Familiarity relates to both the language and symbols that the interface uses. For the purposes of this product. Apple iPad. while both manufacturers also specify that commands that are hard to recover from (such as “Delete”) should be placed at the very bottom of the list. as they address the main aims identified through the review of cognitive psychology and how it will affect the users and how they will interact with the product interface. the ability to personalise the interface or providing different methods to achieve the same goal for various levels of skill. does it make the user want to join in. This product will be evaluated on flexibility. Design Principles and Methodology 3. It will also affect the order content and options are displayed. Samsung Galaxy. For the purposes of this product. buttons and instructions. Consistency relates to both performance and visual style. Affordance (or perceived affordance. concerning the routes/methods to preview content. Learnability is concerned with how visible things in the interface are. through product description and the messages the user will receive.1. Visibility does not relate only to what is visible on screen. Effectiveness is concerned with how easy the system is to use and how well it protects the user from problems and the ability the user has to recover from issues within the system. This is because the users finger are not the most precise pointing tool available (Rodríguez. where culture or language may be a barrier. For the purpose of this report. such as an error in an action or something as simple as clear indication that an action is taking place. Design Principles The product will be designed based on the 12 principles of Human-Computer Interaction design. their placement and their spacing. the interface will be evaluated on the consistency of the visual style. appropriate. particularly touch screen devices like the Apple iPhone. as related to interaction design (Norman. For the purpose of this report. icon or symbol. as well as the use of appropriate metaphors. where the design specifications for Microsoft and Symbian are discussed. 2008). This could be by use of a loading icon or screen.is the feedback polite. Some touch screen devices will have styli to be able to make selections. The principles. whether the interface will feel familiar to user. however. This is reflected in the book “Mobile Interaction Design” (Jones & Marsden. the design should take into consideration users that do not have this functionality. but the information that is also communicated back to the user. the conviviality of the product. the interface will be evaluated on the familiarity of the icons and symbols used. it will relate to how easy it is for a user to move around the web application and then add or remove items from their shopping basket. the consistency of the design. such as buttons and text. the affordance of icons and buttons. the conviviality of the system . Fitts’s Law affects the size of buttons and icons. as defined by Benyon. Microsoft specifies that menu items should be listed in the order of anticipated frequency of use.COMP1649 Interaction Design 3. Page 7 of 18 . Methodology Used The product will initially be developed using a Rapid Application Development tool. visually. rather than responsive design. supplied by jQueryMobile. RAD is an appropriate tool to use in conjunction with the chosen design principles. called ThemeRoller.2. Using this tool.COMP1649 Interaction Design 3. CSS3 and jQueryMobile to develop a basic functioning application framework. The styling for the application can be developed and applied using another rapid development tool. This will constrain the elements to what is feasible for mobile web application development. which can be applied in the RAD tool. This tool allows the creation of various themes. which uses HTML5. it is possible to see the how the various components will work together. as it allows for regular reevaluation of the product against the evaluation criteria. within a fixed. based on colour contrasts etc. COMP1649 Interaction Design 4. Multimedia use rationale As this is an application that is designed to provide previews of audio and video items. as they may have seen the image before. video will be in the MPEG-4 format. The use of static images. all support the HTML5 “poster image” attribute of the video element..2. This means that a static image can be displayed to advertise the video. Additionally.d. Still images will be JPEGS or PNG. Multimedia types used The types of media that will be used for this product will be still images. Android devices and Blackberry. will help a user more quickly identify that they are navigating to the correct content. Static images will also be used to display the album or single covers for the audio choices. 2012). The formats specified previously for these two types of content are defined by the capabilities of the devices that the users will have to display the content (Google Inc. audio files will be in MP3 and OGG format. Using Multimedia Content 4. iOS5 on iPhone. Page 8 of 18 . video and audio.) (Sights. 4.1. Of the three main devices/operating systems. that will either be album covers or official film/series images (such as a DVD cover or poster). n. the primary content will need to be video and audio clips. evidence of the main menu system is shown in each image. Are the instructions clear regarding purchase? Benyon’s Principles – Effectiveness 8. Can a user easily select an item and add it to the basket? 10. The example provided here is for a music type. In Figure 2. TV and music. In Figure 1 and Figure 2. Are there different routes to viewing the same content available? 13. Is the menu system simple? 9. The images show the well sized buttons and in the case of the content page. is an example of how the content is displayed to the user. the user is presented with a list of options.g. Is the functionality consistent throughout the application? 4. This category format is used for all three types of content on offer.1. The final image. Do the instructions/messages provided to the user promote inclusion? 5. Figure 3. Are the interactive devices (e. Evaluation 5. Can a user register quickly? Benyon’s Principles – Accommodation 12. In the following examples. by providing users with large buttons which are wellspaced and well defined menu options. buttons) appropriately sized and spaced for touch screen use? The interface takes into consideration the use of Fitt’s Law. Page 9 of 18 . Are buttons. the user is presented with a list of the titles available in a given category. based on the design principles that informed the interface design: Fitt’s Law 1. Is the design consistent throughout the application? 3. movies. buttons) appropriately sized and spaced for touch screen use? Benyon’s Principles – Learnability 2. In Figure 1. the list presented is of the movie categories. Product Evaluation Fitts’s Law Are the interactive devices (e. Can a user change their mind and remove an article from the basket? 11. images suitably visible? 7. Evaluation Criteria The interface will be evaluated on the following criteria. text. the spacing between buttons.g. Is there perceived affordance for the interactive elements? 6. ensuring that the user has less opportunity to select the wrong option. Does the application use familiar icons and terminology? 5.2. Is the use of colour within the interface appropriate? 14. which is the same format used for all three content types.COMP1649 Interaction Design 5. The layout order and the button style is the same for each content type. that the application has been specifically designed for. the footer floats. The drawback of using a fixed footer means that when viewed on a smaller screen (such as an iPhone). This was the trade-off required for consistency when viewed on larger/tablet device. as per Figure 1 and Figure 2. Page 10 of 18 . The main navigation choices are provided at the top of the screen. to ensure that when the visitor navigates between these pages. The navigation through the various categories for content type and the contents of each category also remains the same. although styled in different colours. whilst a search bar (non-functional in the prototype) is provided at the bottom of the page. and occasionally covers content. are presented in the same rounded corner format. The preview pages have the same format.COMP1649 Interaction Design Figure 1 Choosing a Movie category Figure 2 Choosing a Comedy TV series Figure 3 Previewing an album Benyon’s Principles – Learnability Is the design consistent throughout the application? All of the pages within the web application follow a consist format for navigation. Figure 4 A preview of a film Figure 5 A preview of a TV series Figure 6 A preview of an album All content types are previewed in the same way (Figure 4. such as an iPad. depending on category and whether a product already exists in the basket (Figure 4 and Figure 6). they know what to expect and what the buttons do. All buttons. Figure 5 Figure 6). on a white background. which gives the buttons depth and pushes them out of the screen. as the options to “rent” or “buy” for movies and TV series isn’t as descriptive as it could be. this may not be a purchasing context that they are familiar with. Are buttons. the preview pages offer the users a chance to Rent or Buy movies and TV series and for music. The music purchase is slightly more self-explanatory than for the purchase and renting of video content. is required. users can get Digital or CD copies. or additional information could be provided. regardless of content type. Further clarification as to what these terms mean. The TV (Figure 8) and movie (Figure 7) icons are not as necessarily immediately identifiable. The menu icons are generally quite easy to discern the content type. although the black buttons on the dark blue of the music pages is less distinctive than when viewed on movie and TV pages. Does the application use familiar icons and terminology? Figure 7 The customised MOVIES icon Figure 8 The customised TV icon Figure 9 The customised MUSIC icon Figure 10 The customised BASKET icon The icons used follow traditional concepts. Benyon’s Principles – Effectiveness Is the menu system simple? The primary menu system for the application is very simple. as black text has been used for pale background pages. Excluding the images used for video posters and album covers. The main issue where buttons may not be as visible is on the login and registration pages. therefore. Are the instructions clear regarding purchase? Currently. Some of the terminology could be reworded. the rest of the images are monochrome and stand out well against button backgrounds. there is already a perceived affordance and expectation for the user. The image of a TV with an aerial will soon be obsolete. such as play/pause. or in the context of the menu system. images suitably visible? There is good foreground to background contrast for text on all pages. Buttons have been coloured so as not to blend into the background on preview pages. Not all users will have experienced iTunes if they are Android or Blackberry users. by breaking content types Page 11 of 18 . The play/pause button performs the same action. where a user can rent or permanently purchase digital content. Once the user goes into a specific section. the menu becomes slightly more complex. whether through further instruction on the preview page. like the blue used for the search or header bar. or a pop-up dialogue explaining what these terms mean. given the digital TV revolution. The buttons should have been a different colour. text. with only five main sections that a user can visit. Is there perceived affordance for the interactive elements? Because the interface uses common forms for both navigation and action (buttons).COMP1649 Interaction Design Is the functionality consistent throughout the application? Functionality remains consistent throughout. Buttons are also clearly distinguished from the background on the preview pages and all buttons have gradients in their colour. when considered in context. whilst white text has been used in pages with dark backgrounds. The concept behind “rent” and “buy” was influenced by iTunes. to be more visible. where the buttons are white. when viewed without supporting text. as they are required to obtain information and to be able to accurately bill someone. or despatch a purchased item. the purchase type. or interface. there is also space to provide the alphabetised list and the search functionality. Page 12 of 18 . Figure 12 The registration page Figure 11 The application basket Can a user register quickly? Registration forms are a contentious issue in many designs. The assumption has been made that the user will not want to purchase more than one of anything. this would be amending either the number of an article in their shopping basket or cart. where necessary. As per Figure 11. the interface has been designed to allow the user to remove an article from their basket (in the prototype this is non-functioning). more accommodating – giving the user more agency. to get them into the registration process. In the situation of an online shopping application. The product provides several routes for a user to see a preview. they will be redirected to a parent site. Once an item is in the basket.COMP1649 Interaction Design into categories. delivery information. or simply removing it all together. The prototype has only one working route. 2009) therefore. as the application is designed to prompt users to buy the digital version – of which they would only require one. The issue is that people do not like to fill in forms (Vora. which is accessed through the category of each content type. When visiting a preview page. to preview the content and then two buying options. users should be able to easily recover from an error. such as a rental for a movie. Can a user easily select an item and add it to the basket? It is very simple for a user to select an item to enter into their basket. the form for the prototype has been designed to obtain the most basic information about a user. The concept behind this form is that once the user has entered their details. when they revisit the page. Can a user change their mind and remove an article from the basket? According to Beynon’s principles of effectiveness. Benyon’s Principles – Accommodation Are there different routes to viewing the same content available? Benyon suggests that providing users with various methods to obtain the same information makes an application. although this would be presented in the same manner as the category menu. however. the visitor has three options. is highlighted. where the user will verify their purchases and they will then follow a step-by-step process to enter billing information and. The prototype only offers links from categories and does not enable the user to look through an A-Z. the users are given the suggestion to “click here to preview”. but are repeatedly told that they will need to sign-in or register to purchase. These instructions are not repeated within the preview pages. but can be found on the home page. header and footer.COMP1649 Interaction Design Is the use of colour within the interface appropriate? Colour has been used within the application to differentiate between the areas that the user is visiting. as this provided the greatest text to background contrast and was a natural progression from the very pale blue used for the movies section. (Fraser & Banks. the user receives very little feedback from the system. can determine that they can browse the application and preview without needing to buy. registration and basket pages. White was used for the non-content specific pages. Do the instructions/messages provided to the user promote inclusion? Within the application. although this could potentially be seen as over-bearing and be off-putting for the user. although the user is provided with small snippets of information and instructions. To tie the sections together. the non-content specific areas use blue within the navigation system. The application uses various shades of blue. although not explicitly stated. 2004). On the preview pages. Page 13 of 18 . The user. The user is not offered very many opportunities to feel “included” by the application. as this is thought to be both calming and less strenuous for the eyes. This was to ensure that the user would be aware that they would be redirected away from the application to complete their purchase. as it is quite sterile. login. This would foster more of a sense of belonging. so that the user is not overwhelmed with content. the product could include further options for the user. as the user will see that there are already users with similar tastes. to improve the visibility of the buttons on purchase/login/register pages. such as on the category pages. The user should also receive more feedback from the system. but knows that it is there if they wish to view it. the product interface meets the majority of the evaluation criteria. Conclusion Overall. with the option to review their basket. the user should receive a prompt confirming that they have just put something in the basket. with the potential to include reviews. visibility of buttons for previews and consistency in design/function have been met through the design.COMP1649 Interaction Design 6. If the prototype were turned into a full product. These could be included using collapsible content. The application could also provide more information as the user browses the pages. the experience is very clinical and so more effort could be made to welcome the user. Although the intention is clear. With further development. The primary concerns of usability. Page 14 of 18 . or carry on browsing. but this is because it was designed with the view of being a prototype and to show the features available within the interface. These pages currently provide no further information that what is immediately visible in the menu. particularly within the non-content specific pages. more than how the product would function if implemented as a full product. The higher level of functionality in the product was limited. such as a “people who liked this also liked…” further down the preview page. Further refining of the colour scheme. The details of the available functionality and preview content can be found in Appendix A. in terms of navigation. as defined against the design principles adopted. should be considered. . Shea. 2008. [Film] Directed by Daniel Alfredson. 2011.jnd.pdf [Accessed 27 April 2012]. Sights. Page 15 of 18 . Fitts's Law.com/today_uk_import/yg-omni-hotwireprsmartphones-040411. Android Supported Media Formats. The Complete Guide to Colour.. Vora. USA. 2012. Common mobile web design mistakes. Michael J. Jones. Canada: Bonanza Productions. [Film] Directed by Pamela Fryman.html [Accessed 26 April 2012]. Designing Interactive Systems: a comprehensive guide to HCI and Interaction Design. Chichester.. Pictures. A.. D. [Film] Directed by Steven Spielberg. Gleave. 2012. Germany: Nordisk Film. References and Bibliography Adkins. Lewes: The Ilex Press Limited. Paul Holahan. [Online] Available at: http://www. Harry Potter and the Deathly Hallows Part 2. [Film] Directed by David Yates. Paul A. Rogers. [Online] Available at: http://developer. Sharp. [Film] Directed by Jack Bender. How I Met Your Mother. [Online] Available at: http://www. Thomas J. Rodríguez.org / Affordances and Design.. Benyon. UK: John Wiley & Sons Ltd. The Girl Who Played With Fire. M..COMP1649 Interaction Design 7. Fraser. [Sound Recording] (XL).com/compare/browser/ios50/android40/bb10. n. [Sound Recording]. Mobile Interaction Design. Castle.webdesignerdepot. Dark Paradise.d. Sweden. Norman.com/2012/02/common-mobile-web-design-mistakes/ [Accessed 26 April 2012].interaction-design. Edwards. 2nd ed. 2007.html [Accessed 27 April 2012]. David Barrett. Chichester(West Sussex): John Wiley & Sons. Göktürk. 2009. 2009. [Film] Directed by Rob Bowman. 2009. Google Inc.android. 2008. & Preece. & Wilson. 2011. Bays Thomas Productions. [Sound Recording] (Ministry of Sound). Plastic Smile. Don Norman's jnd. YouGov. John Terlesky.yougov. New Zealand: Columbia Pictures. [Online] Available at: http://www. Bad Robot. Interaction design: beyond human-computer interaction. 2011.com/guide/appendix/media-formats. 2004. USA.mss/affordances_and. London: Morgan Kaufmann. L. [Online] Available at: http://html5test. D. Bryan Spicer. Jeff Bleckner. Bill Roe. E.html [Accessed 26 APril 2012]..How well does your browser support HTML5?. & Marsden. 2nd ed. T.html [Accessed 27 April 2012]. Alcatraz. 2011. del Rey.. Y. 2004. USA: 20th Century Fox Television. Web application design patterns. G. The HTML5 test ... [Online] Available at: http://cdn. M. H. 2012. Denmark. 2010. A. Wright. D. Harlow: Addison-Wesley... USA: ABC. 2012..org/dn. The Adventures of Tintin: The Secret of the Unicorn. Someone Like You. 2011.. USA/UK: Warner Bros. J. & Banks. 2005. Rob Greenberg.org/encyclopedia/fitts_law. P. P. Smartphones (Hotwire PR). The specific purchase type is indicated by a white button. Lana del Rey – Born to Die) Basket Allows action on the following buttons Check out (login) Page 16 of 18 .COMP1649 Interaction Design Appendix A – Prototype Functional Pages / Options The prototype has been set up with preselected items existing in the basket. How I Met Your Mother – Season 7) Sci-Fi/Fantasy (Alcatraz – Season 1) Music Allows navigation to the following categories Dance/Urban (Example – Playing in the Shadows) Rock/Pop (Adele – 21. The Girl Who Played With Fire) Sci-Fi/Fantasy (Harry Potter and the Deathly Hallows Part 2) TV Allows navigation to the following categories Action (Castle – Season 1) Comedy (Castle – Season 1. Three products available for each content type: Movies TV Music Harry Potter and the Deathly Hallows Part 2 The Girl Who Played With Fire The Adventures of Tin-Tin Castle – Series 1 How I Met Your Mother – Series 7 Alcatraz – Series 1 Adele – 21 Example – Playing in the Shadows Land del Rey – Born to Die Page Functionality: Home Page Allows navigation to main content type pages and “just added” Just Added Allows navigation to content type categories Movies Allows navigation to the following categories: Drama (Tin-Tin. which are denoted when visiting the previews pages. Links provided back to basket contents Login Allows action on “Register” only “Login” and text fields provided for interface layout purposes only. Preview Pages Items cannot be added to the basket – purchase buttons for interface layout purposes only. Play / Pause button functioning for all previews Page 17 of 18 .COMP1649 Interaction Design Go Back (home) “Remove” returns user to basket and does not remove the article from basket. Register Text fields and button provided for interface layout purposes only. For interface layout purposes only. .....................................................................................................................................................................11 Figure 11 The application basket ..................................................................................................................................................................11 Figure 9 The customised MUSIC icon ...11 Figure 8 The customised TV icon ............................10 Figure 4 A preview of a film ......................10 Figure 6 A preview of an album.......................................................................12 Page 18 of 18 ..................................................................................................................................................................................................................10 Figure 3 Previewing an album .......................10 Figure 5 A preview of a TV series ..................................................COMP1649 Interaction Design Appendix B – Table of Figures Figure 1 Choosing a Movie category ......................10 Figure 7 The customised MOVIES icon ..........................................................................................................10 Figure 2 Choosing a Comedy TV series .......................................................................................................................................................................................................................................................11 Figure 10 The customised BASKET icon.........................................................................................................................................................................................................................................................................................................................................................................................12 Figure 12 The registration page.........................................................................................................................................................