Harry Potter and Information Architecture: UX Basics
At the end of my training as a UX designer at General Assembly, I was tasked with presenting a knowledge recap of information architecture.
Inspired by a recent article on BuzzFeed where Every Guest Has To Do A 3-Minute Presentation on what they are passionate about, I used references from Harry Potter to present on IA. Besides being a soft-core Harry Potter geek, I wanted to liven up the topic by presenting examples to illustrate skills in IA.
What has Harry Potter got to do with Information Architecture?
Imagine trying to navigate Hogwarts castle…
Walking around Hogwarts will be like how a user navigates a website or a mobile app.
Hogwarts ⇒ Website/App
Signages (If any?!) ⇒ Site Navigation
Marauders map ⇒ Site Map, something which few people uses
What is Information Architecture?
It’s like the content page of a spellbook, i.e. if there’s a content page, to begin with.
“The organisation, search, and navigation systems that help people to complete tasks find what they need, & understand what they’ve found.”
by PETER MORVILLE
Author of Information Architecture for the Web
“Information Architecture is the way we arrange the parts of something to make it understandable as a whole.”
by ABBY COVERT
@ABBY_THE_IA
The most relevant quote I can think of in Harry Potter:
“Never trust anything that can think for itself if you can’t see where it keeps its brain.”
by J. K. Rowling
Harry Potter and the Chamber of Secrets
How do you properly use a website without proper navigation? While voice search is becoming common, every site still requires a proper structure to organise its contents.
Information Architecture and SEO
Being a self-taught digital strategist and a UX practitioner, I’ve noticed many similarities between information architecture and search engine optimisation (SEO).
What is Search Engine Optimisation?
“Search engine optimization (SEO) is the practice of increasing the quantity and quality of traffic to your website through organic search engine results.”
Accio Information
When using a search engine, such as Google, a user ‘casts’ a summoning charm to search for a particular piece of information. Google then returns with a list of websites that matches the search queries.
Based on a study by Chitika, a link listed in the #1 spot typically gets more traffic(32.5% of total traffic) than other links listed below. Hence digital marketers are obsessed with getting their site ranked on that spot by adopting SEO best practices.
Multiple Entries In-and-Out of Hogwarts
If you know your way around Hogwarts like the Marauders and the Weasley twins, you’ll know that you can sneak in-and-out of Hogwarts through the Whomping Willow, the One-Eyed Witch passage, etc.
Similarly, a website has multiple entry points; users can key in the web address directly or enter a site through search results.
Making Content Findable
The goals of IA and SEO is to make content findable so that users can access the right information through search and navigation.
Since the goals of IA and SEO are similar, learning SEO will be a complementary skill to IA.
Adopting SEO Strategies
To adopt SEO practices within IA,
- Remove content duplicates
- Use clear, descriptive H1 title (1 per page!), URL, and meta information
- Improve internal links with anchor texts to help users access content
⇒ Learn more about SEO and digital marketing strategies on my blog, learn with Leowhouteng.
Critical Components of IA
Good-to-know technical details about information architecture.
Ontology — Meaning
Do you know what you mean when you say what you say?
Meet Hagrid’s Fluffy. A three-headed dog Cerberus doesn’t sound as adorable as its name suggests.
We often forget to consider how our use of language implies certain meaning to us but may be confusing to others.
Meaning is subjective
Meaning is demographic
Meaning is socio-political
Meaning gets lost in translation
Meaning is complex
Taxonomy — Structure
Have you provided logical structures that bring meaning to what you present?
Fluffy may be defined as Cerberus, but taxonomically, it may belong both under ‘Monsters’ and ‘Fantastic Beasts’ if that is the context where the user needs it.
In which book will you search for ‘Fluffy’? (Vote by highlighting the text!)
- The Monster Book of Monsters
- Fantastic Beasts & Where to Find Them
5 Ways to Organise Things
According to Abby Covert, there are only 5 ways in which one can organise information.
- Location: The Chamber of Secrets can be accessed from Moaning Myrtle’s bathroom.
- Alphabetical: E for ‘Exceeding Expectations’, A for ‘Average’
- Time: Harry’s birthday is on July 31, 1980
- Category: Butterbeer is a drink
- Hierarchy: Potions classes are held in the dungeons in Hogwarts
Choreography — Intent
How is meaning affected across various channels, over time and through usage?
How meaning and structure fit together, ensuring that the flow of an experience delights the user and doesn’t distract from what the user is trying to do.
Harry gets an invisibility cloak and sneaks into the library’s restricted section to retrieve a book. Nope, he has no intention to sneak into the girl’s bathroom other than Myrtle’s.
Classifying Wizards/Witches
A key skill required for information architecture is to group and classify similar/related items together. As previously mentioned, this is to ensure that the content is findable.
Card Sorting — The Sorting Hat
Card sorting is a technique used to evaluate and design the information architecture of a website. In a card sorting session, participants organize a set of cards into different categories that make sense to them. These cards may have different topics, words, phrases, or imageries which participants will arrange in an open, closed, or hybrid card sorting.
Similarly, in the Harry Potter books, first-year students are sorted into four houses, Gryffindor, Slytherin, Ravenclaw, and Hufflepuff. This is an example of a closed card sort. Wizards and witches are sorted according to their qualities and attributes:
Gryffindor values bravery, daring, nerve, and chivalry.
Hufflepuff values hard work, dedication, patience, loyalty, and fair play.
Ravenclaw values intelligence, knowledge, and wit.
Slytherin house values ambition, cunning and resourcefulness.
Open Card Sorting
Participants organise the set of cards into groups and label them freely. Given the freedom to classify wizards/witches, Malfoy would have classified first-years into groups such as ‘pureblood’, ‘mudblood’, and ‘blood-traitors’.
Closed Card Sorting
In a closed card sorting, participants arrange the set of cards into pre-defined groups. In Harry Potter, the sorting hat arranges first-years into 4 pre-defined houses.
Hybrid Card Sorting
This is a mixed type of open and closed card sort. Hybrid card sorts may have one or two pre-defined categories while allowing participants to label categories for cards that do not fall into the pre-defined ones.
Different card sorts may be used in different situations. Cards used for sorting may vary between 30 to 60 cards. My recommendation is to conduct the tests with people in the team before testing it with actual participants.
Tree Testing/Reverse Card Sorting — Picking the Wand
Tree testing is a technique used to evaluate if topics/content are findable on a website. The name is derived to represent the hierarchy (a “tree”) of topics and subtopics on a large website.
While “The Wand chooses the Wizard”, Ollivander had to search for the right wand among many from the shelves.
Similarly, in a tree test, participants search for the right content (wand) in the navigation.
Presentation Slides
If you’re interested to introduce information architecture to new UX students, feel free to grab a copy of my slides. Attribution and link will be highly appreciated! Drop me comments/references that you think I should add on to the slides.
References & Further Reading
Make Sense: Information Architecture for Everybody by Abby Covert on SlideShare
Understanding Information Architecture By Dan Klyn on the Understanding Group
How I taught Information Architecture to aspiring UX Designers by Fiorella Rizzà on UX Collective
A Model for Understanding Information Architecture: Ontology, Taxonomy and Choreography by Dan Klyn on Wildly Appropriate
About the Author
Hou Teng is a graduate from General Assembly, Singapore, User Experience Design Immersive (UXDI) programme (21 Nov 2017–09 Feb 2018). He is currently actively seeking for a job. Before attending this programme, he has worked as a graphic designer at an advertising agency and launched an e-learning startup.
His design works can be viewed in his portfolio, and digital marketing writings are available on his blog. Also, follow him on his new Dribbble account.
