CS147 - Intro to Human Computer Interaction

Intro

Human Computer Interaction is basically designing computers and computer programs so that people can use them well. HCI has existed for a long time (ie, consider the invention of the mouse).

HCI classes at Stanford have a strong connection to the design school, so a lot of the lessons in this class were repeats from previous classes that I have taken such as Transformative Design. For instance, talk with people, observe what they do, talk to extreme users rather than just average users, ask open ended questions, observe thoughtless acts that people do ask workarounds for everyday problems, do prototyping and storyboarding, ask "how might we" statements, etc.

The lectures were good, but the section and assignments weren't very well integrated into the class.

Throughout the quarter, we worked on one mobile web design project. I wanted to do something that connected computer science and social change, so I convinced my group to go along with it. We worked on a project to do computer science education on the phone. At our website, csedu.phpfogapp.com, you can point an Android phone to it, program on your phone, and see the results there. It was my first time doing anything significant in PHP, which was useful, and I enjoyed helping my other group members learn some of the web programming principles that I have learned over the years.

Design Principles

There were also interesting principles applied specifically to computers. In a computer interface, many of the big design questions relate to how a person learns, what is natural, and where errors come from. As a result, some fundamental principles of user interface design are: a UI should be visible, provide feedback, be consistent with the user's mental model, allow exploration through non-destructive operations, make features discoverable through exploration, and work reliably. In general, you should change as little as possible about what the user expects.

Direct manipulation, manipulating a model, and metaphor do well on the fundamental principles. Direct manipulation means that when I drag something, it moves. Manipulating a model means that you have a little thing that represents a bigger thing (like how there are thumbnails of every page on the left side of many PDF readers, and you can click on one of those to bring you somewhere in the document itself). Metaphor includes thinking of a recycling bin in your computer or thinking of a desktop in your computer.

The class also talked a lot about non-computational design problems. For instance, to discuss why getting a user interface right is important, we discussed the butterfly ballots in the 2000 election and how that led to many people voting for a candidate they didn't mean to.

Evaluation and Testing

There are a lot of heuristics that we can use to evaluate designs. Some of these heuristics include:

• user control and freedom
• flexibility and ease of use
• aesthetic and minimalist design
• consistency and standards
• recognition rather than recall
• visibility of system status
• match between system and real world -- metaphors
• error prevention
• help users recognize, diagnose, and recover from errors
• help and documentation is in the mind of the user. also, app is self documenting.

Data driven design is another method of evaluation. Places that are very data driven like Google will do A/B testing where they make two (or two hundred) designs and see which one the users like best.

Even when you're getting people to individually evaluate a design, it's often good to have a point of comparison such that two designs are presented next to each other.

Sometimes, lab experiments are good because you can bring people into a controlled setting and you can ask them about any hang ups they have with the design; sometimes field studies are useful because you can see what people would actually good.

Internal validity tests whether or not your study was precise. If you ran it again, would you get similar results? External validity tests accuracy. Will the study will generalize?

A between subjects test means that half of the test subjects use one design and the other half use the other. A within subjects design means that everyone uses both interfaces, but some of them will use the first interface first and some will use the other interface first. Between subjects requires more subjects to get good results, but you don't have to deal with the ordering effect.

In a study, you can have users think out loud so that you can get their thoughts while they use your product.

Beware Simpson's Paradox! Make sure that you don't get weird effects from combining separate groups together.

Beware Twyman's Law (if it looks interesting, it must be wrong)! For instance, on any website that collects your age, there will be a lot of people who were born 18 years ago because young folks lie about their age.

When you do test groups, have consistent assignment (I shouldn't be in the control group on one computer and the test group on another) that is durable over time (I shouldn't be in the control group one day and the test group in another day), and assignment to multiple experiments should

You can use crowdsourcing tools like Mechanical Turk (plus a Qualtrics survey and images hosted on Dropbox) to do a bunch of small evaluations.

Input / Output

Input devices enable new types of thought. In a computer where the only input is plugging wires together, it's much harder to think about documents than in a computer with a keyboard.

You can think of input in a layered model. There is a device abstraction (a keyboard), a transformation (the characters that you type), signal coding (the scan codes, which are the electrical representation of keys), sensing (switches that respond to typing), physical properties (the keys), and user interaction (typing).

Humans have an input/output asymmetry: we can take in a lot of information but output a little.

Embedding the input on the output (like a touchscreen) is useful. Embedding the input in context, like having a separate Google Maps search, is useful because information from the context means you don't need to type as much, and the program can infer that you probably are referring to a location.

There are lots of other cool input devices too: laser drawn keyboard, Nanotouch, Suunto watch, Skinput, Thinsight, Proteus ingestible networked pill, etc. There is more coming!

We can measure human capabilities with regard to input. Fitts' Law says that the time to move from point A to point B is proportional to the distance and the size of point B. That is, if I have a huge button, it's easy to move my cursor there (which means that things in the corner of the screen, like the start menu on Windows, are very easy to mouse to because corners are functionally infinitely big), and if I want to move somewhere close, it's also easy.

