daffodil bit(s3) comp-1649_week 02_4 example2

27
Student Name: Yun Kar Ly, Student Number: 000553694 COMP1649 INTERACTION DESIGN Coordinator: Student Name: Student No.: Date Due: Word count: 5,131

Upload: university-of-greenwich

Post on 13-Apr-2017

10 views

Category:

Education


3 download

TRANSCRIPT

Page 1: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Student Name: Yun Kar Ly, Student Number: 000553694

Page 1

COMP1649 – INTERACTION

DESIGN

Coordinator:

Student Name:

Student No.:

Date Due:

Word count: 5,131

Page 2: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 2

Table of Contents 1. Introduction ..................................................................................................................................... 3

2. Evidence of how cognitive psychology influences the way users will interact with the system ...... 4

3. Design principles .............................................................................................................................. 8

3.1 Accessibility ................................................................................................................................. 8

3.2 Usability ...................................................................................................................................... 8

3.3 Familiarity ................................................................................................................................... 8

3.4 Simple Design .............................................................................................................................. 8

3.4 Grid ............................................................................................................................................. 8

3.5 Colour Contrast ........................................................................................................................... 9

3.6 Consistent ................................................................................................................................... 9

4. Methodology ................................................................................................................................. 10

5. Task Analysis ................................................................................................................................... 11

6. Rationale for the use of Multimedia Applications and Development ............................................ 12

6.1 Device ....................................................................................................................................... 12

6.2 Images ....................................................................................................................................... 13

6.3 Media Player Functions ............................................................................................................. 13

6.4 Low Fidelity Design ................................................................................................................... 14

6.5 High Fidelity Design .................................................................................................................. 15

6.6 Final Design ............................................................................................................................... 16

6.7 Scenario .................................................................................................................................... 18

7. Design ............................................................................................................................................. 19

7.1 Layout ....................................................................................................................................... 19

7.2 Colour ....................................................................................................................................... 20

7.3 Images ....................................................................................................................................... 20

7.4 Navigation ................................................................................................................................. 21

7.5 Grid ........................................................................................................................................... 21

7.6 Button Functions ....................................................................................................................... 21

7.7 Icons/Metaphors ....................................................................................................................... 22

8. Evaluation ...................................................................................................................................... 23

8.1 Music Application Evaluation.................................................................................................... 23

9. References ...................................................................................................................................... 25

Page 3: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 3

1. Introduction The aim of this coursework is to create application within the area of multimedia, which

could consist of any of the following:

Preview of making a movie and/or music sample

Essential information for Greenwich University new students

A social network site for students within the University

A game to promote green environment issues to children aged 5-7 years of age

The application that has been chosen to create and will be carried out over the

development of this project, will consist of a music application, allowing users to preview

different types of music, whilst providing them with lyrics. In order to carry out this project

successfully, a methodology will be followed, to ensure that all stages are carried out on the

project successfully and to ensure that the multimedia application is developed in a high

standard.

Furthermore, a number of different design principles will be adhered to and considered,

which will help aid develop an application that is designed to help users easy use the system

and find what they are looking for. Cognitive psychology will be researched into, which will

discuss how it has an effect on the way in which people interact with systems.

All decisions made on the final product of the application, such as the layout, colour, theme

etc, will be supported with the research undertaken, to ensure for a high standard of

development from the interactive system.

Page 4: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 4

2. Evidence of how cognitive psychology influences the way users will

interact with the system

A number of different researches have been carried out on how people interact with

interactive multimedia systems and how cognitive psychology has an impact of this

interaction. Furthermore, guidelines have been reviewed that help designers consider

factors on how users are affected in terms of their behaviour when using systems. Cognitive

psychology can be broken down into many different cognitive processes. Some of these will

be discussed below:

Perception

Perception is a process that designers need to consider as it would affect the way in which

users obtain information within the system, through the use of senses, including eyes, ears

etc. In order for users to interact with any given system effectively and efficiently,

information needs to be presented in a way so that it is easy to perceive and understand. In

order to help aid users in perceiving information correctly and easily, some of the following

things need to be considered:

- Good use of visual aspects including colour, icons, symbols etc.

- Appropriate text styles, sizes, white spaces

- Use of audio where appropriate, through the use of media players

Visual perception is a very important factor to consider in design, for instance the use of

colour. Colour can be used to present different means, for example the colour red can give

users a sense of danger, or help them perceive something as stop. Colour has an effect on

