Every month, I'm hosting a live UX Audit session where I review up to 3 submitted sites and share suggestions and tips for improving and optimizing the product and user experience. Be sure to sign up for next month's at the bottom of this article! If you haven't already watched UX Audit #1, check out the replay here.
For this first audit, I focused on the first landing page of two different sites:
While I shared a lot of advice specific to each of these two sites, here are some commonalities that you can apply to your own product or site:
This is a super simple principle that will make all the difference in your site's design. If you read nothing else in this article, remember this: Contrast. Contrast. Contrast. Contrast.
Still here? Great. People need to be able to read your content. You've spent a lot of time crafting it. Don't hide it in sub-optimal color choices.
There are simple rules of thumb you can employ to make sure you choose colors with enough contrast. Obviously, the simplest is to put the two colors together and see if you can read the text. But let's assume you want to go a step further than trial and error:
Pair lights with darks and vice-versa.
Dark background? Choose a lighter text color. Light background? Choose a darker text color. If your first color is a mid-tone, decide if it's lighter or darker in general and go to the opposite side for your secondary color.
Reduce the contrast in your background
Contrast can get tricky when you're dealing with photo-based backgrounds or backgrounds that have a wide range of color, say, a black and white checked pattern. One simple solution—and you've seen this all over the web and even here on Mostly Brilliant—is to use a color overlay or filter to reduce the contrast of the background image so you can make your text pop.
Play with font weights and sizes
Sometimes all you need is a bit more oomph in the text to make it stand out against the background. Try making your text size larger. Or bold. Or even bolder if your particular font choice allows that. Maybe even all of the above. The more that color your eye can pick up, the higher the likelihood you'll be able to easily read it.
Sometimes you can get away with using a drop shadow to increase the contrast between the text and the background. This works on the same principle as pairing lights with darks. By putting a darker shadow between your light text and light background, you're effectively pairing it with a darker color that can make it stand out. Use with caution, but done right, it can look beautiful.
What's the one thing you want your users to do on your page?
A well-optimized landing page gives a user a single task and a single focus. Everything you include on that page should help the user get closer and closer to reaching that target. The copy, the graphics, the options for where to go next, the size of elements in relation to each other, it all impacts your users' ability to understand what it is you would like them to do and take action on that.
It's not all about you, though. Your users also have their own goals in coming to your site. Your users have a specific problem they're looking for you to solve. Your job is to identify that problem and show them you're the exact solution they've been looking for all along. They should breathe a sigh of relief when they make it through your first few bits of copy. At last. Their search is over.
This is where the tricky part comes in: You have your goals (SIGN UP!), and your users have their goals (SOLVE MY PROBLEMS!). Your challenge is to balance those two seemingly aligned goals in a way that makes your users feel like their goals are the only thing you care about. You may feel compelled to put 10 sign-up buttons all over your page with big animations saying "Sign up and we'll solve your problems" (because you obviously have the best solution to that problem ever and who wouldn't want to sign up?), but if you haven't answered some basic questions for the user, that button is going to be meaningless.
Even if you have other amazing products, offers, or bells and whistles that are going to knock people's socks off, use your landing page to focus on the one thing your users need to know to make their decision. Maybe that one thing is that you have an assortment of amazing products and you share a teaser with them, or maybe you choose a "flagship" product to get their buy-in and upsell the rest later. Just choose one and design your landing page around making your users fall in love with that one thing.
In 2017, it should be a given that your site works on mobile, but just in case you need a reminder: Your site must function on mobile devices. It's just not an option anymore.
Especially if you're driving traffic from email or any social networks, the majority of your viewers will be coming to you on a mobile device and you need an experience that's on-par—if not better than—your desktop site.
If user experience isn't enough incentive, Google now uses mobile-friendliness as a factor in its ranking determination, so if your site isn't mobile-optimized, there's a chance you'll show up lower in search results than your competitors who are mobile-optimized. This has compounding effects when you consider that nearly 40% of mobile research starts with Google. If you're not showing up on that first page because you're not mobile-optimized, that has a direct impact on your bottom line.
Check out Google's Mobile-Friendly Test to see if your site passes.
I accept up to 3 sites to review each month, and the only way to submit your site is if you're on the notification list. Find out more about the Live UX Audit or just sign up right now: