The complete guide to UX terminology - All the design jargon professionals should know

Do you ever feel spaced out when a blog post on web or app design uses a bunch of terms you don’t know?

This is not uncommon. Every field has its own glossary of terms and jargon. Mobile design is no different. New designers often face a vocabulary barrier upon entering the field.

Despite having some of the core fundamentals necessary to become a designer, they don’t have the necessary grasp over practical UI/UX terminology.

The gap of literature takes time to overcome. It’s not simply necessary to know important UX terms. Knowing when and how to use these terms is also important.

The first step is naturally to start learning these terms. This is where this piece can help. The following sections provide a complete low-down on the important UX terms designers should know. The points also highlight when the use of each term is relevant.

Each term discussed here will be covered from the perspective of mobile apps.

In this blog

#1 – White Spaces

White spaces (also known as negative spaces) refer to non-action parts of a screen. They do not contain any UI elements or content.

The advantage of using white spaces lies in creating a wholesome design which a typical user can parse through. If every part of a screen is filled with buttons and content, an average user would not be able to grasp anything on the screen.

The Google home screen is a prime example. In both web and mobile versions, Google makes it a point to fill up its screen with white spaces. This enables users to understand the different buttons and content on the screen.

White space doesn’t necessarily need to be white. Any color can represent white space. However, it must remember a non-action area.

#2 – 3-Click rule

The 3-click rule is very popular in the world of web design, but it holds sway in mobile app design as well.

The rule basically says that users coming on a website must be able to find the info they came for within 3 mouse clicks. The entire point of this rule is to make web designers enhance navigation across the website. Such a rule can vastly improve user experience on websites with a lot of webpages. Discovery is crucial on such websites and the 3-click rule helps ensure the same.

On mobile apps, this rule can be translated to the 3-tap rule. It also entails app designers to dredge up a design which makes every part of an app accessible within three taps.

#3 – Eye Tracking

Design professionals and companies in general bringing out mobile apps try to provide the users all the necessary information. The belief is that users will look at the information on every screen and make an action accordingly.

Nothing could be further from reality.

The image above is a perfect encapsulation of the chasm between designers and end users. The solution? Designers have to find a way to convey important information in areas users are most likely to pay attention to.

Eye tracking is a practice that studies the gaze of an average user. The goal of eye tracking is to figure out which areas of a screen does a user focus on most.

The Z and F pattern guidelines in web design came about thanks to eye tracking studies revealing general user behaviour. In mobile apps, the small screens make it difficult for designers to identify a generalized pattern.

Nevertheless, eye tracking can help designers identify the areas of a screen users are most likely to see.

#4 – Storyboard

Storyboards are generally used in the beginning of the design process when professionals are still ideating. The goal of the process is to correctly identify the right design idea based on user research and persona.

Any given design needs to ultimately meet the requirements of the end users. Storyboarding is a visual representation of a user journey. It is not bound by the traditional guidelines of design and development. In fact, most design professionals are encouraged to think out of the box and use storyboards to understand the end users better.

Generally, storyboards are used when a team is together collaborating in the design process. A lone designer charged with coming up with an app design rarely goes to the storyboard. However, team discussions and collaborations create the need for storyboards. This is because they help bring more people on the same page.

#5 – Usability testing

Usability testing

Usability testing is a very popular type of mobile app testing. It basically tests the overall experience an app provides to its users.

Generally, user experience is seen as something immeasurable. This makes it difficult to test and report the user experience of an app. Usability testing is a solution to this problem. It enables app testers to verify tenets like user flow, mobile navigation, CTA design & placement, and so on.

The overall goal is to validate the overall user experience an app provides. This testing process is carried out after a particular design is complete and validated by the development teams.

#6 – Wireframe

Even a simple app has a certain flow and a number of screens. It is important for both development and design teams to know which screen must open when a certain option is triggered.

A wireframe layout is a flowchart explaining how every part of an app works. It generally starts from the user onboarding screen and goes to every part of an app or website.

Wireframes don’t contain any visually appealing graphic features. They are only a diagrammatic representation explaining the point in a user flow where certain screens open.

