Kelly Browning

About Kelly Browning

Kelly is Matrix Group's Director of Strategy — constructing critical links between new clients and their site users. She enjoys learning about new clients and helping them formulate strategies for most effectively connecting with their users on the web. Before coming to Matrix Group, she was a project manager for Threespot Media. Outside of work, she likes to paint and attend antique auctions.

Getting Started with User Research

How do we know if our website is actually working the way we want it to?  Web analytics data can tell us part of the story, but we need user feedback to help us understand the full picture. Otherwise, we know what people clicked on, but we don’t know why.

Fortunately, getting user feedback doesn’t have to be expensive. There are “do it yourself” methods that you can use right now.

Surveys

You can set up a quick survey (just a few general questions) on your website to get a sense of your user’s feelings, likes and dislikes, and pain points.  It’s a great way to get a broad view from many different perspectives.

Here are the questions I would suggest as a starting point:

  1. What brought you to our website today?
  2. Were you able to do what you hoped to do?
  3. What did you enjoy about your experience?
  4. What can we do to make the website better?

Note question #2 doesn’t make a whole lot of sense launched on your homepage, because, on your homepage, many users haven’t had a chance to interact with the site yet.  Question #2 works best as part of an exit survey.   If you decide to not ask question #2, then you can ask users to take the survey earlier in their visit, potentially on the homepage, or on the 2nd page of their visit.  You can place a call to action in the lower right or left of the screen, or in a right rail promo.  These methods are less disruptive than a modal or popup but can still get users’ attention if designed properly.

Interviews

A user interview is a conversation with a user so you can hear about their experience with your website.   If you’re new to user interviews, here are some quick tips for getting started:

  1. Practice with a couple of co-workers and friends so you can get your style and approach smoothed out a bit, before you start working with real users.
  2. Keep it conversational and natural.  A “semi-structured” interview approach can help with this.   It’s a hybrid between just going through a list of questions, and having an open-ended conversation.  So, do you have a list of questions?  Yes.  Do you read down the list like a drill sergeant?  No.  Keep  it natural.  The interviewee is doing most of the talking of course, but your goal is to keep them talking, and to listen, and to probe to really understand what they’re trying to say.
  3. See if you can get the user to talk about a specific thing that happened in the past.  When a user generalizes and says “it’s hard to find things,” that’s interesting and you can explore those impressions with them.   But when somebody tells you “last week I tried to search for the conference agenda, and I typed in “xyz” and the only result I got was “abc,”  that can be especially useful because it’s so specific and real.
  4. Have the website available for you and the participant.  Whether you’re conducting the interview in-person or over the phone, make sure the website is available for both of you to reference as you talk.   Trying to  discuss the website based on memory alone won’t get you very far at all.  If you’re doing the interview over the phone, have a Webex or GoTo Meeting set up so you can both look at the website together.

Usability Testing

This is the single most important thing you can do. Surveys and interviews give you useful information, sure. But actually sitting down with a user while they try and navigate your website lets you see not just what people say, but what they actually do.   There is absolutely no substitute for usability testing.

How many users should you test with?   It depends on how many usability issues you want to capture.   To consistently capture more than 90% of the issues, you should test with 10-15 participants.  To capture between 55-85% of issues, test with 5 participants. But even just one or two participants is significantly better than no participants at all.  Watching just one person try to use your site can flag an obvious usability issue that you and your team simply overlooked before.

Like interviewing, it takes a little practice to get good at usability testing – but it’s not rocket science. There are DIY approaches that can be invaluable.

Here are some tips for getting started:

  1. Narrow your focus. Chances are your website is way too big and complex to usability test all of it (that’s a big part of why the surveys and interviews are valuable, they fill in some of those gaps).  Usability testing is an investment of time and effort, even on a small, DIY scale. Decide what questions you need to answer.    Orient everything you do around that.
  2. Think of one important user goal or activity that you’d like to understand better.  Good candidates are e-commerce checkout, event registration, navigation menus, and other activities that are critical to the success of your website.
  3. Before the user gets started, ask your participant to talk to you as they use the site, and explain their thought process. This is called the “think aloud” technique.  You may want to demonstrate this behavior so the user knows exactly what you mean.
  4. Appear neutral during the test.  It can be tempting to smile or laugh or interact with the participant as you would in a normal social situation, but this should be done with caution.  If you’re too friendly, the user may be influenced by your opinions of him or the interface.  I try to project a calm and approachable demeanor, but keep a lid on my feelings about the what the participant is doing, or what’s happening on the screen.
  5. Do a pilot test.  Set up a time with a friend or a co-worker to go through a dry run.  This helps you make sure the task is worded clearly, and that the site functionality is up and running, not buggy, etc.
  6. Record the test.  If possible, run a WebEx or other screen capture during the test.  If you can record audio of the user’s commentary, even better.  There may be interesting details that will not be captured in your notes.
  7. Watch and learn! 

