Seleccionar página

9 Web Design best practices you must know

As a developer who has been developing websites and apps for several years, I have passed through different stages and learnt all kind of programming languages, frameworks or platforms. Like me, the developer community has learnt over time from user behaviour and their interactions with the web. As a result of this we find a set of rules which we call web design best practices.

A best practice is a method or technique that has been generally accepted as superior to any alternatives because it produces results that are superior to those achieved by other means or because it has become a standard way of doing things. – Wikipedia 

It is important to know them and try to follow them in order to success in your next website. The following are what I consider some of the most important web design best practices you must embrace.

#1 Place the information where it’s supposed to be located

Visitors should be able to locate easily the information they need. Organize the page structure and categories (links to other pages) clearly. Information must be placed where users expect to find it.

#2 Embrace web design standards

Standards help designers to improve user experience making the navigation easy and familiar for the visitor from the first time they visit the website. In order words, they let users navigate through a website without thinking and find what they are looking for quickly and without effort.

According to Orbit Media research, these are some of the web design standards (design approaches used by 80% or more of the websites):

  • Logo in the top-left
  • Main navigation in the header
  • Recognizable links: differentiate what’s clickable from what isn’t
  • Value proposition up high
  • Call to action up high
  • Social media icons in the footer
  • Standard icons

 

elementPosition

#3 Stop using sliders (a.k.a. carousel)

Sliders have become one of the most popular elements in websites. We can find them everywhere, but, is it a good practice to use them? If we look at the Conversion Rate, we can definitely ensure that it is not a good idea to use them, as it is clearly explained in several studies:

“In A/B tests, sliders tend to lose. In fact, one of the easiest ways to grow a page’s conversion rate is to remove the slider, and to replace it with a static image. The static version usually wins.” – Karl Blanks, Chairman and Co-Founder of Conversion Rate Experts

“Sliders suck 99.8% of the time! We once did a test with a client where we changed their slider to a static image with 3 core benefits and lifted conversions by a nice amount.” – Bryan Eisenberg, Author of Brand Like Amazon: Even a Lemonade Stand Can Do It

Other reasons that suggest us avoiding sliders are:

  • Slow loading times
  • Bad SEO, as the increase of loading time means a higher bounce rate (Google will downgrade the website in the rankings list).
  • Visitors tend to ignore them when they perceive them as an advertisement or banner.

“It’s extremely rare to see sliders work. You’re better off using static images and copy.” – Peep Laja, Owner of ConversionXL.com and Markitekt

4# Direct, specific and clear value proposition

The value proposition tells the users what you do (your business) and the main benefits for them. They need to know that they are on the right place and they will find what they are looking for. It must be direct and clear, as it will be the main reason for the visitor to continue reading and navigating through your website or jump to another one.

«A value proposition is a positioning statement that explains what benefit you provide for who and how you do it uniquely well» – Michael Skok, author of Startup Secrets

A value proposition is composed by:

  • Headline: What is the end-benefit you’re offering, in 1 short sentence.
  • Sub-headline or a 2-3 sentence paragraph: A specific explanation of what you do/offer, for whom and why is it useful.
  • Key points or benefits
  • Visual. Images communicate much faster than words. Show the product, the hero shot or an image reinforcing your main message.

Some good examples that follow web design best practices like the one mentioned in this point:

evernote

squareup

stripe

Find more at: https://conversionxl.com/value-proposition-examples-how-to-create/

#5 Concise and scannable content

Your website’s content must be readable and easy to follow. People sometimes only think about the design or the structre of the website and forget the importance of the content in the web design best practices. Keep your sentences short in order to improve readability and usability of your website. The usability study made by Jakob Nielsen concludes “People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences». These are some tips that will help you enhancing the readability of your site:

  • Remove unnecessary information
  • Try to use simple & short sentences and paragraphs.
  • Highlight important words, use meaningful subheadings and bulleted lists. According to Clicktale study “visitors Long Engagement Times are mostly on bulleted content and bolded text”
  • Start with the conclusion: the inverted pyramid writing style.

Inverted_pyramid

79% of people scan web pages, only 16% of people online read word-by-word – Jakob Nielsen , usability expert

#6 Legible text over images

It is a common practice to place text over an image in order to provoke emotions on users. When using this technique, be sure that the text is readable by providing sufficient contrast between the text and the image.

medium

unicef

#7 Elements to include in the footer

Don’t ignore the power of the footer. The footer is one of the most important elements for SEO as it is placed in every page of the web. The list below contains some examples of information that you can include in the footer:

  • Copyright
  • Sitemap
  • Privacy and Policy
  • Terms of use
  • Contact information: email, address, phone/fax number.
  • Social links and social media widgets
  • Navigation: maybe they have gone down without finding what they were looking for, so navigation in the footer can help them finding what they need.
  • Email subscription
  • The mission or value statement of the author/website: as it is placed in all the pages, is a good practice for SEO.
  • Latest articles or upcoming events.

#8 Less is more

A clean website design enhances the conversion and makes it easy to highlight the value proposition and Call to Action (CTA) of the site. Avoid complexity and let the users focus in what really matters and navigate easily. Help them having a relaxing experience when the explore your site.

“Saying too much is just as bad or even worse than saying nothing”

clean2

 

cleanM

#9 Use simple forms

In most of the websites, forms are the unique way for users to interact with you. This is the main reason I include the form design between web design best practices. Keep them simple asking only for the information that really matters (in other words, minimize the number of input fields). Place labels to help users know what you are asking for, but place them in top on each input field for a fast eye-scanning. Finally, avoid using the placeholder text as the label (it should be for additional hints!) and provide clear error messages.

form

Conclusion

Consider this web design best practices we have mentioned and you’ll be in the correct path to achieved the desired results. Remember:

Keep your users happy and they’ll keep coming back.