Pine

The UX Design Dictionary: 78 Terms You Should Know

Whether you’re an experienced or inexperienced designer, you’ll most definately come across terms and concepts in conversation that will leave you scratching your head. To help you overcome this confusion, we’ve created a comprehensive list of 76 UI/UX design terms worth knowing, that will help you converse with design professionals within and outside your team confidently.

A/B Testing

A/B testing involves randomly showing groups of users different variants of a product for statistical analysis, to identify which one performs better in the context of a business goal/objective.

Learn about Netflix’s Approach to A/B Testing


Affinity diagram

Affinity Diagrams are brainstorming tools used to re-organising product insights, data and ideas into groups, so interconnections between them are easily identifiable. Great for creative product ideation and solving complex problems.


Affordance

Affordances are cues or characteristics that give users an indication of how to interact with and use a product. The heart icon used to save a recipe is an excellent example of an “obvious affordance” in the example above.


Agile Design

Agile is an iterative framework in which multiple stages of the design process run in parallel, enabling teams to make faster designs and get quick feedback on their work. Although now practised in UX, software development teams traditionally use the agile approach to deploy and test code quickly.


Avatar

An avatar is a graphical representation of a user persona, that in recent times has become increasingly popular as businesses adopt a more graphical approach to design.


Body-storming

Body-storming is an empathy-building technique which involves immersing yourself in the environment and physically experiencing a situation that users face, ultimately helping you build products/solutions that better address their needs.


Bottom navigation

Usually, in the form of a bar at the bottom of the smartphone display, this navigation type allows users to switch between multiple destinations in a single tap. Each destination has a corresponding icon or text. 


Breadcrumb Navigation

Also known as breadcrumb trails and sitemap links, this popular navigation for shows visitors their position within a websites page hierarchy. It is prevalent in websites that have lots of categories, such as marketplaces and newsrooms.


Brutalism

Brutalism is a digital design style that is functional, but intentionally raw and unadorned in appearance. Commonly found in early websites, this style takes inspiration from the modernist architectural movement from the 1950s, in which consisted buildings were made of un-ornamented blocks of concrete.


Call to action (CTA / C2A)

CTA’s are interactive UI elements found on digital interfaces that entice users to complete an action, which results in a specific outcome/conversion. The “Add to Cart” and “Go to Menu” button are examples of typical call to actions you’ll find on many websites today.


Card Sorting

Card sorting is a UX research technique in which you give participants topics to write down on post its/cards and ask them to organise the cards to make sense to them. The goal is to help teams evaluate and design a website or app’s information architecture to be user-friendly.


Carousel

A carousel consists of several cards that display different content, usually, images, which users can shuffle through with ease. They allow design teams to place multiple content pieces in a single space, whilst minimising visual clutter.


Clickstream

A clickstream refers to the click path a user takes to complete a particular action on a website. Designers analyse this information to identify any potential issues that need addressing and changes required to improve the conversion rate metrics.


Colour Theory

Colour theory consists of several rules, and best practices used to help guide designers in selecting colour schemes for visual interfaces.


Conversion Rate

Conversion rate is the percentage of individuals who visited your website/app and completed the specific action you wanted them to take. E.G. If 5000 people visited your website, and only 500 people signed up for your newsletter, the conversion rate would be 10%. If the conversion rate is high, perfect, if it’s low, you can use other analytical techniques to identify, address and solve the potential root causes.


Copy

The copy is the text that helps guide visitors through your app or website. Due to the vital role it plays in assisting users in navigating and completing specific actions, your copy must be creative, engaging, and most importantly reflect your brand identity.

Check Out These Resources: Copy AI | Content & UX Slack Channel


Customer experience (CX)

CX is the perception and feelings a customer has towards your brand/product, based on every single interaction they have with it. Say you’re purchasing a car, the customer experience will encompass everything, from the parking available at the showroom, how the vehicles are displayed, the customer service offered by staff and the payment options made available.


Dark Pattern

Dark patterns are UI/UX interactions that purposefully manipulate human psychology to trick users into completing actions that are beneficial for a business, but not what they want to do. The example above is from the customer support section of the digital banking app Revolut. The “Got it” button directs users away from customer support and stands out. In comparison, the “Chat to Us” that opens up a customer support chat isn’t highlighted. A clear attempt to reduce the number of direct enquiries to real technical support staff.


Design Debt