the way people use systems, which lead them into carrying out actions. An example of this

can be seen with the use of hyperlinks within websites. When a user hovers over hyperlinks,

they typically change colour, allowing users to perceive these as clickable links. [Colour

Matters, 1995 – 2011].

Page 5: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 5

Attention

The process of attention allows individuals to attend to specific events of situations under

occurrence, whilst ignoring other things around their surroundings. It enables us to give

complete focus to selected things, given that information is made clear to our senses and is

made relevant [Rogers, Sharp and Preece, 2011].

Attention is made up on two different senses, visual and auditory. Visual attention is the

process of reading and relies on relevant information being provided to users, in a way that

the information is styled and laid out, to ensure that users can give attention and focus to a

particular area of relevance. However, users tend to lose concentration and focus on

relevant information when it is surrounded by information that is irrelevant, making it

difficult for users to pay attention to areas of importance.

Auditory attention is the process of gathering information through the use of sound. Users

have great difficulty in attending to or understanding passages of speech when other

auditory information is being presented in the background at the same time [Cherry, 1953].

An example of auditory attention is when someone calls out our names; we immediately

attend to this information and respond appropriately.

In terms of a multimedia application, the system should be created in a way that it avoids

problems such as obtaining information from one page, to another. In general, information

presented within one page, should not affect users from obtaining new information in the

next [Mike Beare, Sara Jones and John Sapsford-Francis, 1994], [Alleydog, 1998 – 2012].

Page 6: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 6

Memory

Memory is another cognitive process, which involves using ones knowledge that they have

with the help of memory and using it appropriately to go about accomplishing certain

actions. Memory enables users to go about using interactive systems effectively, as it helps

them to remember how specific functions operate and react upon their commands.

The way in which information is structured and presented within systems can have an

impact on how a user perceives or remembers information, therefore designers should

ensure that information is presented to users in a way that it is more memorable to them.

To help aid memory within interactive systems, it is essential to place elements within a

user interface where users will easily remember where they are located. Also, the layout of

the system should remain consistent throughout, to ensure that users can easily become

accustomed to the system and not have to relearn how to use it over and over again, upon

navigating throughout the application [Boston University, n.d].

Visualisation is a very important factor to consider within the memory process, as visual

images can be used in a way to pass information to users, without the need of text, as the

way in which the human brain perceives visual information is different from that of text,

audio or sound. The use of visual imagery allows us to remember things very effectively,

taking the example that one may remember somebody’s face, but may not be able to

remember their name.

Furthermore a few principles were made by the researchers Richard Mayer, Roxanne

Moreno and others. These principles are how to help increase user memory and learning

progress [Cisco Systems, 2008]:

Spatial contiguity principle – User learning progress would be enhanced when visual and

text is presented next to each other within the system.

Redundancy principle – The amount of information presented on the page will impact on

users, as not all users are able to obtain much information at once.

Page 7: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 7

Coherence principle – When irrelevant text/visuals are presented and unnecessary sounds

are played in the background, ones memory is affected as not all information relevant to

what they were in search for was presented.

Page 8: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 8

3. Design principles

This section of the report will highlight different design principles that have been

researched, which can help aid designers in producing better designs that are user friendly

and usable to users.

3.1 Accessibility

Accessibility need to be concern while creating the application, this would be area such as

the colours, text size and others. This is to make the application accessible by user with

disabilities. Furthermore this is required by the Disability Discrimination Act 1995.

3.2 Usability

Usability is functions build within the application to make it easy to use for users. If the

application is easy to use this would enable the user to obtain information more efficiently,

whereas if the app is hard to use for user it would put them off from using it.

3.3 Familiarity

This design principle means that the use metaphor/icons within the application should be

used to help aid familiarity to people, therefore enabling them to know what specific icons

mean within the system and allow them to know what their functions will carry out.

3.4 Simple Design

Keep the homepage design simple and attractive but the level of usability within the

application would need to be increased. Furthermore the navigation needs to be easy to

understand.

3.4 Grid

Grids are used to group certain information together with the application to make it clearer

to the users. Also by doing this would give the application a better structure and would

make the information more obvious to user’s senses.

Page 9: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 9

3.5 Colour Contrast

Good use of colours to create contrast within the app will enable the images and

information to appear more appealing and visible to users. Furthermore the selected use of

colours is important as for people with visual disabilities certain colours could be seen as the

