Myo pyae phoo pwint(comp1649)

MYO PYAE PHOO PWINT COMP 1649

Page 1 of 31

Student Name: MYO PYAE PHOO PWINT

UOG Student ID: 000844592

Course: COMP1649 – Interaction Design

Center: KMD (Yangon, Myanmar)


Page 2 of 31

No. Table of Content Page No

1. Introduction ………………………………………………………………………………………………… 3

2. Evidences of how Cognitive Processes affect the users while interacting ….. 3-5

with the system

2.1. Cognition

2.2. Cognitive Frameworks

2.3. Evaluation of cognitive processes

3. Design Principles and Methodology …………………………………………………………… 6-10

3.1. Design Principles

3.1.1. About Nielsen and his colleagues Design Principles for UID

3.1.2. About Android User Experience Team Design Principles

3.2. Evaluation

3.3. Methodology Used

4. Multimedia types used in the system ……………………………………………………….. 11

5. Evaluation of University Web Design Prototype for new students……………. 12-22

5.1. Purpose of the new system design

5.2. User Groups

5.3. Use Case Diagram for University Website System for new students

5.4. Primary and Secondary Scenarios

5.5. Prototypes


Page 3 of 31

5.5.1. Low Fidelity Prototype

5.5.2. High Fidelity Prototype

5.5.3. Prototype Evaluation

5.6. Testing

5.7. Nielsen’s Heuristic Checklist

5.8. Final Evaluation

6. Summary………………………………………………………………………………………………… 23

7. Bibliography……………………………………………………………………………………………… 23

Appendix A – Design Principles: Evaluation……………………………………………………… 25-26

Appendix B - Primary and Secondary Scenarios ………………………………………………. 27-28

Appendix C – Testing ………………………………………………………………………………………. 29-30

1. Introduction

In this Interaction Design Coursework, we make the university website prototype for new students

which will be shown in android mobile devices. And as our coursework analysis report, we will present

about how cognitive psychology affect the users in HCI, design principles and guidelines used in the

prototype, methodology which used in our prototype, multimedia application types use. Moreover, we

will also evaluate about the DSDM methodology processes in our prototype: feasibility as purpose of the

new system design, foundation process as Use Case Diagram, Exploration as Prototypes (Low Fidelity

Prototype and High Fidelity Prototype), Engineering as Primary and Secondary Scenarios and Deployment

process for clients as Task Cases.

2. Evidences of how Cognitive Processes affect the users while interacting with the system

2.1. Cognition

Cognition processes, kind of knowing which mean that how we get knowledge from the

environment: “understanding, remembering, reasoning, attending, being aware, acquiring skills and

creating new ideas.”

Cognitive Psychology is the process of studying human’s mental models “perception, learning,

memory, recognition, reasoning, problem solving, increasing decision-making accuracy, manipulating &

navigating, emotions, learning, how people store information and how people achieve their goals”.

2.2. Cognitive Frameworks

In HCI, we can divide the cognitive frameworks as Internal Cognition, External Cognition and

Distributed Cognition.


Page 4 of 31

Internal Cognition is the process of defining human mental models; learn what users believe

about UIs in the system they used such as knowledge of how to use the system and how the system run.

When people use the interactive system in order to develop their mental models, they learn and make the

summary about how to use the systems. These mental models also help to understand how to fix if

unexpected conditions happen with the system and face with unfamiliar systems. Otherwise, the more we

learn about the various systems and their functions, the more our mental models develop. For instance,

mobile application developers have a “deep mental model” of how applications work which allow them to

develop or fix to meet with end-users usability such as menu, navigation, context, color, top-down and

bottom-up process, etc.

External Cognition is the process of combining human or cognitive processes with perception and

manipulation of external representations of information such as books, multimedia, newspapers, web-

pages and so on. In addition, Norman, 1993 said that, the combination of external representations and

physical tools (pens, calculators, computer-based technologies) can also help people’s ability to perform

the cognitive tasks (e.g. attention, learning). The main purpose of combining different representations and

cognitive process is to externalize of reducing memory load (e.g. Birthdays, phone numbers, names),

define computational offloading (e.g. 13354 x 12343, 2 x 3) and annotate and cognitive tracing (e.g.

accessing variety of web UI, computer-based technologies change).

Distributed Cognition is founded by “Edwin Hutchins”; analyzes the processes from the cognitive,

social and physical environment. Its functional system is to collect users, technology, setting and the

interactions to each other (e.g. Flight navigation, computer programming teams).

2.3. Evaluation of Cognitive processes

As we mention above, cognition is the knowledge of human when they interact with the system.

But we can’t evident the cognitive psychology which can’t be accessed or touched by human. However,

we will evaluate the circumstantial evidence of cognitive psychology how they will interact with the

system as follows:

(i) Attention

