Basics in 
User Experience Design,Information Architecture &UsabilityG e n e r a l A s s e m b l y, J a n u a r y 9 t h , ...
AgendaIf I should forget something, please don’t tell me§  Introduction§  UX, IA & Usability§  Basics – what Basics?§ ...
Introduction
Who is this guy?@sebastianwaters
IntroductionWho is this guy?§  Name: Sebastian Waters§  Age: 27 (born July 1, 1985)§  Profession: UX Designer & Informa...
IntroductionWho is this guy?§  B.A. in Design (Thesis about Social Semantics)§  Freelancer for five years§  Glasses, lef...
Who are these guys?@sebastianwaters
IntroductionWho are these guys?§  Hands up: Design, Dev, Sales, Marketing, whatever?§  Random picks: What are you guys u...
Aims we want to reach in this talk.                                       motivational image@sebastianwaters              ...
Aims we want to reach in this talk.We want to§  have a look at how UX, IA and Usability differs from each other§  talk ab...
This presentation will be available online.You can make notes as much as you like, but I will alsoupload these slides for ...
UX, IA & Usability
Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
Rating the ability ofhow to use something.@sebastianwaters
1. Put a nail into your wall, 2. Get it back.        @sebastianwaters                        16
1. Close/Open, 2. Lock the door.       @sebastianwaters            17
1. Squeeze fruits, 2. Clean the table.       @sebastianwaters                  18
WebUsability@sebastianwaters
Provide guidance for the users with navigations       @sebastianwaters                           20
Easy to understand, browse and explore       @sebastianwaters                  21
Let users learn new features live. They aren‘t that stupid. But if,provide help and alternatives.       @sebastianwaters  ...
„Eyetracking visualizations show that users often read web pages in anF-shaped pattern: two horizontal stripes followed by...
@sebastianwaters   24
Web Usability is abouthow to search, find,explore, navigate ...@sebastianwaters        25
In a Nutshell:
What, where, how.@sebastianwaters    26
Rating the ability ofhow to use a website.@sebastianwaters
Rating the ability of              Apphow to use a website.@sebastianwaters
Five Quality Components of Web Usability§  Learnability    Is the design easy to understand and to use at first sight?§ ...
Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
Text, Photos, Videos,Locations, ...  Information Architecture                         How to collect, merge,              ...
@sebastianwaters   33
@sebastianwaters   34
@sebastianwaters   35
@sebastianwaters   36
If you plan it right, you can achieve great things.     @sebastianwaters                                 37
It can also work without a big architectural plan.     @sebastianwaters                                38
Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
That’s what gives itthe extra something.Das Salz in der Suppe.@sebastianwaters         41
How we design this                     „something“ for the                     user and his needs  The userUserExperienceD...
„You cannot not communicate.“
– Paul Watzlawick@sebastianwaters                43
@sebastianwaters   44
@sebastianwaters   45
ContextUsage of Information                       As soon as you communicate,                        you experience someth...
There are different waysto tweak the interface.Can you make the button bigger?@sebastianwaters                  47
Social InteractionsShare, control and boost your ego@sebastianwaters                    48
GamificationA better experience through playful parts@sebastianwaters                            49
StorytellingA better experience through narrational parts@sebastianwaters                                50
Persuasive DesignBe persuaded by a (virtual) shortage or other users’ reviews@sebastianwaters                             ...
Don’t make users think.Make them act.@sebastianwaters
But what’s the goal ofall this?@sebastianwaters
LeadsConversionsHappinessCommitmentPromotion@sebastianwaters
Wait, what?
User              Product        BrandExperience         Experience   Experience@sebastianwaters                          ...
Trends
Trends for UX, IA & Usability2012 is so last year, but...§  Social Interconnectivity   You can now share and combine the ...
Social Interconnectivityvimeo.com@sebastianwaters           59
Sticky Navigationmailchimp.com@sebastianwaters    60
Infinite Scrolling Pagespinterest.com@sebastianwaters          61
Rise of Web Fontsgoogle.com/webfonts@sebastianwaters      62
One Pager / Parallaxbenthebodyguard.com@sebastianwaters       63
Everyday work
Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
Three Basic ElementsAny UX/IA guy will happily do for you if you ask kindly                            Usability          ...
Usability                IA                  UXUser Research        Content Audit     Improve NavigationOnline Surveys    ...
External RoleCreate Context between Content and User                         Usability Content              Information   ...
Internal RoleTranslater between Design and Development                         Usability Design               Information ...
Typical Work placesWhere you can/should find UX/IA guys                    Agencies                                       S...
ToolsWhat to use§  Collect, merge and rearrange information    Microsoft Word, Excel, Powerpoint, Omnigraffle, Paper and ...
Good Examples
www.bmw.de@sebastianwaters                 74
www.nike.com@sebastianwaters               75
www.google.com@sebastianwaters         76
www.6wunderkinder.de@sebastianwaters       77
www.designmadeingermany.de @sebastianwaters            78
Sources
Printed SourcesGood books you should read§  Don’t make me think!, by Steve Krug, New Riders, 2006§  Playful Design, by J...
Online SourcesWebsites and Blogs you should subscribe to§  http://www.nngroup.com/topic/web-usability/§  http://trentwal...
Never end your presentationwith „Thank you“.
Questions, Love, Hate
@sebastianwaters
Thanks for the picturesCreative Commons§  http://www.flickr.com/photos/kheelcenter/5279838586/§  http://www.flickr.com/pho...
Nächste SlideShare
Wird geladen in …5
×

