CAREER GROWTH

BASIC UI/UX TERMS YOU SHOULD KNOW

Lyn Balanza

Written by Lyn Balanza

NOVEMBER 20, 2019

 

Want to be a good UI/UX Designer? Start by knowing the basics. In any field, there are a lot of terms you need to know and understand in order to properly navigate your job. 

Here you will find a glossary of some basic UI/UX terms that every designer, developer, or even manager should know that will help during the product design and development process. 

 

3-click Rule 

A theory that users will exit a website if they cannot complete their task within 3 mouse clicks 

 

5-second Test 

A test that involves showing users one page of content for 5 seconds to gather their first impressions. The purpose of this test is to give designers and developers insight as to what information is essential in the page. 

  

60-30-10 Rule 

A design rule to help easily create a color scheme. 

 

A/B Test 

A test that helps determine which two alternatives is preferred by a target audience 

 

Accessibility 

How useable a product, website, or system is by any person, especially people with one or more disabilities 

  

Brand Book or Brand Guide 

An official document that explains a brand’s identity. It covers elements such as the design aspects, company overview, and communication guidelines. 

 

Breadcrumbs 

Secondary navigation that tells the user where they are on a website and allows them to navigate backward easily.

 

Call to Action (CTA) 

CTA elements for UI/UX design include interactive elements like buttons, links, or tabs that allow users to perform the expected action. 

  

Conversion Rate 

The percentage of users that complete a specific and targeted action. This can be things like link clicks, downloads, likes, shares, etc. 

  

Copy 

Any text on a website that explains the product, service, or idea. In marketing, copy usually refers to text used to sell a product. 

See also: Microcopy 

 

Customer Experience 

How a customer feels depending on his/her actions with a product, system, service, channels, or even employees. 

  

Customer Journey Map 

A tool used by companies to identify what customers want. It tells a story from initial contact to engagement, all the way to the long-term relationship. 

 

Data-Driven 

Using all available data to develop a better understanding of the user experience. 

 

Diary Study 

A method of research where participants are provided with materials and ways to record daily events, tasks, opinions, or ideas around a given subject. This is done to gain insight into their behavior and needs, which in turn can be used when developing products or designing for UI/UX. 

 

Dots per Inch (DPI) 

Measurement of the density of a print or video. It is the number of colored dots that can fit into a one-inch space. This gives information about the resolution of an image. 

 

End User 

Refers to the people who will use a product, website, or service. This may also refer to participants of research studies. These are the people you will be designing for. 

 

Experience Architecture 

A map that lays out a plan that users will take from the start until they reach your set goal. It is a combination of UX and design processes such as Information architecture, interaction design, and experience design. 

See also: Information Architecture 

 

Fishbone Diagram 

A diagram used to identify cause-and-effect relationships. The “head” of the fish is the problem, while the “bones” that run along the spine of the “fish” symbolize factors and categories. 

 

Fitts’ Law 

A mathematical model that predicts how long it takes to point to or identify a target based on the target’s size and proximity. This is often applied to UI/UX design where the smaller and further away a target is, the longer it will take users to find and interact with it.  

 

Flat Design 

A design philosophy that focuses on simplicity and functionality. No techniques are used to create depth – such as gradients, shadows, highlights, etc.  

 

Golden Ratio 

The Golden Ratio is a mathematical ratio that originated in ancient Greece. The ratio has been found and studied in nature and is now applied to graphic and print design as it is considered visually appealing.  

 

Grid 

(Insert XD image) 

A guide that combines horizontal and vertical lines to provide a structural basis for page layouts and design. It can also help with flexibility and content organization.

 

Heat Map 

Color-based representations of areas of interest. They are usually created with eye-tracking software 

 

Information Architecture 

The organization of information. This includes site hierarchy, content, labeling, and navigation. Information Architecture allows users to easily find and understand information they come across.  

 

Interaction Design 

The study of how users interact with a page, application, or product.  

 

Landing Page 

The web page a user goes to after clicking a link. It is also called Target Page or Destination Page. 

 

Mental Model 

A person’s representation in their mind for how something works or looks 

 

Microcopy

Text that appears on a web page or application when needed. These can be a label on a form or field, instructions, warnings, etc. 

See also: Copy

 

Mindmap 

A visual diagram used to organize ideas and information. It shows the relationship between elements as well as hierarchy. 

  

Mockup 

A detailed static representation of a design. It should show the information structure, content, and basic functionality of a page.  

 

Negative Space 

An area in a design where there are no elements. The plank space helps a page feel unclutered and allows people to focus on key elements and content on the design. 

  

Onboarding 

Process of welcoming new users, clients, or customers by easing them through the product. 

 

Pain Points 

The problems users face while using or going through a product. Identifying pain points will help create user-friendly designs. 

 

Persona 

A user profile created that represents a specific target audience in order to get an idea of what those users want. This is based on data and interviews. The personal details of a persona or often fictional, however, the information used to create the persona or user type is based on real data, research, and interviews. 

  

Prototype 

A highly detailed representation of the final product. This is often confused with a wireframe. A prototype simulates how the users will interact with the interface and often allows users to rate the content and interface. 

See also: Wireframe

  

Responsive Web Design 

Providing an optimal viewing experience across all/multiple platforms and devices. Content and layout of a responsive web page adapt to sizes and technical capabilities of whatever device it is opened on. 

  

User-Centered Design (UCD) 

A design approach where the end user is at the center of the design process. UCD needs continuous research and testing to ensure the product delivers a design that appeals to the end user. 

See also: End User

 

User Experience 

The effect of design on the ease of use and level of satisfaction with a product, website, system, or service. The term was coined by Dr. Donald Norman, a cognitive scientist. 

 

User Experience Design 

Designing software products, websites, or system that is useful to a set of users. The concept is applied during the design process and covers the technical use of a product. 

 

User Interface 

The space that a user sees in a product, website, or system.

 

User Interface Elements 

Items on a website or product’s interface that users engage with. These can be items like arrows, buttons, sliders, navigation bars, hyperlinks, dropdown menus, message boxes, text fields, and more. 

 

User Research 

Research conducted to understand end users better. Research can be both quantitate and qualitative. User research can also be done to understand pain points, motivations, and opinions through interviews. 

See also: Pain Points

 

Web Analytics 

The measurement and analysis of websites or web pages to understand user behavior and optimize a website. 

 

Wireframe 

A simplified sketch of important information on a page. It is also called page architecture, blueprint, or page schematic. 

 

Additional Resources: 

NOVEMBER 20, 2019