Basics in User Experience Design, Information Architecture & Usability

  • 4,167 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,167
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
0
Comments
0
Likes
20

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. AgendaIf I should forget something, please don’t tell me§  Introduction§  UX, IA & Usability§  Basics – what Basics?§  A few examples@sebastianwaters 2
  • 3. Introduction
  • 4. Who is this guy?@sebastianwaters
  • 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. 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. Who are these guys?@sebastianwaters
  • 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. Aims we want to reach in this talk. motivational image@sebastianwaters 9
  • 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. 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. UX, IA & Usability
  • 13. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  • 14. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  • 15. Rating the ability ofhow to use something.@sebastianwaters
  • 16. 1. Put a nail into your wall, 2. Get it back. @sebastianwaters 16
  • 17. 1. Close/Open, 2. Lock the door. @sebastianwaters 17
  • 18. 1. Squeeze fruits, 2. Clean the table. @sebastianwaters 18
  • 19. WebUsability@sebastianwaters
  • 20. Provide guidance for the users with navigations @sebastianwaters 20
  • 21. Easy to understand, browse and explore @sebastianwaters 21
  • 22. Let users learn new features live. They aren‘t that stupid. But if,provide help and alternatives. @sebastianwaters 22
  • 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. @sebastianwaters 24
  • 25. Web Usability is abouthow to search, find,explore, navigate ...@sebastianwaters 25
  • 26. In a Nutshell:
What, where, how.@sebastianwaters 26
  • 27. Rating the ability ofhow to use a website.@sebastianwaters
  • 28. Rating the ability of Apphow to use a website.@sebastianwaters
  • 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. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  • 31. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  • 32. Text, Photos, Videos,Locations, ... Information Architecture How to collect, merge, and arrange things @sebastianwaters
  • 33. @sebastianwaters 33
  • 34. @sebastianwaters 34
  • 35. @sebastianwaters 35
  • 36. @sebastianwaters 36
  • 37. If you plan it right, you can achieve great things. @sebastianwaters 37
  • 38. It can also work without a big architectural plan. @sebastianwaters 38
  • 39. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  • 40. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  • 41. That’s what gives itthe extra something.Das Salz in der Suppe.@sebastianwaters 41
  • 42. How we design this „something“ for the user and his needs The userUserExperienceDesign How the user experiences something @sebastianwaters
  • 43. „You cannot not communicate.“
– Paul Watzlawick@sebastianwaters 43
  • 44. @sebastianwaters 44
  • 45. @sebastianwaters 45
  • 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. There are different waysto tweak the interface.Can you make the button bigger?@sebastianwaters 47
  • 48. Social InteractionsShare, control and boost your ego@sebastianwaters 48
  • 49. GamificationA better experience through playful parts@sebastianwaters 49
  • 50. StorytellingA better experience through narrational parts@sebastianwaters 50
  • 51. Persuasive DesignBe persuaded by a (virtual) shortage or other users’ reviews@sebastianwaters 51
  • 52. Don’t make users think.Make them act.@sebastianwaters
  • 53. But what’s the goal ofall this?@sebastianwaters
  • 54. LeadsConversionsHappinessCommitmentPromotion@sebastianwaters
  • 55. Wait, what?
  • 56. User Product BrandExperience Experience Experience@sebastianwaters 56
  • 57. Trends
  • 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. Social Interconnectivityvimeo.com@sebastianwaters 59
  • 60. Sticky Navigationmailchimp.com@sebastianwaters 60
  • 61. Infinite Scrolling Pagespinterest.com@sebastianwaters 61
  • 62. Rise of Web Fontsgoogle.com/webfonts@sebastianwaters 62
  • 63. One Pager / Parallaxbenthebodyguard.com@sebastianwaters 63
  • 64. Everyday work
  • 65. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  • 66. Basics in 
User Experience Design,Information Architecture &Usability@sebastianwaters
  • 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. 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. External RoleCreate Context between Content and User Usability Content Information User Architecture User Experience Design@sebastianwaters 69
  • 70. Internal RoleTranslater between Design and Development Usability Design Information Dev Architecture User Experience Design@sebastianwaters 70
  • 71. Typical Work placesWhere you can/should find UX/IA guys Agencies Startups Companies Content and Users@sebastianwaters 71
  • 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. Good Examples
  • 74. www.bmw.de@sebastianwaters 74
  • 75. www.nike.com@sebastianwaters 75
  • 76. www.google.com@sebastianwaters 76
  • 77. www.6wunderkinder.de@sebastianwaters 77
  • 78. www.designmadeingermany.de @sebastianwaters 78
  • 79. Sources
  • 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. 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. Never end your presentationwith „Thank you“.
  • 83. Questions, Love, Hate
@sebastianwaters
  • 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