ui/ux design glossary - mentormate.com · ui/ux design glossary 55 terms to now when designing...

UI/UX Design Glossary55 Terms to Know When Designing

Impactful Software

mentormate.com | 3036 Hennepin Avenue, Minneapolis, MN 55408 | 612.823.4000

https://www.linkedin.com/company/mentormate

https://twitter.com/MentorMate

https://www.facebook.com/MentorMate

https://plus.google.com/105724598001589800184/

https://mentormate.com/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


01. General

02. Processes

03. User Research Methods

04. User Interface Design

05. Usability

06. Principles, Guidelines, and Libraries

07. Design Concepts

08. Design Deliverables

Table of Contents

02

09

15

24

33

38

43

48

UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software

While software design is refined throughout development cycles, its prominent role at kick-

off means getting it right the first time is essential to the project’s smooth progression.

Any pains project stakeholders can take to come to the table prepared to understand, discuss,

and strategize a better way to deliver value to end users will be rewarded when those users

love the final product.

Use this resource to brush up on your UI/UX terminology and start an informed

conversation with your design team.

Intro

1

https://mentormate.com/blog/7-things-business-leaders-can-learn-ux-ui-designers/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms

https://mentormate.com/blog/7-things-business-leaders-can-learn-ux-ui-designers/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


General01.

2


Interaction design seeks to optimize the user's ability

to achieve his or her goals when using software.

Designers consider the words, visual representations,

timeframes, animations, and the general aesthetics

of experiences when refining the design elements that

live at the intersection of user experience design and

user interface design. For example, if a user on a to-do

list application swipes a task to mark it as complete, she

might hear a chime — an interaction design element that

makes the experience more engaging.

General

Interaction Design01.

3

https://mentormate.com/blog/pt-2-get-ready-uxui-trends-2018/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


Information architecture is the process of

categorizing and organizing information in an

interface to facilitate the user's pathway therein.

IA usually comes into play once the design team

finishes its discovery sessions with a client, but before

the actual design process begins.

Asking questions that clarify the user’s identity,

concerns, and end goals helps the team to organize

content into meaningful classifications that inform the

software's user experience (UX).

General

Information Architecture (IA)01.

4

https://mentormate.com/blog/how-information-architecture-can-conquer-any-software-requirements-template/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


A sitemap is a model of a website's content. It's designed to help both users and search engines

navigate the site.

A sitemap can be a hierarchical list of pages organized by topic, an organization chart, or an XML

document that provides instructions to search engine crawl bots.

General

Sitemap01.

5


Gamification is the process of taking a mobile

application or website and integrating game

features and patterns that encourage participation,

engagement, and user loyalty.

Gamification takes the data-driven techniques that

game designers use to engage players and applies

them to non-game experiences to motivate the user to

take action.

Gamification can develop business-consumer

relationships in ways that benefit both parties.

General

Gamification01.

6


Wireframes are skeletal versions of an interface that describe user flows, features, and

functionality. In terms of look and feel, they often include only the bare minimum.

While wireframes can be used in user testing — a practice sometimes called rapid prototyping — that

is not always the reason why designers use them. Wireframes often feature at the start of the

design process because they make it easy to explore quickly multiple design options. From there,

once the best option is determined and all functionality is accounted for, designers move into visual

design, which is more time-consuming. Thus, wireframes spare design teams wasted effort.

People often use the term "mockup" to refer to something they consider rough or unfinished, like

wireframes. But since mockup can mean different things to different teams, we choose to avoid using

this word altogether.

General

Wireframes01.

7


A prototype in the design process enables teams to focus on wide-scale iteration and feedback

gathering to solve pain points before committing to create and deliver high-fidelity designs.

Prototypes replace long formal design reviews with rapid feedback sessions, where the assets under

critique may be drawn in a notebook or on a whiteboard.

General

Prototype01.

8

https://mentormate.com/blog/rapid-prototyping-add-value-software/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


