9 guidelines and best practices for exceptional web design and usability

When it comes to designing or redesigning a website, it’s easy to get into the aesthetic. Does this shade of blue look right? Should the logo be on the right side of the screen or on the left? What if we put a huge animated GIF in the middle of the page?

Anyway, men a world where people have more than 1.8 billion websites You can potentially land on it. You have to make sure that your face isn’t just a pretty one. It should be designed for user friendliness, how easy your website is to use, and User Experience (UX), How enjoyable It’s about interacting with your website.

Now you could spend years studying the pros and cons of these disciplines. However, to give you a starting point, we’ve compiled a list of basic guidelines and best practices that you can use for your next website redesign or website to start. It then reviews 10 features you will need on your website to put these recommendations into practice. Let’s dive in.

Website design guidelines

  1. simplicity
  2. Visual hierarchy
  3. navigability
  4. consistency
  5. Responsiveness
  6. Accessibility
  7. conventionality
  8. credibility
  9. User centricity

1. Simplicity

While the look and feel of your website is certainly important, most people do not come to your website to evaluate how chic the design is. You want to take an action or find specific information.

Hence, unnecessary design elements (i.e. those that serve no functional purpose) will only overwhelm and make it difficult for visitors to achieve what they want to achieve.

From a usability and UX perspective, simplicity is your best friend. When you have all of the page elements you need, it can be difficult to get too simple. You can apply this principle in various forms, e.g. B .:

  • Colours: Basically don’t use a lot. The manual of computer-human interaction recommends using a maximum of five (plus or minus two) different colors in your design.
  • Fonts: The fonts you choose should be legible, so nothing too artistic and very minimal script fonts if any. Again, keep the text color minimal and always make sure that it contrasts with the background color. It is generally recommended that you use a maximum of three different fonts in a maximum of three different sizes.
  • Graphic: Only use graphics when they are helping a user to complete a task or perform a specific function (don’t just add graphics one way or another).

Here is a great example of a simple but effective homepage design from HERoines Inc:

Sample website design on the website for HERoines Inc.

Image source

2. Visual hierarchy

Visual hierarchy is closely related to the principle of simplicity and means arranging and organizing website elements in such a way that visitors naturally tend to the most important elements first.

Remember, when it comes to optimizing usability and UX, the goal is to get visitors to take an action they want, but one that feels natural and enjoyable. By adjusting the position, color, or size of certain elements, you can structure your site so that those elements are the first to attract viewers.

In the following example from Spotify you can see that the main heading “Get 3 Months Premium for Free” with its size and page position is above the visual hierarchy. It draws your gaze to their mission before anything else. This is followed by the CTA “Get 3 Months Free”, which calls for action. Users can click this CTA or browse the menu items above for additional action.

A web design example on Spotify.com

Image source

3. Navigability

Planning for intuitive navigation on your website is crucial in order for visitors to find what they are looking for. Ideally, a visitor should land on your website and not have to think about where to click next. The transition from point A to point B should be as smooth as possible.

Here are some tips for optimizing the navigation of your website:

  • Keep the structure of your primary navigation simple (and at the top of your page).
  • Paste the navigation into the footer of your website.
  • Consider using breadcrumbs on every page (except your home page) to help users remember their navigation path.
  • Include a search bar at the top of your website so visitors can search for keywords.
  • Don’t offer too many navigation options per page. Simplicity again!
  • Include links in your copy of the page and make it clear where those links are going.
  • Don’t let users dig too deep. Try making a simple wireframe map of all of your site pages arranged like a pyramid: your home page is at the top, and each linked page from the previous page is the next level. In most cases, it’s best to keep the map no deeper than three levels. Take the HubSpot site map, for example.

Sitemap for HubSpot.com

Image source

One more note: once you’ve decided on the main (top) navigation of your website, keep it consistent. The labels and the position of your navigation should remain the same on every page.

This leads us nicely into our next principle …

4. Consistency

