Editor’s note: This series of tutorials features 125 practical web optimization tips, each with a case study to make it easy to understand. Part four – 3 Tips for Designing for all Users and scenarios in web design All together!

Past review:

Take into account the knowledge and skill levels of different users as much as possible

The user may be novice, expert, or somewhere in between, and needs to design the interface accordingly.

Review images

Use proper orientation (four main orientation strategies)

These four uses can just be represented by a 2 by 2 matrix. Use the ICONS below to select the best way to fit your interface:

Review images

Review images

Add tips for novice users without disturbing expert users

Review images

Use card classification to build information architecture

If you want to understand how users define or conceptualize menu categories, use open card categories;

If you want to see how users can categorize existing elements into prefabricated categories, use closed card categories;

Adapt as much as possible to the user’s operation flow

Users will have different requirements and adjust the interface design according to different operation processes.

Review images

Let the user control how the data is presented

Review images

Let the user control how the data is sorted

Other ranking criteria include:

  • Alphabetical order
  • According to the availability
  • According to the classification
  • According to the date
  • According to the distance
  • By popularity
  • According to the price
  • According to the correlation
  • According to the size

Review images

Let the user control the amount of data displayed

Review images

Build user portraits to distinguish specific operations

Review images

△ Let the user open the page through a new TAB

Many users tend to open the page first and then browse it later.

Make your website as accessible as possible

Make your interface accessible to people with disabilities. Not only is this good practice, it also avoids legal consequences (depending on what product you’re making)

Review images

△ Use semantic tags in HTML5

Review images

Use multiple cues to communicate feedback

About 8% of men are color blind (Chan, Goh, & Tan, 2014). Don’t use color alone to convey information, offer multiple cues.

Be as compatible with inputs and extreme cases as possible

Users should be allowed to enter all kinds of information without worrying about it.

Review images

Solve the problems caused by automatic information generation

The template message “name of destination > Have fun” will generate the message “Have fun in Auschwitz”, but Auschwitz is a negative association. “Have fun in Auschwitz” will make the user unhappy. To be on the safe side, change it to “Have a nice trip”)

Review images

Use form elements that support multiple input formats

Review images

— Display results that address searchers’ needs

Review images

▽ Use of search that can handle misspellings, synonyms, or variations

Be as compatible with all media as possible

Interfaces need to work in a variety of environments (different devices, browsers, etc.)

Review images

△ Customized operation instructions according to user’s browser

Review images

▽ Single-window deep mode for small devices

To be continued…

Under the promotion of friendship, Ali UED opened a new public account, has sent a lot of dry goods, welcome to pay attention to yo:

Review images

“Designers who are skilled and don’t put pressure on themselves get paid well!”

Address: Nickkolenda

[Yushi.com original article submission email: [email protected]]

= = = = = = = = = = = = = = = = nets about optimal set = = = = = = = = = = = = = = = = “optimal set uisdc.com” is the most popular web designers learning platform, dedicated to share web pages design, wireless terminal design and PS tutorials. 100 Books designers Need to Read: The most comprehensive Guide to Designer books ever: hao.uisdc.com/book/. Design micro blog: with 1.12 million fans of the popular micro blog @excellent web design, welcome to pay attention to get web design resources, download the top design materials. Design navigation: the world’s top design website recommended, designers must navigation: hao.uisdc.com