Basics in User Experience Design, Information Architecture & Usability

9.041 Aufrufe

Veröffentlicht am

Presentation for my talk about the "Basics in User Experience Design, Information Architecture & Usability" at General Assembly Berlin, January 9th, 2013

Veröffentlicht in: Design

Basics in User Experience Design, Information Architecture & Usability

  1. 1. Basics in 
User Experience Design,Information Architecture &UsabilityG e n e r a l A s s e m b l y, J a n u a r y 9 t h , 2 0 1 3 @sebastianwaters
  2. 2. AgendaIf I should forget something, please don’t tell me§  Introduction§  UX, IA & Usability§  Basics – what Basics?§  A few examples@sebastianwaters 2
  3. 3. Introduction
  4. 4. Who is this guy?@sebastianwaters
  5. 5. IntroductionWho is this guy?§  Name: Sebastian Waters§  Age: 27 (born July 1, 1985)§  Profession: UX Designer & Information Architect§  Smartass, Know-it-all, disgruntled customer@sebastianwaters 5
  6. 6. IntroductionWho is this guy?§  B.A. in Design (Thesis about Social Semantics)§  Freelancer for five years§  Glasses, left-handed male and I like dogs@sebastianwaters 6
  7. 7. Who are these guys?@sebastianwaters
  8. 8. IntroductionWho are these guys?§  Hands up: Design, Dev, Sales, Marketing, whatever?§  Random picks: What are you guys up to?§  Be honest: What do you expect from this talk?@sebastianwaters 8
  9. 9. Aims we want to reach in this talk. motivational image@sebastianwaters 9
  10. 10. Aims we want to reach in this talk.We want to§  have a look at how UX, IA and Usability differs from each other§  talk about the basics and look at a few examples§  look at the daily work of an UX Designer / Information ArchitectToday I won’t talk about Responsive Design, Mobile First or anyother pretty buzzword like that. Today it’s just about the Basics.@sebastianwaters 10
  11. 11. This presentation will be available online.You can make notes as much as you like, but I will alsoupload these slides for you – so maybe save some ink andfocus on the presentation.And – of course – you are invited to ask your questionswhenever you feel that way. For further discussion please waitfor the end of each section.@sebastianwaters 11
  12. 12. UX, IA & Usability
  13. 13. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  14. 14. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  15. 15. Rating the ability ofhow to use something.@sebastianwaters
  16. 16. 1. Put a nail into your wall, 2. Get it back. @sebastianwaters 16
  17. 17. 1. Close/Open, 2. Lock the door. @sebastianwaters 17
  18. 18. 1. Squeeze fruits, 2. Clean the table. @sebastianwaters 18
  19. 19. WebUsability@sebastianwaters
  20. 20. Provide guidance for the users with navigations @sebastianwaters 20
  21. 21. Easy to understand, browse and explore @sebastianwaters 21
  22. 22. Let users learn new features live. They aren‘t that stupid. But if,provide help and alternatives. @sebastianwaters 22
  23. 23. „Eyetracking visualizations show that users often read web pages in anF-shaped pattern: two horizontal stripes followed by a vertical stripe.“(Jakob Nielsen, 2006) @sebastianwaters 23
  24. 24. @sebastianwaters 24
  25. 25. Web Usability is abouthow to search, find,explore, navigate ...@sebastianwaters 25
  26. 26. In a Nutshell:
