On June 27th, Laura Scott - the President and Creative Director of pingVision did a presentation at Drupalcamp Colorado on Functional Interactive Design. I took a few notes and captured some video from the presentation which I'm offering in this blog post.

Laura started by talking about her early experience with computers that ranged from the movies and TV to punch cards. She talked a bit about pascal and IBM mainframes. She used both a Mac and DOS in grad school making heavy use of Windows 3.1, 95, and NT. In 2002 she adopted the Mac platform.

Laura stressed that the session would not be about theming. She also indicated that the session would not discuss "Beauty for Beauty's Sake." The session would review her thoughts, observations, and things that Laura has learned.

We know that interactive design needs to be functional.

But what is Functional Interative Design? It is design that serves a function and works. It serves the user and it helps us use the tool. It is easy to understand. It is something that you can figure out without stress. Sometimes functional design can seem unusual.

Gladwell talked about the Herman Miller chair. It serves function, not looks. It allows for lots of adjustments. It has a solid mesh that took forever to figure out. Everybody hated it. Herman Miller believed in it and kept trucking away at it. Ultimately, the perception of the chair changed and now everyone wants one. The functionality of the chair has adjusted our perception of the chair. Functional design has changed our perceptions on all sorts of things. Recumbant bikes for example.

When thinking about Functional Interactive Design you need to start with the following:

Who is your audience? Fit the audience. The audience is important.

Laura went on to ask,

Is functional design any less important for software than physical?

It should be obvious. Once the user interface is figured out it tends to stay the same. TVs or radios are a prime example. Until very recently, the interface on all models had been pretty much identical. Look at phones. Phones used to be extremely easy to use but have become difficult to use. Laura pointed out that the phones in the pingVision office are really great functionally, but difficult to figure out. Where is the hold button? How about the speaker?

Bill Moggridge wrote a book called Designing Interactions - Laura recommends it. The book tells the story at Xerox when the company was designing the computer user interface. They were the first to look at the interface as being an "Office" or "Desktop" Xerox PARC was creating user interfaces before any other company. They called them "Guided Fantasies". After that, the "office" became an analogy for the computer interface and that has remained the case since.

What is the lesson of the "Analog"? Applications that are easy to use are are designed to be familiar - Designing Interfaces-Jennifer Tidwell

Is Facebook easy to use? No, and because of that people only scratch the surface of what the application as whole can do.

You need a Clear Mental Model. What are you TRYING to do? Create Reassuring Feedback. Make it easy to Navigate. Be Consistent. Make it Intuitive.

Affordance - how does it invite you to use the thing? Design your site to do what it seems to want to do. People use things the way the seem to be used. For example, we have bathroom doors with a what appears to be a pull handle on the inside. If you pull on the handle the door won't open. This is a design failure.

Legibility - Gray on Gray is not beautiful. Allow people to READ what you are producing. High contrast is important.

People have perceptual limits. At a glimpse we can see 3 things. By paying attention we can see 5 things. When we actively memorize, we can perceive 7 things.

In design there is the concept of 5 hat racks to IA:

• alpha
• chronology
• location
• category
• continuum

It has become a convention that users expect.

For example, the Drupal Modules page on drupal.org is really difficult to use. It is very difficult to find things. This challenge led to drupalmodules.com and, at least anecdotally, folks use it more heavily than Drupal.org to locate contibuted modules.

So when one is looking at Error Handling what should be be paying attention to?

Action, attention, perception, decision, knowledge [slips vs mistakes]

When you first load up Drupal you get the welcome screen. The instructions are somewhat incongruous and don't really fit what you actually have to do in your next steps. There is a problem with perception. You don't know what to do. At this point, many potential users might just give up and go to Wordpress. There is a knowledge problem which becomes a big barrier - folks go away and use something else. This has been recognized and seems to be getting addressed: Fix the unholy abomination that is the welcome screen

When designing a site, think about little things, like does the browser back button work?

Amazon is beautifully designed for function. Be constrained. Allow a forgiving interface. It is important to give feedback to the user that they have been successful. In Drupal, you can use the message effects module to help give that feedback.

What are the goals?

• Safe exploration!
• Instant Gratification!
• Satisfaction!

But always remember that "Perfect is the enemy of done". We need to allow changes in midstream. Having deferred choices is a good idea. Engage in incremental construction. Create an environment of habituation. Help users navigate by engaging a user's spacial memory.

Laura's final comments revolved around books that she recommended on the subject.

• Designing Interfaces by Tidwell
• Universal Principles of Design by Lidwell, Holden and Butler
• Designing Interactions by Moggridge

I hope that the video from the presentation is helpful. It is broken up into four 10 minute videos and one 7 minute video.