.

The quest for improved site navigation

Posted by on Nov 7, 2013 in Process, User experience

HelloTED_20130729_016_r_small

In the beginning, there was a TED.com site navigation bar and it was good. But then TED grew and grew…

As TED grew and evolved, the number of options in the the navigation bar ballooned, and it no longer effectively gave users quick access to all TED.com has to offer. This is the story of the quest for a newer, better site navigation for TED.com.

What defines good site navigation? There are many factors, but a simplified list is that:

  • it is easy to remember and learn
  • it is consistent
  • it uses labels that are useful for a user (i.e., avoids internal jargon)
  • it supports the tasks that users want to do most often
  • it is flexible enough to allow for growth.

On the other hand our global site navigation, like that of many other websites, replicated our organisational structure — making users work hard to understand our labelling and find what they needed. This structure also meant that, each time a new program or initiative launched, we’d have to shuffle things around to make space for the new arrival, often removing clearer labels as we went. (Sad thing: We never even put “TED Quotes” on the navigation because there wasn’t space.) We realised that something had to be done — and the redesign allowed for this change to be rooted in the site as a whole.

TED.com site navigation needs to tell people who we are as an organisation, what the website is for and how they can engage with the talks we publish. It also needs to be flexible enough to allow us to grow and change as an organisation, while still letting users — both new and returning — interact with us.

But designing site navigation that accomplishes these goals — that was a challenge. It began with the difficult process of shaking loose preconceived ideas and trying to unlearn what we knew. From inside an organisation, there’s a tendency to panic if every label — and how its placed amid others — isn’t 100% accurate. But for users, it’s more important that navigation labels provide a strong ‘scent’ of the content contained underneath. In most cases, a user is happy enough to click an extra time if they feel fairly confident that they are on the right path to what they are looking for.

Initial categorisation through open and closed card sorting

In order to evolve our navigation, we had to understand our end users’ needs. We conducted a broad user survey to get a general idea of what our users found useful and challenging, then for more qualitative feedback, we gathered small groups of users together for activities designed to show us how they understand the site. One of the key user activities was card sorting.

Card sorting requires you to take a sample of all the content on the site and give each piece of content a card. The idea is for the collection to be both broad and deep – from the high level “About TED” content right down to “Event page for TEDxBroomfield.” Participants work in pairs to group these cards into sets that are logical from their perspective.

staff_card_sort_1_cc_small

We initially conducted an “open” card sort with a group of TED staffers, asking them to come up with a broad label for each set of cards they ended up with. We then ran the activity again with non-staff users, this time as a “closed” card sort where we provided broad labels for them to group the cards under. For this closed card sort, we chose simple, clear action-based labels to give people an idea of what they can do on our site:

  • Watch
  • Participate
  • Get involved
  • Act
  • Attend
  • Discuss
  • Explore ideas
  • People
  • About us

There is overlap here, for instance between the labels “Act,” “Participate” and “Get involved,” but that was deliberate; we wanted to see which would resonate most with the participants. To keep things flexible, we also allowed them to add or remove a high-level headings.

Participants worked in pairs, which meant they had to negotiate out loud and we could hear the reasons for their choices. What resulted was very strong agreement across many of the high level labels. This was a good launching point for the next phase: further refinement based on scenario testing.

Navigation refinement using scenario testing on prototypes

We wanted our navigation to support users, so for the next round, we wanted users to perform tasks we know they commonly do, finding their way with our new navigation. We gathered ideas from the various programs at TED and turned them into plausible scenarios that we could pose to each of our “prototype testing” participants. Some examples: “You remember watching a TED Talk two weeks ago a but it’s not featured on the home page when you go back to find it. Where do you look next?” and, “Your friend told you that he went to a TED event in your area last month. You’re not sure if you understood correctly, but you want to go to a TED event too. Where do you go to find an event in your area?”

As we posed each scenario, we watched the participants’ actions and reactions. Were they confused? Did they seem to get it straight away? How quickly did they seem to “learn” the navigation labels and structure?

We did several rounds of these tests, with a few people participating in each round. In between each round, we tweaked the labels and configuration for the areas that caused confusion. In some rounds, we made radical adjustments — and slipped backwards in terms of user understandability. We’d retract the change, tweak it in a different direction and keep on testing. We also changed which scenario we started with each time, so the results for the later scenarios wouldn’t be skewed due to learning.

Overall, we observed that users found it helpful to have a short phrase accompanying some of our more unique content areas to help give them a sense of what it was before they even selected it. We also observed that users found the simpler navigation much easier to process overall.

The revised navigation is now live on the beta version of our new site, where we continue to refine and adjust. We know that our regular site users will have to take some time to “unlearn” the current site navigation configuration — and that’s totally normal. But we hope that, with the information ‘scent’ strong for all nav labels, they’ll pick it up in no time.

 

hello_ladan_05Product development manager Ladan Wise is Australian, and refuses to shake off British English spelling habits. In other words, all “spelling errors” here are intentional.