Glossary

This is a small dictionary of UX/UI elements on a web page. Learn what are the names of functionalities. Feel free to browse around or use the search field to refine your results.

Above the Fold - Glossary @ JalokimGraphics

Above the Fold

This is a UX technique where you use the initial viewport to display the most crucial information about the site. Usually includes the menu, the main H1 and a Call to Action (CTA) button

Related keywords: fold
Accordion - Glossary @ JalokimGraphics

Accordion

This is a component that can toggle (show / hide) a part of its content. Often used in forms that have many steps, or on a FAQ component.

Related keywords: toggler, expander, collapse

Banner Blindness

Banner blindness is a phenomenon in which website visitors ignore or overlook banner-like advertisements or other design elements that are perceived as ads. Users have learned to filter them out as irrelevant noise.

Related keywords: ads, adverts, bad ux

Call to Action

A CTA is a button that you want your users to press. A call to action, enticing the user to click the button. Examples include: "Add to Cart", "Write a review", "Contact us"

Related keywords: CTA

Component

A component is a functional part of a website. Components can be really small for example a single button, or a component can be something like a search bar with a button. Making reusuable components and treating them like LEGO bricks, where you can mix and match components to make new components is the best. Reinventing the wheel when something can be built from existing components usually ends in extra tech debt that you don't need

Related keywords: module, element

Developer Experience

Similar to User Experience. It's about making a developers life easier. This includes various automations, documentation, ease of use of tooling. By prioritising DX, development teams can create a productive and collaborative work environment that fosters innovation and produces high-quality code.

Related keywords: DX
Menu icons - Glossary @ JalokimGraphics

Menu icons

Menu icons have a couple forms. The most popular being the hamburger menu used in most cases. A Kebab menu is usually a context menu, and a chocolate box menu usually opens a grid of options

Related keywords: hamburger, kebab, meatballs, candy box, chocolate box
Modal - Glossary @ JalokimGraphics

Modal

A modal is a dialog window that popups up and covers the entire viewport. Its used to fully grab the attention of a user and makes the content under the popup not interact-able. Best used for login modals. User hate promotional popups or adverts in modals, which can lead to banner blindness.

Related keywords: dialog window, popup, popover, overlay
Tooltip - Glossary @ JalokimGraphics

Tooltip

A tooltip shows additional information when a user hovers over a trigger. Usually a trigger is an info icon or text. This component hovers over an element.

Related keywords: bubble, info, explainer, popup
Vertical Rhythm - Glossary @ JalokimGraphics

Vertical Rhythm

Vertical (and horizontal) Rhythm is about maintaining the same multiples of 4px in all spacing, margins, sizes.

Read the full article here
Related keywords: grid, vertical, spacing
Viewport - Glossary @ JalokimGraphics

Viewport

This is the visible window that the user sees before scrolling. This is the entirety of the real estate that you can use for your design. It's recommended to place some key information above the fold

Related keywords: window, viewarea