The idea behind using wireframes is to help designers and developers understand the working of an app or website. It also helps both teams see the work they have to do in a given app or website.

#7 – A/B testing

A/B testing is a process to determine the best of any two given designs.

Let’s take an example. Assume you build your own app to sell custom designed T-shirts. When designing the product page, you’re not sure where to place the CTA button.

You decide to create two designs. One design has the CTA button in the bottom left corner. The other design has the CTA button on the bottom right corner. You send both designs to different groups of users and check their level of engagement. Whichever design gets more engagement is the best option.

This example only highlights A/B testing on a small level. It can be used to test a whole range of CTAs, features, buttons, and every other part of an app. Generally, designers use this testing method to get a better idea about some contentious design and experience issues.

#8 – User personas

When creating either a website or an app, companies have a clear idea in mind about their target audience. Let’s take an example. Assume you build an ecommerce app without coding using a WooCommerce Android and iOS app builder. On the app, you plan to sell trendy T-shirts for college students.

What are the types of people who’d use your app? Your product in this case decides your audience automatically. Your typical user will be a college student looking for an affordable app to buy decent T-shirts which match the prevailing cultural moment.

By defining your prospective user, you essentially create a user persona.

You can create multiple user personas depending on popularity of your app across different segments. For example, an app like Netflix will have a higher number of user personas compared to your ecommerce app selling trendy T-shirts. This is because the former attracts a wider audience.

Developing accurate user personas is important for UX designers for a number of reasons. They help designers understand the users they’re designing an app for on a personal and human level.

#9 – Pain points

Pain points are not just a UX term. They’re generally brought up first when entrepreneurs are discussing and testing an idea. In such discussions, pain points refer to the problems users in any given segment currently face.

Entrepreneurs and companies typically look for pain-points for business opportunities.

Also read: Developing app ideas: How to ensure an app idea is viable?

In design, pain-points refer to areas where users might feel stuck or lost. A pain point can refer to a page that takes a lot of time to load or a long process users have to perform to complete a task. These are generally areas which cause hindrance to user flow and eventually become a cause for app abandonment.

The job of UX professionals is to ultimately eliminate these pain-points or make them manageable at the very least.

#10 – Breadcrumbs

Breadcrumbs are more common in web design than app design. Nevertheless, they are an important entry in this UX glossary.

When you visit a blog, you might find the following path below the title of a blog post –

Home -> Category -> Sub-category -> Blog post name

This path and the associated touchpoints are together known as breadcrumbs. There are a number of advantages of having breadcrumbs from a user experience standpoint.

Firstly, breadcrumbs help highlight the overall structure of a website. On websites with a lot of webpages, it is crucial to add breadcrumbs.

The second advantage is the improvement in navigation. Breadcrumbs provide the natural advantage of offering users the option to jump back to a previous page on a path. Their contribution in improving navigation is immense.

#11 – CTAs (Call-to-action)

CTA

A call-to-action (CTA) message refers to any content that is designed to make users take an action.

Our digital world is filled with CTAs. From the red subscribe button on YouTube to the add to cart option on Amazon, all these buttons and the text on them are essentially CTAs.

CTAs are important in any medium where users have to take a desired action. To make the perfect CTAs, copywriters and designers have to work to work together. Designers have to make sure that the quality and voice of the text matches with the design. Think about the red subscribe button on YouTube. The red shade adds a sense of urgency and effectively attracts users towards it.

#12 – The 80/20 rule

The 80/20 rule, also known as the Pareto’s principle, simply states 80% of results in any given system come solely from 20% actions or causes.

This principle wasn’t specifically made keeping user experience design in mind. However, it provides a very interesting lesson for designers nonetheless.

Let’s take the example of a mobile app. Taking the 80-20 rule at face value, it would mean that 80% engagement on an app comes from 20% of the areas inside an app. This is an interesting way to not only think about app design, but app growth as well.

Designers and developers pour all their energies perfecting each part of an app. In reality, 80% of the success they get will come from 20% sections. It is thus better if designers and developers find the areas which encompass the 20% spectrum and push their efforts there to get maximum results.

#13 – Bugs