Also known as UX debt, this refers to any design-related issues that are left unsolved and incomplete. Although mostly done to focus on short-term goals, these issues can spiral out of control and prove costly in the long run if not rectified.


Design Sprint

The Design Sprint is a highly interactive, user-focused process spread over five-days, whose goal is to answer critical business questions through design, prototyping, and testing ideas with customers.


Design Thinking

Design thinking is an iterative framework used by teams to build a shared understanding of and create innovative solutions for complex problems users face. The process consists of five stages; empathise, define, ideate, prototype and test.


Diary Study

Diary studies are qualitative research techniques in which you ask users to keep a log of their daily experiences over a prolonged time. The diary study’s goal is to get valuable insights about participants to help guide you during product development.


Empathy

Empathy is the ability to understand and share another’s feelings, from their needs, motivations, problems and desires. Not to be mistaken with sympathy, which involves merely acknowledging others’ plight, usually manifested in the form of pity and sorrow.


Empathy Map

Empathy Maps are handy visual tool used to organise all the important information you know about your users and identify any knowledge gaps that require further research. An empathy map aims to help create a shared understanding of your users’ needs and goals within the team. 


Eye Tracking

Eye-tracking is a UX research and testing technique in which you use specialised tools to identify the areas on a web page that users’ eyes focus on. It’s a good technique to help you identify potential usability issues, the website content that users find most engaging and much more.


Fishbone Diagram

Known as an Ishikawa diagram, this is a tool used by design teams to identify individual root causes and the overall effect each one has concerning an identified problem. When creating an Ishikawa diagram, the problem is placed at the “head of the fish”, with each underlying cause forming the skeleton.


Fitts Law

Identified by Psychologist Paul Fitt’s, this law states that time taken to reach an object is a direct function of its width and distance from an individual. The LinkedIn user interface is an excellent example of the application of Fitts law UX design. Notice how buttons for the important functions are a good size, placed in the bottom and top, close to the phone screen edges—making them quickly accessible when an individual is holding the phone in the palm of their hands.


Flat Design

Flat design is a minimalist interface design style that uses simple 2D elements, typography and bright colours. It rose to prominence in 2013 with the release of iOS 7, which saw Apple ditch the skeuomorphic style for more simplistic buttons, icons and design elements.


Full-Stack Designer

Source: FlatIron School

In essence, a full-stack designer is someone who has solid UI, UX and front-end development skills to complete the design and development of a product.


Gamification

Source: Pinterest

Gamification is process in which game-mechanics are inserted into a non-game system to evoke positive emotions and increase user engagement.

Learn More About Game Mechanics


Gestalt Laws of Perceptual Organisation

Gestalt is a school of psychology consisting of a list of principles that describe our human ability to mentally organise and make sense of information encountered in everyday and extraordinary situations. Although developed in the early part of the 20th century, we still use these seven perceptual organisation laws extensively in digital product design.


Glass Morphism

Glass Morphism is a new trend in the look of user interfaces and the processing of information. For any given point where something should be clear, transparent, or clear-textured, Glass Morphism fakes it by filling the cell with a shade of grey and interpolating it with its surroundings. The design style takes heavy inspiration from liquid-crystal display panels and mimics the actual devices’ glassy look.


Grid System

Grids systems are structures that divide a page into columns using vertical and horizontal lines. They play an essential part of the visual development and design workflow, facilitating the creation of beautiful responsive websites that are consistent across all platforms and devices.


Hamburger Menu

Source: Alexandr Izumenko

Created by interaction designer Norman Cox, a hamburger menu is a button traditionally found on the top corner of app and website interfaces, whose function is to open up a side menu for navigation.


Heart Framework

Designed by Google, the heart framework is a process that helps design teams test and improve the user experiences by evaluating their product UX against five user-centred metrics. These include, (H) Happiness, (E) Engagement, (A) Adoption, (R) Retention and (T) Task success.


Heatmap

Source: Hotjar

In the context of UX design, a heat-map uses the warm-cool colour spectrum to provides insights on your website’s areas that users spend the most time on. These insights can help you identify usability issues and any changes needed to improve UX. Areas where users spend lots of time appear red, while the parts of the website that get little attention appear blue. Hotjar is an excellent data visualisation tool worth checking out to do this. 


Hero Image

hero image is the large and often oversized image positioned in the front and centre of a webpage. It’s the first thing visitors see, so must leave a positive impression and be engaging enough to keep them on a website.


Heuristic Evaluation