same. For example, people who has red/green colour problem the colour red, green and

light orange would be seen as yellow.

3.6 Consistent

Consistency is the practice of keeping layouts and elements the same throughout. Having an

inconsistent structure or style to an application could lead to users becoming confused with

how to use it the application and will make it harder to obtain information.

Page 10: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 10

4. Methodology

The methodology that is going to be used to approach this coursework in order to make the

music application will be RAD (Rapid Application Development). There are many different

types of methodologies, but RAD is the most suitable method as it would enable the

prototype to be created fast and the app would be in good standard.

Furthermore, there would be number of stages that need to be done in order for the music

application to be in good quality, by taking in the researches. The number of stages to be

done is listed below:

Research - Research into cognitive psychology and number of design principles to help

with designing the application. This is to ensure things within the application are easy

use as it not complicated for user to obtain information.

Design – From the information gathered, a rough layout would be created, which will

show an idea of how the navigation or information would be laid out within the

application. Images will also be gathered and the style of the app will be designed in

advance version, in order to get a better vision of the final outcome.

Implementation – Once the designs are decided, Adobe Photoshop will be used to build

the application by putting the designs together. From doing this, it would enable to see

if the application layout is good, if not, the designs could be manipulated and rotated in

order to improve the applications appearance.

Page 11: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 11

5. Task Analysis

This section is a task analysis which would contain information of a task set for user and the

progress/steps they will take in order for the task to be accomplished.

The aim of the task set is to view the song “In the Night Sky” from the band “After School” in

English lyrics.

Steps

0. View After School – In the Night Sky song in English lyric.

1. Open application.

2. Select the “Korean” tab.

3. Click on the band “After School”.

4. Select song title “In the Night Sky”.

5. Click on the English button function.

5.1 View the translated lyric.

View After School – In the Night Sky song in English lyric.

0

Open application.

1

Click on the English button function.

5

Click on the band “After School”.

3

Select the “Korean” tab.

2

Select song title “In the Night Sky”.

4

View the translated lyric.

5.1

Page 12: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 12

6. Rationale for the use of Multimedia Applications and Development

6.1 Device

The device chosen to be used to create for this piece of coursework is the Apple iPad device.

The reason to this is because a number of users can access this application not just from

using desktop but also on the iPad.

Moreover it is efficient for users to obtain information as the hand held device has internet

connection. Therefore this would lead no restriction to the location for user to access for

any information. Furthermore when changes or update are made within the application e.g.

new music with lyric uploaded, the application will display the updates immediately this

would lead the user to be able to view all changes made within the app.

The design and interaction is similar to web browser but then just the layout and structure

of the application on the hand held device will be slight small as the height and weight of

the hand held device are smaller. Therefore the information within the context should be

kept as simple and get the aim of the application straight to the point, this is to reduce the

chance of user needing to scroll down. For considering these would help to reduce the

problems for user getting annoy and are able to obtain the information faster.

Furthermore the application within hand held general support the programming language

XHTML, JavaScript and CSS. Therefore during the implementation of the app user could

consider the type of things that can be inserted into the app, as these can help to increase

the interactivity within. For example the music app could implement function such as enable

user to add the music they like to their own favourite storage, this is a customize tool which

would let user to add the music they like, also this will make it easier for the user to search

for the music they saved.

Besides there are online source that would run a check through the code used to create the

application, this is reduce errors within the application. For example the music app is

created using XHTML, W3C has a online tool which will validate all errors within the codes

and state information why it is a error in order for the creator to fix the issue within the

codes.

Page 13: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 13

6.2 Images

Some users tend to have a better memory in remembering visual images, rather than just

text or any other forms of media. The use of consistent metaphors used throughout an

application can help in making it easier for users to remember the location of functions. The

developed application consists of images of music artists and bands, where names have

been provided below them, to provide users with various different visual methods of

gathering information.

Some user will remember artists or bands by face recognition. Therefore when they look at

the image provided, they will know straight away what artists or bands it is, whereas by

name user might not recall who they are.

6.3 Media Player Functions

The media player functions are designed to be linked to user daily lives, therefore when user

approach these metaphors they would automatically know the type of task it would carry

out once clicked on, which prevents them from having to stop and think of how to use the

functions.

The media player function are used within the application is to enable user to listen to the

music sung by the artists or bands provided. Also lyrics and English translation function

buttons is provided. When the music is being viewed, the lyric button would be

