Designers, developers, and any other producers of/on this platform should evaluate solutions and make principled, data-informed design decisions. The Aquarius design system and its component utilize patterns based on the following principles:
Keep it simple
- clean, efficient, uncluttered, utilize white space
- make it easy to determine what actions are possible at any moment
Make it intuitive
- discoverable and obvious, make things visible
Focus on users
- work and task flows
- contextual constraints
- make it easy to evaluate the current state of the system
Establish a clear visual hierarchy that maps to the underlying mental model
- follow natural mappings between intentions and the required actions; between actions and the resulting effect; between the information that is visible and the interpretation of the system state
Forgiveness: help users avoid errors and minimize the negative consequences of errors when they do occur
Inspire, delight, and innovate
Utilize progressive disclosure of information
Provide controls when and where you need them
- users should be able to (1) figure out what to do and (2) tell what is going on
#1: Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.
Mall maps show people where they currently are, to help them understand where to go next.
Multistep processes show users which steps they’ve completed, what they’re currently working on, and what comes next.
Touchscreen UIs need to reassure users that their taps have an effect — often this is achieved through visual change or haptic feedback.
#2: Match between system and the real world
The system should speak the users' language, with words, phrases, and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
When stovetop controls match the layout of heating elements, users can quickly understand which control maps to each heating element.
If users think about this object as a “car,” use that as the label instead.
A shopping cart icon is easily recognizable because that feature serves the same purpose as its real-life counterpart.
#3: User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
Digital spaces need quick “emergency” exits, just like physical spaces do.
These functions give users freedom because they don’t have to worry about irreparable consequences of their actions — everything is made easily reversible.
Users shouldn’t have to commit to a process once it’s started — they should be able to easily cancel and/or abandon.
#4: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
Check-in counters are usually located at the front of hotels. This consistency meets customers’ expectations.
Using elements from the same design system across the product lines lowers the learning curve of users.
A standardized notification design provides a similar but distinguishable look and feel for different app pop-ups.
#5: Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Guard rails on curvy mountain roads prevent drivers from falling off of cliffs.
The confirmation page before checking out on airline websites gives users another chance to review the flight details.
Offer good defaults and set boundaries when people book services by date. Grey out unavailable options.
#6: Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
People are more likely to correctly answer the question “Is Lisbon the capital of Portugal?” rather than “What’s the capital of Portugal?”
Comparison tables list key differences so users don’t need to remember them to make comparisons.
Search queries are presented together with the results as a reference.
#7: Flexibility and efficiency of use
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Regular routes are listed on maps, but locals with more knowledge of the area can take shortcuts.
Keyboard shortcuts for complex products can help expert users finish their tasks more efficiently.
Social apps allow two ways to like posts. Experienced users can tap to like because it speeds up browsing.
#8: Aesthetic and minimalist design
Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Excessive decorative elements can interfere with usability.
Over-decoration can cause distraction and make it harder for people to get the core information they need.
Messy UI increases the interaction cost for users to find their desired content; Organized UI lowers the cost.
#9: Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Wrong-way signs on the road remind drivers that they are heading in the wrong direction and ask them to stop.
Good internet connection error pages show what happened and constructively instruct users on how to fix the problem.
Provide useful help when people encounter search-result pages returning zero results, such as popular topics.
#10: Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
Information kiosks at airports are easily recognizable and solve customers' problems in context and immediately.
Good frequently-asked-question pages anticipate and provide the helpful information that users might need.
Information icons reveal tooltips to explain jargon when users touch or hover over them, which provides contextual help.
Updated about 1 month ago