The future of UX design support tools - talk Paris March 2024
04 Fundamentals of UX Workshop: Information Architecture
1. Designing the User Experience: THE FUNDAMENTALS
INFORMATION
ARCHITECTURE
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
2. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
3. Definition
The structural design of an information
space to facilitate task completion and
intuitive access to content.
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
Information Architecture for the World-Wide Web Louis Rosenfeld & Peter Morville
4. Sort into groups. Name groups
PLAY WITH
CANDY
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
5. MAKE A HOMEPAGE FOR
YOUR CANDY SITE
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
6. 4 KINDS OF INFORMATION
SEEKING
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
7. You are going to Belize.
You want the lonely planet
guidebook
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
9. What works
Search
A-Z index
Navigation
http://boxesandarrows.com/four-modes-of-seeking-information-and-how-to-design-for-them/
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
10. You want to visit a tropical
island. Where should you
go?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
11. EXPLORATORY
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
http://boxesandarrows.com/four-modes-of-seeking-information-and-how-to-design-for-them/
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
12. What can help
Navigation
Related Search
Search (with autocomplete, related terms)
http://boxesandarrows.com/four-modes-of-seeking-information-and-how-to-design-for-them/
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
13. Ticket Prices to Belize drop
in September and April
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
14. DON’T
KNOW
WHAT YOU
NEED TO
KNOW
http://boxesandarrows.com/four-modes-of-seeking-information-and-how-to-design-for-them/
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
15. What can help
Related information
Recommendations
Push technologies
http://boxesandarrows.com/four-modes-of-seeking-information-and-how-to-design-for-them/
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
16. You saw a great waterproof
camera on amazon, and now
realize it’s the one you want
to buy. Where did it go?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
18. What can help
Favorites
Personalization
Visited link color
http://boxesandarrows.com/four-modes-of-seeking-information-and-how-to-design-for-them/
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
19. Redesign
DESIGN FOR TASKS
Find a after dinner mint
Find a candies for a upcoming party for a 57 year old
Make users aware some candies are on sale
Find again a good choice for that party that you saw
earlier
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
20. Classification has
Consequences
A physician who doesn’t see a new cure
A poor student who can’t find financial aid
A store where a product isn’t found
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
21. IA has Solutions
Information Architecture
manages information to
make it findable
– Tagging with metadata
– Organizing with CV’s
– Creating navigation systems
– Optimizing search
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
22. CLASSIFICATION IS
CONTEXTUAL
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
23. Benabar n’est
pas jazz?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
24. Dewey Decimal
System
‣ 200-299 – Religion Categories
‣ 40+ categories related to Christianity
‣ 1 for Judaism
‣ 1 for Islam (& related)
25. Who Cares?
‣ Religious Scholars
‣ Librarians
‣ Information Architects
‣ Jews and Muslims
28. Context is King
‣ Classification reflects social and cultural organization
‣ Information Architect must understand this context
29. Get to know your
audience…
1. Who are they?
Football Fan
30. Get to know your
audience…
1. Who are they?
Football Fan?
31. Know your audience…
1. Who are they?
2. What do they care about?
Are the Patriots going
to make the playoffs?
Show me
photos!
What happened in
the last game?
32. Know your audience…
1. Who are they?
2. What do they care about?
3. How do they think of the information and content?
Conference,
division…
Schedules,
standings…
33. Know your audience…
1. Observe others
2. Study Competitors and similar sites
3. Review your search logs
4. Do a card sort
34. Now what?
Check your labels. Do they make sense?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
35. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
36. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
3
Metadata 6
37. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
38. Tagging– when it works
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
3
8
39. People can’t be bothered
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
3
9
40. Pictures of “you”
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
41. 4
1 Metadata: what
is it?
“metadata is data about data"
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
42. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
4
2
Metadata: what
is it?
“Metadata tags are used to describe documents, pages,
images, software, video and audio files, and other content
objects for the purposes of improved navigation and
retrieval”
‘Information Architecture for the World Wide Web’, 2nd ed., (2002) Rosenfeld, L. &
Morville, P.
43. DescriptiveProcuitto
Cheese
Honey
Olivia’s
Tapas
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
44. Intrinsic
What does the camera know?
What does the system know?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
45. Administrative
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
46. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
4
6
Not all Metadata is equal
What are users interested in?
What do you want users to be able to find?
What metadata makes management easy?
Tag content for findability
Tag content for management
47. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
4
7
Exercise
CANDY
Write as many descriptive words (or short phrases) on your
post-it
One word (or phrase) per post-it
Don’t share– yet! Hold on!
48. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
49. Add pic of netflix
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
4
9
50. Controlled
vocabularies
Master of your domains
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
51. The French
Academy
Founded in 1635
Multiple dialects
Goal: purify the French language
Goal: unify the nation (ensure that the State and all
citizens speak the same language)
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
52. The French
Academy today
…but…
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
53. So what?
• So what are your goals?
• How will you ensure that your users and your
system speak the same language?
How will you ensure they continue to do so?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
54. When humans and
computers interact
I’ve got
music
I want
music.
55. Humans are good at
figuring things out
Hip Hop
Rap.
Rock.
Dance.
58. And need help 5
8
Acid
Reggae?
?
Let’s give them “Reggae” and
“Trance”
IA
59. The IA can’t
always be there…
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
5
9
Thus Controlled vocabularies (CV)
Amy Warner defines a controlled vocabulary (CV)
as “organized lists of words and phrases, or
notation systems, that are used to initially tag
content, and then to find it through navigation or
search.”
60. Controlled
Vocabularies
I define them as
Documented relationships of words and
concepts to assist people finding stuff.
Same dif.
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
62. Controlled vocabularies
A=B A
B
A B
Equivalence
Christmas=
Xmas
Hierarchal
Winter Holidays >
Christmas
Associative
Christmas
Tree | Santa
Claus
63. Synonym rings
• Simplest type
• Helps with search, indexing
• Simplifies maintenance
64. Synonym rings include
• Acronyms: BBC, British Broadcasting
Company; MPG, miles per gallon
• Variant spellings: cancelled, canceled;
honor, honour
• Scientific terms versus popular use terms:
acetylsalicylic acid, aspirin; lilioceris, lily
beetle
– From Synonym Rings and Authority Files
by Karl Fast, Fred Leise and Mike Steckel
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
65. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
6
5
China cap = chinois = strainer
66. Why Bother? 6
6 • Sometimes on
intranets, CV’s are
skipped
• You think you can force
people to use proper
terms
• But people are lazy
I’m tired of typing “Controlled
Vocabulary--- CV is shorter.
67. Why Bother? 6
7 • On the internet you want to
be found
• Plus users use short
queries
– Average queries are 2.5
words– 30% of searches are
one word queries
• On large scale sites, there is
enough data to do this
programmatically, but on small
sites, not.
I want a cannon camera.
68. Thesauri
• Cadillac of Controlled Vocabularies
• Includes associative relationships
Preferred term Variants Siblings Parent Associated
Christmas X-mas, Nöel Hanukah,
Kwanzaa
Winter holidays Santa Claus
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
69. Associations -
crafted
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
70. Associations -
Behavioral
• Amazon uses buying patterns to determine
associations
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
71. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
7
1
Associations
What is related
What is required?
What else is interesting?
Relevancy is king
72. Implementation?
Implementation dependent on situation and tools.
May be slow painful data entry– know this and prepare.
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
7
2
73. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
7
3
Is that all?
NO!
Life beyond enumerative classification….
74. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
7
4
Faceted
Classification
was developed, prior to the existence of
computers, by S. R. Ranganathan,
a Hindu mathematician
working as a librarian.
75. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
7
5
Ranganathan’s 5
Facets
• who: personality
• what: matter
• how: energy
• where: space
• when: time
76. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
77. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
7
7
Ordinary stuff?
78. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
7
8
Personals
Faceted classification is often used by Personas
Content is by the users
79. What’s the difference?
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
7
9
Electronics
Camera
Digital
Film
PDAs
Televisions
Camera facets
Pixels
Zoom
Price
80. Music
Enumerative
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
Modern
– Rock
• Alternative
– Seattle
– Atlanta
Faceted
Mood
Tempo
Artist
Use
8
0
81. Create candy facets for your store
FACETS, ANYONE?
Who
What
How
Where
When
Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
81
82. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
8
2
HEADER
This slide was left purposely blank.
I can do that, you know.
83. Created by Christina Wodtke | www.eleganthack.com | This work is licensed under a Creative Commons Attribution 3.0 United States License.
To have this workshop at your business or conference , contact cwodtke@eleganthack.com
8
Q&A 3