automatically selected to enable users to view the lyric to the song as the words to some

songs are not clear, therefore by having this function would enable the user to understand

and could sing along with the song.

Furthermore, if a Korean song is chosen by the user, the lyrics would be displayed in English,

to how they would be pronounced in Korean. However, users may not understand these

lyrics; therefore a translation button is provided to enable users to translate these Korean

words in English words, enabling them to understand the song.

Page 14: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 14

6.4 Low Fidelity Design

This section is a rough draft drawing from ideas gained and information researched based

on the subject selected. Below is a scanned image of the planned layout structure designed:

Page 15: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 15

6.5 High Fidelity Design

From the basic draft created, the layout will then be created within the Adobe Photoshop, in

order to gain better visual of the application creating for the coursework. Below is a print

screen of the layout outcome:

This image would be the overall layout of the app this is to keep the design and style to be

simple as it would help to make it easier for user to recognize functions.

A pattern design is set as the background but the opacity is set as low to make the

information that would be placed within the area to be more visible to users.

Page 16: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 16

Image and text of

the artist and band

is located next to

each other.

This top part is the

name of the app

with a music note

as logo.

Language of music

offered.

Hyperlink function

for user to see

more artist and

band within the

language selected.

Hyperlink function

for user to see

more songs sung

by the band.

Home button

function is to lead

user back to the

home page.

Artist button

function is to lead

user back to the

Artist page.

Lines had to use

top give the list of

song the band

sang a structure.

Image and

information of the

number songs the

app holds of the

band.

6.6 Final Design

Below are images of the final design with all the functions and images put together within

the design.

Page 17: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 17

Home button

function is to lead

user back to the

home page.

Artist button

function is to lead

user back to the

Artist page.

The bar displays

the name of the

artist or band the

user selected.

This lyric button

will be auto

selected when

user listening to

the music.

This button is to

translate the music

lyric to English so they

user can understand

the meaning.

The media functions are to let the

user have control of the song they

are listening to and know how long

until the song is finish playing.

A scroll bar tool is

provided to let user

knowledge that there

are lyric to view below.

Page 18: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 18

6.7 Scenario

A user wants to use the application to search for a song sung by a particular band and to

learn the lyrics to the song. However, this is the first time they have used this application,

therefore they will have to navigate through the application to look for the song they want

to listen.

Below will be the following stages the user would need to go through in order to find the

song:

Homepage – The user would need to open the application and on the top of the app, the

user would be able to see the language of music the application offers, they would then

need to select the Korean language button.

Korean artists and bands page – Within the page a number of artists and bands should be

displayed with an image and text next to each other. The user would need to search in order

to find the band he/she looking for, once the band is found user would need to select it.

Band songs page – From the list of song display, the user would need to tap on the song

they want to listen.

Music player page – Once the user is on the page, the lyric button would be activated which

would enable the user to view the lyrics of the song and functions is provided within the

page. The user is able to control the music that is playing. Furthermore if the user wants to

know the meaning of the song, he/she can click on the English button which will then

change the lyric to English.

Page 19: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 19

7. Design

7.1 Layout

From the hand held device selected to make the application, the design of the layout would

be an important factor to take into consideration. The reason to this is because the

appearance of the application would be affected. If the layout or structure of the

application is not designed appropriately this could lead users to have negative views

towards it, as it will put them off from using the application. Whereas if the design are done

properly this would help to increase the use of the application.

There are a large number of elements to be considered but the most crucial one would be

headings, position of the navigation, the style of the images and texts.

The heading would need to be position on the top left of the application, generally the

heading size would be big and bold this is to make the name of the application to be

noticeable.

The location of the navigation needs to be placed where it would be easily seen by users.

Furthermore, functions would need to be implemented such as change of colour, underline

or others this is to make the navigation clearer to user the current page they are on.

The size and style of the images need to be appropriate as the size of the iPad is smaller

than websites.

The font use to display information within the application need to be suitable as some font

is hard to be understood by users.

The use of white space within the applications design needs to be used effectively, as white

space allows good spacing between elements, allowing them to be easily obtained by the

user.

Page 20: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 20

7.2 Colour

To check the colour of the overall layout design of the application is suitable for users, a test

would be run though the use of the website “www.vischeck.com”. Regarding to the design

principle “accessibility”, colour is an issue as the colour used within could affect people with

visual disabilities. The result of the testing is shown in the image below:

7.3 Images

