Actions and input

Users interact with a product (such as a website) through actions. The guidelines listed here will help you create the correct action elements and will ensure the user navigates the website effectively.

Actions are those components, that prompt users to take specific actions on a platform, usually leading to a change in the system's state or the user's flow. Components such as buttons, links, icons, dropdowns ... etc are action elements in the design system.

Inputs are elements that allow users to add data into the system. Elements such as text fields, text areas, checkboxes, select boxes ... etc are input elements.

In a design system, these components are standardised to ensure consistency across different parts of an application or website.

The action of a button

Buttons are clickable elements that represent a trigger that helps the user take action to support elements. The button is a core component of the design system and serves as the single most important element that helps usable actions on a website. You may also view the button component to get more details on technical implementation.

Principles of a button

• Distinctive
• Understandable
• Right time, right place

For each situation, there is a button type. Each button variant has a specific function and should be used as is intended. The following button variants exist in the design system. Each button variant has a different priority and emphasis. Do not use the same variants for all buttons to allow specific ones to stand out faster.

The solid button has been tested for accessibility and uses the right combination of colour that provides a WCAG 2.0 AA rating. You must use the solid button as the primary action. When there is a single call to action (where there is no choice present) then the solid button must be used.

How to use buttons

Buttons with icons

Icons can help better understand button actions and can be placed on the left (start) or the right of the button label (end). It is recommended to use icons within buttons when deemed necessary.

Content of a button

Buttons label apply Actionable Verbs. They inspire users to act while clearly understanding what the button will do.

• A user should be indicated about the action they will proceed with.
• Keep the labels informative using less than four words.
• Do not get creative with button labels; users have to be familiar with the terms used.

Full width buttons

Another way to add more emphasis to buttons is by making them as wide as their container. This is useful when you want to create a stronger focal point on the CTA of the page. This method is very common in widgets or important action panels - such as a log in or registration page.

Floating action button (FAB)

A floating action button (FAB) is essentially a call to action (CTA) with the primary purpose of promoting and providing easy access to a primary action, such as initiating a chat or initiating a key process. In essence, you can add what is most relevant and important.

Floating action buttons (FABs) can pose accessibility challenges, but if implemented thoughtfully, they can be made accessible. While FABs can be a visually appealing and efficient UI element, their accessibility concerns should be carefully addressed during the design and development stages.

What to keep in mind

• Ensure the FAB has a sufficient colour contrast ratio against its background so that users with visual impairments can easily distinguish it.
• Limit the number of floating elements. The design system restricts the use of floating action buttons to a maximum of two (2) on a website.
• The design system also recommends changing the position and structure of an FAB on mobile devices. For users with motor impairments, it's important that the FAB has an adequate touch target size and does not create content obscuration.
• A floating action button (FAB) must avoid content obscuration, irrespective of the device. This can be a hindrance for all users, not just for people of determination. Ensure that the FAB's position doesn't interfere with other key content or functions. Its behaviour and position should be consistent across different pages or sections.

Accessibility concerns

• Multiple FABs can raise accessibility challenges, especially in terms of screen reader navigation and focus management. Having too many FABs can clutter the interface and lead to confusion, especially on mobile devices with limited-screen real estate.
• A key compliance to accessibility is to have the ability to go through the website and perform necessary actions using the keyboard only. The FAB should be easily navigable with a keyboard. It should be part of the natural tab order, and when focused, it should exhibit a clear visual indicator.

Recommended actions

The design system recommends the following floating action buttons and also recommends adding them only when required. Both the FABs must not obstruct content and other important elements on the page and must be visually different from each other.

The recommended position for the floating action buttons is the bottom right corner of the webpage.

Hyperlinks

Links are used more for navigational actions, redirecting users to internal or external pages of information. Hence a link will not generate feedback after an action is taken.

It is recommended not to style a link as a primary solid button with the same colour combination. If the primary colour is applied to a button that generates feedback, then the secondary button as a solid state can be applied to links.

Text links