Once you’ve gone through this little experiment, you may just catch the usability testing bug.   If so, your next steps might be….

  1. Think about ways you can expand and apply this type of research to your website.  Other tasks? Who should you test with?
  2. Keep learning. Refine your techniques and your approach to the level where you are most comfortable.

If you are just going for a basic, DIY approach, Steve Krug, who wrote the usability classic, Don’t Make Me Think, also has a great book on guerrilla usability testing and it’s a relatively quick read.

rocketsurgerycover Rocket Surgery Made Easy by Steve Krug

If you decide that you want to take your usability testing skills to the “next level,” here is another great book that can introduce you to more formal techniques and advanced theories around usability testing.

handbook of usability testing cover Handbook of Usability Testing by Jeffrey Rubin, Dana Chisnell, and Jared Spool

Final Thoughts

User research can range from guerrilla methods to large,formal studies. Good news: even the most basic, informal methods are better than nothing. Astronomically better!  I hope that some of these ideas encourage you to give user research a shot.

Screen Resolution Data for Responsive Design

Responsive design.  We do it because there are a multitude of devices out there and our websites needs to look great on all of them.  Those of us who have been doing Responsive Web Design (RWD) for a while know that sometimes, tradeoffs need to be made in favor of one type of device over another.

How do we get a sense of where to make these trade offs?  One thing that can help is knowing more about your audience.  For a recent B2B project, the team I work with compiled a report of screen widths based on the screen resolution dimension in Google Analytics (GA).

Screen Widths (px)
0-319

0%

320-479 (e.g., iPhone)

5%

480-599 (Phablet)

1%

600-767 (Small Tablet)

1%

768-959 (e.g., iPad portrait)

4%

960-1279 (iPad landscape, Standard Desktop)

13%

1280 + (Widescreen)

77%



The information in the table above was somewhat in line with our expectations.   We knew that our client’s B2B website drew most visitors during business hours, and we could infer that since most knowledge workers operate from desktop or laptop computers, the traffic to our site would be mostly 960px or wider.   What we didn’t expect was the prevalence of 1280 px and higher widescreen displays, or how miniscule the mobile traffic would be.

How We Used this Data

For us, this data meant that most trade-offs for responsive design should happen in favor of widescreen. We would rather deliver an amazing widescreen experience and maybe a few screens look a little less stunning on a smaller desktop display.

We’ve been talking about screen resolution, but actually – a better metric to use is browser size.  On widescreen displays, people typically do not have their browser fully maximized.  So the viewport of the browser on a 1400 px monitor may actually be only 1100 px.   You can get a sense of browser size stats for individual pages by looking at GA’s in-page analytics.  Unfortunately it’s not possible to get this same data for multiple pages or site-wide.  To do that, you must run some additional JavaScript on every page of your site to log the screen size data as an event for each page view.

Here is a great article explaining how to do this:

http://www.labnol.org/internet/browser-windows-size/26872/

Going back to the screen resolution data we had on hand, we dug in deeper into the 77% widescreen range to get a reasonable estimate of how many visits would have a browser display of 1200 px or wider.

1280 -1399

33.90%

1400+

43.03%

We felt it was safe to assume a pad of 200px, so anybody with a monitor over 1400 px wide would have at least a 1200px wide browser viewport.   That still leaves 43% of the audience  with a 1200 px or wider display; still a fairly compelling number to justify favoring the widescreen display behavior when thinking through design trade offs.    This seemed like a fair hypothesis, although if we had the opportunity to get the screen size data we would have used that instead.

How you use data like this depends on your own design philosophy and the other information you have at your fingertips – other analytics, quantitative user research, the natural form and shape of your content, your technical resources and capacity to adapt one-off tweaks for various display sizes, and other factors.  For us, having this information was useful.

Getting Screen Width Data from Google Analytics

If you would like to collect data like this, it can be pulled from using the screen resolution dimension.  I worked with our developers to create an Excel Macro to transform the raw GA data into separate width and height measures.  Once the widths were broken out, I sorted and used the counts to create a the table with a range of size categories.

Download the Excel file

Big British Breadcrumbs: A New Look at Website Navigation