Processes02.

9


Agile is a method of project management used frequently in software development. Agile is

characterized by the division of tasks into short phases of work and frequent reassessment and

adaptation of plans.

User stories play a critical role in the Agile design and development. They describe who will be

using a feature, what they will be doing, and why. Design teams and Solutions Architects must

work closely with clients and product owners to translate their needs into business requirements, and

eventually user stories — the foundation of any successful project.

User stories are typically written like this:

As a [user role] I want to [perform some function] so that [some value is realized]

Processes

Agile02.

10

https://mentormate.com/blog/how-to-write-user-stories/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


Scrum is an Agile way to manage a project, usually

in software development.

At MentorMate, the design team uses Scrum as a

framework for managing a project.

Tasks are divided and organized for teams to

accomplish within a two-week iteration, called a

"sprint."

Frequent short meetings, or "scrums," allow people

to connect, identify, and eliminate any blockers that

might hinder progress.

Processes

Scrum02.

11

https://mentormate.com/blog/scrum-overview-agile-temptations/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


The purpose of the discovery session is to understand the client's expectations of what the user

experience should be outside of any in depth technical considerations.

Processes

Discovery Session02.

12


Lean UX is a design process that seeks to improve upon traditional design processes and requires

fewer UX deliverables.

Lean UX teams gather feedback from users upfront and increase the collaboration with all parties

(business-side stakeholders, development teams, etc.) throughout the software development lifecycle.

Lean UX allows design, development, and product teams to create, validate, and revise faster

while sparing everyone time, money, and sanity.

Processes

Lean UX 02.

13

https://mentormate.com/blog/speed-time-market-rapid-mobile-app-development-process/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


Small group sessions that involve diverse stakeholders are ideal for evaluating design decisions.

During participatory design meetings — like discovery or working sessions — UX teams can ask

questions to explore the needs and patterns a product must support.

These sessions are a time of intense dialogue and collaboration. Businesses working with design teams

that schedule weekly or bi-weekly meetings with project stakeholders share feedback and iterate faster.

Processes

Participatory Design 02.

14


User ResearchMethods03.

15


Heuristic evaluations assess whether software adheres

to UX best practices and allows users to proceed

confidently through an application's interfaces.

It does not require specialized tools and is therefore a

tactic all design teams can and should pursue.

The "heuristics" are points against which to evaluate

the quality of the software being developed.

They might include visibility of system status, user

control, or minimalist design to name a few.

User Research Methods

Heuristic Evaluation03.

16


A competitive analysis reviews a client's competitors

and their business environments.

By evaluating competing businesses' strengths and

weaknesses, a company can begin to formulate how to

leverage its own assets to its advantage as it develops

new products or services.

Such an assessment is usually part of a company’s

business or marketing plan and provides context for

strategic growth initiatives.


Competitive Analysis03.

17


Creating a simple flow chart that anticipates the user’s pathways is key.

Design teams that define the main ideas and purposes of a product can proceed confidently in

their design process and respond adeptly to hurdles in its development.

Parting with the notion that user experiences are linear and embracing the model where many

components (wearables, smartphones, etc) surround one idea may help designers meet user needs in

innovative ways. Using a journey map as a tool allows designers to think beyond the constraints of

the traditional site or application map.


Journey Map03.

?

18


A user flow is a simple diagram that shows how the

user will move throughout the application.

This diagram is very important as it shows the main

steps the users will have to take in order to achieve their

goals in the smoothest possible way.

Depending on the product, there might be specific user

flow diagrams for each user role, since they typically

represent the actions and processes the user should

take from start to end.


User Flow03.

19


User interviews allow designers to gain a deeper

understanding of users' attitudes, beliefs, desires,

and experiences.

These are often short, last less than an hour, and can

take place face-to-face, by phone, video conference, or

instant messaging.

Users are typically asked to rate or rank choices for

site content.


User Interview 03.

20


User personas are designed to be reliable and realistic

