HCI 201 Week 4 Design Usability Heuristics Tables Links

Agenda Design Conventions Navigation Usability Heuristics Tables Links Grading Criteria & Next Week’s Homework

Design Conventions Some things to avoid in order to assist users: Underlined text: on the web underlined text implies a link. Light text on light background Dark text on dark background

Design Conventions Things to use: Alignment- line things up into columns Alignment   Centered Centered   Right   Left Grouping: put related information together separate non-related information Grouping: White space Consistency Contrast

Navigation Good navigation Is easy to learn. Is consistent. Should appear in context. Includes alternatives. Requires minimum effort. Provides visual guidance. Uses clear labeling. Is appropriate for audience

Heuristics A Heuristic is a rule of thumb In computer science it refers to solving a problem through a series of steps. We will cover usability heuristics.

Usability Heuristics 10 Usability Heuristics- there is no such thing as user error Visibility of system status Match between system and the real world User control and freedom Consistency and standards

Usability Heuristics Error prevention Recognition rather than Recall Flexibility and Efficiency of Use Aesthetic and minimalist design Help Users see and fix errors Help documentation

For Example

Statistics of the Mess

Usability Problems No user testing done on voter ballot. User testing in advance could have detected these problems.

Applying the Heuristics Consistency and Standards   Was this ballot like any others the users had seen?   Was this ballot the same as others around the country   Did it follow any standards of design that people (particularly the elderly) were used to? NO

Applying the Heuristics Match between System and Real World   Did this ballot look like how people would make a decision?   Did this ballot follow standard convention users use when reading, i.e., left to right, down, then next page, repeat? NO

Applying the Heuristics Minimalism? Nothing in evidence. Visibility of System Status? NA Information? Yes Error Prevention? No Recover from errors? No User Control? No Help? No

Tables Useful to control the layout appearance of all kinds of content. Tables are flexible- you can specify how large you want them to be or not. Think of tables as grids The 1 st 2 are ok this last one is not

Necessary Tags opens the table   Using assists with visualizing what you are doing creates a row and houses columns creates a cell between closes the cell closes the row closes the table

Basic Table Cell 1 Cell 2 Cell 3 Cell 4 Example table

Stretching Cells You can make a cell in one row as long as two cells in the next row using the “colspan” tag. Cell 1 Cell 3 Cell 4

Stretching Rows You can do the same thing with rows Cell 1 Cell 2 Cell 3

Links For a link you need: The url you are linking to The words you want to have as the link The code creates the link and closes it. What ever you put between the and the becomes the linked word or phrase.

Links There are two general kinds of links: Absolute and relative. Absolute means the entire url: When linking to a site outside of your own use absolute links- Relative means the url is partial as it is within the context of the current directory. When linking within your site, use relative, meaning you don’t use the whole url such as

Links Other kinds of links: Mailto link- automatic link   creates a mailto closes a mailto   Instead of url you use an address Named links- to link to a specific area in a document   Requires which creates the spot to be linked. Put that in the section of the document you want to arrive at.   which is the linking code. Use this to create the link.

Grading Criteria I have added links to the grading criteria for the various assignments you have completed. For future assignments   Proofread- and have someone other than yourself read it to ensure it makes sense.   Avoid generalizations.   Be detailed in your descriptions.   Specify and use example when you are explaining things.   Check your site “live”. Next week’s assignmentassignment