Refer to the “William James, Psychologist and Philosopher” research, attention control the human

mind, in clear and bright appearance, thoughts about interaction with the system. Otherwise, it is pulling

out things in order to concentrate from the range of possibilities available. For instance, let attention as a

highlighter of the user’s mind. When we access a whole web page via mobile, that highlighter will help to

focus people interest part in the page. Otherwise, attention in users’ mind allow them to avoid

information, sensations and perception which are not required at that moment and just focus user

attention on the information which might be important. For example, the visual senses in user’s attention

scan the information they need in the webpage accessing.

(ii) Visual Perception

According to the Roth ( 1986) analysis, perception of user mind accept the acquired information from the different environment via different senses such as eyes, ears, fingers, it change that information into the experiences of objects, events, sounds and tastes. In perception process, there are memory, attention and language also involved. So, human brain guesses the users’ vision based on their past


Page 5 of 31

experiences and stored information which can assemble user perception of reality. For instance, metaphors like Facebook, Twitter, Google Plus, mail and Search icons, textual and patterns used in the system is easy to distinguish from one another and able to make it simple to recognize what they are intended to represent such as Menu right position, previous page button on screens, etc.

(iii) Memory

It is one of the aspects of cognitive psychology which stores information from the environment via

senses as sensory memory (SM), short-term memory (STM) and long-term memory (LTM). SM can say

as “ultra-short-term memory” and can ignore or degrade quickly within the 200-500 milliseconds after

perception of the information and less than a second. And SM act as partition in the brain for stimuli

accepted via five senses of sight, hear, smell, taste, touch which are kept accurately. Example for

information perception in SM stage, people access the website via mobile and remember what it looked

like within a second of observation.

STM can be defined as working memory and kind of “brain’s Post-it note” which is the temporary

part to call back and process information in the same time. It is made by people attention to an external

mental process, internal thoughts, or both. But it can hold the small amount of information. STM is rather

limited as two scenarios: “When people have to remember stuff” and “When People are problem solving”.

Moreover, the standardized “design patterns” on the web work with STM in the ways of inline validation,

rich pop-up menu which enable users to do activities and the system can also provide required

information context when users don’t understand the concepts of the website.

“Richard Schiffrin (1960s)” said that all information from STM is typically stored into the LTM after

a short time or within a few seconds. LTM is permanent than SMT in human brain and its limit period can

be up to whole lifetime. LMT can be divided mainly as Declarative (explicit) and Procedural (implicit). In

Declarative memory, we can divide in two parts: episodic (user specific experiences) and semantic (user

specific knowledge about the system). The Procedural memory allows us to recognize the things where we

know, how we know how to do the tasks (e.g. how to switch on the computer, how to access the Gmail).

In the LTM’s storage, there is level-of-processing: “Information that is analyzed deeply is recalled well than

information that is analyzed superficially”. For instance, developers build their system design which make

people to remember more about their system as “relevant, humorous, surprising, or reflection, exclusivity:

suggest something interesting, user expectation.

(iv) Learning

In HCI, learning is to understand how to use or access the system or to know the purpose of the

topics in the system. Jack Carroll (1990) said that most of the users are hard to learn the sets of

instructions in a manual of the system. Instead of that, they prefer to “learn through doing.”

(v) Decision-making

This is the kind of reflective cognition which is to think about what to do, what the options are,

what the outcome might be carried out a given topics. In user decision-making process, the conscious

processes, comparing or discussion with others and the use of various kinds of artifacts are included. For

instance, users may ask wanted information via mail or access about the login help or campus map or get

instructions from the web, or combination of these.


Page 6 of 31

[1] (A little big of Cognitive Psychology for lots of Interaction Design, 2012)

[2] (Nielsen, 2009)

[3] (The Human Memory)

[4] (Cherry)

[5] (McLeod, 2007)

3. Design Principles and Methodology

3.1. Design Principles

When we are developing the websites for mobiles, we need to follow the design principles in

order to make our web designs to meet with the users’ usability such as effectiveness, efficiency, safe to

use, utility, easy to learn and memorable and users’ experiences goals such as satisfied, expectation,

exciting, enjoyable, fun, surprising and so on. So, we would like to discuss about the Nielsen and android

user experience team design principles which are the most useful principles to meet with user’s usability

and past experiences. Moreover, based on these design principles, we can think about the users’ past

experiences, expectations, psychology about the visuals and then apply them into our own creativity of

design. In the following topics, we will discuss about the Nielsen and Android User Experience Team

Design Principles and evaluation of these design principles used in mobile websites.

3.1.1. About Nielsen and his colleagues Design Principles for UID [6]

Nielsen and his colleagues make 10 general interaction design principles and they named these

principles as heuristics which are more in the thumb’s nature of rules than specific users’ usability

guidelines. The main purpose of Nielsen heuristics is to identify the problem of user interface design of