In addition to providing consistent navigation, the general appearance of your website should be similar across all pages of your website. Backgrounds, color schemes, fonts, and even the tone of your writing are areas where consistency has a positive impact on usability and UX.

That’s not to say that every page should follow the same layout. Instead, create different layouts for specific page types (e.g. landing pages, information pages, etc.). Using these layouts consistently will make it easier for visitors to understand what type of information they are likely to find on a given page.

In the example below, you can see that Airbnb uses the same layout for all of its “Help Pages”. This is a common practice. Imagine what it would be like from a visitor’s point of view if each “help page” had its own unique layout. There would probably be a lot of shrugging.

a help page on Airbnb.com

Image source

5. Responsiveness

According to Statista, 48% of global page views came from mobile devices such as smartphones and tablets. According to our research, 93% of people left a website because it wasn’t displaying properly on their device.

Most important here: To have a really great user experience, your website needs to be compatible with the many different devices your visitors use. In the technology world, this is known as responsive design.

Responsive design means investing in a highly flexible website structure. A responsive website will automatically resize and reshuffle its content to match the dimensions of the device a visitor is currently using. This can be achieved with mobile-friendly HTML templates or by creating a special mobile website.

Ultimately, it’s more important to have a great experience on different devices than to look the same on those devices.

an illustration of a responsive website on different devices

Image source

In addition to the ease of use for mobile phones, it is worth testing the cross-cross browser compatibility of your website. Most likely, you’ve only viewed your website in a web browser, be it Google Chrome, Safari, Firefox, or something else.

Now is the time to open your pages in each of these browsers and rate how your items are displaying. Ideally, there isn’t much of a difference in the presentation, but you may not know for sure until you see it for yourself.

6. Accessibility

The goal of internet accessibility is to create a website that anyone can use, including people with disabilities or limitations that affect the browsing experience. As the website designer, it is your job to factor these users into your UX plan.

Just like responsiveness, accessibility applies to your entire website: structure, page format, visual elements, and written and visual content. The Web Content Accessibility Guidelines (WCAG), developed by the Web Accessibility Initiative and the World Wide Web Consortium, set the guidelines for accessibility on the Internet. In the broadest sense, these guidelines state that websites:

  • Perceptible: Visitors know the content of your website.
  • Operable: Your website should be able to function in a number of ways.
  • Understandable: All content and warnings are easy to understand.
  • Robust: Your website can be used across a variety of assistive technologies, devices, and browsers.

For more information on this topic, check out our ultimate guide to online accessibility.

7. Conventionality

A major challenge in web design is balancing originality with your expectations. Most of us are seasoned Internet users, and there are certain conventions that we have become accustomed to over time. Such conventions include:

  • Placing the main navigation at the top (or left) of a page.
  • Place a logo in the top left (or in the middle) of a page.
  • If you make the logo clickable, a visitor will always be brought back to the homepage.
  • With links and buttons that change color / appearance when you hover over them.
  • Using a shopping cart icon on an ecommerce website. The icon also has a license plate that shows the number of items in the shopping cart.
  • Make sure that image sliders have buttons that users can click to manually rotate slides.

While some choose to toss these out the window for uniqueness, this is a mistake. There is still a lot of room for creativity within the framework of web conventionality.

Let’s take a quick look at another area of ​​design, architecture. Building codes are being introduced so that people can easily and safely inhabit spaces. An architect will not complain or violate these codes because, apart from legal implications, they ensure the safety and comfort of guests. It doesn’t matter how dazzling the building looks – if you stumble on uneven stairs or can’t step into a fire, you might want to stay outside.

In the same way, you can create a memorable experience while meeting user expectations. If you go against user expectations, they may feel uncomfortable or even frustrated with your website.

8. Credibility

Sticking to web conventions gives your website credibility. In other words, it increases the trust your website instills. And if you want to create a website that offers the best user experience possible, credibility is very important.

One of the best ways to improve your credibility is to be clear and honest about the product or service that you are selling. Don’t let visitors browse dozens of pages to find out what you’re doing. Be at the forefront of your home page and dedicate some properties to explaining the value behind what you do.

