Essentials of user interaction design


                                   Memi Beltrame


          Follow the Flow
Essen...
Essentials of user interaction design

 User Interaction Design Shapes Behaviour

                                        ...
Essentials of user interaction design

Behaviour is the Key


               !       Make the software behave
            ...
Essentials of user interaction design




                           The Principles


© Liip AG - Memi Beltrame - Essentia...
Essentials of user interaction design

These are the Rules
 • Strive for consistency.
 • Get rid of Excise
 • Offer inform...
Essentials of user interaction design




                               Consistency


© Liip AG - Memi Beltrame - Essenti...
Essentials of user interaction design

Strive for consistency
                                                  Behaviour:...
Essentials of user interaction design

Consistency Rules
   • Consistency does not imply rigidity

   • Visually distingui...
Essentials of user interaction design




                                                Excise


© Liip AG - Memi Beltra...
Essentials of user interaction design

Eliminate excise
      Excise is
      • unnecessary work load,
      • visual elem...
Essentials of user interaction design

Excise rules

• Don‘t stop the proceedings with idiocy
• Don‘t clutter the interfac...
Essentials of user interaction design




                                               UNDO


© Liip AG - Memi Beltrame ...
Essentials of user interaction design

The Power of UNDO
UNDO
• is the rescuer of users in distress.
• encourages explorat...
Essentials of user interaction design

UNDO on Websites
On websites undos are typically
• not chronological
• single-level...
Essentials of user interaction design

Undo and DELETE in Databases
Include the UNDO-process in your DB scheme
A)
• provid...
Essentials of user interaction design




                                           Feedback




© Liip AG - Memi Beltram...
Essentials of user interaction design

Offer Informative Feedback
   Give feedback
   • that is helpful
   • that matters ...
Essentials of user interaction design

Design Dialog to Yield Closure
   • Always give exit paths at any time,
   without ...
Essentials of user interaction design

Offer Simple Error Handling
Remember
Users get humiliated
when software tells
them ...
Essentials of user interaction design

Offer Simple Error Handling
• Inform and clean up the mess.
• Don‘t interrupt the u...
Essentials of user interaction design




              Input & Validation


© Liip AG - Memi Beltrame - Essentials of Use...
Essentials of user interaction design

Forms of Input

   Bounded                                                         ...
Essentials of user interaction design

Types of Controls
                                                                 ...
Essentials of user interaction design

Controls and Validation

 If users can make an Input
 they assume it is valid

  ! ...
Essentials of user interaction design

Text Edit Controls and Validation

 • Inform the users what input they can make
   ...
Essentials of user interaction design

Active Validation
 Active : on entering

 • Use this for validation that can be don...
Essentials of user interaction design

Passive Validation
Passive : on blur

• Use this for validation that can not be don...
Essentials of user interaction design

Provide the sense of control
• Allow the use of either keyboard or mouse
• Allow us...
Essentials of user interaction design

Reduce Short Term Memory Load
• Rely on recognition, not recall
• Provide clues to:...
Essentials of user interaction design




                                  Conclusion


© Liip AG - Memi Beltrame - Essen...
Essentials of user interaction design

This is your Goal


• Consistency                                                  ...
Essentials of user interaction design

References
   Cooper, Alan. 2007. About Face 3: The Essentials of
   Interaction De...
Upcoming SlideShare
Loading in...5
×

Follow the Flow - Essentials of User Interaction Design

3,858
-1

Published on

These slides are a brief introduction of the main principles of User Interaction Design. I use them as a starting point when training juniors. They are largely based on the Book "About Face" by Alan Cooper et al.

Published in: Design, Technology, Business
1 Comment
12 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,858
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
147
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

