1 / 13

Understanding HCI

Understanding HCI. A very quick guide to better websites Cynthia E. Morneweck Technical Project Director -OIT. Format. Definition of HCI Types of Interaction Principles Examples Process Checklist. So what is HCI anyway?.

keenan
Download Presentation

Understanding HCI

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. Understanding HCI A very quick guide to better websites Cynthia E. Morneweck Technical Project Director -OIT

  2. Format • Definition of HCI • Types of Interaction • Principles • Examples • Process • Checklist

  3. So what is HCI anyway? • Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them. • The focus is on interaction.

  4. How do users interact with websites? • They use navigation devices to maneuver through the site • They read the text • They assess the grouping of data • They view the placement of elements • They use visual cues to make decisions

  5. Principles of Usability • Learnability • Predictable, Familiar, Consistent • Flexibility • Customize, Task migration, Dialog Initiative • Robustness • Observable, Recoverable, Responsive, Task Conformance

  6. Supporting Tasks • Bad – www.travel.yahoo.com • Good – www.Expedia.com example of calendar dropdown.

  7. Navigation • Bad-www.arbour.on.ca • Good-www.thepett.com

  8. Organization of Information • Bad – www.chefnet.com/cc2000 • Good - www.nytimes.com

  9. Semantics • Bad – www.lizclaiborne.com example of the navigation headings • Good – www.bananarepublic.com example of navigation headings

  10. Visual Layout • Bad – www.yahoo.com www.canine-academy.com • Good – www.orbitz.com

  11. Visual Cues • Bad - www.downstay.com capitolk9.com/eco/school.html • Good - www.jkk9.com www.aocb.com

  12. Making Websites more Effective • Clear goals • Well defined audience • Appropriate data collection • Organization of Information • Clear navigation • Consistent • Visually balanced

  13. Questions to ask yourself • Are you communicating with your audience? • Have you organized your content in a way that your audience understands? • Are your pages legible? (Typography) • Does your navigation work?(Do users know where they are? Do they know how to get somewhere else?)

More Related