BEGINNER’S GUIDE TO UI ELEMENTS

UI ELEMENTS

TEXT FIELDS

Text field are part of UI elements that allows the user to enter a text into a UI. Text field appear in dialogs and forms.

Great attention must be paid to text fields when designing mobile apps, websites. They can be used for entering time, dates, names etc.

BUTTONS

Buttons are essential part of UI elements that allows the users to take action on a particular thing.

Key points to note when designing buttons

· State: All states of the buttons must be designed e.g active, inactive, tapped, hover etc.

· Hierarchy: Placing hierarchy on the buttons is also essential i.e high-emphasis, medium-emphasis and low emphasis.

· Placement: Multiple buttons type can be utilized to represent various emphasis level.

· Text Button: They are used for less pronounced action. For example, in cards and dialogs

· Contrast: Buttons should have enough contrast to express the importance of their functionality.

SLIDERS

Sliders allow users to make selections from range of values. They are perfect for adjusting settings such as brightness, volume etc. They can have icons at both sides of the bar.

Key points to note when designing a Slider

· State: All states of slider must be designed e.g enable, disabled, tapped, hover etc.

· Adjusting: Slider should be used for selections from range of values.

· Quickness: Sliders should react immediately, so changes must be spontaneous.

· Accessibility: Sliders should provide the whole range of choices available to the users to select from.

TOOLTIPS

Tooltips are used for displaying informative text when user hover over, focus on or tap an element.

Key points to note when designing tooltips

· Conciseness: Tooltips should only display a brief text. Do not add image or detailed information.

· Pairing: Tooltips are always paired nearby element with which they are associated.

· Transitory: Tooltips appear on hover, focus, or touch and disappear after a short duration. The recommended time is 1.5 seconds