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
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!
This one hits home for me. I'm glad to see that I'm at least using all of the free tools mentioned here!
Often the struggle is proving that there is a UX issue and then figuring out what tools are available to test your theory. I think you really nailed it here.. bookmarking this for sure.
Also, for Mac users, you can always use Cmd+Shft+4 to take a screen snippet. Use Cmd+Shft+4 and then press space bar to capture specific windows.
For any advanced image / graphic editing, Pixlr is a great free tool. Not everyone has MS Paint or Photoshop at their disposal.
Thanks for adding details for Mac users! I'm a PC user (as you probably noticed), so I'm never sure how to modify my recommendations for Mac users.
No problem! I recently switched from PC to Mac for work so I empathize with both.
Excellent post Kristina, thank you for sharing.
It's a great framework to follow if looking to get something improved, I can see a direct application to landing page optimisation which I'll employ this week!
Love the MS paint reference too, I still use it all the time when mocking up stuff internally, it's rarely presentable enough to show anyone else, however!
Haha, yeah, you can't change big things with MS Paint and keep it looking good. You can only move them around a little.
@Luke. VWO, is one of the best testing tools for landing page optimization.
You can change the Text in Chrome and Firefox (I think also without firebug) and with the latest internet explorer its possible to. I only write it, because you seem to like MS products :)
Never thought about ms paint, but I still use Office and the Snipping tool - like you said, learned it and did it over years make you pretty fast :-) And the snipping tool ist just a good tool, sometimes the easy and small tools are the best.
I have used Feed Back Army which was very simple but the people answering were clearly American so didn't understand certain things that are different for a UK market.
Thankfully they backed up what we already knew about a website, but it is brilliant having that feed back when you are only a small team with very similar ideas.
I always report to my client in terms of revenue because that's what they understand best.
I am currently trying to see which services are good for UX testing. VWO (Visual Website Optimizer) is one of my favourites, but can be a bit expensive for some businesses.
One thing that I also have been wondering about, is UX testing with video. I have seen some services that takes people into a testing program, where both their clicks and offline behaviour is recorded.
Most software (including Google Analytics, cannot show you the facial expressions or any other irritations that they might encounter during a website visit. Truly good stuff.
To be honest, I never know there are sites to get feedback from real users. I am more than happy finding these sites. Thanks a lot. You made my day Kristina Kledzik
It's a decent list of websites, and I look forward to trying a few of these throughout 2015 - it's certainly easier than bugging friends, family and strangers!
nice post thanks.. i like both optimizely and google analytics.. would love to understand how they can be better connected.. thanks for sharing your ideas and info, very useful! Eugenio (SEO)
Krisna, such a wonderful post! I am Mike and I'm just a newbie in the world of SEO and I really appreciate blogs that can educate me in exploring the world of internet. I hope you can do more posts like this! :)
Hi Mike,
Welcome to SEO, and to Moz! We ask that your links in comments be relevant to your comment, and wanted to let you know that all links in comments are nofollowed. Thanks!
Yup good one Kristina! isn't it all about A/B testing?
As long as UX impacts search, SEOs will always know UX.
Qualaroo is definitely a great tool for online customer feedback. However, the targeting is fairly limited. This may result in low conversion rates on the widgets displayed, in additional to annoying website users. I work for Insitez - online customer feedback, which contains far more advanced targeting options. The widgets can be used both on the web as well as mobile.
This is the first time I hear of Qualaroo ... This is a very interesting tool. Thank you!
Nice post.
Very Informative, Ms.Kristina.
Nice to see that so many tools are out there in the market to track and then help better the user engagement and interaction metrics.
Google still remains Aces in my books, their close proximity to the subject, sometimes gives them an edge when sharing metrics.
The tweaking tools mentioned definitely seem to have potential and will definitely employ the ones that i wasn't using originally.
Need to start focusing on SUO (Search User Optimisation) rather than just SEO (Search Engine Optimisation).
This is a useful article. You explain a number of different ways to get UX feedback on a web site. You also helpfully explain that if someone needs to get UX feedback then the best way to do that is dependent on their web site's configuration. If they have a web site wherein they have control over the code driving the web page then implementing a feedback form is rather easy to do with a language like PHP. It is rather more difficult to implement a feedback form if you are not in control of the web site. You mention a JS choice which has a monthly fee. That would be helpful, if the user is unable to modify the code running the web site.
Thanks @Kristina. A wonderful piece of information. UX/ UI are highly corrected to SEO. One can use VWO or Optimizely to increase his ROI.
Really nice post, Kristina. These two "industries" and job titles are really beginning to overlap more as SEO evolves and Google continues to develop a smarter algorithm.
I've seen the battles between UX/SEO teams firsthand at past employers, so I really appreciate the hands-on tips for ways to "show" people your idea and convince the UX/dev team to run a simple test. All of these programs and tips can be used well, and it's nice to see somebody go beyond the typical GA, Optimizely, etc.
Also, why didn't I ever think of downloading the HTML page and just editing it, re-saving, and sending off? What an awesome way to showcase simple changes and get people to see what you're "seeing."
I agree! I've always thought of SEO as "usability for search engines, so I think UX and SEO fit together nicely. :)
Great ideas in here, thanks Kristina! One more I love is UberTesting's free service called peek. With peek, they have one visitor go to your site and record their session and their voice - they talk you through what they see, what questions they have, and what they like. It's only one user (it's free afterall) but I've found it super helpful in pointing me in the right direction with UX! https://bit.ly/1oeesNW
Excellent post Kristina, thank you for sharing.
Hi Kristina,
Thanks for sharing such valuable post on user experience. I am agreed with you, and it has been seen many of website's owners really don't care enough on UX where it should be.
Another good cheap tool for UX testing: fivesecondtest.com
Personally using Google Analytics to test out user experience has been my main go to in the past, but I will check out the other tools mentioned here for sure. It really does come down to user experience not only for SEO but the success of a website as a whole. I like to bring in the client and brainstorm after I have a solution laid out, so they have their input as well but at the same time see the reasoning behind the technical aspect.
Quick and easy is the way to go when trying to show a small change, and sometimes both can be accomplished by inspecting element in the browser and then taking a screenshot to get the point across. Great Post and also shedding light on how SEO and UX go hand in hand!
Great post! There are some great options in here to make proper decisions.Just an update though on the pricing for usertesting[dot]com. The users are only paid $10 per review, not $35.
https://www.usertesting.com/be-a-user-tester
SEO is the first step to UX.
I like to put SEO in an old library analogy. Jump in your DeLorean and think with me back to the ancient days of card catalogs.
Imagine you need to know something specific for a research paper. You visit the library and head to the card catalog (Google). Once there you decide to search for your topic. You pull out a few cards (SERPs) and based on the information provided (SERP Elements) you decide which book best fits you. The title and description have just won you a visit / reader, and who controls those? The SEO. However, those titles and descriptions have also setup the expectations for the reader. They are the only information the reader has to go off of at this point to formulate their expectations. Would the book titled, "Rand Fishkin's Shark Wrestling Diary" explain the exciting life of burly men that wrestle sharks in the Pacific Ocean and contain my sorely needed information? Perhaps!
Really nice post. Every webmaster or web owner should care about the UX/UI effects on SEO. I am using Optimizely mentioned here.
Thanks for sharing the tools!
Since anything we do affects SEO, UX is part of it! More call to action, more clients returning, more referrals and recommendations, more SEO!
Thanks for sharing and thx for the tools!
Hi Krisna, nice post. really you are doing so hard work. WE have found so many precious posts on your blog. We specially like your SEO posts.