website and software. The strength of using heuristics is providing the feedbacks to designers quickly in

the development of first stage design process. The followings are the Nielsen’s Heuristics 10 usability

Principles for User Interface Design:

(i) Visibility of System Status

(ii) Match between system and the real world

(iii) User Control and Freedom

(iv) Consistency and standards

(v) Error Prevention


Page 7 of 31

(vi) Help users recognize, diagnose and recover from errors

(vii) Recognition rather than recall

(viii) Flexibility and efficiency of use

(ix) Aesthetic and Minimalist Design

(x) Help and Documentation

[6]

(Nielsen, 10 Usability Heuristics for User Interface Design, 1995)

3.1.2. About Android User Experience Team Design Principles [7]

Android User Experience Team provides android design principles which are mainly based on user

usability goals and past experiences in system interaction. The main purpose of android design principles

is to catch users’ best interests in mind and apply these into our own creativity and design thinking. The

followings are the Android User Development Team Usability principles for android mobile users:

(i) Enchant Me

Delight me in surprising ways

Real objects are more fun than buttons and menus

Let me make it mine

Get to know me

(ii) Simplify my life

Keep it brief

Pictures are faster than words

Decide for me but let me have the final say

Only show what I need when I need it

I should always know where I am

Never lose my stuff

If it looks the same, it should act the same

Only interrupt me if it's important

(iii) Make me amazing

Give me tricks that work everywhere

It’s not my fault

Sprinkle encouragement


Page 8 of 31

Do the heavy lifting for me

Make important things fast

[7] (Team)

3.2. Evaluation

There are many guidelines in Nielsen’s Heuristics which can be used to evaluate web usability. So,

we will evaluate using one of the university websites which we research and which principles find out in

this website in mobile view:

(i) Visibility of system status

There should be the informed messages or feedbacks about what is going on in the system within the

sensible time for users. For instance, www.uclan.ac.uk , University Website, its system visibility is not

good interaction design for users because user may confuse about which page they arrive or which

link they are clicking. As an example, although users click on the “NAVIGATION” button on this site,

the system doesn’t show interaction like changing button background color or text color or any

visibility status for user. So, user might not sure whether they click on it or not, shown in Figure 3.1

Figure (3.1)

(ii) User Control and Freedom

In the system, there should be the “emergency exit “like undo and redo features for users in order to

skip from the undesired condition. For instance, in www.uclan.ack.uk website, they add the exit route

for users as clicking logo on the top of every page which can go back to the Home Page. So, user can

The system doesn’t show any visibility

status whether user click on it

http://www.uclan.ac.uk/

http://www.uclan.ack.uk/


Page 9 of 31

go back to the home page easily by clicking on the Logo although they reach on other pages.

Therefore, user control feature in this website is acceptable for user, shown in Figure 3.2.

Figure (3.2)

(iii) Consistency and standards

In the system, the consistent and standards of website means that using same fonts in different pages

of website. For instance, the following website uses the same content and layout in each of its web

page, shown in Figure 3.3.

Figure (3.3)

For More Evaluation of Nielsen’s Heuristic Design Principles, GO TO APPENDIX A

3.3 Methodology used [8][9]

There are varieties of methodology for system development process: Classic Life Cycle (rarely

used), Rapid Application Development, Joint Application Development, Star, and Agile: Crystal, Feature-

Driven Development (FDD), Adaptive Software Development (ASD) and Dynamic System Development

Method (DSDM), and the User Centered Design. Among these methodologies, we use DSDM in our system

development process.

DSDM is a kind of RAD Method which is recreated with combination of experiences about full

standards and frameworks by RAD users and suppliers. DSDM is an “iterative and incremental approach”

which focuses on the continuous user involvement. This method is useful in development of the system in

short time and budget can also adjust for requirements of the development process.

There are five phases of life cycle in the DSMD as follow,

(i) Feasibility study: define problems and requirements like cost and technical feasibility in order to

solve business problem faced and meet with business requirements

(ii) Business Study or Foundations: analyze about the business process, user groups, requirements and

goals

(iii) Functional Model Iteration or Exploration: define about the business-based functions of the

computer system

(iv) Design and Build Iteration or Engineering: Identify design prototype, make agree schedule, create

design prototype and review design prototype

(v) Implementation or Deployment: make end user approval and guidelines, train the users, test the

delivery system at end users’ place and review the business requirements and issues

Exit Route

Use same

font in each

page


Page 10 of 31

Dynamic System Development Method Life Cycle

Advantages of DSDM

(i) Active user involvement is imperative

(ii) Team must be empowered to make decisions

(iii) Focus is on frequent delivery

(iv) Fitness for business is criterion for acceptances of deliverables

(v) Iterative and incremental development is mandatory

(vi) All changes during development must be reversible

(vii) Requirements are baseline at high level

