Not a House of Cards: Heuristics and other Information Architecture Methods
--
“You can’t get there from here.”
Imagine traveling to a small town, heading to a B&B, only to find yourself back where you started. Some websites feel like that, too.
Overview
iloveny.com is a site devoted to travel and tourism in New York State. I was asked to assess the desktop version, specifically its structure, content labels, and overall usability. The target audience: urban professionals who want a quick weekend getaway.
How might I assess iloveny.com with Sam in mind and make recommendations that will help Sam realize the goal of finding a quick weekend getaway?
So, the user is Sam and other NY state residents who want to explore the state with minimal planning.
I worked on my own for this assignment, with one week to complete all deliverables by January 18.
Process
Heuristics
First step was a heuristic evaluation of 4 pages on the client website, iloveny.com. A somewhat heady term, heuristics involves evaluating an existing product’s usability and sharing critiques during design and development to predict success of possible solutions. I followed Abby Covert’s 10 Heuristic IA Principles, which rank a site page for 10 qualities:
Heuristic evaluation would help me detect usability problems in the existing site. I evaluated pages Sam might visit when planning a weekend getaway. Starting at the homepage, they would go to Weekend Getaways, then 48 Hours in Beacon, finally ending up at the site blog.
Insights from the heuristic evaluation? The site is not totally transparent regarding stakeholders and contributors. Credibility issues surfaced on several pages.
Everything started out fine from the homepage, which is visually attractive and engaging. The words, “Weekend Getaways” are prominently displayed across the homepage’s center over a full-size photo of a beautiful winter scene. Quite delightful.
The deeper I explored the site to plan my weekend getaway, the more questions arose.
- The iconic red iloveny hearts that tell the user where they are in the primary navigation are very capricious, coming and going on hover.
- The user can always return to the homepage by clicking the iloveny logo in the top left corner, but some pages provide a “Back to Previous” page, while others do not.
- The Weekend Getaways page features 8 getaways, but what if the user wants something else?
- Clicking “48 Hours in Beacon, NY” takes the user to the site blog with a post written by “I LOVE NY Staff.” Who is that?
- Does the blog, as currently displayed with links to archived content dating back to 2014, serve a user who simply wants a quick getaway?
- Where is the help page? The site’s footer provides an 800 telephone number and email address, but will a real person answer the phone or email? Sam is busy and doesn’t want to wait for a recorded message.
- The blog page allows the user to search archived content by date or keyword, but provides no instructions or tips on searching. Should Sam search by the date they want to travel, or the date a post was written?
- Sam must scroll far down the blog page to find travel directions from Manhattan to Beacon.
Sitemap
I then created a sitemap of the existing website structure, mapping out the primary, secondary, and utility navigation. The sitemap communicates to stakeholders how the various pages in the site’s system are structured and related. It informs database and navigation design. Of the 3 types of sitemaps — visual, XML, and HTML — I created a visual one to illustrate the site’s content hierarchically.
This sitemap helped me to visualize the site content at a high level, to see what primary navigation categories held what secondary pages and content. I would refer back to the site map after my card sorts.
Card Sorts
Open and closed card sorts are an easy, inexpensive way to learn the user’s mental model, how they organize information on a website’s pages. I conducted 10 in-person card sorts, 5 open and 5 closed. Ten men and women ages early 20s to early 60s participated. Participants spent varying amounts of time. Open sorting typically took longer, up to 20 minutes.
Open Card Sort Script
This task is designed to help me understand how to organize the content for the iloveny.com site.
Here’s how it works. In front of you is a stack of cards that represent the content and functionality for iloveny.com. Please sort the cards into groups that make sense to you. Don’t try to organize the information as it is currently organized. I’m more interested in how you would organize it.
Once you’ve established your groups, give each group a name that makes sense to you. If you think something doesn’t belong, you can make an “outlier” pile.
… Now let’s take a moment to walk through your groupings. Please tell me why you grouped the cards this way and how you decided what to name each group.
Ok, that completes the card sort, do you have any questions for me?
Closed card sorts, in which the sorter is given both content cards and category cards, went much faster than open card sorts, with a couple participants completing them in a few minutes, no questions or pauses.
Observations: Most participants easily sorted cards with specific NY State regions, such as Finger Lakes, under Places to Go, but some did not recognize all names. One thought Catskills was a Broadway musical. Likewise, Places to Stay included Hotels, Motels, and Resorts, but most sorters had no idea what Dude Ranch meant. Things to Do and Plan Your Trip categories had much overlap, with sorters putting many cards in these categories, but not consistently. One sorter noted that labels like Senior Travel, Family Vacations, and ILoveNY LGBTQ could be grouped together in more than one category. Events also was straightforward, but not always, with sorters seeing overlap with Things to Do.
Insights: Several existing category labels were too vague to be useful. Other labels assumed a knowledge of the area that not everyone has. Some terms may be outdated.
User Flow
From the card sorts, I created a user flow chart to visualize how our user Sam moves through a series of steps and pages on iloveny.com to accomplish their goal. User flows help the design team understand the user’s mental model, what the user needs at each step. Flows communicate to the team how the user engages the system and how the system responds. Sam’s user flow was very simple, with one decision point.
I then created a revised sitemap to illustrate recommended changes that emerged from heuristics and card sorting. Drawing on observations and insights from both, I revised primary navigation labels to more clearly describe content grouped in each category. I also added a primary category, Deals and Offers, moved some secondary content to Travel Guide & Planner, and moved Contact Us to Utility Navigation.
Outcomes, Results, Next Steps
Some major recommendations for next steps with the iloveny.com website:
- Change primary navigation labels for clarity, specificity, and better structure.
- Update the blog, both in design and content to bring it more in line aesthetically with other site pages.
- Change or delete outdated terms.
- Conduct additional card sorts to assess user’s mental model with new primary navigation labels.
As an archivist of several years, I’ve organized a lot of information, physical and digital, including archived websites. I’ve learned that information isn’t always where the user thinks it should be. Links die, images disappear, labels no longer convey their original meaning. I assumed information architecture, heuristics, card sorting, and sitemapping would all come easily to me. I learned a lot.
While I tapped my archival skills, especially when it came to information hierarchies, working from a user-centric rather than document-centric focus changed a lot of my thinking. People are all different; we have unique ways of thinking, and we understand information, labels, structures differently. As UX designers, we must always remind ourselves, “You are not the user.” That’s why we do what we do.