Different human organs have different bandwidths. Researchers claim that the finger has 38 bits per second of bandwidth, the arm has 9.5 bits per second, the wrist has 23 bits per second, and the neck has 4 bits per second. Thus, using your neck as an input device will be extremely ineffective. The mouse probably won't get much better than it is because mouse technology can utilize the information processing capabilities of the human hand, so if we improved a mouse, we would have to improve humans too.

Similar deal with the keyboard. There are some trendy innovations like laser-drawn keyboards, but people like feedback when typing. That's why keyboards that "click" down are better than soft keyboards and why things like the vibrate on keypress functionality on Android phones is good.

However, these numbers seem extremely low to me, and other biological bandwidths also seem low to me. 4 bits per second for the neck would mean that my neck can only do 16 different things in any given seconds. I, personally, can move my neck 4 times to any of 8 locations in one second, which would require at least 5 bits per second of information, disproving the research.

Representation

The way that you represent a problem matters. For instance, there is a game: two players take turns choosing numbers between 1 and 9. When one player chooses a number, the other player cannot choose it. To win, a player has to be the first one with three numbers that add to 15 (ie, 1, 9, and 5). This game is hard to play because you need to do a lot of math in your head. Another way to represent this same game is Tic Tac Toe.

8, 1, 6 3, 5, 7 4, 9, 2

You can see another discussion of representation with regard to Roman numerals from when I took Beyond Bits and Atoms.

This is a difference in working memory. Humans are bad at remembering a lot of things at once. Some people estimate that people can remember 7 things, which might be why phone numbers are 7 digits. You should avoid having to remember a lot of things and let the representation remember them for you. "Getting Things Done" uses the same principle.

To aid this, the properties of the representation should match the thing being represented. For instance, in the Montesorri style of education, you can learn to add and multiply by taking a string of beads and stacking them together.

Also, a good representation will show all of the relevant information and nothing else. For instance, the London subway maps are not drawn to scale because the actual distances aren't relevant.

Representations should also go off of what users are good at. People are good at telling between light and dark, but they aren't good at telling the gradual difference between hues. Thus, if you want to do an altitude heatmap, it might be better to just use one color going from light to dark or to use two colors, one for above ground and one for below ground.

Visual Design and Typesetting

Use whitespace to make grouping obvious.

Use bold, color, or size to emphasize important information.

A lot goes into typesetting. When you want to figure out a good font, if you don't know much about fonts, try looking for other people that evoke the ideas that you want to evoke and see what font they use.

Serif fonts evoke older times (romanticism, wealth); sans serif fonts evoke newer times (modernism, simplicity).

CAPITALS jump out. If you don't want to shout but need to use capitals for an acronym, you can use small caps.

Whitespace in books is good so that you won't get distracted by the stuff behind the book.

Text is faster for beginners; icons are faster for experts.

Experts learn to chunk visual stimuli. Expert chess players are very good at remembering chess boards. However, if you put the board in a condition that it couldn't get into, experts will do as poorly as normal chess players. Interfaces can be chunked too -- dragging and dropping is one chunked operation rather than the several operations it would take to copy and paste.

Ems are a useful unit of measure when designing things.

Information Design

Make the scale of the axis meaningful. If you zoom in, you can make a one degree change in temperature look significant even when it isn't.

When it's relevant, present outliers.

Small Multiples: present many designs or graphs next to each other. Then, you can easily see the similarities, and the differences will be very pronounced.

How do people read online? They don't. Thus, highlight keywords, add meaningful subheadings, organize text into bulleted lists, shorten text so that each paragraph has only one idea, use the journalistic inverted pyramid (present the whole idea in the title, then present the whole idea in one paragraph, then present the full article), and use objective rather than flowery language.

Use speaking block navigation rather than low scent navigation: expose the submenus rather than hiding them with a mouseover. Make it easy to click on the most important things. It's okay to violate consistency to present the most important information where it needs to be.

Don't use technology centered colors (ie, the color 00FF00): use colors that have human relevance. The Munsell color space is perceptually based, and the Pantone color space is functionally based. Either can be good.

Having a standard color scheme can be good.

To do color right, start in grayscale, and keep the luminance values when you move to color. Also, don't rely on hues to tell the difference between elements.

Tidbits

Paradox of choice: when you present more choices, people are dissuaded and might choose none. Thus, giving more options isn't always better.

Designs should work in diverse contexts. A desktop web browser has a lot of space, whereas a mobile browser is small, so you need to figure out the important information and just present that. Humans operate in diverse contexts, too.

There are viewers that are site agnostic such that every site would look the same.

There is a psychological principle of commitment escalation. People don't want to sign up for a big commitment (like making a monetary donation) all at once. But they might click on "learn more." This goes along with Cialdini's principles of persuasion that I have discussed before.