Text links differ from text buttons regarding their positioning, style, length and action they signify. While buttons are placed where there is enough white space for them to be found easily, text links are not subject to specific positions and can be placed anywhere.

Text buttons should contain no more than four words, whereas text link lengths are not defined by word length or the number of words. Additionally, text buttons are usually fewer in number than text links that are used more flexibly without limits.

For containers with several text links, maintain enough white space to ensure they are separate from other links.

Form inputs

Forms consist of input and select components that collect various kinds of information.

• Choose the right form element: Follow the user need and select the right component for your form to allow for a consistent, improved user experience.
• Ask what is only necessary: Only ask for necessary information in order to proceed to the next step
• Allow for accessibility: Consider the device being used, and ensure that the form can be filled completely with a keyboard.
• Provide support: Use additional elements to help users understand how they need to interact with the input field.
• Group relevant fields: Use less space between related input fields or selections to make them look like they belong to one group. Keep adequate space between different groups.
• Keep it short: Too many input fields and selections intimidate the user. Try using a progress bar if there are many steps to help overcome user fear/frustration.
• Clear and concise: Write bulletproof call to actions(CTA's) to ensure users complete all necessary steps in a process and achieve their goal.

Choose the right component

The radio type

If the user has to choose from a selection of options, and if the options are less than or equal to 5, then use an input with type radio for the selection.

The select type

If the user has to choose from a selection of options, and if the options are greater than 5, then use a select box

The checkbox type

Always prefer the use of checkboxes over a select for multiple option selections. Avoid the use of a multi select. If the choices for a user to select from exceed 10, you must include the option to "Select All"

The input field

The input type must be appropriate to the type of content required. For example, if you need to ask the user to enter their phone number, the input type must be ` type="tel" `, and if you need the user to enter their email address, the type must be ` type="email" `.

It is a requirement of good user experience to always use the appropriate type as the keyboard on mobile devices react to it and changes the layout allowing the user to enter data into the field easily. Learn more about the various types allowed in an input field by visiting the Mozilla MDN Web Docs: The Input (Form Input) element

The toggle field

You must use this component carefully. Aesthetically, the toggle component looks pleasing, but it must not be used more than once in a single form (unless it is a user's preference page). Moreover, it must not be used on a required field. The use of a toggle component is to determine a true and false status, and hence can be used to change the state on a page directly too.

Handling required inputs

In forms, some inputs may be mandatory while others are optional. In such cases, mark the optional fields instead of the required fields.

Add a prefix to the form to describe why you are asking the user to fill the details and mention that all fields are mandatory except those marked as optional.

When possible, always set default values checked, select or pre-filled to reduce the input by a user. Make intelligent choices if the form is being filled by a user who is already authenticated. For example, there is no need to ask the user about their gender if you already have that information stored on the profile.

Reducing form content

Inserting too much information can make users feel frustrated; they might also skip filling out the form as it is too intimidating.

If there are more than eight inputs or selections to complete within a form, try adding another step to the data entry process to give users an idea of how far they have progressed.

However, this process must be designed carefully.

• Do not have more than 3 steps. If the process exceeds 3 steps, accommodate information within them even if the number of inputs per step exceeds eight. This is a time when you must review your service process and need for asking information.
• The user must know about all requirements that need to be submitted before hand, and must not face a situation where a certain validation fails on a second or third step that requires the user to restart filling the form from step one.

Implementing UAE Pass

UAE Pass is the first secure national digital identity for citizens and residents, enabling them to access many online services across various sectors, sign and authenticate documents as well as transactions digitally, request a digital version of their official documents, and use the official documents to request services from our partners.

The UAE Government Charter for Future Services directs all federal government entities (FGE's) to implement UAE Pass as the single sign-on, that can authenticate users who wish to avail services offered by the government.

The design system, therefore, only recommends the use of UAE Pass as the primary method to login. The login block created in the design system recommends the use of UAE Pass only. This also eliminates the need for a user to create an account. All FGE's are required to take appropriate steps to onboard a user after they authenticate themselves for the first time.

Visit uaepass.ae