Also referred to as a usability inspection, this process involves getting an expert to evaluate an interface’s usability against the 10 heuristics established by Jakob Nielsen. This exercise aims to identify problems or opportunities for improvement, so is useful in the early stages to provide insights on directions the design might take.


Hicks Law

First theorised by psychologists William Edmund Hick and Ray Hyman, Hicks law states that an individuals’ decision-making time increases with the number and complexity of choices they’re given. Designers regularly use this principle in UX, but especially when designing pricing pages, which is why you usually only get between three to five options like in the example above.


HTML, CSS & Javascript

HTML, CSS and Javascript have different functions, but are essentially the foundational coding languages on which all pages on the web are built.

  • HTML – This language forms the building blocks for all websites, determining the structure and how a webpage is displayed. 
  • CSS (Cascading Style Sheets) – This language determines the colours, font, layout and practically all HTML document styling.  
  • Javascript – With this language, you can change website elements, making them more interactive and engaging. 

Infinite Scroll

Source: Claudio Scotto

Infinite is a scrolling type found most often in blogs or newsfeeds. With this method the page will keep on loading more content as you scroll down the page. It’s considered to be amongst the most addictive features in websites and apps.


Information Architecture

Information architecture (IA) is the method of structuring and organising content on an interface, so it’s easy to understand, engaging, provides a better user experience, and increases the likelihood of conversion.


Interaction Design

IxD refers to the design of interactive systems such as digital services, products, environments and software applications.


Isolation Effect

First identified by German psychologist, Hedwig von Restorff, this theory states that when you group multiple similar items, the one that differs is more like to be memorable. An example of this is the purple “Try for Free” button, which stands out compared to all other design elements on the Slack homepage.


Iterative Design

Iterative design is a process that allows multiple iterations of specific design features to be produced, tested, and revised before the final design is complete. The iterative design approach helps reduce risks and costs, leading to a better product overall.


KPI

Selected by a businesses management team, key performance indicators (KPIs) are a set of quantitative metrics used to monitor, measure, evaluate, and report business performance.


Law of the Internet User Experience

This law states;

“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Design for patterns for which users are accustomed.”

Jakob Nielsen

So when your creating a website or app, its important that you use UX/UI elements that people are familiar with. The bookmark bottom button is a good example which you’ll find across multiple websites and apps.


Lean UX

Inspired by agile, Lean UX is a group-based and collaborative approach to designing digital products and services. It involves building and testing solutions with users in real-world situations, then iterating based on the feedback, to ultimately create digital products and services that deliver an excellent user experience.


Load More Scrolling

In this scrolling style, content is separated with “read more” or “see all results” button, which when clicked open up more content on the same page.


Material Design 

Created by Google, Material is a collaborative design system consisting of best practices, guidelines, components, and open-source tools that enable a more streamlined and efficient user interface design process.


Mental Model

Formed through previous experiences, a mental model refers to what users think and believe about how a product works. In UX design, the more a product’s functionality fits in with a users mental model, the more straightforward it is for them to use.


Microcopy

Microcopy is the name given to the small bits of text on a UI that helps users stay informed, navigate and complete an action on a website or app. Classic examples of microcopy include button labels, product descriptions and T & C’s.


Miller’s Law

Miller’s law states that an average human can only store the five, plus or minus two, bits of information in their working memory at a given time. So when designing interfaces, to be effective, you should group content and information into chunks or categories of ideally five and no more than nine. E.g. The Sifted website (Image Above) does this well, with around three to seven articles under each section.


Mockup

Mockups are high-fidelity, non-interactive and static visual presentations of what a product will look like, and how it will translate in various devices. Starting with a mockup can help get you closer to a usable design in the least amount of time.


Mood-board

In UX design, a mood-board is a collage of text, images and UI elements used as a tool to set the direction and create a shared understanding of the visual identity of a product within a design team.


MVP

An MVP is a basic version of a new product created to collect and validate vital information about potential users with minimal time and capital investment. When creating an MVP, only include the necessary features and don’t spend time on aesthetics.


Onboarding Flow


Pagination

Source: Namika Haiji Hamasaki/Dribble

An alternative to the infinite scroll, pagination involves dividing long lists of content into separate pages, which users can toggle between by clicking buttons usually located at the bottom of a webpage.


Pair Design

Pair design involves putting together two designers to collaborate and create solutions for a single problem. It’s becoming increasingly popular because it can help make the design process time-efficient and also yield more creative solutions/designs.