Bugs refer to any part of a website or app that causes it to behave in an abnormal way. There are many different kinds of bugs and each come with a different level of severity. Some bugs cause small glitches while others can end up crashing the app.

It is crucial for websites and apps to remove bugs from a user experience standpoint. Nothing harms basic app metrics like retention and churn more than clear bugs. A recent study showed that 78% users are able to spot bugs on a regular basis.

This calls for a comprehensive approach to mobile app testing. Both developers and designers must make sure an app is not bogged down by any kind of bugs. A number of mobile app testing methods can be deployed to identify and thwart bugs.

#14 – Golden ratio

The golden ratio is an old mathematical which equals roughly 1.618. A golden ratio is formed between two numbers when their ratio is equal to the ratio of their sum and the larger quantity. It is represented as follows –

Image source: Wikipedia

In this case, ɸ = 1.618033…..

What is the role of the golden ratio in design? The significance of the golden ration doesn’t lie in numbers and mathematics alone. Many naturally occurring shapes and designs we see are actually defined by the golden ratio.

In design, golden ratio is a standard to aspire to. It helps in the creation of app logos, set up content hierarchy, and a range of other design endeavours. Average users are intrinsically trained to find designs which follow a golden ratio appealing and balanced.

#15 – Prototype

A prototype refers to the initial model of a final product. It is meant to resemble the final product a team ends up creating.

There are a number of reasons developers and designers create prototypes. For one, prototypes help developers explain the working of a website or app to clients. Prototyping is a serious part of both website and app development. It contains all the UI elements and UX areas which designers plan on having in the final product.

The other advantage of a prototype is that it helps bring a product to life. It is difficult to imagine a website or app until it finally appears in front of someone’s eyes. Prototypes help developers and designers validate some of their ideas.

#16 – Mockup

Mockups are similar to prototypes. The only difference is that they are not active models of the final product. They are static and only represent the visual make-up of the final product.

Mockups are important in design because they provide a visual representation of the final product at the very least.

#17 – Front-end & Back-end

Designers never work in isolation. They have to work with a number of other teams. These can include the likes of marketing, development, R & D, and so on.

When working with developers, designers will often come across the terms frontend and backend.

Frontend refers to the part of a product visible to the user. The website or app you see on your mobile phone is the frontend. It is exactly what the people running the website want you to see,

Backend refers to the area where developers manage the frontend display. All the content and resources of an app are controlled from a backend. Anyone who runs a WordPress website would know a lot about using the popular WordPress dashboard. This dashboard is in essence the backend of the WordPress website.

#18 – Five-second test

The five-second test is very important for designers who regularly work with marketers. The test basically aims to find out how much users take away from a given design within five minutes.

Let’s say you turn WordPress to app in order to build a native Android and iOS app for your business website. You create a small banner to promote the launch of your app on social media.

What is the main message you want your followers to know? It is probably that your new app is live on the Google Play Store and the Apple App Store.

Putting your social media banner through the five second test will help you gauge if your followers will grasp this message. Remember most users online don’t read content. They scan content until something strikes their interest. The five-second test is the perfect solution for the digital world.

#19 – Information architecture

Much in line with the five-second test, information architecture refers to the science behind organizing and structuring information in a given design. The ultimate goal of information architecture in any kind of design is to make relevant info available to users.

We discussed breadcrumbs earlier and its role in improving navigation. Information architecture enables users to access the information they need in an orderly manner. Key parts of design like menu structure, navigation, and discovery are part of information architecture.

#20 – Contrast

Contrast simply refers to the distinct shades between two different colors. Black and white have the highest level of contrast and are able to demarcate themselves in a design fairly well. Some other colors don’t provide the level of contrast needed to help users parse through different UI elements and content.

Studying contrast is essential when designers are setting up the color scheme. Generally, users won’t notice the contrast in colors when designers do it well. This is because the color scheme doesn’t stand in the way of an average user’s experience. However, users are the first to notice when designers mess up the contrast.

#21 – UI elements

User interface (UI) elements refer to all interactive parts of an app. These include the buttons, navigation bars, dropdown menus, sliders, and so on.

