Table of Contents
1. Don’t make users think
MailChimp
" >2. Avoid "choice phobia"
3. Give users what they want immediately
" >4. There must be "search"
5. Understand your users
6. Testing
Home Web Front-end HTML Tutorial It was very beneficial to see it! 6 principles to improve website usability_html/css_WEB-ITnose

It was very beneficial to see it! 6 principles to improve website usability_html/css_WEB-ITnose

Jun 24, 2016 am 11:56 AM

Generally, there are three types of websites:

The first type of website has outstanding creativity and design. This kind of website will make you say "Wow". But, unfortunately, they don't have much more to offer than good design.

The second kind of website lacks creativity and design, but you can find what you want immediately on it! But would you turn them off because they are visually unappealing?

The best websites are the ones that combine usability and visual appeal. Such a website will entice you to keep visiting it. From a marketing perspective, this is the best type.

A good-looking website has no value if it cannot keep users visiting, increase usage conversion rates, or achieve sales goals. If you want them to come back instead of just delivering a compliment and turning away. You shouldn't just satisfy users' visual pleasure.

If your goal is that users will return to your website and become loyal users, then you should consider improving website usability and user-centered design principles. This means focusing on your users’ needs and providing them with an efficient, user-friendly website. If you do that, you'll gain trust. It's that simple.

Please note that improving usability is not the same as improving user experience. The focus of user experience is to improve the user's positive psychological feelings. Of course, improving usability will make your users happy, which ultimately leads to a positive user experience.

Let’s start talking about a few simple principles to improve usability.

1. Don’t make users think

This is the most important principle to improve usability, written by Steve Krug in his book "Don't Make Me Think" propose.

A must-read book for designers, in "Awesome!" It is highly recommended in "The Designer's Complete Self-Study Guide" and comes with a PDF download.

Web pages should be easy to understand from the moment they come up. Users subconsciously know where to click and where to get what they want. No need to think too much at all.

Doing this will undoubtedly delight your users. Let’s take MailChimp as a classic example.

MailChimp

This page from MailChimp is very simple. Improving usability does not require any groundbreaking design; it just requires having the right things appear in the right places (where users expect them to appear).

Another great thing about this page is that it does not make users feel "choice phobic", which is another principle that must be known.

2. Avoid "choice phobia"

When a person is faced with too many options, they tend to make no choice, or choose the one that is already the best. Familiar options. This kind of "choice phobia" not only appears on web pages, but is also very common in life. For example, when you are faced with various coffee names written on the blackboard in a cafe. "Choice phobia" is really disturbing, it causes people to give up on choices, or choose to return to a place they are already familiar with.

New users should not have to worry about where to click next. This page from MailChimp does this very well as well.

Tips: The most necessary options must be emphasized, such as important operation buttons such as "Register for Free". Other options can be included in "More", which can effectively avoid having too many options on one page.

Unimportant options can be included in "More"

3. Give users what they want immediately

When users browse the website, they are much like wandering around a traditional offline store. They do not examine all the details. They are just looking for what they really need. Users don't read every word on a website; they just browse. Once something meets their needs, they click open.

Experience: Don’t let users think “this looks like it will take a long time to read”.

For example, visual means can be used to meet the needs of these fast viewers.

Below is an example of Bang2Joom’s beautiful visualization of paid plans.

Visual information is convenient for quick browsing

Allows users to intuitively compare the differences between different paid plans and choose the one that suits them. It is very clear and simple.

4. There must be "search"

The content provided by your website must meet the needs of users, and search is meaningful. Especially for a website like Wikipedia, which has a large amount of content in different fields, the "search" function is a must.

Search on Wikipedia

Here are the best practices for the search box:

  • The search box should be present on all pages, not just on the homepage.
  • The search box should be long enough (such as Google's) to allow users to view and modify it easily.
  • The search box should be smart. When the user searches, similar "common search terms" can be provided for his reference. In addition, when the user enters a word, you can provide some "recommended results" directly below. Apple’s search is a good example of this best practice.
  • Search on Apple’s official website

    5. Understand your users

    Young geeks love to explore new things. A somewhat complex website, if it has good content, will have strong interest among young people. They may also be curious enough to explore all the options and click all the buttons. Take Gamestop, for example. I once spent hours on this site without even realizing it was a bit difficult to use.

    style=”color: #e36c09″Gamestop

    The situation is different for adults. They are more conservative, prefer simplicity, and will be more resistant to new things.

    Therefore, you should also take your target user group into consideration when designing your website.

    Take Google as an example. It has a very wide user base, but no one will encounter barriers to use because it has a very good balance between simplicity and functionality.

    A few more quick tips!

  • Be aware of "banner blind spots". In fact, users often ignore things that look very much like ads. They notice the ad but still ignore it. Try to avoid elements that look like ads (for example, a block of information stacked on the right side of the page).
  • If you require registration, measure the user’s time and minimize the number of options that need to be filled out, leaving only the most important ones.
  • Allow "one-click unsubscription".
  • Never forget about mobile phone users. Do responsive design!
  • Don’t let users rely solely on the browser’s forward and backward motions. If they need to "return," ask them to use the "return" on the website, not the browser.
  • Let design serve content.
  • Emphasis on links. Identifying a link by moving the mouse over the text and seeing the pointer change is a disastrous experience.
  • At this point, I think you are ready to improve the usability of your website so that users can have a better experience.

    Of course, these principles are not applicable to all situations and may require specific analysis of specific situations. However, we still keep in mind that the last point of the 6 principles is truly applicable to all situations. Finally, and most importantly.

    6. Testing

    Testing is the key to successfully improving website usability. We said at the beginning that there are countless ways to design, produce and maintain a successful website. Just try it. After you try it, be sure to check the effect through testing and keep improving to keep getting better results!

    Finally, I wish you good luck!

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    AI Hentai Generator

    AI Hentai Generator

    Generate AI Hentai for free.

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

    The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

    Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

    HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

    What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

    The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

    What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

    The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

    What is the viewport meta tag? Why is it important for responsive design? What is the viewport meta tag? Why is it important for responsive design? Mar 20, 2025 pm 05:56 PM

    The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.

    What is the purpose of the <iframe> tag? What are the security considerations when using it? What is the purpose of the <iframe> tag? What are the security considerations when using it? Mar 20, 2025 pm 06:05 PM

    The article discusses the &lt;iframe&gt; tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.

    The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

    HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

    What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

    AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

    See all articles