Another credibility tip: have a pricing page that is also linked on the homepage. Instead of forcing people to contact you to find out more about pricing, clearly list your prices on your website. This makes your business appear more trustworthy and legitimate.

Here is an example of an effective pricing page on the Box website:

Box.com pricing page

Image source

9. User centricity

Ultimately, ease of use and user experience depend on the preferences of the end users. If you aren’t designing for them, who are you designing for?

While the principles in this list are a good place to start, the final key to improving the design of your website is to conduct user tests, seek feedback, and make changes based on your insights.

Don’t test the usability yourself. You have already invested a lot of time designing it, which adds your own biases to the equation. Get testers who have never seen your website, just like any first-time visitor.

Here are some user testing tools to get you started:

  • Website grader:: Our free tool evaluates your website based on several factors: mobile, design, performance, SEO and security. It then offers tailor-made suggestions for improvement. For more information on Website Grader, see our dedicated blog post.
  • Crazy egg:: Track multiple domains under one account and get insights into your website’s performance using four different intelligence tools – heat map, scroll map, overlay and confetti.
  • Loop11: Use this tool to easily create usability tests – even if you are not familiar with HTML.
  • The user is drunk:: Pay Richard Littauer to Get Drunk and Check Your Website Out. Do not you believe me? We tried it.

For more helpful options, check out our list of the best tools for user testing.

Hopefully these guidelines will be helpful in informing the structure of your web pages and the entire website. But how do you put these guidelines into practice? Let’s look at some actionable best practices you can follow during the design process.

Website Design Best Practices

  1. Pick typography that is easy to read and skim through.
  2. Choose a color scheme that suits your brand.
  3. Use spaces to split text and other elements.
  4. Use texture to add personality and depth.
  5. Add pictures to keep readers motivated and informed.
  6. Simplify your navigation.
  7. Highlight your CTAs.
  8. Optimize for mobile devices.
  9. Limit the options that users see.

1. Choose typography that is easy to read and skim.

Typography refers to how type – that is, letters and characters – are arranged and presented on the page. Since Website typography affects not only how we read, but also how we think about text on a web page. It is important to choose carefully.

Ideally, you want a font that:

  • easy to read
  • easy to skim over
  • accessible to all users
  • Readable across multiple devices and screen sizes

You also want it to match your brand’s look and feel. For example the luxury fashion brand Burberry has updated its logo For the first time in 20 years in 2018. It replaced the old serif font with a bold, sans serif font without capital letters and dropped the knight emblem. The result is a simpler, more modern looking logo that is easier to read on any screen – and that reflects changes in the company to become more transparent and appeal to a younger generation.

Side-by-side comparison of the old and new Burberrys logo, using all capital letters without serifs

Image source

2. Choose a color scheme that suits your brand.

Like typography, color can affect not only how we understand and interact with content, but also how we feel about it. Your color scheme should therefore tick the same boxes as your website typography. It should:

  • Strengthen your brand identity
  • Make your website easy to read and navigate
  • Evoke emotions
  • to look good

For example, Buzzfeed uses the primary colors yellow and red to grab users’ attention and get them excited about the content. It reserves the right to use the primary color blue associated with trust exclusively for links and CTA buttons. Both emotions are ideal to evoke for a media site.

The Buzzfeed color palette follows website design best practices and creates excitement and confidence

Image source

3. Use spaces to divide text and other elements.

Spaces refers to the negative areas in each composition. Whitespace provides users with visual breaks in processing the design or content of a website, which is not only aesthetically pleasing. By minimizing distractions, the space makes it easier for users to focus, process information, and understand what matters.

That said, you can use spaces to avoid information overload or analysis paralysis – and to highlight important elements on the page. This can help convince users to take certain actions, such as: For example, sign up for a newsletter, buy your latest collection, and more.

For example, Eb & Flow Yoga Studio uses spaces to direct users to a specific action: to sign up for three weeks of classes. Note that spaces do not imply a lack of colors or images. Instead, it means that every element on the page is strategically positioned with plenty of space in between to avoid overwhelming or confusing visitors.