UI elements basically enable users to effectively interact with the design of a given app or website. The design and placement of these UI elements is in the hands of designers. Designers can make the right choice when choosing and creating UI elements based on the attributes of their target audience.

UI elements have a direct impact on the overall experience of an average user. The design of a slider or a dropdown menu for instance can vastly improve or depreciate user experience.

#22 – 60-30-10 Rule

The 60-30-10 rule is a design guideline which lays down how the amount of color professionals should have in a given design.

According to the rule,

60% of a design space must be covered by the dominant or background color
30% of a design space must be covered by the secondary color
10% of a design space must be covered by the accent color

Let’s take an example. The primary color of the YouTube app is white. The secondary color is black (the color of the text). The accent color is red as all important buttons on the app have it.

This rule manages to create a stable color scheme for any given app or website.

#23 – Card sorting

Card sorting is a user research exercise designed to give designers a better idea about the information architecture they plan to set up.

Users are given a set of cards and a bunch of topics. They are then asked to write down the topics on the cards and arrange them in any way they see fit.

The order in which users arrange the cards provide designers an idea about the way they should approach the information architecture of a given product.

#24 – Design debt

Design debt is exactly what it sounds like.

UX designers have a lot of plans about the website or app they plan to launch. However, they’re not able to add all the design elements they want by the time of launch. All the features and elements they cannot add are called design debt.

Also read: Development to downloads – The complete guide to mobile app strategy

The design debt is basically the backlog of features that designers have to clear. Developers similarly have tech debt, which is a collection of all the planned features that are not added to the platform at the time of launch.

#25 – User journey

User journey

Source

A user journey refers to the typical path users follow before they perform a desired action. In the case of an app, the desired action can vary from downloading an app to making an in-app purchase.

The user journey is again a part of research. It provides designers information on what makes a given user perform an action at any given stage. This helps them make key decisions on app design.

For instance, if app users show a proclivity towards visual content during their journey, designers can create options to send visual push notifications. These little decisions come from little bits of knowledge. A user journey is the place where users can get this knowledge.

#26 – Mood board

A mood board is an abstract representation of the core design theme of a given website or app. It doesn’t need to follow any established guideline or pattern.

Designers refer to mood boards to make sure that the design of a website or app is progressing based on the core ideas.

Mood boards can contain anything from color schemes to abstract graphics which point to the design aesthetic of a product. They have to make sense to the designers working on a project.

#27 – Clickstream

Clickstream is a fairly common term in web design, but it speaks in many ways to mobile app design as well.

It refers to the click path a user goes through to arrive at a destination. The entire point of studying a clickstream is to make sure all active buttons are easily accessible in a given path. Some mouse movements are easier than others. Designers should work on ensuring that the desirable clickstream is based on the most optimal mouse movements.

#28 – Iterative Design

Design never stops. This is the basic concept behind iterative design.

Iterative design is a methodology that advocates for continual improvements to product design through a cyclical process. The goal is to deploy everything that works while redesigning anything that doesn’t.

The constant push for improvement in the world of mobile apps makes iterative design the right path forward. It is a good design methodology for the times we’re in.

#29 – Heat map

Eye tracking earlier helped designers check which part of a screen do users gaze at the most. A heat map essentially enables users to see which part users are most active on.

There are a number of top mobile app analytics tools that provide analysts heat maps of their apps. These heat maps clearly point out the mobile screens and areas where users are most active. This information can help when companies running an app wish to inform users about a new feature or any other info.

#30 – End user

The last one is easy.

End user simply refers to the final person who uses a given website or app a design team is working on. There are a number of things designers do to better understand their end users. The aforementioned points cover a lot of ground on user research and journey. These help designers better grasp the psyche and behaviour of end users.

In conclusion

There is literally no end to the number of terms designers should know. The abstract nature of design in general makes the boundaries of the field fairly hazy.

This piece covers thirty UX terms designers must know.

In order to be a designer, a professional must eventually write and speak like one. The glossary provided in this piece here is not comprehensive. However, it is a fairly wholesome introduction to the design jargon all UX professionals must know.

Main Website

The complete guide to UX terminology – All the design jargon professionals should know