Basic Principles of HCI Lecture 2

1. Requirements Analysis Establish the goals for the Website from the standpoint of the user and the business. Agree on the users’ needs and aim for usability requirements. Appraise existing versions of the Website (if any). Carry out an analysis of the competition. Complete discussions with potential users and questionnaires.

2. Conceptual Proposal Outline site design and architecture at an abstract level. Perform a task analysis to identify essential features.

3. Prototyping Create visual representations (mock ups) or interactive representations (prototypes) of the Website. Evaluate usability using a proven method. Using the results, create more mock ups or improve the prototypes. Repeat this process until the design and usability goals are met.

4. Development Create the final product. Evaluate functionality through testing, quality assurance, usability testing, and field testing. Use the evaluation results to improve the product. Repeat this process until the business goals are met.

5. Launch and Housekeeping Launch the Website. Maintain and tweak with user feedback (housekeeping). Use the feedback to create new requirements, and begin major design improvements (system iteration).

Interface Design Interface Usability Web Design Web Usability

how pleasing is the device/software. how real is the application.

What I can think of for short term and long term cognition: – menu sizes. – categorization. – how many clicks does it take to do X.

Ten Usability Heuristics Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real- world conventions, making information appear in a natural and logical order. User control and freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Ten Usability Heuristics Error prevention Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action. Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Ten Usability Heuristics Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Evaluation

Evaluation of Attractiveness Evaluation FactorYahooGoogleMSNBing Attractiveness How the site/software catch my eyeMarks Was the info. InterestingMarks Was the info memorableMarks Was the use of text helpful and interesting.. Was the use of graphics/images helpful and interesting.. Was the use of color helpful and interesting.. 1.Awful2. Worse3. Bad4. Average5. Good6. Excellent7. Wonderful

Similarly Evaluate navigation Evaluate usability

Evaluation of Usability Rating using Nielsen’s usability evaluation heuristics.

Evaluation of Usability Evaluation FactorYahooGoogleMSNBing Nielsen’s usability evaluation heuristics. Visibility of system statusMarks..Marks Match between System status and real worldMarks..Marks User color and FreedomMarks..Marks Consistency and Standard.. Error Prevention.. Recognition rather than recall.. Flexibility and effeciency of use Aesthetic and minimalist design User Help (recognize, diagnose, recover from error) Help Documentation 1.Awful2. Worse3. Bad4. Average5. Good6. Excellent7. Wonderful

Sample evaluation of asiarooms.com 1-Orange color it use for banner 2-A hotel search box at the right side of the website 3-Advertisement of hotel offered which always changed at the top right side on the banner. 4- A symbol of people (like ancient China soldier) 5- A currency option box bellow the banner 6- A flag of three countries which symbolize the language it offer below the banner 7- A big picture of a vacation location on the first page 8 -The maps 9-The search results presented like search engine 10-List of major hotel in some region with small picture for each hotel at the leftside on the first page

Sample evaluation of hotelTravel.com 1) Blue color it use for banner 2) Easy navigation button to search following the region at the left side of the first page 3) Eight flag at the top left symbolize the language options its offered 4)The earth symbol on the banner with an arrow move around it 5)Graphics of credit card at the bottom of the first page. 6) Loge of their links at the bottom of the first page. 7) A digital certificate symbol at the bottom of the first page which indicates this site is fully secured 8)The nice maps in flash animation 9) The multiple button it provides (at the top, side and also at the bottom) of its page 10)A live agent box at the right side which is the chat space

Sample evaluation of hotel.com 1)The blue and white color use for its banner and main interface 2)A man hanging 2 bags in the hotel logo. 3)Two biggest buttons represent the hotels and rental vacation buttons under the banner. 4)The biggest search box on the first page. 5)Nice and big hotel picture list on the first page. 6)Big picture on its banner which always changed