Eb & Flow Yoga Studio follows the website design best practice that uses spaces to guide users to click on a CTA

Image source

4. Use texture to add personality and depth.

Similar to a three-dimensional, tactile surface, Web textures The aim is to reproduce the physical feeling of being touched with another feeling – sight. They are a great design alternative to solid color backgrounds, especially if you want to add personality and depth to your website.

Check out the texture below on the home page of Santa Barbara-based Mony’s Tacos restaurant. It looks like chalk on a blackboard, doesn’t it? I don’t know about you, but I can almost feel the chalk on my fingers just looking at it. It’s the perfect look for a restaurant that is supposed to be California’s favorite funk zone choice for Mexican delicacies.

The Monys homepage follows the website design best practice that uses web textures to resemble chalk on a blackboard

Image source

5. Add pictures to motivate and inform readers.

A good balance between text and images is critical to the design of the website. Adding graphics can make your content more informative, engaging and memorable. You’ve probably heard the stats about it People only remember 20% of what they read, but 80% of what they see? While the exact percentages are discussed, the basic idea is not. For some people, it is easier to learn and process information visually.

Here is a unique example of breaking up text with images from a cosmetics company’s website. This shows how endless the possibilities are to incorporate images into your website design.

Maggie Rose breaks up text with images in a masterful example of website design best practice

Image source

6. Simplify your navigation.

navigation is one of the most important design elements on a website. This affects whether visitors come to your homepage and surf there or click the “Back” button. That’s why it’s important to keep it as simple as possible.

Many websites choose to have a horizontal navigation bar. This navigation style lists the main pages side by side and is placed in the Website headers.

Take Blavity’s navigation bar as an example. The featured sections include three categories of content – “News”, “Op-Eds” and “Lifestyle” – as well as links to their submission page and login page. This gives visitors easy access to the pages they are likely to be looking for. Other navigation items are placed in a drop-down menu labeled “More” so they are still easy to find but not cluttered in the top-level navigation. Finally, the navigation bar is sticky so visitors don’t have to scroll up and down the page to browse the site.

The sticky horizontal navigation bar in Blavity provides an example of a best practice in website design

Image source

7. Highlight your CTAs.

CTAs are elements on a website, advertisement, or other content that encourage the audience to do something. The call to action could be to sign up, sign up, start a free trial, or learn more, among other things.

You want your CTAs to show up on your website design. To do this, think about how you use color, as well as other elements such as background color, surrounding images, and surrounding text.

Place offers excellent Call-to-action example. Square uses a single image to show how easy the product is to use and uses bold typography to show how unique and future-oriented the product is. Against this dramatic backdrop, the blue Getting Started CTA is waiting for your click.

Square uses color and unique positioning to highlight the CTA in website designImage source

8. Optimize for mobile devices.

We’ve already discussed the importance of getting your website responsive. But that’s where mobile devices mattered 59% of organic search engine visits In 2021 we will double the importance of your website design for mobile. This can mean changing or removing some items that clutter smaller screen sizes or negatively affect loading time.

An example of one of the best mobile website designs can be found on the Etsy home page on desktop and mobile. A navigation bar with categories appears on the desktop. As you hover over each category, a drop-down menu will appear.

Etsy homepage on the desktop

Image source

On mobile, this is summarized behind a hamburger button, which improves the look and feel of the mobile website. You’ll also find that the pictures are bigger – perfect for tapping a mobile screen with your finger.

image0

9. Limit the options that users see.

According to Hicks LawAs you increase the number and complexity of choices, the time it takes for a person to make a decision increases. This is bad news in website design. If too many options are offered to a website visitor, they may get frustrated and jump back – or they may choose an option that you don’t want, such as: B. leaving his shopping cart. For this reason, it is important to limit the number of options a user can see.