(viii) Testing is integrated throughout the cycle

(ix) Collaborative and Co-operative approach

Disadvantages of DSDM

Its cost is too much to implement because in this method, both developers and users are needed

to give trainings to employ it effectively so this method is not suitable to use for small organizations’

system or small projects.


Page 11 of 31

[8] (Dynamic systems development method)

[9] (DSDM Model, 2012)

[10] (Patel)

4. Multimedia types used in the system [11]

In most of the web system, developers use multimedia type’s applications as videos, animations, images,

sounds effects, widgets and text/html in the content.

Video

Why we use videos on our webpages? Because of using videos, we can get a powerful tool which can

improve our webpages’ popularity. Otherwise, we use this tool for sharing knowledge, increasing page

views, attracting and keeping our users. For instance, in most of the web pages e.g. universities, web

designers embedded the You-tube video code and video links of university activities. So, users can easily

find the university videos without searching from other sites.

Sounds Effect

Mostly, web users are really hate of adding sounds on the web pages especially automatic background

sounds which doesn’t have control feature to turn it off. So, if we want to add sounds effect on our web

pages, we need to find out and make sure that it can be the purpose and ads value for our system. For

instance, in the musician and artists’ pages, we need to add music showcases as their work done. And in

forms, developers use the sounds when users click on the buttons which help user to know that website is

processing something. But one thing we need to be careful is that the used sounds should be simple and

enhance rather than overwhelm.

Widgets


Page 12 of 31

Widgets are the parts of GUI which allows user to interact between application and the operating system.

Using widgets, we can provide information and invite users to join our other websites in a numerous ways.

Nowadays, the most widgets which we experienced typically are buttons, dialog boxes, pop-up windows,

selection boxs, windows, toggle switches, forms and social sites widgets (e.g FB, Twitter, Google+).

Moreover, widgets are also used as graphic components and controlling programs. Otherwise, in web

widgets which are used as mini-application to provide information for users on websites, graphic

components and controlling programs as search widgets like google, trackers in eBay, news headlines,

Feeds in Twitter, Friends list in Facebook, clocks in webpages and other “miniature live” applications. For

instance, we are going to use social networks plug-in like Facebook, Twitter and Google+ and we also use

google maps in our system. So, via social networks, users can easily get updates information about

university. Moreover, using google map, users can find the campus locations easily from the website.

Animations

Animation is the kind of recorder on either analogue media like flip book, motion picture film, video tape

or on digital media format such as animated GIF, Flash animation. The reason of using motion images in

our system is to get users’ attention and provide demonstration for users. So, this can be the essential

web tool for web designers. e.g. grids, color and flow? Yes, mostly, this can be the essential tools because

it can increase usability, guide the user (e.g. Click me buttons on the ads page), great animation is subtle

(e.g. slide the subject navigation left or right) and as overall animation is important for users in order to be

ease of use.

[11] (Rotz)

5. Evaluation of University Web Design Prototype for new students

5.1. Purpose of the new system

The purpose of this project is to design the university website by following criteria which will apply

into the user interface and HCI theories and rules. As a research plan, we will identify these design

usability, accessibility and design elements which are going to apply to the potential interface and meet

with user usability goals and past experiences. So, in our report, we will have a review of the research and

requirements specifications which will help to improve the development of the new system. And then, in

our prototype, we will use the W3C draft screen guidelines for mobile website, Nielsen Design Principles

and Android User Experience Team Design Principles. Moreover, in this report, we will provide the task

analysis of design and development process in order to find out the criteria and requirements are met

with usability goal or not.

5.2. User Groups

Adults: Students, Developers

“Not all adults are computer literate in fact most adults are said to have moderate experience with

the web”, (Dawson, A. 2011). Nowadays most of the users (students, developers) are much less attracted

to graphical animation which is used to be favorite text over graphics and also focus on simple and user-

friendly websites.


Page 13 of 31

Disabilities

From the point of view of users, disabilities mean that websites’ visibility and accessibility

problems (Nielson, J.2006). For instance, visual disabilities as combinations of background and foreground

color which used in the websites make the text unreadable for users. Most of the users are rely on their

past experiences interaction interface designs such as fonts, color, navigations, image positions,

metaphors, etc.

5.3. Use Case Diagram for University Website system for new students


Page 14 of 31

5.4. Primary and Secondary Scenario

Use Case: Access School Homepage

Actor: New Students

Primary Scenario

Work Flow

The use case start when students access the university website

(i) Students access the school information

(ii) Students read the School Bursaries and Scholarships, use case end

Secondary Scenario Work Flow

Use Case is canceled at step (1), (2)

When students change their mind to access other pages or topics

For more primary and secondary scenarios of use cases, GO TO APPENDIX B 5.5. Prototypes


Page 15 of 31

There are three main fidelity prototypes such as low fidelity prototype, medium fidelity prototype

