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

1. Basics in
User Experience Design,
Information Architecture &
Usability
G 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. Agenda
If 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. Introduction
Who 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. Introduction
Who 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. Introduction
Who 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 Architect
Today I won’t talk about Responsive Design, Mobile First or any
other 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 also
upload these slides for you – so maybe save some ink and
focus on the presentation.
And – of course – you are invited to ask your questions
whenever you feel that way. For further discussion please wait
for 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 of
how 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. Web
Usability
@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 an
F-shaped pattern: two horizontal stripes followed by a vertical stripe.“
(Jakob Nielsen, 2006)
@sebastianwaters
23

24. @sebastianwaters
24

25. Web Usability is about
how to search, find,
explore, navigate ...
@sebastianwaters
25

26. In a Nutshell:
What, where, how.
@sebastianwaters
26

27. Rating the ability of
how to use a website.
@sebastianwaters

28. Rating the ability of
App
how 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 it
the extra something.
Das Salz in der Suppe.
@sebastianwaters
41

42. How we design this
„something“ for the
user and his needs
The user
User
Experience
Design
How the user
experiences something
@sebastianwaters

43. „You cannot not communicate.“
– Paul Watzlawick
@sebastianwaters
43

44. @sebastianwaters
44

45. @sebastianwaters
45

46. Context
Usage 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 ways
to tweak the interface.
Can you make the button bigger?
@sebastianwaters
47

48. Social Interactions
Share, control and boost your ego
@sebastianwaters
48

49. Gamification
A better experience through playful parts
@sebastianwaters
49

50. Storytelling
A better experience through narrational parts
@sebastianwaters
50

51. Persuasive Design
Be 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 of
all this?
@sebastianwaters

54. Leads
Conversions
Happiness
Commitment
Promotion
@sebastianwaters

55. Wait, what?

56. User Product Brand
Experience
Experience
Experience
@sebastianwaters
56

57. Trends

58. Trends for UX, IA & Usability
2012 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 Interconnectivity
vimeo.com
@sebastianwaters
59

60. Sticky Navigation
mailchimp.com
@sebastianwaters
60

61. Infinite Scrolling Pages
pinterest.com
@sebastianwaters
61

62. Rise of Web Fonts
google.com/webfonts
@sebastianwaters
62

63. One Pager / Parallax
benthebodyguard.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 Elements
Any UX/IA guy will happily do for you if you ask kindly
Usability
Information
Architecture
User Experience
Design
@sebastianwaters
67

68. Usability
IA
UX
User Research
Content Audit
Improve Navigation
Online Surveys
Sitemaps
Enhance Interaction
Remote Testing
Card Sorting
Upgrade Information
A/B Testing
Paper Prototypes
Clickdummies
Uselabs
Wireframes
Tech Specs
@sebastianwaters
68

69. External Role
Create Context between Content and User
Usability
Content
Information User
Architecture
User Experience
Design
@sebastianwaters
69

70. Internal Role
Translater between Design and Development
Usability
Design
Information Dev
Architecture
User Experience
Design
@sebastianwaters
70

71. Typical Work places
Where you can/should find UX/IA guys
Agencies
Startups
Companies
Content and Users
@sebastianwaters
71

72. Tools
What 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 Sources
Good 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 Sources
Websites 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 presentation
with „Thank you“.

83. Questions, Love, Hate
@sebastianwaters

84. Thanks for the pictures
Creative 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