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