and high fidelity prototype. Using these prototypes, we can show our clients in an easy and compact way

about how the system will behave in different situations. Moreover, clients can view that on the computer

in an interactive way. The greatest features of fidelity prototypes are that they can be interactive. For

instance, client clicks on the menu so he can see all the options of the site and click on the wanted pages

which will be loaded in different screen. One thing in all fidelity prototypes is that developers don’t need

to use any line of code in all pages. Moreover, we can get a lot of pros from these prototypes such as we

can know what users want and how system should behave and users or clients can give fast and real

feedback in short times.

Nowadays, there are a lot of prototyping tools which often offer more possibilities: provide

interactive prototype to clickable PDF or HTML, version support for all android devices types (mobile

phones) and windows OS. In our interactive high fidelity prototype, we use the prototyping tool as HTML

and CSS which follows the W3C draft screen design guidelines for mobile websites:

In mobile-friendly sites and usability sites, ALT text, single column design, no frames, no pop-up menus,

no Javascripts and no dynamic menus are suggested as common features.

Use standards XHTML Basic 1.0.

Reduce use of images

Specify the image height and width in the CSS

Use Simple CSS external style sheets to control performance

Make readable content without style sheets

Don’t use Frames, tables, pop-ups and dynamic effects which need mouse or keyboard navigation

Add skip anchors such as skip to homepage, back to top

Be consistent

The content alignments are on the left of the mobile

Non-essential links and contents are placed at the bottom of the page

Margins and padding are set to zero.

The text size used in the HTML pages are not too different

Reduce the free space in the page as possible as we can

Use the image navigation such as menus, and the textual descriptions are as short as possible

Reduce the use of different colors on the page.

[12] (W3C)

[13] (W3C, Standards for Web Applications on Mobile: current state and roadmap, 2014)

5.5.1. Low Fidelity Prototype


Page 16 of 31

Before we develop the finalized system, we need to design low fidelity prototype first. Low fidelity

prototype plays an important role in the development process of the system because it is the fastest,

easiest and cheapest way to check the draft screen system design for developers. We can draw that

prototype not only on a piece of paper but also by using application. The followings pictures are the low

fidelity prototype of mobile web design for new students which are drawn on a piece of paper:

Home Page Design Student Intranet Login

Contact Us Student Info: Plagiarism

5.5.2. High Fidelity Prototype [12][13]


Page 17 of 31

Although carrying out of this prototype can take too much time and most expensive, it is the best

way to provide final product for the users. The following pictures are the final product of the Greenwich

university system for new students which is developed based on the Nielsen and Android User

Experiences Team interface design principles:

Home page

Student Intranet Login Contact Us

Student Info: Plagiarism

5.5.2. Prototype Evaluation

This is the most important page of our university website for

students because it’s is the first page which can capture users

attention and it contains the overall information of the

university. Moreover, via this page, students can go other

pages like student intranet login page, contact page, student

info page and plagiarism information for students. Moreover

navigation as search box for sites and clicking University logo,

students can go back to the home page besides clicking home

button from menu. And socialized sites like Facebook, Twitter

and Google+ links of university are also available on this page.

In this following some screenshots of our prototype designs, we also use the same interface design like

home page such as University logo, menus navigation, search box, socialized sites and same content

and font style in order to make usability and learn ability about visual patterns used in our system for

users.


Page 18 of 31

In this topic, as a developer point of view, we will discuss about our prototype evaluation which

use Nielsen’s Heuristics Design Principles to check the users’ usability goals and past experiences.

According to our research processes of other website, we found out that background color, font style,

visual patterns and metaphors are the important parts of the good interface design. So, based on our

research result, we avoid complex layout style like using black as background color. In our website, we use

the grey and white color as simple layout. The followings are some evaluations of our prototype usability

interaction design:

(i) Visibility of system status

In our prototype, when users click on the hyperlink or button, the site gives the interaction like

changing the color of the link or button. So, user can easily know which link or button they are clicking,

shown in Figure 5.1.

(Figure 5.1.)

(ii) User Control and Freedom

As user control and freedom, we add the feature like exit path which can go back to the home

page from any pages. This feature is available at the top logo digital dripped of home page and hyper

link from menu. Moreover we also add the page up button and previous page button in the prototype

which allow user to go back to the previous page they access and go back to the upper page, shown in

Figure 5.2.

(Figure 5.2.)

(iii) Consistency and standards

As website consistency and standards, we use the same view content and layout, search box,

same font and style and hyperlink in all pages are also same color and font size.

(Figure 5.3.)

(iv) Recognition rather than recall

We reduce the users’ memory load by creating the objects, metaphors, instructions of the system

and options visible in our system.

(Figure 5.4.)

(v) Error Prevention and Help users recognize, diagnose and recover from errors

The site will show visibility status when

user click on these.

Exit route Can go back

to previous

page

Click to go

back to the

upper page


Page 19 of 31

In our system design, we use plain language (no codes) in the error prompt message to express

the nature of the problem and suggest the way of problem solving.

(Figure 5.5.)

(vi) Flexibility and efficiency of use

To be flexible, we use white color which can make user eyes or mind feel pleasant as our design

based and we also use less different color in the system. Moreover, as system usability, we add the

topics links and search box at the top of the page where user can access easily.

(Figure 3.6.)

(vii) Aesthetic and Minimalist Design

In our system, we provide the user requirements data only. For instance, in student info page, we

provide programmes offered in 2013/14, entry requirements and registration for new students and

way of login process link and registration checks processes.

(viii) Help and Documentation

In our system, we provide information for the users which can guide them to search wanted data

easily and also add help in a set of concrete steps which can be followed easily. For instance, in

student intranet login page, we provide login help features for the users and in home page, we

provide bursaries and scholarships more information link in order to make the students information

usability for users.

5.6. Testing

Error prompt message with simple

language

Suggest help

Topics involved in the page

Simple background color

Sites search Box

Color used in the system


Page 20 of 31

Task Case No 1

Objective To check webpage consistent or not

Test action Click on home.html

Result University Home Page will appear

Actual Result Shown in following figure 1

(Task Case 1)

Task Case No 2

Objective To check Intranet Login page show or not

Test action Click on Student Intranet Login link in home page

Result Student Intranet Login Page will appear


(Task Case 2)

For more Testing, GO TO APPENDIX C

5.7. Nielsen’s Heuristic Checklist [14]


Page 21 of 31

For our system usability check, we draw checklist based on the Nielsen Heuristic for students and

developers who will be the users of the system to get feedback about their thoughts, requirements and

usability of the new system interface interaction design.

Review Checklist Yes No N/A Remark

System Visibility Status 1. Are logo and contents in all pages clear and identified? 2. Are menu selections appear in the same place in each page? 3. Do error prompt message in login page clearly show? 4. Is there visual feedback when user touch on textbox, title, links? 5. Is response time appropriate to the user’s cognitive processes?

Match Between System and Real World 1. Are metaphors in system tangible and familiar? 2. Prompt message and navigations words clear, in simple language? 3. Are menu titles grammatically?

User Control and Freedom 1. Do previous menus, page up functions work effectively? 2. Do exit routes (logo, menu) work effectively on pages? 3. Are links works in the pages acceptable?

Consistency and Standards 1. Are font sizes, style, color and contrast readable and consistent? 2. Are navigations links in page reasonable? 3. Did Menu titles position on the pages justify? 4. Are school contents details identified?

[14]

(Pierotti & Corporation)

5.8. Final Evaluation


Page 22 of 31

The prototype which we develop for the new system has positive feedbacks from users (students)

who have joined in the prototype testing process, and we also receive some problems and

requirements about that prototype from users. So, as a next step, we are going to develop a fully

functioning prototype which will also follow the user interface design principles of Nielsen and

Android User Experienced Team and guidelines from the W3C in order to set for user-friendly website.

Moreover, as system usability and accessibility testing: validation process, we use Nielsen’s Heuristics

Checklist.

Although our prototype has the positive feedbacks from users, there are still weak points in the

system as follows:

(i) Visibility of the Button

In our system, the login button of the student intranet’s visibility doesn’t work well. As an example,

when use click on the login button to enter the student intranet, the button color or text color doesn’t

not change so user may confuse whether they click it on or not.

(ii) Page Navigation

In our system, there is no page navigation for users. For example, the website includes five pages such

as Home Page, Student Intranet Login, Plagiarism, Contact ad Student Info pages. Let say, when users

are on the Student Plagiarism page, the system don’t show which page user arrive on the website.

(iii) Accessibility setting

In our system, there is no setting for users where user can change the web page display, sound

options, increasing font size, changing text spoken speed, videos and more.

(iv) Screen Reader

In our system, there is no screen reader for users which help to identify and explain what is being

displayed on the screen using text-to-speech (TTS), sound icons and Braille which is for blinds users.

(v) Too much navigation links

In our system, we use a lot of navigation links which can make users mind bored to access our page.

Especially in our student info page, we use too many navigation links about programmes in 2013/14

and Registration process, as follow:

6. Summary


Page 23 of 31

As a conclusion, in this interaction design coursework report, we researched about the

cognitive psychology aspects in the HCI and discussed and present some evidences of how

cognitive psychology influences the user when they interact with the system. After discussed

about cognitions in HCI, we researched about the design principles for interactive user interface

design. According to our research result, we found out Nielsen’s Heuristic Design principles which

are the good principles for evaluating the system. Moreover, we also found out the android user

experience team design principles. Why we also researched about android design principles?