The home page of the application consists of images of artists and bands that the

application holds, where users can select specific artists/bands in which they wish to view

more information on. The size of the images is based on the apple guideline for high

resolution on iPad (144px x 144px). All the images have been edited within Adobe

Photoshop to ensure they all are the same size, based on the guideline mentioned earlier

from apple.

Drop down shadows have also been added to the images of the artists and bands, to make

them stand out and make them more noticeable to users.

Page 21: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 21

7.4 Navigation

The location of the navigation used within the application was placed at the top of the

applications interface, in order to make it more noticeable to users, enabling them to simply

carry out tasks and fain the information they needed at a faster pace. The navigation was

kept consistent, to enable users to become quickly familiar with how to make their way

around the system and to prevent confusion/frustration.

The enable users to be aware of what page they were currently on, the link that the user

currently is on will be highlighted a different colour from the other links. Furthermore, due

to the application just being a prototype, the languages offered only consisted of four,

which is Chinese, English, Japanese and Korean.

7.5 Grid

Grids was used within the application to order to give it a strong structure and to allow the

grouping of information where needed. Furthermore, using grids allowed for displaying

information more clearly, which allows it to be more perceivable to users senses. This was a

design principle adapted to by Apple. An example of when grids was used throughout the

application created, was on the page where lists of songs were displayed, displaying a

number of different songs that have been produced by a specific artist/band.

7.6 Button Functions

The buttons used within the application are placed on the top of the systems interface and

have been designed to follow conventions used in other applications, to help aid familiarity

to users, in order to help them carry out tasks effectively.

These buttons are presented to users at the top of the screen to enable them to navigate

back to the previous page in which they were. The size of the buttons created was done

based off of Apples recommendation of 72px wide and 30px high, once again following

conventions and offering familiarity.

Page 22: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 22

7.7 Icons/Metaphors

The buttons used within the media player section of the application are used in many well

known media players such as apples for example. Using these well known buttons to carry

out functions within the media player allows for users to bring over their knowledge and

experience with how to use them and carry out their tasks effectively. This once again aids

familiarity and enables users to quickly come to terms with how to use the functions

provided.

A scroll bar was also provided within certain pages of the application, to help users identify

that they can access further information down the page through the use of scrolling.

Page 23: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 23

8. Evaluation

8.1 Music Application Evaluation

Whilst undertaking this project, the aim was to create and develop a multimedia application

for a tablet device, which would have to be developed through appropriate research, to

enable to application to be produced in a way that it was user friendly and usable to a wide

range of users. Research was carried out on design principles and cognitive psychology,

which helped support design decisions made throughout the applications development and

to help gather an understanding out how users interact with interactive systems.

The application that was created consisted of a multimedia interactive system, which

enabled users to find music from artists and bands that was offered by the application, in

various different languages. The application also enabled users to view lyrics for each and

every song that was played, in order for them to get a better understand of the song being

played. The application offered various functions to users, such as viewing songs of different

languages and enabling them to translate the lyrics of a song that were sung in one

language to another.

The developed application provides users with a good level of usability, as the system

provides users with enough functionality in order to carry out the tasks needed to use the

application effectively. The application draws off of conventions used in other popular

systems, which enable users to quickly come to terms with how to use the interactive

system, enabling them to perceive the information for how it is intended. This is done

through the process of offering users with familiarity.

The application has been designed following the principle of a “simple design”. This enabled

for the application to be produced is a way that information was easy to abstract, with the

use of effective white space, increasing the attention and focus given by users. Furthermore,

consistency was applied through the entire applications development, to ensure that users

became familiar with the application very quickly and enable them to remember where

certain elements have been placed, supporting the cognitive process “memory”.

Page 24: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 24

Overall, the produced application has been a success, through the use of adapting to design

principles established by experts and the research carried out into cognitive psychology.

However, if more time was given to the project at hand, extra functionality would have been

implemented, in order to satisfy the needs of users even further and providing users with

the ability to navigate through the application more easily. Some extra functionality that

could be added if this application were to be created again could consist of the following:

- A favourite section, which would enable users to save their favourite songs to

their very own personalised area within the application

- Offer more music of different languages

- Create a help area, which will allow users to receive help on the application if

needed.

Page 25: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 25

9. References

Alleydog, 1998 – 2012. Cognitive Psychology Class Notes > Attention. [Online] Available at:

<http://www.alleydog.com/cognotes/attention.html> [Last Accessed 11th May 2012]

