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 — how to deal with user error quickly without affecting user experience. To collect together
Errors are inevitable in many interfaces. Once an error occurs, help the user quickly and easily handle it.
Past review:
Preventing errors
When designing an interface, don’t rush to come up with a solution. Try to design an interface that is “faultless”.
Review images
△ The button can be removed, disabled or replaced after the user clicks it
Don’t tell the user you can only submit once. If you can click more than once, the user will click more than once. The user clicks the disable button to truly avoid multiple submissions.
Review images
Provide only acceptable input options
Review images
Use checkenable and checkvisible design in form elements
Review images
The structure of the text input box should be consistent with the input format requirements
Monitor typical error signals
What are some common errors on the interface? Look for false signals and monitor them.
Review images
Search for words that contradict the user’s intention
Review images
Remind users if they have already purchased the product
Distinguish powerful buttons to avoid misoperation
It’s inevitable that users will wander. Visually distinguish powerful buttons to minimize the possibility of misoperation.
Review images
Powerful buttons are distinguished by spacing and color
Review images
△ Add constraints for major and irreversible operations
Provides a convenient way to recover or exit an operation
Always give the user the choice of going back to the previous step or a safe/recognizable area
Review images
Use a recovery operation instead of a confirmation operation
Review images
▽ Provide escape hatch for each page or function (exit operation)
For example, some dropdown menus don’t have an exit option, so when the user clicks on an option, it can’t be unselected.
Review images
△ Provide close button for pop-up window or modal window
Minimize the negative impact of users leaving a sequence of steps
Allows the user to return to the corresponding step page with the original data
Review images
Save user-submitted data
Review images
△ Let the user go back to the original step page (don’t let the user start all over again)
Increase the moveable path or clickable area
Users are not perfect, they will misoperate, so provide flexible or inclusive design.
Review images
△ Add a transparent border for the small button (enlarge the click area of the button)
Review images
Add a little delay for pop-ups or dropdown menus
Review images
△ Add hyperlinks to the entire menu option container (not just the text area)
Review images
Add hyperlinks to the main menu, list items and auxiliary ICONS
Users often click on places they can’t click. Don’t try to correct these errors; instead, add clickability to these common areas.
Provides useful and supportive error prompts
Do not give an indication that an error has occurred. Explain what went wrong and, preferably, provide a solution.
Review images
▽ Explain why the verification went wrong
Review images
Provide relevant documents or help links for complex error messages
Review images
△ Avoid writing you in error messages
Records the last several operations performed by the user
Remind users of recent operations on the interface
Review images
△ Displays the user’s recent searches
Review images
△ Visited links are distinguished by different colors
Review images
Indicate which items users have already seen
Analyze user behavior to identify problems with the interface
To continuously iterate on interface design, you can start with these tips
Review images
Collect customer feedback at appropriate locations
Review images
△ Add warning Settings for increasing 404 errors
Review images
Find out which pages users visit repeatedly
If a page has too many views (and few unique customers), you need to carefully examine the page to see if there is a problem causing users to return.
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.3 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