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

Basics in User Experience Design, Information Architecture & Usability



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



Total Views
Views on SlideShare
Embed Views



11 Embeds 516

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



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Basics in User Experience Design, Information Architecture & Usability Basics in User Experience Design, Information Architecture & Usability Presentation Transcript

  • 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
  • AgendaIf I should forget something, please don’t tell me§  Introduction§  UX, IA & Usability§  Basics – what Basics?§  A few examples@sebastianwaters 2
  • Introduction
  • Who is this guy?@sebastianwaters
  • 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
  • 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
  • Who are these guys?@sebastianwaters
  • 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
  • Aims we want to reach in this talk. motivational image@sebastianwaters 9
  • 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
  • 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
  • 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 22
  • „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
  • @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?§  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
  • 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, and arrange things @sebastianwaters
  • @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 userUserExperienceDesign How the user experiences something @sebastianwaters
  • „You cannot not communicate.“
– Paul Watzlawick@sebastianwaters 43
  • @sebastianwaters 44
  • @sebastianwaters 45
  • ContextUsage of Information As soon as you communicate, you experience something You create, read, delete information You use an interface for that@sebastianwaters 46
  • 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 51
  • 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 56
  • Trends
  • 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
  • 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 Information Architecture User Experience Design@sebastianwaters 67
  • 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
  • External RoleCreate Context between Content and User Usability Content Information User Architecture User Experience Design@sebastianwaters 69
  • Internal RoleTranslater between Design and Development Usability Design Information Dev Architecture User Experience Design@sebastianwaters 70
  • Typical Work placesWhere you can/should find UX/IA guys Agencies Startups Companies Content and Users@sebastianwaters 71
  • 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
  • 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 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
  • 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
  • Never end your presentationwith „Thank you“.
  • Questions, Love, Hate
  • 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