Advertisement
Check these out next
Functional Interaction Design
Sep. 7, 2009•0 likes•2,454 views
9 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Report
Design
Technology
Business
These are slides from my presentation on Functional Interaction Design, presented at DrupalCon Paris 2009. (I presented an earlier version at DrupalCamp Colorado 2009.) Credits for the wonderful kitten photos are at the end, 2nd to last slide.
Laura ScottFollow
Writer, Designer, PublisherAdvertisement
Advertisement
Advertisement
Recommended
Fundamental Design PrinciplesNathan Smith
Striking a Balance: Middle Ground in Front-End DevelopmentNathan Smith
Lettinggo 110902081541-phpapp02Innovation Excellence
Don't a Digital Dinosaur - Web 2.0 2011Samantha Starmer
Managing Digital Footprints - for grandparents (March 2014)Wesley Fryer
Create Cross Channel Experiences - Managing Experience 2011Samantha Starmer
Functional Interaction Design
- 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 #fid "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 figure out without stress.
- Sometimes design seems to be a bit unusual
- Herman Miller Aeron chair
- • Shaped to fit 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
- source: Wikimedia Commons
- source: Wikimedia Commons
- http://www.global-b2b-network.com
- http://blogs.sun.com
- source: Wikimedia Commons
- source: Wikimedia Commons
- The "expert" interface (that requires expertise just to do basic things)
- The "expert" interface (that requires expertise just to do basic things)
- The "expert" interface (that requires expertise just to do basic things)
- 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
- source: Wikimedia Commons
- 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 find unread replies?
- How do I find 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
- http://www.ihatehardware.com/?tag=push-pull
- Legibility Gray on Gray is not beautiful
- 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 Fifi Frankie Glenda Gorgeous Hieronymus Horatio Ignatius Jojo Kiki Larry Alphabetical Moe Mystique Nattie Opal Pris Sydney Zeke
- Continuum
- Continuum
- 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 fix 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 Gratification
- Satisficing
- 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
Advertisement