What, where, how.@sebastianwaters 26
  27. 27. Rating the ability ofhow to use a website.@sebastianwaters
  28. 28. Rating the ability of Apphow to use a website.@sebastianwaters
  29. 29. Five Quality Components of Web Usability§  Learnability Is the design easy to understand and to use at first sight?§  Efficiency How quickly can users accomplish their tasks?§  Memorability When users return to the design after some time, how easily can they recall the design to their mind?§  Troubleshooting How many errors do users make and how easily can they recover from these errors?§  Satisfaction How pleasant is it to use the design?@sebastianwaters 29
  30. 30. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  31. 31. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  32. 32. Text, Photos, Videos,Locations, ... Information Architecture How to collect, merge, and arrange things @sebastianwaters
  33. 33. @sebastianwaters 33
  34. 34. @sebastianwaters 34
  35. 35. @sebastianwaters 35
  36. 36. @sebastianwaters 36
  37. 37. If you plan it right, you can achieve great things. @sebastianwaters 37
  38. 38. It can also work without a big architectural plan. @sebastianwaters 38
  39. 39. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  40. 40. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  41. 41. That’s what gives itthe extra something.Das Salz in der Suppe.@sebastianwaters 41
  42. 42. How we design this „something“ for the user and his needs The userUserExperienceDesign How the user experiences something @sebastianwaters
  43. 43. „You cannot not communicate.“
