Content hierarchy in action
Without a clear content hierarchy, our designs went from bad to worse. Here’s how we used content hierarchy to fix it.
It’s not always easy to point out a content strategist’s effect on design. Sure, we can write nice words — but writing effective UI copy is only one of many ways a content strategist can improve your designs. If your content strategists are only writing copy, then you’re not tapping into the many other valuable skills they bring to the table.
One of those skills is content hierarchy. Content hierarchy is the strategic ordering of information on a web page, where the most important information receives the most emphasis, and the least important information receives the least emphasis. Normally the most important stuff goes at the top, and the least important stuff at the bottom. But there are other design tricks you can use to emphasize some pieces of content over others — tricks such as font size, spacing, visual treatment, color, etc.
Content hierarchy is something you should do before you start wireframing, but after you’ve identified your user’s needs. Content hierarchy is not the final words that are shown to the user in the interface.
What happens when you don’t define a content hierarchy?
Content hierarchy is one of the most effective ways of making sure that users will be able to find the information they need to accomplish their task. If you don’t define a clear content hierarchy before you start designing, then you’re likely going to end up emphasizing the wrong information. I know this because it’s exactly what happened to me when I worked on a two-step authentication setup experience for Shopify. Let’s take a look.
This was our first iteration of the two-step setup experience. As you can see, it was very focused on the TASK we wanted the user to accomplish.
Now this wasn’t a terrible first attempt. But it did make some pretty big assumptions.
First, this design assumed that all users had a pre-existing knowledge of two-step authentication. Second, our design also assumed that all users would definitely want to do this. Why wouldn’t you want to make your account more secure?!
Thankfully, our user researcher pointed out that we were making these assumptions. She suggested that we try and educate users more about two-step authentication but also give them a way to skip this step if they didn’t want to set up two-step authentication right away.
But instead of taking a step back and reconsidering how this new information should fit into the existing design, I kind of yolo’d it and said:
“Let’s just add a link!”
(Seriously tho’ — how many people have done this?)
So we added two hyperlinks: the first hyperlink took users to help documentation that explained two-step authentication in more detail. The second hyperlink let them skip the setup and continue logging in.
Satisfied with our solution to the problems identified by our user researcher, we patted ourselves on the back, and sent our designs away for usability testing. Unsurprisingly, these were the results:
Users didn’t understand what 2-step authentication was
Users didn’t realize they could skip this step
What went wrong?
We had anticipated these problems and tried to fix them before usability testing, but users were still struggling. It didn’t make sense! Everything they needed was right there in front of them. Why couldn’t they see our helpful hyperlinks?!
That’s when I realized….
This wasn’t a word problem. The copy was clear, concise, and easy to understand…
And it wasn’t a functionality problem either. In one way or another, the design had all the information users needed to complete the task…
This was an emphasis problem.
All the right information was there, but it wasn’t showing up when it was most needed. Secondary information — such as the type of two-step authentication methods you could choose from — was being prioritized over primary information that was more important to users.
Basically, there was no content hierarchy and everything was in the wrong order.
The problem with the current hierarchy
Thoroughly humbled by our user feedback, I took a step back and took a hard look at the current design to try and figure out the root cause of the problem.
I realized that users actually had two decisions to make even though we were treating these decisions like one.
The first decision was whether you wanted two-step authentication at all. The second decision was which two-step method you wanted to use.
But in our current design, these decisions were in the wrong order!!! Choosing which two-step method you want is clearly a secondary decision, but in terms of visual weight and order on the page, it was coming first.
On top of that, these two decisions needed very different types of information. In order to decide if you wanted two-step authentication in the first place, the user needed to know:
- The benefits of two-step authentication
- How it works
- Is it right for my business?
In the current design, this decision was woefully under-supported. Most of the information needed to make this decision was buried in the help documentation instead of being emphasized up front.
Content hierarchy to the rescue
Now that I understood what was wrong with the content hierarchy, I knew what I had to do to fix it. First we needed to re-arrange the page so that the decisions were in the right order. Then I needed to make sure that I was including the right information to support the first decision (whether to turn on two-step authentication or not).
Working with my designers, we reorganized the content on the page to better meet our users needs.
Then, if a user decided to select “Turn on two-step,” we show them a modal that explains what authentication methods they can choose. (We also added a third option — security keys!)
Now our design had a clear content hierarchy. Now the content was prioritized in a way that met user needs.
And we had the results to back it up. After we shipped this solution, 62 percent of users turned on two-step authentication when they previously hadn’t enabled it for their store.
If that isn’t an effective content hierarchy, then I don’t know what is.
Lessons learned
I learned a lot of things from working on two-step authentication, but the most important realization was just how critical content hierarchy is in user experience design. Without it, we wouldn’t have achieved our business goals or met our users’ needs. Changing button colors, re-writing copy, adding icons — none of those things would have improved the experience if we hadn’t fixed the fundamental content hierarchy problem first.
On top of that, here are some other lessons I learned that I intend to apply to future projects:
- When you need to introduce a new piece of content, take a step back and see how it fits in to the existing hierarchy. In my case, I just jammed some links into the design, without actually thinking if it was the right place to put that content.
- More than two actions on a page can be a tripwire to help you identify whether you have a content hierarchy problem. At one point, our designs had six different actions that users could do. Too many actions on a page can be a sign that you haven’t grouped or prioritized tasks.
- Iteration is part of the process. Sometimes you have to get it wrong to get it right! At Shopify, we’ve built in ways to get feedback — from user researchers, co-workers, and even real-life users — in order to iterate and improve our designs. That’s how I was able to identify these content hierarchy problems and fix them before we shipped.
How do you use content hierarchy to solve design problems?
Now that I’ve personally experienced the effect content hierarchy can have on design, I’m obsessed. If you have other examples or stories about content hierarchy and design, I’d love to hear ‘em! You can tweet at me, or email me at gillian.massel@shopify.com.
Interested in solving content hierarchy problems at Shopify? We’re hiring content strategists! Check out Shopify’s spiffy careers page for more information.
Special thanks to the incredible designers — Yang Chen and Komal Javed — who worked with me on this project. And thanks to our user researcher — Florida Doci — who helped us check our assumptions in the first place.
