beanz Magazine

Interface Design Basics

Alan Levine on Flickr

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

http://www2.gsu.edu/~wwwitr/docs/idguide/

Human Computer Interaction (Coursera class)

https://www.coursera.org/course/hci

Open Classroom: Human Computer Interaction Design

http://openclassroom.stanford.edu/MainFolder/CoursePage.php?course=HCI

Don Norman: Designing for People

http://www.jnd.org

Affordances

http://youtu.be/NK1Zb_5VxuM
http://www.uxbooth.com/articles/foundations-of-affordances/
http://en.wikipedia.org/wiki/Affordance

Affordance Photo Search on Flickr

http://www.flickr.com/search/?q=affordances&l=commderiv&ss=0&ct=0&mt=photos&w=all&adv=1

Also In The February 2014 Issue

Summer 2014 Code and Technology Camps

It may be the middle of winter in the Northern Hemisphere but now might be a great time to start thinking about technology summer camps if you're a kid or have kids.

An Interview with Susan Kare

You’ve looked at and used Susan Kare’s work, or work inspired by hers, every time you use a computer. The garbage can icon and other taken for granted icons can be traced back to Kare’s icons on the first Macintosh computers.

User Experience Designers

User experience design touches on all the ways people interact with software or hardware. This includes how people use technology, the hardware design, and documentation.

Database Design

How you store and retrieve data in a relational or NoSQL database depends on how well you design the database structure.

How to Create Color Palettes

Here are several ways to create a color palette that looks professional for web sites and interfaces. It's not as easy as you might think.

Fizz-Buzz and Other Odd Questions

There are at least two types of questions coders might face in job interviews, fizz-buzz and puzzle questions. Both can be learned ahead of time.

Interface Design Basics

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

A Short History of Lorem Ipsum

No discussion of design is complete without the history of lorem ipsum. It's more than placeholder text you stuff into a visual design.

docstrings

Docstrings are special comments embedded in software code that survive compiling the code, for example, help text.

Database Normalization

Relational databases need to have their data organized a certain way.

What is Information Architecture?

When you think of architecture, you think buildings not information. However, information also needs careful design and structure in computing.

JavaScript

JavaScript is a programming language and an historical artifact from the early internet conflicts between Netscape, Microsoft, and Sun for open standards.

News Wire Stories for February 2014

Interesting stories about computer science, software programming, and technology for the months of December 2013 and January 2014. More stories can be found at the News Wire link at the top of of this site.

How to Build a (Simple) Website

Here is the simplest possible way to learn how to build a website, as well as how web pages and websites work.

A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.

Learn More Links for February 2014

Links from the bottom of all the February 2014 articles, collected in one place for you to print, share, or bookmark.