HCI 201 Week 4 Design Usability Heuristics Tables Links.
-
date post
20-Dec-2015 -
Category
Documents
-
view
227 -
download
2
Transcript of 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
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