ui/ux design glossary - mentormate.com · ui/ux design glossary 55 terms to now when designing...
Post on 19-Jul-2020
11 Views
Preview:
TRANSCRIPT
UI/UX Design Glossary55 Terms to Know When Designing
Impactful Software
mentormate.com | 3036 Hennepin Avenue, Minneapolis, MN 55408 | 612.823.4000
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
General01.
2
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
Processes02.
9
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
User ResearchMethods03.
15
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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.
User Research Methods
Competitive Analysis03.
17
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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.
User Research Methods
Journey Map03.
?
18
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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 Research Methods
User Flow03.
19
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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 Research Methods
User Interview 03.
20
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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 Research Methods
User Persona03.
21
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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.
User Research Methods
Rapid Prototyping03.
22
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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.
User Research Methods
A/B Testing03.
23
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
User Interface Design 04.
24
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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.
User Interface Design
Grid Systems04.
26
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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.
User Interface Design
Responsive Design04.
27
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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.
User Interface Design
Visual Design04.
28
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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.
User Interface Design
Branding04.
29
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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.
User Interface Design
Iconography04.
30
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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)
User Interface Design
Typography04.
31
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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 Design
User Interface Elements04.
32
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
Usability05.
33
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
Principles, Guidelines, and Libraries 06.
38
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”
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.
Principles, Guidelines, and Libraries
Best Practices06.
40
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”
Principles, Guidelines, and Libraries
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”
Principles, Guidelines, and Libraries
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
07. DesignConcepts
43
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”Fidelity is the degree of "trueness" a design has to the product's final form.
Design Concepts
Fidelity07.
44
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
DesignDeliverables 08.
48
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”
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
UI/UX Design Glossary || 55 Terms to Know When Designing Impactful Software
”
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
top related