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 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

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.

10011001

Example A: “You Are Here” maps

Mall maps show people where they currently are, to help them understand where to go next.

10011001

Example B: Checkout flow

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

10011001

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.

10011001

Example A: Stovetop controls

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

10011001

Example B: “Car” vs. “automobile”

If users think about this object as a “car,” use that as the label instead.

10011001

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.

10011001

Example A: Exit sign

Digital spaces need quick “emergency” exits, just like physical spaces do.

10011001

Example B: Undo & Redo

These functions give users freedom because they don’t have to worry about irreparable consequences of their actions — everything is made easily reversible.

10011001

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.


#4: Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing.

10011001

Example A: Check-in counter

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

10011001

Example B: Design system

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

10011001

Example C: Notifications

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.

10011001

Example A: Guard rails

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

10011001

Example B: Airline confirmation

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

10011001

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.

10011001

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?”

10011001

Example B: Comparison table

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

10011001

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.

10011001

Example A: Shortcuts

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

10011001

Example B: Keyboard shortcut

Keyboard shortcuts for complex products can help expert users finish their tasks more efficiently.

10011001

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.

10011001

Example A: Ornate vs. simple teapot

Excessive decorative elements can interfere with usability.

10011001

Example B: Communicate, don’t decorate

Over-decoration can cause distraction and make it harder for people to get the core information they need.

10011001

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.

10011001

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.

10011001

Example B: Internet connection error

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

10011001

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.

10011001

Example A: Airport information center

Information kiosks at airports are easily recognizable and solve customers' problems in context and immediately.

10011001

Example B: Frequently asked questions

Good frequently-asked-question pages anticipate and provide the helpful information that users might need.

10011001

Example C: Information icon

Information icons reveal tooltips to explain jargon when users touch or hover over them, which provides contextual help.


Did this page help you?