representations of key segments of a target audience.

They should be based on qualitative and some

quantitative user research and web analytics.

Personas help to focus decisions surrounding design

components by adding real-world factors to the

conversation.

They also offer a quick and inexpensive ways to test

and prioritize features throughout the development

process.


User Persona03.

21


The rapid prototyping process is driven by repeating cycles of prototyping, reviewing, and

refining of design assets.

The steps can repeat for as long as necessary or as delineated by project requirements, scope,

and budget. The efficiency of this process stems from designers’ ability to focus on delivering value by

identifying usability issues and fixing them quickly.

Aesthetic considerations are postponed until after several rounds of user testing have indicated

meaningful pathways the UX must support.


Rapid Prototyping03.

22

https://mentormate.com/blog/rapid-ui-prototyping-match/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


A/B Testing is a low-risk and cost-effective form of

design experimentation.

Two different versions of a design are used to determine

which one comes closer to fulfilling a business need on a

website or other software product.

Conducting A/B testing on a design validates or invalidates

assumptions made about end users' interactions with a

design element.

It gathers statistical data relating to user behavior and is

therefore a reliable way of optimizing UX design.


A/B Testing03.

23


User Interface Design 04.

24


A design system offers design teams a toolkit of assets that can be used to expand existing

applications or create new ones. More than just a style guide, the design system incorporates the

"why" behind the reusable UI elements.

• Components — Typography, color, imagery, size, and spacing are essential components of a design

system that can be repeated throughout a brand's digital ecosystem.

• Patterns — Taking stock of repeated UI elements (buttons, forms, arrows, image settings) will help

to establish consistent UIs in every interface.

• Templates — As the design system is fleshed out over time, saving arrangements of design

components into templates can help design teams save time in future design engagements with

brands that have established design systems. Furthermore, if those engagements involve the same

developers, they can anticipate the features their code must support thanks to the templated UIs.

User Interface Design

Design System04.

25


A grid system is a set of measurements designers use to align and size objects within an

interface.

There are many variations of grid systems, so it is important for designers to discuss how a particular

grid coheres with a development framework. For example, a mobile-responsive website requires a

specific code base, which will influence the designer's choice of formatting.


Grid Systems04.

26


Websites with a responsive web design adapt to any device screen, adjusting their dimensions

and design features accordingly.

Responsive web design is essentially the default requirement for any website since so many users

access web pages from their phones. From a user’s point of view, responsive websites are preferable

since they reformat content to any device without changing the website URL.

It's also better for businesses for whom SEO is a concern. Google will not index a responsive

website’s mobile version separately.


Responsive Design04.

27

https://mentormate.com/blog/modern-web-application-architecture/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


Visual design aims to shape the aesthetic and improve user experience of a product through

illustration, photography, typography, blank space, layout, and color.

When designers approach visual design in software, they consider a variety of principles such as unity,

Gestalt properties, space, hierarchy, balance, contrast, scale, dominance, and similarity.


Visual Design04.

28


Effective digital branding of software requires an understanding of the scope of user experience

and the continuum of platforms. Subtle branding that emphasizes software functionality

demonstrates respect for the user, which leads to long-term and sustained engagements with a

company, its products, and its brand. Native apps allow for a heavily-branded experience while

integrating with the host device’s functionalities (camera, microphone, etc.).

While native apps create an excellent opportunity for companies to engage the end user through

custom digital branding, the capabilities of hybrid software require teams to balance branding

with delivering a cohesive and value-driven experience.

Traditional branding techniques don't translate directly to software, yet the experience they offer must

cohere with branding in the physical world. Whether developing native, hybrid, web, or white label

software, heavy-handed marketing efforts in an application can sour a user's perception of a brand.


Branding04.

29

https://mentormate.com/blog/translate-visual-identity-software/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


Iconography is a visual language used to represent features, functionality, or content. Icons are

meant to be simple, visual elements that are recognized and understood immediately by the user.

