• Save
Basics in User Experience Design, Information Architecture & Usability
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Basics in User Experience Design, Information Architecture & Usability

  • 4,620 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,620
On Slideshare
4,096
From Embeds
524
Number of Embeds
12

Actions

Shares
Downloads
0
Comments
0
Likes
18

Embeds 524

http://blog.kvasnickajan.cz 457
https://twitter.com 22
http://eventifier.co 22
http://feeds.feedburner.com 10
http://mikentobi.blogspot.com 6
http://eventifier.com 1
http://webcache.googleusercontent.com 1
http://translate.googleusercontent.com 1
http://zoerooney.com 1
https://m.facebook.com&_=1360092146444 HTTP 1
https://m.facebook.com&_=1358779672403 HTTP 1
https://www.docsnode.com 1

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