Apple, 2010. iOS Human Interface Guidelines. [Online] Available at:

<http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/Mob

ileHIG/Introduction/Introduction.html> [Last Accessed 11th May 2012]

Bryan Sullivan and Adam Connors, 2009. Mobile Web Application Best Practises. [Online]

Available at: < http://www.w3.org/TR/2009/WD-mwabp-20091006/#purpose> [Last

Accessed 2nd May 2012]

Boston University, n.d. Visual Perception & Cognition. [Online] Available at:

<http://www.bumc.bu.edu/anatneuro/research/vis-percep-cognit/> [Last Accessed 11th

May 2012]

Cherry, E.C., 1953. “Some experiments on the recognition of speech, with one and two

ears”, J. Acoust. Soc. Am. 25: 975-79.

Chisholm, W, Slation, J and White,J, 2005-2006.Web Content Accessibility Guidelines

(WCAG) 2.0. [Online] Available at: <http://www.w3.org/TR/WCAG20/> [Last Accessed 8

December 2011].

Cisco Systems, 2008. Multimodal Learning Through Media. [Online] Available at:

<http://www.cisco.com/web/strategy/docs/education/Multimodal-Learning-Through-

Media.pdf > [Last Accessed 11th May 2012]

Colour Matters, 1995 – 2011. Welcome to Color Matters. [Online] Available at:

<http://www.colormatters.com/index.php> [Last Accessed 11th May 2012]

Icon Finder, 2011. Rewind icon. [Online] Available at:

<http://www.iconfinder.com/icondetails/51563/26/rewind_icon> [Last Accessed 25th April

2012]

Page 26: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 26

In The Night Sky / 밤 하늘에 by After School RED Romanization, English Translation and

Hangul Lyrics, MV and MP3 DL. [Online] Available at:

<http://www.allfordrama.com/14/post/2011/07/in-the-night-sky-by-after-school-red-

romanization-english-translation-and-hangul-lyrics-mv-and-mp3-dl.html> [Last Accessed

11th May 2012]

Jakob Nielson, 2005. Ten Usability Heuristics. [Online] Available at:

<http://www.useit.com/papers/heuristic/heuristic_list.html > [Last Accessed 8 December

2011].

Joshua Johnson, 2010. 15 Design Tips to Learn From Apple. [Online] Available at:

<http://designshack.net/articles/inspiration/15-design-tips-to-learn-from-apple> [Last

Accessed 25th April 2012]

Mike Beare, Sara Jones and John Sapsford-Francis, 1994. [Online] Available at:

<https://uhra.herts.ac.uk/dspace/bitstream/2299/4855/1/CSTR%2520186.pdf> [Last

Accessed 11th May 2012]

Raissa Katz-Haas, 1988 – 2004. Usability Techniques. [Online] Available at:

<http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html> [Last Accessed

11th May 2012]

Richard E. Mayer and Roxana Moreno, n.d. A Cognitive Theory of Multimedia Learning:

Implications for Design Principles. [Online] Available at:

<http://www.unm.edu/~moreno/PDFS/chi.pdf> [Last Accessed 11th May 2012]

Roger, Y., Sharp, H. and Preece, J., 2011. INTERACTION DESIGN: Beyond Human-Computer

Interaction. 3rd ed., Chichester: John Wiley & Sons Ltd.

Silvia Gabrielli, n.d. Social and Cognitive Factors in the Design and Evaluation of Multimedia

Systems. [Online] Available at: <http://www.bcs.org/upload/pdf/ewic_ir98_paper4.pdf>

[Last Accessed 11th May 2012]

Vischeck, 2012. Color blind image correction. [Online] Available at:

<http://www.vischeck.com/daltonize/> [Last Accessed 11th May 2012]

Page 27: Daffodil bit(s3) comp-1649_week 02_4 example2

COMP1649 – Interaction Design

Page 27

W3C, 1994-2011. Web Accessibility Initiative (WAI) . [Online] Available at:

<http://www.w3.org/WAI/> [Last Accessed 8 December 2011].

W3C, 2010. Introduction to Understanding WCAG 2.0. [Online] Available at:

<http://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-

head > [Last Accessed 8th December 2011].

~Spiritsighs –stock, 2005-2012. Music notes. [Online] Available at: <http://spiritsighs-

stock.deviantart.com/art/Music-notes-15251697 > [Last Accessed 9th May 2012]