“Your website is awful".
Harsh, really harsh comment that you could receive from a user.
But, it can shed light on a reality. Take a deep breath, let your blood cool down and ask yourself “How can I improve my website?"
There are a lot of efficient methods such as the A/B test or mental mapping to do so. But two problems remain:
– you can do it only at the final stage of the creation.
– the result will be likely too subjective and vague.
So here I’ll give you a solution to these two problems: 8 objective criteria which help to complete the evaluation before even peer reviews.
In these criteria, which tend to be objective, I won’t consider the web design: it remains the most subjective part. We won’t consider differences of culture as well; value to consider a website and signification of colors can bring different perception.
Users coming to your site are generally there to complete a specific action. They will skim the information to find what they want. And be sure that they won’t agree to enter in a maze to find it.
Number of colors: there is no unique answer, but two or three colors is a secure range. A finding remains true: many colors could easily worsen than less.
Number of fonts: the same answer as for the colors: it can quickly be too many. Here two seems to be a good average, plus a third one for the logo.
Graphics: must have a purpose. attract attention but be neither clickable nor informational means confusing. The best example of that is a cheesy animated GIF that we sometimes still find.
Number of Tabs: really important. Too many tabs are confusing. Few tabs are a satisfaction, except when those have overlapping topics. Who want to choose between two different ways indicated as going to the same city?
Deepness of navigation: related to the tabs. It’s a controversial point: flat vs deep website. There is no overall answer. You must know the difference and then judge what better fit your website.
2) Visual hierarchy
The visual hierarchy will lead the view of your customer. For instance, a “Mona Lisa" direction sign in the Louvre: it will please the majority of the visitors, even if some are looking for less famous artworks. The quicker the users find the content they want, the happier they will be.
Size: As obvious as it seems to be, the users will see and read first typefaces with the biggest font. Methods widely used on the contracts for instance.
Left to right: As we read, the first contents seen will be these on the left side.
Color differentiation: The use of the color is another way to differentiate. You will notice first something with a different color from the used scheme.
Typography: Just like images or videos, typography is also picking up the pace where different fonts are displayed in a creative way which grabs the user attention.
If a user can, after 3 clicks, answer to the question “what are the colors of this site?", it means that your site is color consistent. Be consistent is to have a logic that holds the elements together and gives a global unity.
Color: different from simplicity: The use of two or three colors is on average consistent. But coloring from dark green to apple green all the elements of a timeline also makes it consistent. The use 10 pale colors is consistent as well… but will lose simplicity.
Font: as the colors, the use of two or three make it consistent. A good example is the use of one font for the titles and another for the content. But a mix of different fonts could be consistent too, and will give more creativity. For example: in MOOZ Themes I use only two fonts, one is for titles and second for paragraphs.
Layout: Layout and background are also part of the consistency. They must help the user to understand the type of information they will find. E.g. same layout for all the “help" page.
The accessibility doesn’t include SEO elements, it’s not “how can people find you", but more “Once they know you, how to reach you".
URL name: A user can navigate with the URL via his history to quickly go back to a page he liked. If the URL are clear, it will be easy to find again a specific product. But if the URL are a long illogical string of number, he could be fed up to search again.
On-site name: Like for the URL, the name of the button “Orsay WordPress theme" will be way more helpful than “theme 23568". A button “photos library" is more useful than a “.jpeg files"
Responsive: Your user found you on their laptop and want to consult your site again in the train to go to work. If you aren’t responsive on their smartphone, it’s likely they won’t give more interest to your site.
When a user will enter a website, he will guess that there will be a clear menu at the top of the page: that’s a usual convention. There exist some great websites who didn’t follow these conventions of site building, but following them is a secure added-value.
Main navigation at the top: A menu at the top of the landing page with all the main tabs helps customers to find their way. And it has a twin: a banner at the bottom of the page with secondary tab such as “contact us".
Logo at the top: If you have one, make sure it’s visible. If someone is entering a company’s website which has a great logo and doesn’t see it, he will wonder whether is on the right website and could leave.
Logo clickable: This convention is less common but still useful for the UX. When someone clicks on your logo, he supposes he will return back to your homepage.
Link’s color change when hovering: A simple but helpful thing for the customers. If not, people won’t see links, so products or information they’re looking for and will continue to search for it.
When users are buying on Amazon, an authoritative page, they are confident. They know they will receive their purchase and their money won’t disappear into a black hole. Credibility is as important for e-commerce as for informational website.
“What we do/who we are": It must be easy to find. The customers will have a deeper knowledge of the company, and deeper knowledge means quicker trust.
“Free": Double-edged sword: advertising a free product or giving free information. There is no free lunch. Explaining what and why it’s free gives you credit, e.g. “free trial version of 30 days". What led us to…
Pricing page: Displaying the prices helps the customers to check the deal. It’s tempting to hook the customers with a “request a quote" but the less you give, the less likely the customer will engage.
Testimonies: Having a testimonies page appeal the trust. Customers won’t challenge your establishment, even sometimes just by glancing the tab.
Ads: Well, Facebook and YouTube are reliable and have on-site ads. But it’s because users already trust them when entering. For instance, a company website with unrelated ads will wipe out the confidence.
This criterion is more useful for websites with interactions such as purchasing, uploading files or filling a form. This concept, developed by Nielsen in 1995, is to help the user to understand the progress of the system e.g. percent of loading. And it didn’t lose relevancy with years.
Loading time: An approximation of how much time the user has to wait. An endless loading time challenges the system’s performance in the users’ view.
“Cancel" button: Something to prevent a click error. A “cancel" button that appears during the loading for instance. Users don’t want to be stuck in a loading or form box because of a misplaced click. The most common cancel button is simply the “X" button.
Feedback: “your order has been sent". This clear message avoids questions and verification or repetition from the users. They won’t click on the “buy" button twice by fear of purchase two times. But if they actually didn’t click on it, you’ve lost a customer.
Prevent error: A little plus to the “cancel" button and the feedback. Simply disable the “submit" button when the customers already clicked. 8) Navigability
Last but not least: the ease to browse your website. It answers the question “how to go to that specific page".
Footer’s navigation: a simplified sitemap to help. It allows the user to refocus on his interest when he is lost in the wrong section.
Search box: It will be used by customers who knows precisely what information they’re looking for.
Intra-links: links to another and related section of your site.
Breadcrumbs: Usually beyond the menu. It indicates the path the user took and help the understanding of where they are on the website.
Back button: A user realizing that he made an error in an inquiry wants to go back without having to refill it all. A question pops up: does the “previous page" will make him lose his work by loading a new form? Buttons such as “previous step" and “make a new inquiry" help to clarify that.
Error page: Error pages could appear for various reason. An error page wich links to the homepage or suggestions will improve the UX, and even more if it’s a funny one. Conclusion
For sure, the website design one of the key element when we’re talking about UX. But even if some graphics are better than other, no graphic will be perfect ever and every judgment will subjective. The objectivity is the biggest added-value of these 8 criteria. The second biggest one is the self-assessment of your website, saving the time and the money you would have spent in user’s review.
Now you are ready to check your website and improve the UX.