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, webpages 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

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
Actual Result
(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

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 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
Actual Result
(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
Actual Result
(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
Actual Result
(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
Actual Result
(Task Case 6)

Myo pyae phoo pwint(comp1649)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (18)

Similar a Myo pyae phoo pwint(comp1649)

Similar a Myo pyae phoo pwint(comp1649) (20)

Último

Último (20)

Myo pyae phoo pwint(comp1649)