Persona

Personas are descriptive fictional profiles of target users built based on data and insights from user research. When done right, personas are a powerful tool that can help clarify a design project’s goal, build empathy, create a shared understanding and help provide focus for product teams.


Picker

Source: Abderezak KAFI

Pickers are interactive design elements that allow users to select specific values or items from a long scrollable list. They’re typically found on the interfaces of alarm clocks and calendar apps.


Pixel Perfect

Pixel-perfect describes a design that is of the highest quality, with a sleek, clean and sharp appearance.


Prototype

Source: Don M. Ouwens

prototype is a first or preliminary model of a product, which is then refined for the actual, finished product. It helps in creating a realistic picture of how design is supposed to be. The prototypes you create differ based on the stage you’re at in the design process. In the example above, the first mockup is a wireframe, the second mockup is low-fidelity prototype while the far right one is a high-fidelity prototype.

Learn more about prototyping


Responsive Design

Responsive design is when a web page’s layout automatically readjusts to ensure that design element presentation is in the optimum viewing order across all screen sizes and devices.

Serial Position Effect

Also Known as the primary-recency effect, this phenomenon states that individuals can remember items at the beginning and end of a list better than those in the middle. There are so many websites and apps that use this principle in their design. Instagram’s homepage is an excellent example, with all the important content and actions positioned at top and bottom of the screen, while the bulk of the content sits in between.


Sketching

Sketching involves free-hand drawing any design ideas that come to mind, to then discuss and iterate with key stakeholders before important design-related decisions are made.


Storyboarding

Source; Krisztina Szerovay

Taken from the film industry, storyboarding is a technique used to communicate the users’ experience visually. The process creates a series of sequential illustrations that detail the problems users face in the contextual environment and activities they undertake to achieve specific goals.


Usability Testing

Usability testing is a method of evaluating products and services by observing end-users interacting with them. This research technique aims to understand user behaviours and emotions, identify potential problems and areas where product improvements are needed.


User Flow

In modern product design, a user flow is a diagram that shows the path a user takes to get to a goal, while also highlighting actions they undertake at each stage. Creating user flows can help designers, managers, and other stakeholders visualise complex processes and user interactions with respect to their website or mobile application.


User Interviews

User interviews are fast and straightforward research exercises in which you engage real customers to get feedback on their perception of the design of your product, not the usability,

Learn the user interview best practices


User Journey Map

https://www.youtube.com/watch?v=-MqBBvw6wBY

A user journey map shows a visual representation of user goals when using a specific product or system. It illustrates the individual steps and interactions as a user performs a process from beginning to end, helping you identify your website or app components that are simple or confusing and exposing issues that might impede the users’ success and satisfaction.


User Scenario

User scenarios help designers understand how people currently use a site or app to achieve a specific goal, problems they encounter and what they do to move from one task to another. With this knowledge, design teams can then ideate and build optimal solutions enhance a products user experience.


UX Audit

A UX audit aims to pinpoint potential usability issues within a digital product, identify areas of improvement and suggest UX changes that could overcome these problems to enhance the overall user experience.

Learn more about UX Audit | Get the free UX Audit Checklist


UX Research

An integral part of the user-centred design process, user experience (UX) research describes and analyses how people interact with a system or service. It’s a multi-dimensional and holistic process of observations and interactions to help stakeholders understand better users’ needs, preferences, expectations, and experiences.

Learn more about UX research | Discover UX research techniques


UX Roadmap

A UX roadmap communicates the future activities and tasks a UX team needs to conduct to solve a defined user problem and achieve strategic goals.


White Space

White space refers to the blank or negative space between the various design elements on an interface. It’s primarily used in digital products to improve legibility, reduce visual clutter, improve navigation, increase interaction rate and make important information/content you’d like to convey stand-out.


Wireframe

Source: Madalin Duca | Dribble

Wireframes are low-fidelity templates that show the layout and organisation of content on a website or app. They essentially act as a blueprint which designers follow to create more detailed designs.


Zeigarnik Effect

Named after the Russian psychologist who first identified it, the Zeigarnik Effect states incomplete tasks are more memorable than complete tasks. The main reason for this is that unfinished induce a task-specific tension within individuals, which they can only overcome upon completion. The Zeigarnik Effect is prevalent in digital products in the form of gamification and UI elements such as progress bars/trackers.

Pine Design Team

Add comment