Created by Grof, Richard, last modified on 2020-10-19

General UX 

Filter

Shortens a list to objects that match the filter criteria.

Source: IBM design principles

Focus

The focused element refers to the element which currently receives input events. The user can change the focus by clicking an element with the mouse or by pressing the TAB key. 

Built-in interactive HTML elements like text fields, buttons, and select lists are implicitly focusable and need to have focus in. 

Source: developers.mozilla and developers.google

Returns all objects (for example, files, names, or documents) within a defined set (for example, in a folder, directory, database, or the internet) that match some specified criteria. 

Source: IBM design principles

UI Pattern

UI patterns are reusable solutions to common usability issues in products or on the web expressed as a collection of UI elements.


GUI-Related

Heading 

Typographical element used for the title or topic in the document. Headings are creating hierarchy in the document (H1, H2, H3, H4, H5, H6) with H1 being the highest level (the most important and used only once on the page).

Header

It is the upper part of a page or layout. Typically represents a container for logo and a set of navigational links, in HTML semantically represented by <header> element.

App Bar

App Bar is a section of the user interface with clickable elements enabling a user to quickly take steps of interaction with the product.

Modal window

Disables the page and focuses the attention on one task or piece of information via a window which overlays the page. Modals interrupt the user’s workflow, so they should be used sparingly.

Modal Dialog

A dialog is a “conversation” between the system and the user. Modal dialog is a type of modal window which creates focus by preventing a user from doing other things until they complete a task or dismiss it.

Is used to provide critical information or information that a required action has been taken, such as deleting a file, or asking users to make a choice. 

Non-Modal Dialog

A dialog in which users can interact while they continue to perform other tasks. 

Select 

Native HTML element is used to create a drop-down list in forms. 

Dropdown

Dropdowns are a stylized version of the Native HTML select element and can be used in forms on full pages, in modals, or on side panels.

Combo box

Combination of input field accompanied by dropdown with a list of options. Allows a user to enter any value, or select a value from a list of suggested, likely, or desired values.

Navigation menu 

Is lists of content categories or features, typically presented as a set of links or icons grouped together with visual styling distinct from the rest of the design.

Contextual menu 

is a type of menu that appears on demand and contains a small set of relevant actions related to a control, an area of the interface, a piece of data in the application, or a view of the application.
They appear next to where the user clicks, taps, presses, or swipes.

On desktop, the main interactions that reveal contextual menus include:

  • Right-clicking on a two-button mouse 
  • Pressing the Control (Ctrl) button and then clicking 
  • Two-finger click on a trackpad

Source: nngroup

Overflow menu

Overflow menu is used when additional options are available to the user and there is a space constraint. Is represented by " three horizontal dots" button. 


Design System related

Component

A general term used to refer to reusable snippet of code packaged for distribution. Sometimes used interchangeably with pattern,.

Pattern

A reusable flow (UI and interactions), like signing in or checking out. Sometimes used interchangeably with component. 

Guidelines 

are suggestions or rules to follow for how to best use design system.

Component  library

Is a collection of components or patterns where you can browse examples of components and find code references for how to implement the components into a codebase.

Tokens

A platform- and technology-agnostic way to store a design value to be used by specific applications. For Example: color palette, typographic families, spacing units.

Design UI Kit 

Design UI Kit is a representation of coded components created in a way that designers can create interface mockups. Design UI kits are Adobe XD and Axure.

Types

Types are versions of an element that modify the element's standard appearance.

Types cannot be used simultaneously on the same element. For example, "cats" and "dogs" are types of animals, but are mutually exclusive.

Variations

Variations modify qualities of an element like size, or color.

Variations are mutually inclusive, and can be used together to modify an element.

States

States are visual representations used to communicate the status of a component or interactive element. 

Behaviors

Behaviors are actions that a component can perform.