Kids Code & Computer Science

Interfaces are the primary way people work with computers and websites. Here are concepts used to design human interactions with computers.

Have you ever walked up to a door and could not open it? Computerized or not, doors are technology. Most often, you can tell which way to open a door by the presence or absence of a door handle. If the handle is on your side, you know to at least pull the door towards you to open it. If there is no handle but there is a panel, often metal, that says Push you know to push to open the door. Handles and door panels that say Push are also called affordances. It's a fancy word for anything that visually tells you what to do.

Computers are useless without interfaces and affordances. This article provides a general overview of concepts and issues you encounter when designing computer interfaces for human beings, also known as human computer interface design.

The Purpose of Interface Design

Have you ever wondered the reason links to a shopping cart, login, and other housekeeping links are at the top right of websites? It’s called a design pattern (another fancy word, like affordances). It’s impossible for people to use an interface without first learning the basic of the interface. Design patterns like putting the housekeeping links top right on websites speeds up the time people spend learning a website navigation. Copying the placement of features like login links is one easy technique to include when designing an interface.

Interface design, in other words, exists not only to make it easy for people to find content and do things. Interfaces also need to be learned. Interface design is a way to make it easy for people to learn interfaces, whether they copy a design pattern or label all their links with words and phrases people expect to find.

Basic Interface Design Concepts

Depending on where and how you learn interface design, there are a number of concepts used to design any interface. Many of these concepts revolve around how people user computers. The concepts below are lifted from a paper by Marshall Jones, Interface Design Guidelines for Computer-Based Learning Environments, linked at the bottom of this article. While his focus is on learning software, the concepts apply to all computer interfaces.

Computer interfaces have most or all of these qualities:

• Browsing — Allows people to explore the interface different ways. The ways people explore, however, should be planned and optimized to make it easy for people to find information.
• Changing State — Visual cues that appear when a person starts or completes an action, for example, clicking a link or submitting a form.
• Closure — Like changing state, closure tells people they have found the content they want and then reached the content they want.
• Information Access — This can include a search input field or an index page with links organized by content type, task, or other criteria.
• Interface Consistency — Content, navigation links, tools, and other parts of the interface should be visually consistent.
• Coaching the User — In some cases, an interface might include examples, notes, bulleted lists, or other ways to organize content in useful ways.
• Progressive Disclosure — Large amounts of content should be organized so they can be revealed in chunks to not overwhelm readers.
• Visual Momentum — Navigation breadcrumbs (links that show the path to the current page) help people track their progress through content or processes.

Basic Interface Design Goals

The basic design concepts above are often distilled into a set of goals and techniques:

• Know the User — While this can take many forms, the output usually is a set of tasks and content needed for each task, as well as words and phrases to use in navigation and headings to help orient people who use the interface.
• Organize Content and Links by Task and User — The placement and content used for navigation are rarely accidental. The links use words and phrases people expect and they should be grouped in useful ways to help people find the functionality they want.
• Stage Content — While navigation links can be organized based on tasks people perform with an interface, the content results also can be staged. Instead of dumping information, content should be organized to make it easy to navigate. This might involve chunking content into individual pages, using short summaries to introduce sections of content, bullet lists, or some combination.
• The One Click Rule — Made famous years ago after people got fed up with websites who made it difficult to find content, this rule simply says people should not have to click more than one link (or two, tops) to find information they need. A corollary rule is people should be able to jump from a page on a site to any other section or page on the site. In both cases, the goal is to make content easy to find.

If you want to know how geeky Flickr is, when I searched their photo collection for affordance, an obscure word only designers know, there were a few dozen photos. Including the photo I chose for the top of this article, ominously called The Door of Zero Affordances.

Learn More

CS Unplugged: Human Interface Design (The Chocolate Factory)

http://csunplugged.org/human-interface-design

Common Ground: A Pattern Language for Human-Computer Interface Design

http://www.mit.edu/~jtidwell/common_ground.html