Consistency - ID for Devz at Hacker Dojo


Published on

Nov 2010: An ID for Devz class at Hacker Dojo on how consistency in design can inspire users to stay longer on your app and to explore more.

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Consistency - ID for Devz at Hacker Dojo

  1. 1. C o n s i s t e n c y How consistency can inspire users to stay longer on your App and to explore more ID for Devz at Hacker Dojo Nilo Sarraf November 2010
  2. 2. Why Consistency is Gooood <ul><li>Less cognitive efforts on learning your App </li></ul><ul><li>Less cognitive resources wasted </li></ul><ul><li>Increased positive user experience </li></ul><ul><li>Happy users! </li></ul><ul><li>Users are more likely to come back </li></ul><ul><li>Users will spend more time ‘exploring’ your App </li></ul>
  3. 3. Two Types of Consistencies <ul><li>Internal Consistency - Within you App </li></ul><ul><ul><li>Two identical elements have the same behaviors and consequences </li></ul></ul><ul><ul><li>Internal knowledge within the App </li></ul></ul><ul><li>External Consistency - Without you App </li></ul><ul><ul><li>Elements in your App follow the ‘conventional’ user interface norms </li></ul></ul><ul><ul><li>Internal knowledge of the App in comparison to the external knowledge </li></ul></ul><ul><ul><li>Forward Transfer </li></ul></ul>
  4. 4. Internal Consistency <ul><li>When two identical elements have the same behaviors and consequences </li></ul><ul><li>Internal knowledge within the App </li></ul><ul><li>Limited user cognitive resources is spent </li></ul><ul><ul><li>Learning processes minimized </li></ul></ul><ul><li>Users more willing to explore your App </li></ul><ul><ul><li>You are using what users already know </li></ul></ul><ul><ul><li>Predictable and learnable Apps </li></ul></ul><ul><ul><li>More cognitive resources is spent on exploring your App, as opposed to learning at the element levels </li></ul></ul><ul><li>Happy users who keep consistently coming back! </li></ul><ul><li>NOTE: More important to implement Internal rather than External Consistency </li></ul>
  5. 5. Consistent Internal Behavior <ul><li>Customization </li></ul><ul><ul><li>Google Chrome behaves the same even if the user is allowed to customize </li></ul></ul>
  6. 6. No Internal Consistency? <ul><li>Users will spend time and energy on learning, as opposed to exploring your App </li></ul><ul><li>Frustrated users </li></ul><ul><li>Higher percentage of users are likely to leave your App within amount of short time </li></ul>
  7. 7. Can You Identify the Links?
  8. 8. Can You Identify the Links? Links Link Links Links
  9. 9. “ Consistency makes the interface familiar and predictable.” ( The Windows User Interface Guidelines for Software Design , Microsoft Press)
  10. 10. These Two Lists, on the Same CD APP , Operate Totally Differently Play List CD Track List
  11. 11. External Consistency <ul><li>To be consistent with the ‘conventional norms’ </li></ul><ul><li>Forward Transfer </li></ul><ul><ul><li>Sounds too dry and not as creative? </li></ul></ul><ul><ul><li>The reality is that users want to be able to recognize various element on your App </li></ul></ul><ul><ul><li>Users prefer to explore Apps rather than trying to learn them all over again </li></ul></ul>
  12. 12. Icons… FOR EVER!!!
  13. 13. Identifying Areas Where You Can Be Consistent <ul><li>Elements </li></ul><ul><li>Design </li></ul><ul><li>Content </li></ul><ul><li>Interaction </li></ul>
  14. 14. Elements <ul><li>Footer, side bar, and navigation </li></ul><ul><li>Changed look and feel of the site </li></ul><ul><li>But the elements are ALWAYS consistently on the same spot </li></ul>
  15. 15. Design <ul><li>“ Its OK to experiment but keep the design consistent.” </li></ul><ul><li>Users remember details </li></ul><ul><li>Allow for customization? </li></ul>
  16. 16. Consistent Design <ul><li>Consistent UI </li></ul><ul><ul><li>Consistent look and feel across platforms </li></ul></ul>iPhone App Android App
  17. 17. Content <ul><li>Consistent in tone, mood, quality, and quantity </li></ul><ul><li>Users get used to the tone </li></ul><ul><ul><li>Funny, laid back, adventures, fantasy, serious, playful… You choose! </li></ul></ul><ul><ul><li>Keep the same tense: past or present </li></ul></ul><ul><li>Users get used to the posting ‘schedule’ </li></ul>
  18. 18. Consistent Content <ul><li>Hot Devz </li></ul><ul><ul><li>Consistent tone, mood, quantity, quality, and scheduling </li></ul></ul>
  19. 19. Interaction <ul><li>Users choose to interact with your App differently but the interaction still needs to be consistent </li></ul><ul><ul><li>Links open in new or existing windows </li></ul></ul><ul><ul><li>Displaying pictures </li></ul></ul><ul><ul><li>Drag and drops </li></ul></ul><ul><li>Radio buttons that work as check boxes </li></ul>
  20. 20. Consistent Interaction <ul><li>Tony’s tips for iPhone users </li></ul><ul><ul><li>Follows Safari’s bookmark model </li></ul></ul><ul><ul><li>Forward Transfer </li></ul></ul>Tony’s App Safari’s App
  21. 21. Finally: Just Remember These! <ul><li>It’s OK to make your own controls but don’t have them behave differently than the conventional existing controls </li></ul><ul><li>If something looks the SAME, it should behave the SAME </li></ul><ul><li>If something looks DIFFERENT, it should behave DIFFERENT </li></ul>
  22. 23. References <ul><li>UI Usability </li></ul><ul><ul><li> </li></ul></ul><ul><li>UX Booth </li></ul><ul><ul><li>http://www. uxbooth .com/blog/consistency-key-to-a-better-user-experience/ </li></ul></ul><ul><li>Pure Caffeine </li></ul><ul><ul><li> </li></ul></ul><ul><li>iPhone App UI </li></ul><ul><ul><li> </li></ul></ul>