User Interface Guidelines and Principles
As an app
developer on the Core OS, you can take advantage of our Aquarius Design System library of components and adhere to the general usage guidelines within.
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:
Overall Design 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 flow
- 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
Foundational UX Design Concepts
10 Usability Heuristics for User Interface Design:
#1: Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.

Example A: “You Are Here” maps
Mall maps show people where they currently are, to help them understand where to go next.

Example B: Checkout flow
Multistep processes show users which steps they’ve completed, what they’re currently working on, and what comes next.

Example C: Phone tap
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.

Example A: Stovetop controls
When stovetop controls match the layout of heating elements, users can quickly understand which control maps to each heating element.

Example B: “Car” vs. “automobile”
If users think about this object as a “car,” use that as the label instead.

Example C: Shopping cart icon
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.

Example A: Exit sign
Digital spaces need quick “emergency” exits, just like physical spaces do.

Example B: Undo & Redo
These functions give users freedom because they don’t have to worry about the irreparable consequences of their actions — everything is made easily reversible.

Example C: Cancel button
Users shouldn’t have to commit to a process once it’s started — they should be able to easily cancel and/or abandon it.
#4: Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.

Example A: Check-in counter
Check-in counters are usually located at the front of hotels. This consistency meets customers’ expectations.

Example B: Design system
Using elements from the same design system across the product lines lowers the learning curve of users.

Example C: Notifications
A standardized notification design provides a similar but distinguishable look and feels for different app pop-ups.
#5: Error prevention
Even better than good error messages is a careful design that 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.

Example A: Guard rails
Guard rails on curvy mountain roads prevent drivers from falling off of cliffs.

Example B: Airline confirmation
The confirmation page before checking out on airline websites gives users another chance to review the flight details.

Example C: Date selection on calendar
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.

Example A: Lisbon
People are more likely to correctly answer the question “Is Lisbon the capital of Portugal?” rather than “What’s the capital of Portugal?”

Example B: Comparison table
Comparison tables list key differences so users don’t need to remember them to make comparisons.

Example C: Search
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.

Example A: Shortcuts
Regular routes are listed on maps, but locals with more knowledge of the area can take shortcuts.

Example B: Keyboard shortcut
Keyboard shortcuts for complex products can help expert users finish their tasks more efficiently.

Example C: Tap to like
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.

Example A: Ornate vs. simple teapot
Excessive decorative elements can interfere with usability.

Example B: Communicate, don’t decorate
Over-decoration can cause distraction and make it harder for people to get the core information they need.

Example C: Messy vs organized UI
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.

Example A: Wrong way sign
Wrong-way signs on the road remind drivers that they are heading in the wrong direction and ask them to stop.

Example B: Internet connection error
Good internet connection error pages show what happened and constructively instruct users on how to fix the problem.

Example C: No search results
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.

Example A: Airport information center
Information kiosks at airports are easily recognizable and solve customers' problems in context and immediately.

Example B: Frequently asked questions
Good frequently-asked-question pages anticipate and provide the helpful information that users might need.

Example C: Information icon
Information icons reveal tooltips to explain jargon when users touch or hover over them, which provides contextual help.
Updated about 1 month ago