– Paul Watzlawick@sebastianwaters 43
  44. 44. @sebastianwaters 44
  45. 45. @sebastianwaters 45
  46. 46. ContextUsage of Information As soon as you communicate, you experience something You create, read, delete information You use an interface for that@sebastianwaters 46
  47. 47. There are different waysto tweak the interface.Can you make the button bigger?@sebastianwaters 47
  48. 48. Social InteractionsShare, control and boost your ego@sebastianwaters 48
  49. 49. GamificationA better experience through playful parts@sebastianwaters 49
  50. 50. StorytellingA better experience through narrational parts@sebastianwaters 50
  51. 51. Persuasive DesignBe persuaded by a (virtual) shortage or other users’ reviews@sebastianwaters 51
  52. 52. Don’t make users think.Make them act.@sebastianwaters
  53. 53. But what’s the goal ofall this?@sebastianwaters
  54. 54. LeadsConversionsHappinessCommitmentPromotion@sebastianwaters
  55. 55. Wait, what?
  56. 56. User Product BrandExperience Experience Experience@sebastianwaters 56
  57. 57. Trends
  58. 58. Trends for UX, IA & Usability2012 is so last year, but...§  Social Interconnectivity You can now share and combine the hell out of everything §  Sticky Navigation It will stay on top of your viewport, even if you scroll for minutes§  Infinite Scrolling Pages ever heard of Twitter, Tumblr or Pinterest?§  Rise of Web Fonts finally there is more than Arial, Verdana & Co§  One Pager / Parallax Scrolling if you can scroll infinitely, why do you need more than one page? @sebastianwaters 58
  59. 59. Social Interconnectivityvimeo.com@sebastianwaters 59
  60. 60. Sticky Navigationmailchimp.com@sebastianwaters 60
  61. 61. Infinite Scrolling Pagespinterest.com@sebastianwaters 61
  62. 62. Rise of Web Fontsgoogle.com/webfonts@sebastianwaters 62
  63. 63. One Pager / Parallaxbenthebodyguard.com@sebastianwaters 63
  64. 64. Everyday work
  65. 65. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  66. 66. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  67. 67. Three Basic ElementsAny UX/IA guy will happily do for you if you ask kindly Usability Information Architecture User Experience Design@sebastianwaters 67
  68. 68. Usability IA UXUser Research Content Audit Improve NavigationOnline Surveys Sitemaps Enhance InteractionRemote Testing Card Sorting Upgrade Information A/B Testing Paper Prototypes Clickdummies Uselabs Wireframes Tech Specs @sebastianwaters 68
  69. 69. External RoleCreate Context between Content and User Usability Content Information User Architecture User Experience Design@sebastianwaters 69
  70. 70. Internal RoleTranslater between Design and Development Usability Design Information Dev Architecture User Experience Design@sebastianwaters 70
  71. 71. Typical Work placesWhere you can/should find UX/IA guys Agencies Startups Companies Content and Users@sebastianwaters 71
  72. 72. ToolsWhat to use§  Collect, merge and rearrange information Microsoft Word, Excel, Powerpoint, Omnigraffle, Paper and Pen§  Layout your first drafts Paper and Pen, Omnigraffle, Axure, Balsamiq, Hot Gloo§  Test your stuff usabilla.com, intuitionhq.com, silverbackapp.com or a uselab§  Improve it Sit together with your team and talk about your ideas, if not sure, test it and improve things (yes, good meetings are tools, too)@sebastianwaters 72
  73. 73. Good Examples
  74. 74. www.bmw.de@sebastianwaters 74
  75. 75. www.nike.com@sebastianwaters 75
  76. 76. www.google.com@sebastianwaters 76
  77. 77. www.6wunderkinder.de@sebastianwaters 77
  78. 78. www.designmadeingermany.de @sebastianwaters 78
  79. 79. Sources
  80. 80. Printed SourcesGood books you should read§  Don’t make me think!, by Steve Krug, New Riders, 2006§  Playful Design, by John Ferrara, Rosenfeld Media, 2012§  Storytelling for User Experience, by Whitney Quesenbery & Kevin Brooks, Rosenfeld Media, 2010§  Design is a Job, by Mike Monteiro, A Book Apart, 2012§  Information Architecture for the World Wide Web, by Louis Rosenfeld, O’Reilly, 2006§  Branded Interactions, by Marco Spies, Schmidt Hermann Verlag, 2012§  Elements of User Experience Design, by Jesse James Garrett, Addison- Wesley, 2011@sebastianwaters 80
  81. 81. Online SourcesWebsites and Blogs you should subscribe to§  http://www.nngroup.com/topic/web-usability/§  http://trentwalton.com/category/articles/§  http://www.netmagazine.com/§  http://uxmag.com/§  http://www.uxbooth.com/§  http://www.adaptivepath.com/§  http://bradfrostweb.com/blog/§  http://informationarchitects.net/blog/@sebastianwaters 81
  82. 82. Never end your presentationwith „Thank you“.
  83. 83. Questions, Love, Hate
@sebastianwaters
  84. 84. Thanks for the picturesCreative Commons§  http://www.flickr.com/photos/kheelcenter/5279838586/§  http://www.flickr.com/photos/evaekeblad/2437478729/§  http://www.flickr.com/photos/umpcportal/4581962986/§  http://www.flickr.com/photos/laurenmanning/2395602145/and Google’s Image Search@sebastianwaters 84

×