Because we were going to develop our website prototype for android mobile devices so we also

need to research about android user experiences. After researching about those principles, we

presented those design principles with reasonable evidences.

After that, we investigate the methodologies which are useful for system development

process. And then, after studying various methodologies, we found DSDM methodology which is

suitable for developing of our system prototype. Why we use this methodology in our prototype?

Because this methodology focus on both non-experienced users and experienced users

involvement and it is also useful in the development of system in short time and can also adjust

the budget requirements of the development process.

And then, we also discussed why need multimedia applications and use these applications

and also presented about the multimedia types used in the websites such as animation like .gif:

set of images, system sounds like error message, plug-in like facebook, twitter and video links like

Youtube videos. Why we use multimedia in our system? Because using multimedia applications

like .gif, we can capture the users’ first attention and make them to remember our site.

After finished research processes, we started to present about the developing process of our

mobile website prototype. Although there is a lot of a prototyping tool today, we use the paper

tool for our low fidelity prototype and HTML and CSS application for our high fidelity prototype.

As we said before we used HTML and CSS application, we need to follow the W3C draft screen

design guidelines for mobile because in this guidelines, there are a lot of rules of using html and

CSS such as don’t use frame, tables, scripts in HTML, contents must be readable without CSS and

so on. Moreover, as interface design usability for users, we followed our interactive user interface

design with Nielsen’s Heuristic and android user experienced team design principles. As the

website usability evaluation, we provide Nielsen Heuristics check list for users in order to check

pros and cons of our web design prototype.

In addition, we know that there are still weak points in our interactive web design prototype

such as accessible feature like screen reader and resizable features for site users, less image link

than word link and less visibility features like which page user arrive. But except these features,

we believe that this mobile websites for new students will be usability and mostly meet with

users’ past experiences. So, after adding those required features and fully functioning website

which is going to test on other parts of the website, we will make implementation and launch this

website for new students which can be the usable website in future.

7. Bibliography


Page 24 of 31

A little big of Cognitive Psychology for lots of Interaction Design. (2012, September 30). Retrieved April 9, 2014,

from http://www.slideshare.net: http://www.slideshare.net/JanSru/small-cognitive-psychology-for-

big-interaction-design

Cherry, K. (n.d.). What Is Attention? Retrieved April 10, 2014, from http://psychology.about.com:

http://psychology.about.com/od/cognitivepsychology/f/attention.htm

DSDM Model. (2012, May 20). Retrieved April 12, 2014, from http://dsdm-model.blogspot.com: http://dsdm-

model.blogspot.com/2012/05/dynamic-system-development-method.html

Dynamic systems development method. (n.d.). Retrieved April 13, 2014, from http://en.wikipedia.org:

http://en.wikipedia.org/wiki/Dynamic_systems_development_method#DSDM_V4.2_Project_Life-cycle

McLeod, S. (2007). Visual Perception Theory. Retrieved April 10, 2014, from http://www.simplypsychology.or:

http://www.simplypsychology.org/perception-theories.html

Media Types - How The Web Works. (n.d.). Retrieved April 18, 2014, from http://xhtml.com:

http://xhtml.com/en/xhtml/media-types-how-the-web-works/

Nielsen, J. (1995, January 1). 10 Usability Heuristics for User Interface Design. Retrieved April 9, 2014, from

http://www.nngroup.com: http://www.nngroup.com/articles/ten-usability-heuristics/

Nielsen, J. (2009, December 7). Short-Term Memory and Web Usability. Retrieved April 11, 2014, from

http://www.nngroup.com: http://www.nngroup.com/articles/short-term-memory-and-web-usability/

Patel, D. (n.d.). Methodologies and Life Cycles.

Pierotti, D., & Corporation, X. (n.d.). Heuristic Evaluation - A System Checklist. Retrieved April 18, 2014, from

http://www.stcsig.org: http://www.stcsig.org/usability/topics/articles/he-checklist.html

Rotz, N. (n.d.). Types of Multimedia Used on Web Pages. Retrieved April 18, 2014, from http://www.ehow.com:

http://www.ehow.com/facts_5617082_types-multimedia-used-pages.html

Team, A. U. (n.d.). Design Principles. Retrieved April 10, 2014, from http://developer.android.com:

http://developer.android.com/design/get-started/principles.html

The Human Memory. (n.d.). Retrieved April 10, 2014, from http://www.human-memory.net:

http://www.human-memory.net/types_sensory.html

W3C. (2014, January). Standards for Web Applications on Mobile: current state and roadmap. Retrieved April

16, 2014, from http://www.w3.org: http://www.w3.org/Mobile/mobile-web-app-state/

W3C. (n.d.). Mobile Web. Retrieved April 6, 2014, from http://www.w3.org:

http://www.w3.org/standards/webdesign/mobilweb.html

