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 ConventionsThings to use: Alignment- line things up into columns

Centered Right Left

Grouping: put related information together separate non-related information

White space Consistency Contrast

NavigationGood 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.

1. Visibility of system status

2. Match between system and the real world

3. User control and freedom

4. Consistency and standards

Usability Heuristics

5. Error prevention

6. Recognition rather than Recall

7. Flexibility and Efficiency of Use

8. Aesthetic and minimalist design

9. Help Users see and fix errors

10. 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 1st 2 are ok this last one is not

Necessary Tags <table> opens the table

Using <table border> assists with visualizing what you are doing

<tr> creates a row and houses columns <td> creates a cell between <tr> </tr> </td> closes the cell </tr> closes the row </table> closes the table

Basic Table<table border>

<tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr>

</table>Example table

Stretching CellsYou can make a cell in one row as long as two cells in

the next row using the “colspan” tag.

<table border>

<tr>

<td colspan=2>Cell 1</td>

</tr>

<tr>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</table>

Stretching RowsYou can do the same thing with rows<table border> <tr>

<td rowspan=2>Cell 1</td> <td>Cell 2</td>

</tr> <tr>

<td>Cell 3</td> </tr> </table>

LinksFor a link you need:

1. The url you are linking to

2. The words you want to have as the link

3. The code <a href=“url”> creates the link and </a> closes it. What ever you put between the <a href=“url”> and the </a> 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- <a href=http://www.depaul.edu>

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<a href=“home.html”>

LinksOther kinds of links: Mailto link- automatic email link

<a href="mailto:?"> creates a mailto </a> closes a mailto

Instead of url you use an email address Named links- to link to a specific area in a document

Requires <a name="NAME"></a>which creates the spot to be linked. Put that in the section of the document you want to arrive at.

<a href="#NAME"></a>which is the linking code. Use this to create the link.

Grading CriteriaI 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 assignment