When content hierarchies get deep and complex, traditional navigation models can turn into a confusing mess.  Some large content websites from the UK are working the problem by adapting breadcrumbs to play a more significant role in navigation. Here are three examples, starting with the most subtle and progressing to the most bold, of British breadcrumb tweaks in action.

The Crumb Stands Alone – GOV.UK

This is by far one of the most subtle tweaks in the lineup but I still felt it was of note.

gov.uk screenshot

  • These big breadcrumbs are the only primary navigation system at gov.uk;
  • Their large size gives them more visual prominence and makes them easier to click;
  • The current page title isn’t included in the breadcrumb trail.  This makes them cleaner and more inviting.

A breadcrumb-only approach has its downsides, as Paul Boag writes in his Smashing Magazine article, Navigation for Mega-Sites. I agree that the biggest weaknesses of is the difficulty of lateral movement through the site.  The next two sites avoid that limitation by including traditional primary navigation menu, as well as prominent breadcrumb navigation.

Crumb Tease – BBC Sport

Next in the lineup, we have BBC Sport, where a single breadcrumb element is given lots of visual punch and helps to provide a sense of place within subsections that aren’t visible in the primary navigation menu.

screenshot bbc sport

  • A single crumb is followed by tabs.
  • This approach is used only when the parent topic is so specific that there wasn’t room for it in the traditional navigation bars.
  • The initial breadcrumb functions as a section label.
  • The breadcrumb-style arrow visual relates the section label to the items that live within the section.

Exploding Breadcrumbs – The Guardian

Now for the most extreme breadcrumb navigation in the trio, The Guardian.

screenshot guardian

  • Breadcrumbs are used as local sub-navigation.
  • The breadcrumbs are color-coded based on parent topics (for instance, red = news).
  • The initial breadcrumb acts as a section label, and subsequent crumbs indicate subsections.
  • Like BBC Sport, the crumbs are followed with additional navigation.  But instead of tabs, the Guardian presents the links in a gray navigation bar.

Bonus part:  Usually there is no left navigation, but when a user reaches “the end” of the breadcrumb path, voila!  A big list of related links appears, inviting more browsing.

Fresh Bread

Web designers across the pond have shown how breadcrumbs can be reconsidered in their relationship to an entire navigation system.  No longer just a trail of tiny, stale links to be ignored unless you’re lost, breadcrumbs can be made fresh and appealing, and perhaps more useful than before.

I’ll be considering new uses for breadcrumbs in my own design efforts, doing usability testing, and adding updates to this post as I learn more.

In the meantime, pass the crumpets!

Have you seen other sites with nifty breadcrumb/navigation treatments? Please share!

Google Keywords as User Research

As an information architect, I often use card sorting and other types of user research to find out how people verbalize their content needs.  If available, I look carefully at a website’s internal search term tracking. But there is another tool that speaks to the verbal side of your users’ information seeking habits: the Google Keyword Tool.  screenshot of google adwords keyword tool

The Google Keyword Tool tells you the words and phrases that are most widely searched via Google. Do more people search for a “veterinary clinic” for their pet, or for an “animal hospital?” How many people seek “diabetes rates,” compared to “diabetes statistics?”    Does anybody search for “diabetes infographics?” This information can be applied to menu labels, taxonomy terms, link text, and other navigational elements not from the perspective of SEO but from the angle of information scent and usability.

Admittedly, there is a big difference between how people formulate Google searches and how they browse navigational elements on a website.  So just because nobody searches on “diabetes infographics” doesn’t necessarily mean I would nix “infographics” as a menu label on a  diabetes-related website. But if there was a near equivalent that people did search for en masse (such as “diabetes statistics”) I’d be more inclined to use that term, all other things being equal.

What I find iffy is the notion of using your site-specific organic search keyword stats from Google Analytics to reach any conclusions about a site’s users.  This is because those dice are loaded with SEO mojo:

For instance, what if “Veterinary Clinic” generated 100 visits to your site, but “Animal Hospital” generated only five?  Is that because the word “veterinary clinic”shows up a lot in the content?  Could it be because your website’s url is “veterinaryclinics.org?”  It’s circular reasoning to conclude that your top organic search terms must reflect the way your target audience verbalizes their content needs.

A website’s navigation, taxonomy, content, internal search and the SEO universe beyond are part of one massive linguistic system that extends from the mind of every person who interacts with the web.   When your user research budget is skimpy, remember that Google is has been doing a lot of work for you.   No user research method is perfect, but with a billion users being tracked, it’s safe to say you’ll turn up a useful nugget or two.

What nifty free or low-cost tools have you found to aid you in UX/IA?