• 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
Slideshare-icon Views on SlideShare
Embed Views



11 Embeds 509

http://blog.kvasnickajan.cz 443
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