Icons used in software should be consistent with designed elements used throughout the application.


Iconography04.

30


Typography is the visual art of creating written

words. There are countless fonts available in the digital

world and they can be categorised in 3 groups: serif,

sans-serif, and art.

If a design concept is based on a typography, the

design needs to be focused on the following points:

• Type

• Size

• Kerning (the space between letters)

• Leading (the space between rows of text)

• Combination (the spaces between titles, subtitles,

and content)


Typography04.

31


User interface designers typically create a system

that establishes consistent and reusable interaction

patterns and visual cues.

Designers will typically gravitate towards a few

archetypical models of elements relating to

navigational components, containers, and input

controls, for example.

Reusing existing user interface elements is a simple

way to ease the user's journey through an application.


User Interface Elements04.

32


Usability05.

33


Usability refers to the ease with which a user can interact with software and its features. At the

same time, from a business perspective, it also refers to how smoothly a user is routed to an app’s

Call to Action and achieves the objectives it's meant to support.

While it’s a critical performance measure, it’s often difficult to gauge since it can involve several

variables. UX teams rely on user feedback to measure an application's usability, using different

surveys and direct user commentary.

They also rely on usability tools that record user interactions with software, which help to identify key

areas through heat maps, and other analytics.

Usability

Usability05.

34


Navigating the web isn’t a one-directional process. It’s a sensory experience, but not everyone

senses the web the same way. Every user has varying abilities that may prevent them from fully

experiencing software.

There are four major disability categories: visual, auditory, motor, and cognitive.

Each ability differential can be solved with creative and empathetic design choices following standards

set forth by the Web Content Accessibility Guidelines (WCAG). Within the guidelines, there are three

levels of adherence websites can follow. Level A, the most straightforward to implement, all the way up

to Level AAA, the most complex.

Usability

Accessibility05.

35

https://mentormate.com/blog/8-accessibility-driven-modern-website-design-best-practices/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms

https://mentormate.com/blog/8-accessibility-driven-modern-website-design-best-practices/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


The principles of UCD ensure that the software experience always focuses on the user's needs.

By involving users throughout the design and development stages through user research and usability

testing, for example, product teams ensure they keep the end user's priorities top-of-mind while

providing highly valuable information to the product owner.

Usability

User Centered Design05.

36


Inclusion addresses a broad range of issues including access to and quality of hardware, software, and

Internet connectivity; computer literacy and skills; economic situation; education; geographic location;

and language — as well as age and disability.

A successful software solution can't afford to turn away potential users. Therefore, skilled designers

prioritize designing products that are usable by everyone to the greatest extent possible, without the

need for adaptation.

Usability

Inclusive Design05.

AKA Universal Design, or Design for All.

37


Principles, Guidelines, and Libraries 06.

38


”

Principles, Guidelines, and Libraries

Design Thinking06.

Design thinking is a problem-solving approach based on a deep understanding of users' needs

and the solutions that work best for them.

The design thinking method follows six stages:

• Empathy - Conduct research to understand users' thought processes and their motivation for using

a product.

• Define - Collect and analyze the research gathered, defining where users encounter problems and

how designers can help them accomplish their goals.

• Ideate - Brainstorm around the user's pain points with the goal of choosing a few to explore more

deeply.

• Prototype - Using the findings and ideas from the previous stages, create wireframes and

prototypes to visualize the new product.

• Test - Evaluate prototypes through user testing to determine which idea works best from the user

perspective.

• Implement - Based upon user and client feedback, implement the solution that has been developed

thus far.

39


”

Experience and hard-earned knowledge contribute

to a rock-solid understanding of the best ways to

achieve a goal — to the extent that one day they

become a team's standard procedure.

Whether it's determining in what stage wireframes

are the most useful or color usage guidelines,

best practices may vary from one design team to

another and could be influenced by their respective

specializations and expertise.


Best Practices06.

40


”


Framework06.