For example, a visitor who lands on the Shawn Michelle ice cream homepage has three options: Find out more about the company, the flavors or the ingredients. However, instead of showing all three options at the same time, they are shown individually in a slider. This is a great example of implementing Hick’s Law in UX design. Shawn Michelles Ice Cream's homepage uses an image slider to display CTAs one by one

Image source

Now we understand the principles and best practices that should guide you through the design process. In the next section, let’s summarize the essential page elements that you should definitely include in your design plan.

Website design requirements

  1. Header and footer
  2. Menu navigation
  3. Search bar
  4. Branding
  5. Color palette
  6. headlines
  7. Delete labels
  8. Visuals and media
  9. Calls to Action (CTAs)
  10. Spaces

1. Header and footer

The header and footer are a staple for just about any modern website. Try to include them on most of your pages, from your home page to your blog posts to your “No Results Found” page.

Your header should include your branding in the form of a logo and organization name, menu navigation, and possibly a CTA and / or search bar if the spacing is large and minimal. On the other hand, many users instinctively scroll their footer for important information. In your footer, include contact information, a subscription form, links to your general pages, legal and privacy policies, links to translated versions of your website, and links to social media.

2. Menu navigation

Whether it’s a list of links in the header or a neat and compact hamburger button in the corner, every website needs a navigation guide that is at least placed at the top of your home page and other important pages. A good menu limits the number of clicks to reach part of your website to a few.

To avoid clutter, you can make some or all of the menu options a drop-down menu with links in them, as seen on the HubSpot homepage.

Homepage for hubspot.com

3. Search bar

In addition to menu navigation, be sure to consider placing a search bar at the top of your pages so users can search your site for content using keywords. When you incorporate this functionality, you make sure that your results are relevant, forgiving of typos, and provide an approximate keyword match. Most of us use a high quality search engine every day, be it Google, Amazon, YouTube or anywhere else. All of these set the standard for your own website search.

4. Branding

Do you remember the conventions we discussed? One that you’ll see pretty much anywhere is a logo in the top left corner. When they first land, many visitors’ eyes will instinctively wander to this region to check that they are in the right place. Don’t let them down.

To reinforce that thought, incorporate your company branding into every element you add, into every content you post, and into every color scheme you create. For this reason, we recommend establishing brand guidelines if you haven’t already. You can find more information in our style guide.

5. Color palette

The color choices play an important role in the usability and user interface of your website. This decision tends to be more subjective than other requirements on this list. However, like everything else we’ve discussed, try to simplify – limit your color choices to a maximum of 3-4 distinctive colors.

Starting a color palette from scratch can be surprisingly difficult the first time. We seem to intuit which colors work well and which don’t, but we stumble when trying to choose from the infinite combinations available.

The solution? Try a color palette that works on other websites. Make an impact on your favorite websites by checking out our list of our favorite website color schemes first.

6. Headings

Headings are key to building the visual hierarchy we discussed earlier, especially on text-heavy pages. As people scan your pages for what you need, a clear and concise heading lets readers know they need to stop scrolling after they find what they want. Use only as many headings as there are specific sections of your page, as text that is enlarged and printed in bold will dampen this effect.

7. Delete labels

Whenever a user takes an action on your website, it must be clear what exactly they are doing and / or where they are going. All buttons should have plain text or an icon to clearly and concisely indicate their purpose. The same applies to in-text links and widgets (simple interactive elements such as dropdowns and text forms).

For example, a button associated with a pricing page should just read “Pricing” – anything beyond that (such as “See our prices”, “Check the pricing page for a store”) is redundant. Eine Suchleiste / -schaltfläche benötigt nur ein Suchglassymbol (🔍) und möglicherweise auch das Wort „Suchen“, um ihren Zweck zu kennzeichnen.

Benutzertests können hier eine große Hilfe sein. Obwohl Sie selbst wissen, was all Ihre interaktiven Seitenelemente bewirken, kann dies für einen neuen Benutzer nicht gesagt werden. Durch Tests erhalten Sie wertvolle Einblicke in die Bedeutung Ihrer Etiketten durch Benutzer, die über Ihre eigene Perspektive hinausgeht.