What is DSDM? (n.d.). Retrieved April 12, 2014, from http://www.selectbs.com:

http://www.selectbs.com/process-maturity/what-is-dsdm


Page 25 of 31

APPENDICES

Appendix A


Page 26 of 31

3. Design Principles and Methodologies

3.2. Evaluation

(iv) Error Prevention and Help users recognize, diagnose and recover from errors

The system should provide careful error messages for user since errors occur in the first place and

these error messages need to be prompted in simple language so user can easily understand and solve

the errors. For instance, in the following university portal login page, when students try to enter to the

portal, the system show error message for users why they can’t enter to the portal. And also provide

help as Forget password or preview as guest.

Figure 3.4

(v) Recognition rather than recall

The system needs to make objects, actions and options visible in order to reduce human memory

load. Moreover, there should be the instructions for the system used and this instruction need to be

visible or easy to access.

(vi) Flexibility and efficiency of use

The system design should be flexible and efficient for users and catch the attention of both

inexperience and experience users. For instance, the following website uses the less different color in

each page so we can say that its design is flexible and efficiency for every user, shown in Figure 3.6.

Figure 3.5

(vii) Aesthetic and Minimalist Design

The system prompt login error

Suggest help for users


Page 27 of 31

The system need to provide simple relevant information to user. For instance, the following

university website of the Contact page, they use simple form design with relevant information for

user.

Figure 3.6

(viii) Help and Documentation

Although the system can be used without documentation is the best way, the system still need to

provide help and documentation for non-experienced users. One thing we need to notice is that the

words or information in the documentation should be easy to search, understand, focused on user’s

task and the instruction sentences should not be too long. For instance, in the following university

websites (www.uclan.ac.uk) of the student portal login in page, they provide help and documentation

about portal login for users. So, we can say that its help and documentation for users are acceptable.

Figure 3.7.

Appendix B

Simple form design

Relevant information for users

http://www.uclan.ac.uk/


Page 28 of 31

5. Evaluation of University Web Design Prototype for new students

5.4. Primary and Secondary Scenarios

Use Case: Access Student Info: Page

Actor: New Students

Primary Scenario

Work Flow

The use case start when students access the Student Info Page

(i) Students access the programmes offered in 2013/14 information

(ii) Students read the School entry requirements for offered programs

(iii) Students read the registration process for new students

(iv) Students check the registration process success or fail, use case end

Secondary Scenario

Work Flow

Use Case is canceled at step (1), (2),(3), (4)

When students change their mind to go back to other pages or topics Use Case: Read Plagiarism Info:

Actor: New Students

Primary Scenario

Work Flow

The use case start when students access the Plagiarism Page

(i) Students read the general plagiarism information in the page

(ii) Students click the links about plagiarism more info:

(ix) Students click the Student Portal link to access the i-progress information , use case end

Secondary Scenario

Work Flow

Use Case is canceled at step (1), (2), (3)

When students go back to the other pages Use Case: Access Contact Info: Page

Actor: New Students

Primary Scenario

Work Flow

The use case start when students access the Contact info page

(i) Students search the campus location

(ii) Students access the university contact information

(iii) Students enter needed information and submit it to the university, use case end

Secondary Scenario

Work Flow

Use Case is canceled at step (1), (2), (3)

When students go back to the other pages

Use Case: Socialized in FB, Twitter, Google Plus


Page 29 of 31

Actor: New Students

Primary Scenario

Work Flow

The use case start when students access socialized icons in the university website

(i) Students click the socializations in order to access or get more information from other social websites,

use case end

Secondary Scenario

Work Flow

Use Case is canceled at step (1)

When students’ Login details are wrong or the system shows server error

When students change their mind to go back to other pages or topics


When students change their mind to go back to home page or other pages Use Case: Access Student Intranet Login Page

Actor: New Students

Primary Scenario

Work Flow

The use case start when students access student intranet login page

(i) Students login to the student intranet

(ii) Students read information about the intranet

(iii) Students read the login help information, use case end

Secondary Scenario

Work Flow

Use Case is canceled at step (1)

When students’ Login details are wrong or the system shows server error




Appendix C


Page 30 of 31

5.6. Testing

Task Case No 3

Objective To check Login error show or not

Test action Log in to Student Intranet

Result Error message will appear


(Test Case 3)

Task Case No 4

Objective To check Contact Us Page show or not

Test action Click on Contact link in Home Page

Result University Contact Page will appear


(Test Case 4)

Task Case No 5

Objective To check Student Info: Page show or not

Test action Click on Student Info: link in Home Page

Result Student Info: Page will appear


(Task Case 5)


Page 31 of 31

Task Case No 6

Objective To check Plagiarism Page show or not

Test action Click Plagiarism link in Home Page

Result Plagiarism Page will appear


(Task Case 6)

Education

Myo pyae phoo pwint(comp1649)