Functional Interaction Design

Laura Scott • President & Creative Director of pingVision • Designing websites since 1995 • Designing DVDs since 2001 • Drupal since 2004 • BA and MFA FWIW

Computer/Programming experience • Watching 2001 and Star Trek • Punch cards in 7th grade • PASCAL in college • IBM mainframe in college • MacIntosh for grad school applications • DOS in grad school • Windows 3.1, 95, NT (hating MacOS) • Mac since 2002

$session != • Theming, CSS, (x)html, PHP • Beauty for beauty's sake • The be-all, end-all of design

Thoughts. Observations. Things I've learned. (Rambling stuff.)

I want your feedback @lauras #drupalcon or #drupalconparis and #ﬁd "laura s" http://drupal.org/user/18973/contact

WTF is "Functional" Interaction Design?

Design that serves a function.

Design that is usable.

Design that works.

Functional design serves the user

Functional design is easy to understand...

...or at least easy to ﬁgure out without stress.

Sometimes design seems to be a bit unusual

Herman Miller Aeron chair

• Shaped to ﬁt the human body • Holes keep you cool • Lightweight: easy to move • Handle: easy to move • Stackable • Appealing color = beautiful

Who is your audience?

Who is your audience? Hint: This actually looks good to some people.

Intuitive

Is functional design any less important in software or on the web than it is for your chair or coffee maker or favorite pen?

How much time do you spend on the web?

Functional design used to be exclusively in the realm of product design.

http://tomgpalmer.com/2005/09/

source: Wikimedia Commons

http://www.global-b2b-network.com

http://blogs.sun.com

The "expert" interface (that requires expertise just to do basic things)

1981: GRID Compass designed by Bill Moggridge

Designing Interactions by Bill Moggridge

The "Desktop" Analogues of what we already knew Xerox's Tim Mott's doodled schematic for UI from Moggridge: "Designing Interactions"

Xerox PARC Tim Mott and Larry Tessler (and many others)

"guided fantasies" to learn about user needs

The lesson of the analogue….

Applications that are easy to use are designed to be familiar. –Jennifer Tidwell

How do I create a group?

How do I create a page?

How do I ﬁnd unread replies?

How do I ﬁnd unread replies? meh!

Some basics

Clear mental model.

Reassuring feedback.

Navigability.

Consistency.

Intuitive interaction.

"When we design a computer-based system or device, we're designing not just for what it looks like but how it behaves. We're designing the quality of how we and it interact." Bill Moggridge

Functional Design Concepts

Affordance How the design itself invites you to use it.

What is this about?

? http://www.iqcontent.com/blog/2007/01/the-usability-of-garda-doors/

http://www.ihatehardware.com/?tag=push-pull

Legibility Gray on Gray is not beautiful

10 words: pear pearl prude sandwich orange purple crisper lunchbox seed pith

Perceptual limits Maximum number of objects in a glimpse: 3 Maximum number of objects with attention: 7 Most people can remember only 5 words for 30 seconds

Remember those words?

10 words: pear pearl prude sandwich orange purple crisper lunchbox seed pith

Five "Hat Racks" alphabet chronology location category continuum

Category

Chronology

Location

Alice Beauregard Captain Dizz Eloise Fiﬁ Frankie Glenda Gorgeous Hieronymus Horatio Ignatius Jojo Kiki Larry Alphabetical Moe Mystique Nattie Opal Pris Sydney Zeke

Continuum

iStockPhoto.com

Error Handling

Error Handling Action Attention Perception Decision Knowledge

Action Slips Attention Perception Mistakes Decision Knowledge

• Perception problem. • Decision problem. • Knowledge problem.

X Help ﬁx this! http://drupal.org/node/475596

Drupal Usability Sprint this weekend!

Errors happen.

Error Handling Confirmation

Error Handling Undo

Forgiveness

Constraint Limit actions and options.

Consistency Have similar parts expressed in similar ways.

Feedback

Feedback print $message needs CSS love Module: Message Effects

Closure We tend to perceive elements as a single recognizable pattern, rather than multiple individual elements.

What are the Goals of successful interactive design?

Safe exploration

Instant Gratiﬁcation

Satisﬁcing

Changes in Midstream

Deferred Choices

Incremental Construction

Habituation

Spatial Memory

Recommended books

Designing Interfaces by Jennifer Tidwell

Designing Interfaces Universal Principles of Design by Jennifer Tidwell by William Lidwell, Kritina Holden and Jill Butler

Designing Interactions by Bill Moggridge

Many others.

Kitten Merlijn Hoek Credits http://www.flickr.com/photos/merlijnhoek/2841785343/ Federico Coppola Tina Keller http://www.flickr.com/photos/silentman-it/445803333/ http://www.flickr.com/photos/earthandeden/395466458/ artolog http://www.flickr.com/photos/artolog/2473548737/ AWholeLotOfSpinky duygu http://www.flickr.com/photos/30703055@N04/2955720447/ http://www.flickr.com/photos/duygu/115528187/ Clevergrrl http://www.flickr.com/photos/clevergrrl/218312595/ eleda 1 http://www.flickr.com/photos/eleda/528165182/ Four Doxn http://www.flickr.com/photos/fourdoxn/1339194561/ Tele Chhe kris krug http://www.flickr.com/photos/telachhe/3136430416/ http://www.flickr.com/photos/kk/3637572251/ benoutram http://www.flickr.com/photos/benoutram/598735432/ Shamey Jo http://www.flickr.com/photos/ajoruss/2701593436/ pontman shutupyourface http://www.flickr.com/photos/paulesson/2353322369/ http://www.flickr.com/photos/shutupyourface/1966377180/ e3000 Editor B http://www.flickr.com/photos/e3000/3235000046/ http://www.flickr.com/photos/editor/510833913/ cwalker71 http://www.flickr.com/photos/cwalker71/2045466141/ gsx-r750 http://www.flickr.com/photos/gsx-r750/1475603952/ alasam http://www.flickr.com/photos/alasam/2463625340/ alasam http://www.flickr.com/photos/alasam/464279732/ pirateparrot http://www.flickr.com/photos/pirateparrot/333569969/

Thank you! Laura Scott @lauras "laura s" http://drupal.org/user/18973/contact pingv.com rarepattern.com

Functional Interaction Design

0 comments

Notes on slide 1

5 Favorites