Heuristics, Information Architecture, and Card Sorting
Or The Subtle Art of Making a Bad Website Good
What makes a website good? That depends on what you’re using it for. If it’s an e-commerce site, you want it to be easy to use and secure. You want to be able to find what you’re looking for and get through the checkout process with too much trouble. Nice pictures and some good copy never hurt, either.
What makes a website bad? That’s easy: basically, just take all the things that make a good website good and do the exact opposite. A website is bad if it’s confusing, distracting, overwhelming, and most importantly, not functional. Another crucial factor is the site’s information architecture — the way the contents are organized.
I was tasked with analyzing the information architecture website for The Strand, the famous NYC new and used book store. Since their website is technically just a virtual version of their store, the first thing I did was pay the actual store a visit.
The In-Store Experience
The Strand is a huge bookstore, with several floors filled with books, both new and used. Unsurprisingly, because of its size and how long it’s been around (it was founded in 1927), it’s a popular NCY tourist attraction.
Upon entering the store, shoppers are met with tables of books organized into categories such as New Arrivals, Bestsellers, and Best of the Best. A little farther back are tables of books dedicated to genres like LGBTQIA+ subjects, Art, Philosophy, Mystery, and so on. All around, tons of other merchandise is for sale, like T-shirts, socks, tote bags, and bookmarks.
I spoke to a few of the shoppers and asked them if they knew what they were looking for or if they were just browsing. I also asked why they were shopping in the store instead of online.
One person had received a gift card from his girlfriend and was browsing bestsellers. He said it was a thoughtful gift because he comes to the store often. The experience of coming to the store, he explained, was more fun for him than just browsing online, because he could open up books and read bits and pieces of them.
I also spoke to a family who was visiting from California. They told me that they’d also gone to Powell’s Books in Portland, OR, another well-known used bookstore. They were hard-core book store fans, and they were picking out merchandise as well as books; one of the daughters was even wearing a Strand shirt as she shopped. The mother told me she didn’t often shop for books online, also preferring the in-store experience. Take that, Amazon.
Information Architecture: The Website Experience
The site’s primary navigation includes 8 categories: Books & Media, Rare & Collectible, Gifts & Apparel, Staff Picks, Events, Books By The Foot, Blog, and More. What’s Books By The Foot, you may be asking yourself. You wouldn’t be alone—that category was confusing to every single person I asked about it.
Two of the categories, Staff Picks and Blog, had no subcategories. The categories at the bottom of the page were similar to but didn’t exactly match the ones at the top; “Books” was its own category there, and media was lumped in with gifts. The choices under “Events” were slightly different, and there was a section called Strand Services, which pretty much encompassed the same subcategories as “More” in the primary navigation.
Card Sorting: Open and Closed
To test whether users could make sense of the primary and secondary navigation, I asked people to do both open and closed card sorting for the site.
I wrote the names of the site subcategories onto index cards. For open card sorts, I asked them to put cards into groups that made sense to them and then give those groups category names.
In a closed card sort, participants sort index cards into the categories from the site.
No one I interviewed could tell what Books By The Foot was but a few did put Books By Style, Color, and Subject under it.
Books By The Foot is books sold in bulk by The Strand, which is probably used by designers to furnish showrooms and maybe by films to furnish libraries (I’m just guessing on that one). The books can be purchased or rented.
The sorts told me that the site’s information architecture did present a bit of a problem to users. “More” isn’t very inviting to click, and some of the wording on the other categories and subcategories (ex. What is the media archive?) was a little confusing.
Heuristics: But is it usable?
Once I understood the general layout of the site, the next step was to assess it. Is it easy to use? Can shoppers find the items they want to purchase even if they’ve never been to the site before? If they make mistakes, how does the system let them know? And does the site provide anything above and beyond what the user is expecting? In short: yes, sort of, sufficiently, and definitely not, in that order, but I’ll provide a bit more detail.
In the practice of UX design, all of those questions are answered via heuristic analysis. Heuristics are rules used by people to form judgments and make decisions about something. You can think of them as rules of thumb. They’re used to evaluate the overall usability of products and to predict the effectiveness of possible solutions.
There are several well-known sets of heuristics, including Jakob Nielsen’s 10 Usability Heuristics. For this project, however, I used the Abby Method, which asks if a product is: findable, accessible, clear, communicative, useful, credible, controllable, valuable, learnable, and delightful.
Normally, heuristics would be done for every page on the site. For this project, I chose just three pages: Books & Media, Gifts & Apparel, and Events. The actual heuristics analysis I did is long and very dry, to say the least, so I’ll sum it up.
- Findability: Finding things on the site isn’t too much of a challenge, although I found that using the store’s search feature doesn’t always bring up the most relevant results.
- Accessibility: Meets best practices as far as text and background contrast.
- Language: Clear and appropriate for the demographic.
- Communication: Could use a little work. The error messages could look nicer and be worded a little more conversationally.
- Usefulness: Overall, yes, but there were some bits of faulty navigation, such as “Bestsellers” sending users to a page containing bestselling books in one part of the site, while another link sent the users back to the homepage.
- Credibility: The site is credible except that some parts, like the event photos and the book subcategories, are out-of-date. The event photos haven’t been updated since 2018 and the main book subcategories include things like Short Story Month 2018 and Holiday Gift Guide 2018.
- Controllability: Users are able to recover from any errors they make.
- Valuable: Except for the fact that they buy used books back from customers and offer special events like readings and signings, there’s nothing especially valuable, at least not compared to sites like Amazon and Barnes and Noble.
- Learnable: No problem there.
- Delightful: Not especially (the tiny bit of animation on the genres on the Books & Media page was cute, though).
Competitive & Comparative Feature Analysis: How does it stack up?
Another way to measure a site’s worth is to compare it to other similar sites. In this case, I chose Powells.com (because Powell’s is known for rare and used books), as well as Amazon.com and Barnesandnoble.com, as competitors for The Strand. A comparator is a product or service that may not provide exactly the same thing as the site you’re comparing it to, or may not have the same business model, but which may in some way have the same users. I chose the library, since they do provide books, but not for purchase.
My analysis consisted of 11 features: shopping cart, wishlist, related products, item preview, account creation, recommendations, subscription boxes, book selling, blog, reviews, and the homepage on mobile. All of the other sites, with the exception of the Bergen County Cooperative Library System, offered more features in a more engaging fashion than The Strand. And while The Strand gives customers the chance to review books on their site, almost no one does it. They don’t provide any editorial reviews, and they don’t show much in the way of related products, so the book detail page is like a ghost town.
User Flow: Purchasing A Bestseller
I mapped out a user flow for the task of buying a bestselling book. To make the whole experience more realistic, I created a persona, Lia Cornelia, although it couldn’t be fully fleshed out because I hadn’t actually done any user interviews to determine behavior and pain points.
Unless they’re coming to the site via Google search, a user’s first stop is going to be the homepage. From there, the user can browse Bestsellers by either clicking “Bestsellers” in the hover menu or by clicking “See All Bestsellers” from the main Books & Media page. If they know the particular bestseller they want, they can also search for a book via title or author using the search bar. That’s the route our persona, Lia took. From the page of book results, Lia chose to click on the book title, as opposed to the Quick View option that comes up, bringing her directly to the book’s detail page. She clicked “Add To Bag” and went on to checkout, not taking time to look around for anything else. She logs into her account and completes her purchase easily.
Proposed Site Map Redesign
Based on the information I got from the card sorts, there are several changes I’d make to the strandbooks.com.
- I’d move Media from Books & Media to Gifts, making Books its own category.
- I’d add the word “Books” to the Rare & Collectible category.
- I’d make a category called Recommendations for both the Staff Picks and The Author’s Bookshelf.
- I’d change the name of Books By The Foot to Books In Bulk.
- I’d change “Calendar” under Events to “Upcoming Events.”
- I’d change “Media Archive” to Photos & Videos.
- I’d change “More” to “Services.”
- I’d move “Rent Our Rare Book Room” from Events to Services.