Software frameworks are environments in which functionalities can be built with user-written code.

They provide standard ways to build and launch software.

• Angular — An open-source front-end web application platform led by the Angular Team at Google.

• Bootstrap — A free, open-source web development framework that uses HTML- and CSS-based

design templates for interface components such as navigation, forms, buttons, and typography.

• Material Design — A visual design language developed by Google. It leans heavily on what is

referred to as its "card motif," with transitions and responsive animations helping to guide users

through interfaces. Material Design unifies Google's branded experiences across various platforms

and devices of different sizes.

• Metro — Microsoft’s design language that emphasizes uncluttered design, typography, and

simplified icons.

41


”


Human Interface Guidelines06.

This set of conventions guides designers in a way that ensures that the products they create are

intuitive, consistent, and helpful to end users.

Access parameters, visual design elements, and feature behavior patterns are designed to be consistent

across a given software ecosystem, whether that means an operating system or a company's various

digital endpoints.

42


07. DesignConcepts

43


”Fidelity is the degree of "trueness" a design has to the product's final form.

Design Concepts

Fidelity07.

44


An interstitial screen is created by designers to illustrate

the capabilities supported within a given interface.

An interstitial screen can convey the appearance of

screens after the user interacts with certain features,

like changing a filter or hovering over a feature.

Design Concepts

Interstitial Screen07.

45


”

Designers use key screens to capture the main moments of a user's experience within a specific

software interface.

A "dashboard" could be identified as a critical screen and is therefore prioritized in the designer's work.

Design Concepts

Key Screen07.

46


”User research engages target audiences to validate a concept. When building new software

solutions, user research is critical to understanding and resolving user needs, improving pain points, and

increasing the overall efficiency of a software solution.

Design Concepts

User Research07.

47

https://mentormate.com/blog/research-ux-design-process/?utm_source=eBook&utm_medium=PDF&utm_campaign=UX%20Terms


DesignDeliverables 08.

48


”

Low-fidelity wireframes support the efforts of designers and developers early in the process

of creating software. Designers use low-fidelity wireframes to determine how users will move

between different pages and content. Developers reference them to write code that supports the

intended user experience.

High fidelity wireframes are fleshed out with more refined content and visual assets. At first glance they

are often more appealing to clients. But high-fidelity wireframes invite premature aesthetic critiques

of the solution. Experienced designers understand how low-fidelity wireframes are low-cost, yet

efficient ways to test overall usability.

Design Deliverables

Low/High Fidelity (Wireframes) 08.

49


”

User Experience designers target users' needs and pain points by optimizing pathways that

anticipate users' instincts.

They are also responsible for conducting user testing to validate the essential reason behind the

software solution in question.

UX designers will feature prominently early on in design engagements, especially when user journeys

have yet to be mapped and validated.

These skills are important to include in teams where the client’s needs are complex and expansive, like

when stakeholders look to build an internal administrative portal for an enterprise business.

Design Deliverables

User Experience 08.

50


”

User interface design targets the visual features

with which a user interacts on a device.

User interfaces support the user's interactions with an

application or a website.

The growing dependence of many companies on web

applications and mobile applications has led them to

increase spend on UI in an effort to improve the user's

overall experience.

Design Deliverables

User Interface 08.

51

mentormate.com | 3036 Hennepin Avenue, Minneapolis, MN 55408 | 612.823.4000

Digital Ideas Accelerated

Great design makes for intuitive software experiences. Work with one of our design experts to deliver just that to your users.

|

Twitter: @MentorMate www.mentormate.com|

52


https://www.linkedin.com/company/mentormate


https://www.facebook.com/MentorMate

https://plus.google.com/105724598001589800184/


https://mentormate.com/?utm_source=eBook&utm_medium=PDF&utm_campaign=Agile%20Redux


mailto:Twitter: @MentorMate



ui/ux design glossary - mentormate.com · ui/ux design glossary 55 terms to now when designing...

Documents