Human Computer Interaction

Human Computer Interaction (HCI) is a discipline concerned with the design, evaluation, and implementation of interactive computing systems for human use and with the study of the major phenomena surrounding them. (As defined by the Special Interest Group on Human-Computer Interaction (SIGCHI) of the Association for Computing Machinery (ACM)).

Design needs to align with:

• Context
• The User's Cognitive Abilities
• The User's Memory

A user's senses (sight, hearing, smell, taste, and touch) provide them data th about what is happening around them. In general, we are visual beings, and designing good Web material requires knowledge about how people percieve the experience.

As an experiment, take a look at art.yale.edu. What is your first impression? What were you expecting?

Context

Context plays a major role in what people see on the webpage, and therefore, has a profound effect on the usability of a website. For example, what do you see below?

How about the letters below: How about if we look at:

Conclusion: the context matter, and people's perception of what they see (includign a website) is influenced by what they expect to see.

Memory

We, as humans, have a limited memory. Miller, 1956 specified that the magical number is 7 ± 2. If we don't exceed this number then content is more likely to be remembered with faster recall. The corollary to that is: do not expect users to remember many shortcuts.

There are a few notable exceptions, such as names (how many do you know?). The big difference comes down to short-term vs long-term memory.

Additionally people can scan lists of bullets, tabs, menu items, until they see the one they want. They don't have to recall them from memory having only briefly heard or seen them. With that:

• Make pages easy to scan
• Group similar things together visually
• Make wise use of screen real estate.

Consider these two examples with proximity to a specific group:

Affordances

Affordance - The functions or services that an interface provides. For example, a link provides the function of visiting another page when clicked.

Something very important for the user are the perceived affordances. We want affordances to be visible and obvious to the users.

• A door affords entry to a room
• A radio button affords a 1-of-many choice
• On a door, a handle affords pulling, a crash-bar affords pushing
• On a car, turning the steering wheel to the left makes the car go left

In the web, this translates to:

• Text that looks like a link - it better be a link!
• Graphical arrow pointing the the left - affords backward navigation

Feedback

One of the most frustrating things about trying to perform an action on a web page is not knowing if the action did anything! We must always ensure that there is feedback for every action.

We should design feedback in our pages from the beginning. Some examples include:

• Change color / shape / size
• Popup dialog boxes (use wisely and sparingly)
• Add Sound
• Plan for user mistakes, ..., and warn them
• Allow users to see results, confirming action was taken

Users crave consistency and navigation capability. Our goal is to provide that.