How many times have you asked family and friends for feedback on your website and got vaguely approving comments, but no real actionable points? It’s frustrating. And if you are trying to look at your own website with a critical eye, it’s hard to know where to start and to be objective about your brand and the usability and design of your site, particularly if you built it yourself.
Also becoming more popular are using testing sites, like Peek, where you can see and hear a real person navigate around your site and give feedback. By all means, try this once, but bear in mind these testers are probably not going to be your target market. There are some amazing tools to review how visitors use your website and I’ll touch on those at the end.
However, nothing beats a well-structured review from a real person. Start by asking a friend whose opinion you trust and ideally, who could be in the market for your services or has been in the past, to help you critique your site. Reviewing a website is partially about gut feel, but here are the areas I focus on when reviewing a website. Read through and then watch me review the photography website of one of my Siteschool students, Christine McNally, who kindly volunteered to take one for the team and be recorded. Thanks Christine!
1. PURPOSE & BRAND PROPOSITION
Everyone knows you only get one chance to hook someone when they land on your home page. Whilst I think that the old school rule of making sure your offer is stated clearly ‘above the fold‘, ie, be visible without scrolling, is losing traction because we are all becoming more accustomed to scrolling down these days, I do think a statement clearly stating what you do and how you do it is vital and should appear near the top of your home page. This is your chance to state your ‘why’ and tell people what differentiates you from your competition. If you are selling a partially experience-based service, like photography or website design, visitors need to be able to visualize how that experience will feel from the get-go.
2. VISUAL IMPACT
This is one of those things that is more about gut feel and is hard to measure. The golden rule is less is more. I often see sliders with more than 10 images or a composite of images and ideas to try to grab people’s attention before they click away. A busy header is overwhelming. You’ve heard the term bounce rate? It refers to those visitors who leave your site immediately without clicking or scrolling at all. Try to present too many ideas at once, and your bounce rate will be high. Instead, be bold and be selective. Believe in your product and what you have to say about it. A single image and a simple heartfelt statement will have much more impact than an endless slideshow or a complicated message.
If you are offering something visual, like design or photography, it’s easy to say “I’m not a writer” and do a really average job with the copy you produce. People buy people and experiences, and you need to take every single opportunity to connect with your ideal client. Forget businesslike. Be personal and don’t waste any opportunity to inject personality into your website. A really good example I often come across, is the success message you see after submitting a contact form. So often, it’s left on the default setting, which is usually something like “Your form has been successfully submitted.” Is that really the last message you want someone to see as they leave your site?
The key here is giving people the least clicks possible and placing your menu items in the order you ideally want them to follow to experience your website. Make sure the areas they will want to return to on subsequent visits are accessible by a single click. eg. Portfolio or Contact. Eliminate landing or decision pages and use dropdown menu items instead. Having clear calls to action on every page are an important part of your navigation. The phrase ‘call to action’ sounds a bit salesy but it doesn’t have to be. At the foot of your About page, make sure it says something like “Explore my Portfolio”, for example. And, if SEO is important to you, don’t use alternative words for key parts of your site. Naming your blog area, ‘Journal’ or ‘Notes’, for example will make it harder for Google to find your recent posts and harder for visitors to find it.
This isn’t a ‘how to choose fonts’ post, so I’ll limit myself here and refer to another blog post that explains font selection more fully. I will note that choosing fonts should happen well before you start creating your website. At the very least, make sure that you have opened up a Photoshop canvas or just a good old Word doc and laid out a heading, subheading, text blog and call to action. It will help you be consistent when it comes to applying those fonts across your website. I often see websites which use several fonts by accident, because they look very similar, when really only one font should have been used. Aim for a maximum of three fonts, unless you really know what you are doing. The key to creating pleasing typography is attention to detail. Don’t neglect small items like menus and buttons. Leaving default fonts in place can add up to a messy look.
Surprisingly, I often see photographers using more than one gallery style in a website. Check for consistency across all gallery pages. The best galleries put control in the hands of the viewer. By all means, animate your slider or lightbox, but make sure viewers can easily pause or move forward or back. It’s also vital that, on mobile, your galleries have swipe control.
7. MOBILE EASE OF USE
This brings us neatly to mobile usability. No one owns every mobile device on the market for real-time testing but it is easy to use Google Analytics to find out which devices people are mostly using to visit your site. For a comprehensive look at your website across a range of devices, sites like Responsinator are really useful. With over 60% of first visits happening on mobile rather than desktop, you can’t afford for your mobile experience to let you down. Having to pinch and zoom to see text is annoying and with Google rolling out their Mobile First Index later this year, you need to act now. Ideally, choose a website platform that allows you to easily tweak your site separately for mobile and tablet. Divi, ProPhoto6 and Showit all give you the ability to do this.
With mobile usage beating desktop views, a fast-loading site is crucial and image size is often the deciding factor. This blog tutorial shows you my image optimization workflow. And don’t forget to test your website speed using the free Pingdom speed tester.
9. REAL TIME TESTING
There are some relatively new real user testing services around that are free or low cost. Smartlook (free for 20,000 recordings per month) records real visitors to your website, records them moving through your site and show you where they click, forms they complete and where they leave. It’s fascinating to watch and will give you a greater insight than a single user walking through your site. Mouseflow, a popular but not free alternative, also produces heat maps and traffic funnel diagrams to depict user behaviour.
And now for the walkthrough. Christine McNally kindly volunteered as tribute and let me give her an honest critique of her website. We both really enjoyed the process (I think!). Christine’s site is already live and she has been working on it as a Siteschool Masterclass member, so it was just the right time to do the critique and agree some final tweaks to improve an already good website. If you’re interested in joining Siteschool, our very private student Facebook group gives you one-to-one support, feedback, unlimited questions and regular events like critiques. It’s a real pleasure to see students launching their new websites with confidence.