Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Good UX KarmaGuiding Principles toSimpler / Easier / HappierUser Interface DesignSTL UX 2011February 25, 2011Presented byH...
HELLO.
Hafiz HudaVP, Executive Creative Director@lostpearRyan SwartsArt Director / Usability Analyst@swartsr
WHAT IS IT?WHY SHOULD I CARE?UX KARMA
DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGS
CONTEXT + MAPPINGS
DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGS
REMEMBER THEDO UNTO OTHERS as you wouldhave them do unto you.GOLDENRULE.
WITHFOR THEDESIGNEMPATHYUSER.
USER.PERSON.YOU ARE AMOST IMPORTANT...YOU ARE A
Good UX Design=Happy People=Smart Business
DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGSOur Guiding Principles.
Visual ConfidenceContext + MappingMake It EasierMisconceptionsBeing Human
Make It EasierContext + MappingMisconceptionsBeing HumanVisual Confidence
DIVDER PAGE HEADLINEDIVDER PAGE SUBVISUAL CONFIDENCEPoint the way with good hierarchy.01
No Hierachy = No ConfidenceGood hierarchy helps guide the eyethrough a page of content.A page without a strong hierarchy c...
Methods to define hierarchy.From Graphic Design: The New Basics — GDBasics.com
Group information into distinct elements.From BigSpaceship.com
Leverage size to indicate hierarchy.From BigSpaceship.com
Break up large articles.From MSNBC.com
We access information in small chunks.From MSNBC.com
DIVDER PAGE HEADLINEDIVDER PAGE SUBVISUAL CONFIDENCEMake commonly usedelements bigger.02
Size MattersIf people use an area of your website often,make it easier to find and interact with.Don’t reduce key interact...
Pagination Buttons: only 19x19 pixels?From VEER.com
Large thumbnails to review products.From Etsy.com
Large BUY NOW button. No subtlety.From LivingSocial.com
Returning visitors clearly see SIGN IN.From BankOfAmerica.com
DIVDER PAGE HEADLINEDIVDER PAGE SUBVISUAL CONFIDENCEGive me some room!03
A little bit of elbow room andwhitespace goes a long wayStrike a balance between positive andnegative space to highlight c...
Open spaces invite exploration.From BatamHousing.com — Joel Sanders, Architect | Blesso Lofts, NYC, NY
Letting the page “breathe”From HUGEinc.com
Let the page breathe.From Logitech.com
Visual ConfidenceMake It EasierMisconceptionsBeing HumanContext + Mapping
DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGCues and Clues: Guide Your Users.04
FILL ‘ER UP.
WHERE IS THE GAS TANK LOCATED?
What’s behind door #3?
Where are we?Where we going?Cues can save people a lot of timeand hassle.Indicate where they are and where they needto go ...
Where do you begin?From www.facebook.com/BMWUSA
Animated setup: follow the arrow!From DropBox Application Installation (Mac)
Cues can help your global navigation.From USAToday.com
Ba-bam! Surprise!From USAToday.com
Deliver expectations through cues.
What’s the booking process?From Southwest.com
Guide the user through multiple steps.From Crocs.com
Users need reassurance on the process.From Crocs.com
DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGAdaptation: Design Responsively.05
Consider the contextof the interface.Ubiquitous computing means differentdevices, screens, and situations.Information and ...
DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
From tappinn.comAWKWARDPLACEMENT
From 100 yards away, exclusive content.From http://qranywhere.blogspot.com
CollyLogic.com“Narrow Version”
CollyLogic.com“Wide Screen”
Feedly.comStandard
Feedly.comWide Edition
Adaptation saves development/design time.From CSSgrid.net
Flexible framework adapts to device.From LessFramework.com
Visual ConfidenceMake It EasierContext + MappingBeing HumanMisconceptions
DIVDER PAGE HEADLINEDIVDER PAGE SUBMAKE IT EASIERSimplify Things: Kill the Distractions.06
Too many options becomeoverwhelmingCut the number of options and your processgoes from a chore to a delight.Limiting optio...
Where do you begin?From KCSTAR.com
Hierarchy + Limit the story options and ads.From MSNBC.com
Single call-to-action and clearing obstactles.From Huggies.com
You’re here to do only one thing. Win. Win.From www.SUBWAYfreshbuzz.com
DIVDER PAGE HEADLINEDIVDER PAGE SUBMAKE IT EASIERReduce the number of steps.07
If possible, reduce the stepsin repetative tasksExamine your user-flow closely: can youcombine any steps or remove a few?U...
The double-confirmation:You REALLY sure you wantto watch this program?
bit.lyAuto-Shorteningupon Copy/PasteFacebook SharingSHARE simultaneouslycloses the window
Where’s the phone number?From SuperPages.com
Click AGAIN to reveal the phone number.From SuperPages.com
People expect numbers in directories.From YP.com
Return visits are encouraged.From HendricksGin.com
Visual ConfidenceMake It EasierContext + MappingBeing HumanMisconceptions
DIVDER PAGE HEADLINEDIVDER PAGE SUBMisconceptionsUsers want reinvention.08
People don’t always want youto reinvent accepted practicesThe Myth: As designers, we must create newUI to stay innovative....
DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGSIS THIS THE BEST LOCATION?
DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGSPRACTICALvs.CLEVER?
Not the flair you want on your site.From TGIFridays.com
NOT ABUTTONBUTTONS
Most of these buttons are made by http://design-freak.com.
Major complaintabout e-readersis that their pagenumbers didn’tcorrespond to thepage numbers ina printed book.
DIVDER PAGE HEADLINEDIVDER PAGE SUBMisconceptionsThe Myth of “The Fold.”09
Newspapers and Screens.People scroll. Really!The Myth: Users Won’t See Past ”The Fold”Constant requests to cram as muchinf...
DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
4,314pixels of postssince January.Our little Facebook page...
The essential elements are above the fold.From www.boxee.tv
The essentials.Great contentand features.Repeat thoseessentials.
Nice, big content blocks without clutter.From www.boxee.tv
Thanks for scrolling 2,800+ pixels. Ready to BUY?From www.boxee.tv
RecommendationsStop cramming stuff above a specific pixelpoint in your designs.The three highest fold locations:570, 590 a...
When the Fold Matters.If a specific piece of content is essential toyour business, move it to the top.Advertisers will sti...
Visual ConfidenceMake It EasierContext + MappingMisconceptionsBeing Human
DIVDER PAGE HEADLINEDIVDER PAGE SUBBeing HumanReal language. Honesty. Personality.10
DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
Treat the user as a personKill jargon when you can and speak franklyand honestly.Bring brand personality when appropriate....
Close Button? Just deal.From KCstar.com
Where to? Where from? Speak Up!From JetBlue.com
Conversational language works.From Southwest.com
Congratulate yourcustomers for doing agood job.
Build your family profile.From Alice.com
Monkeys make everyone smile.From MailChimp.com
“Nuts, you had a few people jump ship.Ah, who needs them anyway?”From MailChimp.com
Discover opportunities to help,guide, and delight.People gravitate to brands that value them.Customers are people, not sim...
UX KARMADESIGNING A BETTER WORLD.
USERS.WE AREPEOPLE.MORE THAN
THANKS.Hafiz Huda@lostpearRyan Swarts@swartsr
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
SlideShare 101
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design

Download to read offline

People are busier than ever. The UX karmic cycle can create positive experiences for them, which in turn drives business. We’ll point to ten specific principles for making your users’ lives easier—UX Mantras that can bring change for good. From typography to spacing to plain language, we’ll keep it fast, simple, and packed with common sense to make your users happier and your business stronger.

When I was the Exec Creative Director at Infuz, I wrote this with Ryan Swarts, our UX Architect and Art Director for our presentation at the 2011 STL UX Conference.

And yes... The airport sign at around 06:01 is not in Danish. I'm told it's Dutch. Doh!

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Good UX Karma: Guiding Principles to Simpler, Easier and Happier UI Design

  1. 1. Good UX KarmaGuiding Principles toSimpler / Easier / HappierUser Interface DesignSTL UX 2011February 25, 2011Presented byHafiz Huda and Ryan Swarts
  2. 2. HELLO.
  3. 3. Hafiz HudaVP, Executive Creative Director@lostpearRyan SwartsArt Director / Usability Analyst@swartsr
  4. 4. WHAT IS IT?WHY SHOULD I CARE?UX KARMA
  5. 5. DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGS
  6. 6. CONTEXT + MAPPINGS
  7. 7. DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGS
  8. 8. REMEMBER THEDO UNTO OTHERS as you wouldhave them do unto you.GOLDENRULE.
  9. 9. WITHFOR THEDESIGNEMPATHYUSER.
  10. 10. USER.PERSON.YOU ARE AMOST IMPORTANT...YOU ARE A
  11. 11. Good UX Design=Happy People=Smart Business
  12. 12. DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGSOur Guiding Principles.
  13. 13. Visual ConfidenceContext + MappingMake It EasierMisconceptionsBeing Human
  14. 14. Make It EasierContext + MappingMisconceptionsBeing HumanVisual Confidence
  15. 15. DIVDER PAGE HEADLINEDIVDER PAGE SUBVISUAL CONFIDENCEPoint the way with good hierarchy.01
  16. 16. No Hierachy = No ConfidenceGood hierarchy helps guide the eyethrough a page of content.A page without a strong hierarchy can beas stressful to the user as a design withoutproper space.Prioritize the intended user interactions.
  17. 17. Methods to define hierarchy.From Graphic Design: The New Basics — GDBasics.com
  18. 18. Group information into distinct elements.From BigSpaceship.com
  19. 19. Leverage size to indicate hierarchy.From BigSpaceship.com
  20. 20. Break up large articles.From MSNBC.com
  21. 21. We access information in small chunks.From MSNBC.com
  22. 22. DIVDER PAGE HEADLINEDIVDER PAGE SUBVISUAL CONFIDENCEMake commonly usedelements bigger.02
  23. 23. Size MattersIf people use an area of your website often,make it easier to find and interact with.Don’t reduce key interaction elements.The most important call to action should bethe biggest on screen.
  24. 24. Pagination Buttons: only 19x19 pixels?From VEER.com
  25. 25. Large thumbnails to review products.From Etsy.com
  26. 26. Large BUY NOW button. No subtlety.From LivingSocial.com
  27. 27. Returning visitors clearly see SIGN IN.From BankOfAmerica.com
  28. 28. DIVDER PAGE HEADLINEDIVDER PAGE SUBVISUAL CONFIDENCEGive me some room!03
  29. 29. A little bit of elbow room andwhitespace goes a long wayStrike a balance between positive andnegative space to highlight content.Avoid cluttering the visual canvas.Each key element serves a purpose,so define the boundaries and spaceto emphasize importance.
  30. 30. Open spaces invite exploration.From BatamHousing.com — Joel Sanders, Architect | Blesso Lofts, NYC, NY
  31. 31. Letting the page “breathe”From HUGEinc.com
  32. 32. Let the page breathe.From Logitech.com
  33. 33. Visual ConfidenceMake It EasierMisconceptionsBeing HumanContext + Mapping
  34. 34. DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGCues and Clues: Guide Your Users.04
  35. 35. FILL ‘ER UP.
  36. 36. WHERE IS THE GAS TANK LOCATED?
  37. 37. What’s behind door #3?
  38. 38. Where are we?Where we going?Cues can save people a lot of timeand hassle.Indicate where they are and where they needto go next to complete an action.Use indicators like color, font weight,shadows, and arrows to guide a person’seye toward the next steps.
  39. 39. Where do you begin?From www.facebook.com/BMWUSA
  40. 40. Animated setup: follow the arrow!From DropBox Application Installation (Mac)
  41. 41. Cues can help your global navigation.From USAToday.com
  42. 42. Ba-bam! Surprise!From USAToday.com
  43. 43. Deliver expectations through cues.
  44. 44. What’s the booking process?From Southwest.com
  45. 45. Guide the user through multiple steps.From Crocs.com
  46. 46. Users need reassurance on the process.From Crocs.com
  47. 47. DIVDER PAGE HEADLINEDIVDER PAGE SUBCONTEXT + MAPPINGAdaptation: Design Responsively.05
  48. 48. Consider the contextof the interface.Ubiquitous computing means differentdevices, screens, and situations.Information and composition shift dependingon the needs and affordances of the device.Placement dictates relevance.
  49. 49. DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
  50. 50. From tappinn.comAWKWARDPLACEMENT
  51. 51. From 100 yards away, exclusive content.From http://qranywhere.blogspot.com
  52. 52. CollyLogic.com“Narrow Version”
  53. 53. CollyLogic.com“Wide Screen”
  54. 54. Feedly.comStandard
  55. 55. Feedly.comWide Edition
  56. 56. Adaptation saves development/design time.From CSSgrid.net
  57. 57. Flexible framework adapts to device.From LessFramework.com
  58. 58. Visual ConfidenceMake It EasierContext + MappingBeing HumanMisconceptions
  59. 59. DIVDER PAGE HEADLINEDIVDER PAGE SUBMAKE IT EASIERSimplify Things: Kill the Distractions.06
  60. 60. Too many options becomeoverwhelmingCut the number of options and your processgoes from a chore to a delight.Limiting options leaves a person feelingmore confident and ultimately more satisfied.Focus on the task goals at hand.Empower the user to make a decision.
  61. 61. Where do you begin?From KCSTAR.com
  62. 62. Hierarchy + Limit the story options and ads.From MSNBC.com
  63. 63. Single call-to-action and clearing obstactles.From Huggies.com
  64. 64. You’re here to do only one thing. Win. Win.From www.SUBWAYfreshbuzz.com
  65. 65. DIVDER PAGE HEADLINEDIVDER PAGE SUBMAKE IT EASIERReduce the number of steps.07
  66. 66. If possible, reduce the stepsin repetative tasksExamine your user-flow closely: can youcombine any steps or remove a few?Use technology for efficiencies: cookies,pre-populated fields, etc.Less of a hassle means a happier person.
  67. 67. The double-confirmation:You REALLY sure you wantto watch this program?
  68. 68. bit.lyAuto-Shorteningupon Copy/PasteFacebook SharingSHARE simultaneouslycloses the window
  69. 69. Where’s the phone number?From SuperPages.com
  70. 70. Click AGAIN to reveal the phone number.From SuperPages.com
  71. 71. People expect numbers in directories.From YP.com
  72. 72. Return visits are encouraged.From HendricksGin.com
  73. 73. Visual ConfidenceMake It EasierContext + MappingBeing HumanMisconceptions
  74. 74. DIVDER PAGE HEADLINEDIVDER PAGE SUBMisconceptionsUsers want reinvention.08
  75. 75. People don’t always want youto reinvent accepted practicesThe Myth: As designers, we must create newUI to stay innovative. People love seeingpretty designs.There’s always room to improve upon oldconventions, but consider the user.Don’t force them to learn establishedUI elements and interactions.By going against the grain, are youimproving the experience or are youputting up walls?
  76. 76. DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
  77. 77. DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
  78. 78. DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGSIS THIS THE BEST LOCATION?
  79. 79. DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGSPRACTICALvs.CLEVER?
  80. 80. Not the flair you want on your site.From TGIFridays.com
  81. 81. NOT ABUTTONBUTTONS
  82. 82. Most of these buttons are made by http://design-freak.com.
  83. 83. Major complaintabout e-readersis that their pagenumbers didn’tcorrespond to thepage numbers ina printed book.
  84. 84. DIVDER PAGE HEADLINEDIVDER PAGE SUBMisconceptionsThe Myth of “The Fold.”09
  85. 85. Newspapers and Screens.People scroll. Really!The Myth: Users Won’t See Past ”The Fold”Constant requests to cram as muchinformation above the fold as possible.Use visual cues (such as cut-off images andtext) and compelling content to draw theuser down the page.
  86. 86. DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
  87. 87. 4,314pixels of postssince January.Our little Facebook page...
  88. 88. The essential elements are above the fold.From www.boxee.tv
  89. 89. The essentials.Great contentand features.Repeat thoseessentials.
  90. 90. Nice, big content blocks without clutter.From www.boxee.tv
  91. 91. Thanks for scrolling 2,800+ pixels. Ready to BUY?From www.boxee.tv
  92. 92. RecommendationsStop cramming stuff above a specific pixelpoint in your designs.The three highest fold locations:570, 590 and 600 pixels(all different browsers) on 1024×768.FORGET IT.Offer compelling content for the scroll.What’s at the bottom? Morethan a copyright and footer?
  93. 93. When the Fold Matters.If a specific piece of content is essential toyour business, move it to the top.Advertisers will still want their ads towardsthe top of the page.Screen height matters with applications.
  94. 94. Visual ConfidenceMake It EasierContext + MappingMisconceptionsBeing Human
  95. 95. DIVDER PAGE HEADLINEDIVDER PAGE SUBBeing HumanReal language. Honesty. Personality.10
  96. 96. DIVDER PAGE HEADLINEDIVDER PAGE SUBDIVDER PAGE HEADLINECONTEXT + MAPPINGS
  97. 97. Treat the user as a personKill jargon when you can and speak franklyand honestly.Bring brand personality when appropriate.Be aware of people’s time and efforts.
  98. 98. Close Button? Just deal.From KCstar.com
  99. 99. Where to? Where from? Speak Up!From JetBlue.com
  100. 100. Conversational language works.From Southwest.com
  101. 101. Congratulate yourcustomers for doing agood job.
  102. 102. Build your family profile.From Alice.com
  103. 103. Monkeys make everyone smile.From MailChimp.com
  104. 104. “Nuts, you had a few people jump ship.Ah, who needs them anyway?”From MailChimp.com
  105. 105. Discover opportunities to help,guide, and delight.People gravitate to brands that value them.Customers are people, not simply “users.”Step in their shoes and you’ll create betterdigital experiences.Happy customers. Repeat business.You create fans, followers, and advocates!
  106. 106. UX KARMADESIGNING A BETTER WORLD.
  107. 107. USERS.WE AREPEOPLE.MORE THAN
  108. 108. THANKS.Hafiz Huda@lostpearRyan Swarts@swartsr

People are busier than ever. The UX karmic cycle can create positive experiences for them, which in turn drives business. We’ll point to ten specific principles for making your users’ lives easier—UX Mantras that can bring change for good. From typography to spacing to plain language, we’ll keep it fast, simple, and packed with common sense to make your users happier and your business stronger. When I was the Exec Creative Director at Infuz, I wrote this with Ryan Swarts, our UX Architect and Art Director for our presentation at the 2011 STL UX Conference. And yes... The airport sign at around 06:01 is not in Danish. I'm told it's Dutch. Doh!

Views

Total views

683

On Slideshare

0

From embeds

0

Number of embeds

8

Actions

Downloads

9

Shares

0

Comments

0

Likes

0

×