8. Visuals und Medien

Denken Sie beim Einfügen statischer Bilder, Gifs, Videos und anderer Medien in Ihre Seiten daran, bei Ihren Entscheidungen konsistent und absichtlich zu sein. Diese Elemente werden die Aufmerksamkeit auf die meisten anderen Texte lenken und wahrscheinlich in den Köpfen der Benutzer bleiben. Wählen Sie sie also mit Bedacht aus.

Hier ist nur ein Beispiel für effektive Medien auf einer Homepage. Beachten Sie, wie jedes Bild die Seitenästhetik ergänzt und das Angebot eines personalisierten Fitnesstrainings mit Ergebnissen unterstützt.

Ein Beispiel für Webdesign-Richtlinien, die auf einer Webseite für ein persönliches Training verwendet werden

Bildquelle

Außerdem sollten alle Bilder und Videos für Suchmaschinen optimiert sein und beschreibenden Alternativtext für die Barrierefreiheit enthalten.

9. Handlungsaufforderungen (CTAs)

Eine ansprechende Website zu haben ist großartig, aber woher wissen Sie, ob Ihre Besucher tatsächlich das tun, was Sie wollen? Beschäftigen sie sich mit Ihren Inhalten? Hier kommen CTAs ins Spiel.

Ein CTA ist ein beliebiges Seitenelement, das Benutzeraktionen auffordert. Die Aktion kann darin bestehen, einer Karte ein Produkt hinzuzufügen, ein Inhaltsangebot herunterzuladen oder sich für eine E-Mail-Liste anzumelden. Machen Sie Ihre CTA-Elemente in der visuellen Hierarchie prominent (erinnern Sie sich an unser Spotify-Beispiel), aber nicht aufdringlich oder ablenkend, wie dies bei vielen Click-through-Anzeigen der Fall ist.

Wenn Sie Ideen für elegante CTAs benötigen, die zu mehr Conversions führen, lesen Sie unsere CTA-Beispielliste.

10. Leerzeichen

Wie oben erwähnt, geht es manchmal um die Elemente, die Sie nicht einschließen. Nachdem Sie diese Richtlinien und Anforderungen gelesen haben, könnten Sie versucht sein, Ihre Seiten mit allen Details zu füllen, die für eine fehlerfreie UX erforderlich sind. Vergessen Sie nicht, dass Ihre Zuschauer Platz brauchen, um all diese neuen Informationen zu verarbeiten. Geben Sie Ihren Elementen also Raum zum Atmen.

Aber wie viel Leerzeichen sollten Sie haben? Dies ist ein weiterer persönlicher Anruf, der von Standort zu Standort unterschiedlich ist. Daher sind Benutzertests auch hier praktisch. Worauf konzentrieren sich die Leute? Fühlen sie sich von der Dichte des Inhalts überwältigt? Wieder einmal hängt alles mit unserer ersten Richtlinie zusammen, der Einfachheit.

Design, bei dem Benutzer an erster Stelle stehen

In der Tat ist das Webdesign weitgehend subjektiv – das Aussehen und die Erfahrung Ihrer Website werden nicht jedem gefallen. Es gibt jedoch auch bewährte UX-Prinzipien, die den Besuchern bei sorgfältiger Prüfung und Einbeziehung helfen, sich wie zu Hause zu fühlen.

Laut Amazon Web Services kehren 88% der Website-Besucher nach einer schlechten Erfahrung seltener zu einer Website zurück. Und wie kannst du ihnen die Schuld geben? Wir waren sicherlich alle dort.

Als letztes Stück Usability / UX-Weisheit sollten Sie sich mehr darum kümmern! Stellen Sie sich die Schuhe (oder genauer gesagt die Browserfenster) Ihrer Besucher vor und denken Sie bei jedem Schritt des Designprozesses daran.

Blog - Arbeitsmappe zur Neugestaltung der Website [List-Based]

Leave a Reply

Your email address will not be published. Required fields are marked *