As a human being currently using the internet, you have opinions about online user experience. The problem is, everyone’s experience is going to be different based on their expectations. So although you, as a Moz blog reader and probably an internet connoisseur, may have some very good ideas about making your company’s or client’s site easier to use for the majority of visitors, there’s a good chance that your boss or client will disagree with you.
If you’re like me and aren’t a user experience expert, it’s going to be hard to argue with them on gut instinct alone. Rather than debate in circles, spend the time to validate your argument:
- Prove there is a problem. This is a good idea even if you and your boss (or client) wholeheartedly agree that the site is less than optimal. Get feedback from visitors who aren’t working on the site and see if their feedback lines up with your assumptions.
- Propose a solution. Based on the feedback, propose a solution. It’s best to do this visually with a page mockup.
- Test that solution. See how visitors respond better to your new design than they did to the old design.
By going through these steps, you can build a strong case for implementing your recommendations.
How to prove there is a problem
The first step is to prove that there really is a user experience issue. If you’re lucky and have time and money, the best way to get user experience feedback is to reach out to your customers and/or people in your target market and work with them in person. But most of us aren’t so lucky. If you’re confined to an SEO’s budget like I usually am, you can use an online tool:
My favorite:
Qualaroo
Qualaroo is a simple yet effective way to collect feedback. You just put a small piece of JavaScript code on your site, allowing Qualaroo to load a question in the lower right hand corner of a page. You can:
- Place the question on any page or group of pages
- Write your own questions or use their helpful library of examples
- Set a time for when the box shows up (e.g., on page load, after 15 seconds, or when the visitor moves their cursor up to the URL bar on their browser, indicating they might leave)
Example use: One of my clients runs seminars. They can host them in a number of places, but if the seminar is hosted in their primary building, they don’t explicitly say where the seminar is held. I theorized that this is causing confusion for visitors and that adding the address to the seminar page would make visitors’ decisions easier.
I didn’t want to ask a leading question, though, so I just added a question to every seminar page, “Is there any other information you need to make a decision today?” Once I had collected a few hundred responses, I exported the feedback to an Excel file and started sorting ideas. I was right: a good proportion of people were interested in the location. The exercise also taught me that a lot of visitors wanted a sample schedule of the program.
Cons: You only hear from people who are on your site
Price: $79/month (less if you pay for 1 – 2 years at a time)
Cheap feedback without access to the code of your site:
Feedback Army/Mechanical Turk
While I recommend Qualaroo, I realize that many of you may not be able to convince your boss or client to install JavaScript and potentially distract visitors with your UX questions. If that’s the case, you can use
Mechanical Turk, or Feedback Army, which is a guy using Mechanical Turk for you, because mTurk’s interface is pretty clunky.
Mechanical Turk allows you to submit questions to millions of online workers from across the world (about 30% are American), so you can use the same questions as you would with Qualaroo. You have to lead them to the right page to review as well, but that should be easy enough.
Cons: Mechanical Turk doesn’t pay their testers a whole lot, so you’ll get very quick, off the cuff responses. Plus, they won’t be from your target audience or customer base.
Price: $40 per 10 responses
More expensive feedback without access to the code of your site:
UserTesting.com
If you’d like a more robust user experience test, try out
UserTesting.com. Testers are paid $35/test, so they’re going to give you a much more in-depth, thoughtful review than Mechanical Turk. With a higher price tag comes a lot more information, though: you give testers a task and ask them for feedback along the way. This may be excessive if your idea was about tweaking one piece of one page, but it’s great for information architecture/site navigation issues.
Cons: Reviewers are being paid well to test your site, here, so they want to do a thorough job, and I’ve heard they can be nitpicky.
Price: $49/tester (you’ll need a few, at least)
Bonus: Running tests like these without access to the code of the site means that you can run tests on your competitors, too! Use either Feedback Army or UserTesting.com to learn what people like about your competitors’ sites and what frustrates them. It’ll tell you what you’re up against, and pieces that testers praise may be worth imitating on your own site.
Quantitative feedback:
Google Analytics
Google Analytics won’t give you the opinions of visitors, but sometimes actions speak louder than words. If your theory is that:
- Calls to action aren’t really…calling people to action
- Visitors don’t know how to navigate to the page they’re looking for
- Readers don’t scroll all the way to the bottom of the page
Then you can look at:
- What proportion of visitors clicked on that call to action (if there are multiple CTAs to the same location on a page, you may have to set up Event Tracking to be sure which CTA was clicked)
- How visitors move through your site with the Visitor Flow report, and how many visitors clicked around before using site search with the Site Search report
- How far visitors scrolled down a page, by setting up Events at certain break points
Cons: You get a lot of data, but what it means can be somewhat up to interpretation. This might be a good springboard to convince a client that you need to do further testing, but it can’t prove much on its own.
Price: Free!
How to propose a solution
Proving that there is a problem gets your boss or client to the table. The next step is proposing a solution and proposing it well.
The most effective way I’ve found to pitch a design change is to actually mock up your solution. If you have access to design tools, definitely use those. I don’t, though, so I either modify the HTML with Chrome’s Inspect Element feature or use a combination of the Windows Snipping Tool and Paint.
Snipping Tool & MS Paint
I know, no one gets design cred from using MS Paint. But I’m a child of the ’90s, and Paint was my first introduction to design software, so it’s easy for me to use. The point here isn’t to use Paint necessarily, but to use whichever program you have access to and is easy to use. Don’t stop yourself from creating designs just because you don’t own a copy of Dreamweaver or Photoshop.
When I want to mock up a dramatically different version of a page, I use the Snipping Tool to take a picture of the webpage as it currently is, then modify the parts that I want to. The selector makes it easy to move elements around. If Paint doesn’t have an option I need, I just use other Office products:
- For text overlays and adding a variety of shapes, I’ll often use Word, since it has a lot of text box options
- For color changes and setting a transparent color, I use PowerPoint, because as far as I know it’s the only Office product that has that option
- For text changes, I’ll modify the HTML in Chrome (see section below), then copy that over to my Paint design
Is this hack-y? Yes. Is it impressive? No. But it gets the job done. All you need at the end is a design good enough to communicate your idea. Once you get sign-off, actual designers will make sure that the details turn out right.
Rewriting the HTML
As I mentioned above, this works best if what you’re doing is modifying the existing text or images. You can either download the HTML of a page, modify it, and share that, or you can use Chrome’s Inspect Element to quickly modify text and take a picture of the result. It took me 15 seconds to change the text on Moz’ homepage:
Just right click wherever you want to edit on your page while in Chrome and click “Inspect Element.” If you want to make color changes or image changes, it’ll be a little more complicated, but still doable.
You can do this in Firefox as well with Firefox’s add-on,
Firebug.
Once you’ve got a mock up, save it and send it on to your boss/client with your description of the changes you’ve made, the stats from your tests, and why your solution is solving those problems. (Just don’t mention how you made that mock up.)
How to test your solution
Even if your proposed solution is a big hit and everyone wants to implement it right away, it’s better to test to make sure that it’s actually going to work before making a permanent change to your site. I’ve had a lot of clients tell me that it’s too hard to test changes, but it’s actually fairly easy with the right tools.
If you or a dev can build you variation pages:
Google Experiments
Image from Marketing Engine Land, which includes more details on Google Experiments.
If you’ve got a developer who can build out your suggested change,
Google Experiments is a free, reliable, and easy to use tool to track results. It’s integrated into Google Analytics, so it uses the conversion metrics you already have set up (this may mean you’ll have to set up a new goal to cover your test’s desired outcome).
Cons: You have to create your own variation pages.
Price: Free!
If dev resources are limited:
Optimizely
Optimizely does need a bit of dev work to install a JavaScript code onto your site, but once it’s there, you can edit the HTML for tests with their web interface, without talking to a developer. You can edit with their editor or use actual HTML, meaning the tool doesn’t require HTML skills, but still allows those able to write HTML the extra precision they can get from making changes to the code directly.
As a consultant, I
love working with clients who have Optimizely installed, because I can take a test from start to finish. I prove the problem, propose a solution, set up the test, and present results, all without my point of contact having to take time out of his or her busy schedule to make any changes. And, once you have numeric results, it’s easy to prove the value of your suggested change and get it into the dev queue.
Cons: You have to start with the core page and then modify elements with JavaScript, so you can’t make dramatic changes
Price: Based on your monthly traffic, prices start at $19/month
Make a solid argument for change
Assuming that each step supported your initial ideas, you now have more than enough data to strongly support making the change you suggested. When you make your recommendation, take the time to tell the story of what you went through—getting user feedback, coming up with a solution, and proving the solution works. Clients and bosses feel a lot more comfortable with your conclusions if they see how thoroughly you researched the issue.
Has anyone else gone through a similar process? Any tools you prefer, or tips you’d like to add? Share in the comments below!
