Elements Of UX Design Infographic - UX And UI Tools, Methods And More (2024)

The elements of UX Design is a neat mental model to understand how all the pieces of design link together to deliver the user experience. This elements of UX design infographic from Bankai illustrates no only the elements but how it fits with UI design.

If you’re confused between UX and UI then you’re not alone. There are loads of terms in design that have sprung up and often leave a layperson wondering what they are about.

In simple terms, UX Design refers to the termUser Experience Design, whereas UI Design stands forUser Interface Design.

What Is UX Design?

Don Norman, a cognitive scientist and co-founder of theNielsen Norman Group Design Consultancy, is credited with inventing the term in the late 1990’s.

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

• User Experience Design is the process of development and improvement of quality interaction between a user and all facets of a company.
• User Experience Design is responsible for being hands-on with the process of research, testing, development, content, and prototyping to test for quality results.
• User Experience Design is, in theory, a non-digital (cognitive science) practise, but used and defined predominantly by digital industries.

As UX design has evolved so too have the tools to help understand customers at a much deeper level. As an example, a customer journey map canvas can be used to map touchpoints and understand how customers reacted to them.

Understanding the elements of UX design involves a mix of psychology, social sciences, design and marketing.

What is UI Design?

User Interface Design is also a multi-disciplinaryrole.

It is responsible for the developmentof a product’s development, research, content and layout intoan attractive, guiding and responsive experience for users.

User Interface Design is also a field that unlike UX, is mainly adigital profession, as per its dictionary definition.

• User Interface Design is responsible for the transference of a brand’s strengths and visual assets to a product’s interface as to best enhance the user’s experience.
• User Interface Design is a process of visually guiding the user through a product’s interface via interactive elements and across all sizes/platforms.
• User Interface Design is a digital field, which includes responsibility for cooperation and works with developers or code.

Here is an easy visual way to think of the difference between them.

Elements of UX Design

Much of the original focus of UX design was, and in some instances still is, based on web design.

However, the impact and value of user experience design extends far beyond the context of the Web.

Each interaction with a company involves an element of UX design.

What’s the difference between designing a product and designing a user experience? Many products have multiple variations and are sold through multiple channels.

The more complex the product the more information that people need to make a decision to buy. However, overloading customers with too much information in one go creates a bad experience.

Layering the information, mapping the user experience and understanding the customer’s decision-making process is critical to effective UX design.

Presenting this information so that it makes it easy for customers to understand is important.

On a wider and more strategic level, the environment in which the user investigates information about a product is a part of the user experience, from a chat on a website to the pdf downloaded on product features to the video showing it.

Products purchased often need support, instructions and so involve many more contextual points for interaction with a user beyond the product itself.

The user experience extends beyond the transaction. Despite this many companies don’t plan beyond the transaction point.

By using the growth marketing blueprint canvas you can start the process of evolving your UX design thinking and planning to how you retain customers.

The Original Elements of UX Design Explained

The diagram above was initially conceived byJesse James Garrett and can be found here.There are five dependent layers, each level builds on the level before it, and they start with abstract level towards concrete one(from bottom to top).

1. Strategy
2. Scope
3. Structure
4. Skeleton
5. Surface

#1. Elements of UX Design – Strategy

The reason for the product, appor the website. This is identifying its purpose, the context, and who it is the target user group(s).Furthermore this looks atwhy people would use it, why they need it, what value it offers and what sort of interactions. The goal here is to define the user needs and business objectives.

This could be done through a number of differentStrategic Research Processes.

#2. Elements of UX Design –Scope

Defines functional and content requirements. What are the features, and content contained in the application or product? The requirements should fulfil and be aligned with strategic goals.

#3. Elements of UX Design –Structure

Defines how a user interacts with the product, how the system behaves when the user interacts, how it’s organised, prioritised, and how much of it.

The structure is split into two components, Interaction Design&Information Architecture.

• helps people to accomplish their goals.
• effectively communicates interactivity and functionality(what user can do).
• informs the user about state changes(the file has been saved, or any feedback), while they interact.
• prevents user error or mistakes, like the system asks the user to confirm potentially harmful action(i.e. deletion).

Good Information Architecture

• organises, categorises, and prioritises the information based on user needs and business objectives.
• makes it easy to understand and move through the information presented.
• flexible to accommodate growth and adapt to change.
• appropriate for the audience.

Elements of UX Design Infographic

User experience is not about the inner workings of a product or service. User experience is about how it works on the outside, where a person comes into contact with it. When someone asks you what it’s like to use a product or service, they’re asking about the user experience. Is it hard to do simple things? Is it easy to figure out? How does it feel to interact with the product?

This infographic explores some of the tools, devices, controls, visual design, site mapping involved in the UX design elements.

PDF

Other Related Articles and Free Tools

• Customer Segmentation
• Market Segmentation
• Marketing Personas
• Free Persona Canvas
• Free Customer Journey Map