Beruflich Dokumente
Kultur Dokumente
interactive system
COMP1649 Interaction Design
http://stuweb.cms.gre.ac.uk/~
Contents
1.
Introduction .................................................................................................................................................................. 2
2.
3.
4.
5.
2.1.
2.2.
2.2.1.
2.2.2.
2.2.3.
Conclusion ........................................................................................................................................................ 5
3.2.
4.2.
Evaluation ...................................................................................................................................................................... 9
5.1.
5.2.
6.
Conclusion ...................................................................................................................................................................14
7.
Page 1 of 18
1. Introduction
The brief required that a mobile applet needed to be designed based on one of four scenarios. The applet needed
to include multimedia artefacts.
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, to cover everything they would
need to know; Social networking for current students within the university or a game for 5 to 7 year olds to
promote green environment issues.
The application could be mobile web or a platform specific applet. In either case, this could be on a mobile phone
or a tablet device.
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
According to statistics from a report by YouGov (2011), 54% of smartphone users are male. 18.7 % of users are
18 to 24; 26.7% of users are 25 to 34; 23.5 % are 35 to 44; 13.5% are 45 to 54; 17.6% are 55+. Therefore, the
majority of smartphone users could be considered to be males between the ages of 25 to 34.
The report also states that of the males with smartphones, 19% selected music apps amongst their top 3 most
used apps, whilst shopping apps were only ranked in the top three by 8% of users. Female smartphone users had
similar figures, with 16% using music apps and again, only 8% using shopping apps. From these figures, it would
suggest that the primary focus of the applet should be the multimedia content, rather than focusing on the sale.
Cognitive Processes
Attention
When the user visits the mobile web application, they will be visiting with a purpose - to preview a multimedia
artefact. In the context of this applet, they will be able to view short videos of films and audio clips of music.
When a user has a specific goal in mind, they will assess the presented information to map it to their goals, such as
Is the information I want on this page? No, I must follow this link to get to category X.
It is therefore important that the information provided to the user is relative to the environment and the given
task. It should also be ordered in a logical and useful manner. The screen, particularly being quite small on smart
phones (over larger mobile tablets), should avoid be too cluttered and space used effectively.
Perception
The process of perception follows on from attention, in that it mainly regards how information is presented. To
ensure that users are able to correctly perceive the meaning of the information presented to them, careful
consideration should be given to the following: icons (and other graphical representations) should clearly define
meaning and where the visual representation is abstract, should be clearly labelled; grouped items should be
spaced well and where possible, defined by borders, rather than coloured backgrounds, where on the same page
Page 3 of 18
Memory
Memory is the recalling of knowledge. This could be through having to provide the answer to a question, or
through recognition, when shown a picture and asked to recall a fact. It has been shown that a change of context
can affect the ability to recall knowledge, despite the information being previously known (Sharp, et al., 2007).
However, the more frequently a task is completed, the easier it becomes to recall.
Therefore, 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. The use of icons, buttons and links should work in a
familiar way, to promote recognition, rather than recall, which will simplify the tasks for the user and reduce
memory load.
Learning
Learning, in terms of human-computer interaction can be thought of in two ways: learning how to use or using to
learn. Users tend to learn through doing, rather than reading (Caroll, 1990 cited in Sharp et al., 2007), therefore
the interface should encourage exploration, but also guide users into selecting the most appropriate actions. This
could be achieved by using the correct icons to play a video or add a purchase to the shopping cart.
Cognitive Frameworks
There are several cognitive frameworks that are used to predict and explain human behaviours. There are five
main theories in relation to interaction design; however, the three discussed below will be taken into consideration
for the design.
Mental Models
Mental models are the conceptual ideas that humans have regarding how things work. This can be based on
assumptions or facts. Assumptions are usually based on previous experience. An example cited by Sharp et al
(2007) is the distinction between a running tap and central heating. We assume that because a running tap
Page 4 of 18
Theory of Action
The theory of action framework is related to the concepts of gulf of execution and gulf of evaluation. This is
a goal driven framework. A user has a goal, they decide how they will achieve it, they perform actions (this could
be a specific sequence). They then receive feedback from whatever interface they have used to perform the
actions (such as a browser), they interpret the information they receive and evaluate whether the information
received has met the original goal. The aim should be to reduce the cognitive effort of the user.
The main goals of visitors to the mobile web application will be to preview video and music content, with an
underlying possibility to purchase. The aim of the web application should be to easily allow users to view or listen
to the desired content.
External Cognition
External cognition has three main activities / processes. The first is externalising. This reduces the memory load
for the user and relies on visual cues, which could be user generated, such as a to-do list. The second is
computational off-loading, which requires a tool to solve a problem, such as a calculator to answer a mathematical
question. The third is annotating and cognitive tracing, which is the manipulation of external data, such as
crossing off items on a shopping list list (annotation) or re-sequencing items, such as a shopping list, to be more
effective when in store (cognitive tracing).
The interface design can use externalising, by providing visual clues as to what pages have been visited, such as
visited links, or if a product is already in the users basket, highlighting the product in some way. Another cue that
could prompt the user is the use of showing the number of items in the shopping basket, to prompt the user to
complete their transaction.
2.2.3.
Conclusion
Page 6 of 18
Page 7 of 18
Page 8 of 18
5. Evaluation
5.1. Evaluation Criteria
The interface will be evaluated on the following criteria, based on the design principles that informed the interface
design:
Fitts Law
1. Are the interactive devices (e.g. buttons) appropriately sized and spaced for touch screen use?
Benyons Principles Learnability
2. Is the design consistent throughout the application?
3. Is the functionality consistent throughout the application?
4. Does the application use familiar icons and terminology?
5. Is there perceived affordance for the interactive elements?
6. Are buttons, text, images suitably visible?
7. Are the instructions clear regarding purchase?
Benyons Principles Effectiveness
8. Is the menu system simple?
9. Can a user easily select an item and add it to the basket?
10. Can a user change their mind and remove an article from the basket?
11. Can a user register quickly?
Benyons Principles Accommodation
12. Are there different routes to viewing the same content available?
13. Is the use of colour within the interface appropriate?
14. Do the instructions/messages provided to the user promote inclusion?
Page 9 of 18
All content types are previewed in the same way (Figure 4, Figure 5 Figure 6). The preview pages have the same
format, to ensure that when the visitor navigates between these pages, they know what to expect and what the
buttons do. All buttons, although styled in different colours, depending on category and whether a product
already exists in the basket (Figure 4 and Figure 6), are presented in the same rounded corner format.
Page 10 of 18
The icons used follow traditional concepts, such as play/pause. The menu icons are generally quite easy to discern
the content type, when considered in context. The TV (Figure 8) and movie (Figure 7) icons are not as necessarily
immediately identifiable, when viewed without supporting text, or in the context of the menu system. The image
of a TV with an aerial will soon be obsolete, given the digital TV revolution. Some of the terminology could be
reworded, or additional information could be provided, as the options to rent or buy for movies and TV
series isnt as descriptive as it could be.
Is there perceived affordance for the interactive elements?
Because the interface uses common forms for both navigation and action (buttons), there is already a perceived
affordance and expectation for the user. Buttons are also clearly distinguished from the background on the
preview pages and all buttons have gradients in their colour, which gives the buttons depth and pushes them out
of the screen.
Are buttons, text, images suitably visible?
There is good foreground to background contrast for text on all pages, as black text has been used for pale
background pages, whilst white text has been used in pages with dark backgrounds. Buttons have been coloured
so as not to blend into the background on preview pages, although the black buttons on the dark blue of the
music pages is less distinctive than when viewed on movie and TV pages. Excluding the images used for video
posters and album covers, the rest of the images are monochrome and stand out well against button backgrounds.
The main issue where buttons may not be as visible is on the login and registration pages, where the buttons are
white, on a white background. The buttons should have been a different colour, like the blue used for the search
or header bar, to be more visible.
Are the instructions clear regarding purchase?
Currently, the preview pages offer the users a chance to Rent or Buy movies and TV series and for music, users
can get Digital or CD copies. Further clarification as to what these terms mean, whether through further
instruction on the preview page, or a pop-up dialogue explaining what these terms mean, is required. The music
purchase is slightly more self-explanatory than for the purchase and renting of video content. The concept behind
rent and buy was influenced by iTunes, where a user can rent or permanently purchase digital content. Not all
users will have experienced iTunes if they are Android or Blackberry users, therefore, this may not be a purchasing
context that they are familiar with.
Page 13 of 18
6. Conclusion
Overall, the product interface meets the majority of the evaluation criteria, as defined against the design principles
adopted. The primary concerns of usability, in terms of navigation, visibility of buttons for previews and
consistency in design/function have been met through the design.
Further refining of the colour scheme, particularly within the non-content specific pages, should be considered, to
improve the visibility of the buttons on purchase/login/register pages. The user should also receive more
feedback from the system. If the prototype were turned into a full product, the user should receive a prompt
confirming that they have just put something in the basket, with the option to review their basket, or carry on
browsing.
The application could also provide more information as the user browses the pages, such as on the category
pages. These pages currently provide no further information that what is immediately visible in the menu.
Although the intention is clear, the experience is very clinical and so more effort could be made to welcome the
user.
With further development, the product could include further options for the user, such as a people who liked
this also liked further down the preview page, with the potential to include reviews. These could be included
using collapsible content, so that the user is not overwhelmed with content, but knows that it is there if they wish
to view it. This would foster more of a sense of belonging, as the user will see that there are already users with
similar tastes.
The higher level of functionality in the product was limited, but this is because it was designed with the view of
being a prototype and to show the features available within the interface, more than how the product would
function if implemented as a full product. The details of the available functionality and preview content can be
found in Appendix A.
Page 14 of 18
Movies
TV
Music
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, 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, 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, Lana del Rey Born to Die)
Basket
Allows action on the following buttons
Check out (login)
Page 16 of 18
Go Back (home)
Remove returns user to basket and does not remove the article from basket. For interface
layout purposes only.
Links provided back to basket contents
Login
Allows action on Register only
Login and text fields provided for interface layout purposes only.
Register
Text fields and button 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
Page 18 of 18