1 / 23

HCI 201 Week 4

Learn about design conventions, navigation best practices, and usability heuristics for creating effective HCI interfaces. Explore the use of tables and links, and understand how to apply these principles to enhance user experience.

richardsnelson
Download Presentation

HCI 201 Week 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HCI 201 Week 4 Design Usability Heuristics Tables Links

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

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

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

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

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

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

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

  9. For Example

  10. Statistics of the Mess

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

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

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

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

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

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

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

  18. Stretching Cells You 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>

  19. Stretching Rows You 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>

  20. Links For a link you need: • The url you are linking to • The words you want to have as the link • 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.

  21. 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”>

  22. Links Other 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.

  23. 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 assignment

More Related