Follow the Flow - Essentials of User Interaction Design

  1. 1. Essentials of user interaction design Memi Beltrame Follow the Flow Essentials of User Interaction Design © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 1
  2. 2. Essentials of user interaction design User Interaction Design Shapes Behaviour Behaviour Interaction designers User Experience Form Content Graphic designers Information architects © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 2
  3. 3. Essentials of user interaction design Behaviour is the Key ! Make the software behave like a considerate being ! • Respond to the different types of users (and their behaviour) • Be rational, clear, friendly. © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 3
  4. 4. Essentials of user interaction design The Principles © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 4
  5. 5. Essentials of user interaction design These are the Rules • Strive for consistency. • Get rid of Excise • Offer informative feedback. • Avoid dialog: Offer UNDO for reversal of actions • IF you use dialog: Design it to yield closure. • Offer simple error handling. • Provide the sense of control. • Reduce short-term memory load. © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 5
  6. 6. Essentials of user interaction design Consistency © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 6
  7. 7. Essentials of user interaction design Strive for consistency Behaviour: task steps, feedback, action vs navigation Form: Content color, shapes, command names, tone typography, layout, icons © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 7
  8. 8. Essentials of user interaction design Consistency Rules • Consistency does not imply rigidity • Visually distinguish elements that behave differently. Visually group elements that behave in the same way © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 8
  9. 9. Essentials of user interaction design Excise © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 9
  10. 10. Essentials of user interaction design Eliminate excise Excise is • unnecessary work load, • visual elements that distract the user • complexity that confuses or overwhelms the user ! Get rid of excise, sofort ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 10
  11. 11. Essentials of user interaction design Excise rules • Don‘t stop the proceedings with idiocy • Don‘t clutter the interface • Don‘t force the user to resize or move windows • Allow input wherever there is output • Don‘t make the user ask permission • Reduce the number of places to go © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 11
  12. 12. Essentials of user interaction design UNDO © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 12
  13. 13. Essentials of user interaction design The Power of UNDO UNDO • is the rescuer of users in distress. • encourages exploration. • eliminates sensless confirmation-dialogs ! Don‘t ask, do and UNDO ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 13
  14. 14. Essentials of user interaction design UNDO on Websites On websites undos are typically • not chronological • single-level (not chained) Not all actions can be undone • Sending an e-mail / submitting a form • logging out © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 14
  15. 15. Essentials of user interaction design Undo and DELETE in Databases Include the UNDO-process in your DB scheme A) • provide a IS_DELETED flag • work with views on complex schemes B) • Copy INSERT statement(s) of deleted entry to a separate UNDO-Table © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 15
  16. 16. Essentials of user interaction design Feedback © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 16
  17. 17. Essentials of user interaction design Offer Informative Feedback Give feedback • that is helpful • that matters to the user • that is understandable by the user (that‘s probably NOT YOU) • without interrupting the user (no pop-ups that have to be confirmed) © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 17
  18. 18. Essentials of user interaction design Design Dialog to Yield Closure • Always give exit paths at any time, without doing no harm and losing no data. • Always end a dialogue by giving feedback on the ending of the process © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 18
  19. 19. Essentials of user interaction design Offer Simple Error Handling Remember Users get humiliated when software tells them they failed. Therefore: ! Prevent the users from making errors ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 19
  20. 20. Essentials of user interaction design Offer Simple Error Handling • Inform and clean up the mess. • Don‘t interrupt the user with error message boxes . THEY ARE USELESS! • Considerate software fails gracefully: - it stores entered data - it gives the possibility to resume the process. © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 20
  21. 21. Essentials of user interaction design Input & Validation © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 21
  22. 22. Essentials of user interaction design Forms of Input Bounded Unbounded Boolean: Free text Yes/no Finite Lists: Phonenumbers M/F days of week Chars: 0-9(+ Ranges: 0-255 © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 22
  23. 23. Essentials of user interaction design Types of Controls bounded • Radiobuttons, checkboxes, selects > booleans, shortlists • Dials, sliders > ranges • Textfields with livesearch-like behaviour > long finite lists • Textfields and textareas > Unbound data unbounded © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 23
  24. 24. Essentials of user interaction design Controls and Validation If users can make an Input they assume it is valid ! Use bounded controls for bounded input ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 24
  25. 25. Essentials of user interaction design Text Edit Controls and Validation • Inform the users what input they can make • before they enter • in the validation feedback ! Audit, don‘t edit ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 25
  26. 26. Essentials of user interaction design Active Validation Active : on entering • Use this for validation that can be done in the client. • Give visual feedback immediately after wrong input has happened © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 26
  27. 27. Essentials of user interaction design Passive Validation Passive : on blur • Use this for validation that can not be done in the client e.g. availability of a username © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 27
  28. 28. Essentials of user interaction design Provide the sense of control • Allow the use of either keyboard or mouse • Allow users to change focus • Accomodate users of different levels • Enable frequent users to use shortcuts • Allow users to customize the interface • Don‘t let users just sit there: inform them on the progress of the task. © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 28
  29. 29. Essentials of user interaction design Reduce Short Term Memory Load • Rely on recognition, not recall • Provide clues to: - where are the users? - what are they doing? • Focus on key information - hide less common features - allow users to navigate to them © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 29
  30. 30. Essentials of user interaction design Conclusion © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 30
  31. 31. Essentials of user interaction design This is your Goal • Consistency Users in control • Orientation of a rich • No Excise interface that • Rich feedback allows true • Entry control collaboration ! © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 31
  32. 32. Essentials of user interaction design References Cooper, Alan. 2007. About Face 3: The Essentials of Interaction Design. Indianapolis: Wiley Publishing. Mandel, Theo. 1997. The Elements of User Interface Design. Indianapolis: Wiley Publishing. My UI Bookmarks on delicious: http://delicious.com/plonk/ui © Liip AG - Memi Beltrame - Essentials of User Interaction Design - v3 21.09.2009 32
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×