The Elements of User Experience Design

Thanks to our article readers who appreciate us for previously published articles about What is UX Design?What is UI Design? and User Experience and why it matters?. Now we are going to purplish a new article “The Element of User Experience Design”. In this article, we’ll reveal what are the five elements(layer, plans) of User Experience Design?. What perks you’ll get for your company and business through it.

The understanding of “Elements(layers, plans) of User Experience Design” is fragmented across the web and mobile industry. There are thousands of articles about “What are the Elements of User Experience Design” available on the internet. It becomes more confusing when you jump from one book or article to another. Everyone presenting different and irrelevant information, but my article is going to cover the maximum and relevant information about it. Below is a breakdown of what we are going to cover the elements of user experience design.
1) Introduction
2) The five plans
3) The Strategy Plane
4) The Scope Plane
5) The Structure Plane
6) The Skeleton Plane
7) The Surface Plane

Introduction:(Meet to UX Elements)

The user experience design process is all about ensuring that no aspect of your applications happens without your conscious and explicit intent. So in design every possibility of every action, the user is likely to take under his/her expectations. Therefore the whole user experience design process breakdown into five main elements.

The Five Plans:

Most people, at one time or another, have purchased a physical product over the Web, maybe
by using a search engine or maybe by browsing a catalog(E-Commerce sites). You give the site your credit card number and your address then the site confirms that the product will be shipped to you.

Actually these results come from a whole set of decisions. If we peel away the layers of decisions, we can begin to understand how those decisions are made? (1)The Surface Plane (2) The Skeleton Plane (3) The Structure Plane (4) The Scope Plane (5) The Strategy Plane.

So these five planes, strategy, scope, structure, skeleton, and surface provide a conceptual framework about user experience. Each plane is dependent on the planes below as shown in the following picture.

The Elements of User Experience Design
The Elements of User Experience Design

A lower plane must be made before the plane above it, So each plane requires work to finish before work on the next plane. But the better approach is to have work on each plane finish before work on the next can finish. At each level, we make decisions according to problem solution and user expectations. Within each plane, the elements must work together to accomplish that plane’s goals. For example, information design, navigation design, and interface design jointly define the skeleton of a product

The Strategy Plane:

This is an abstract point where we have to find solutions to our problems. In this plane, we must understand what our audience wants from us?. And how that fit in other goals they have?. So these goals can be our business objectives. This strategy plane incorporates not only what the businessman wants to get from the site, but what the users want to get out of the site as well. Due to users want to buy products, and we want to sell them. If we say in easy words this plane is about to find user needs and product objectives.

The foundation of successful user experience is a clearly articulated strategy. So knowing both what we want the product to accomplish for our organization, And what user want to accomplish throughout our site, Therefor we have to make decisions about every aspect of the user experience. So the most common reason for the failure of a web site is not technology or it’s not user experience either. Web sites most often fail because nobody bothered to answer two very basic questions.

1) What do we want to get out of this product?
2) What do our users want to get out of it?

Therefore more clearly we can articulate exactly what we want, and exactly what others want from us. So when we going to make our strategy we divide it into these activities, Product Objectives, Brand Identity, Success Metrics, User Needs, User Segmentation, Usability, and User Research, Creating Personas.

Strategy Plane activities:

I) Product Objectives: Product objectives are targets(goals, drivers) for product design and services. They serve as the basis for strategy, design, refinement, and launch.

II) Brand Identity: Brand identity is a set of visual aspects and conceptual associations or emotional reactions. So in brand identity, we define logos, color, and typography.

III) Success Metrics: Success metrics are brand race finish lines. So when a product has been launched, success metrics used to see whether it is meeting our own objectives and our user’s needs. Therefore success metrics are concrete indicators of, how effectively the user experience is meeting strategic goals. So it is measurement about budget, visitors per month, time per visit increase, ROI(return on investment) and CR (conversion rate), etc.

IV) User Needs: User needs are about to define just who our users are? what their goals? Whom we’re trying to reach? What type of services are we going to provide our users? So we divide our user into segmentation. User segmentation helps us understand user needs better by dividing the entire audience into smaller groups of people with shared needs and common characteristics.

V) Usability and User Research: User research is devoted to collecting the data needed for a specific group of users. So for user research we do, surveys, interviews, user tests or field studies are more appropriate for understanding specific aspects of user behavior and interaction with your product. Therefore usability is quality to provide good services and ease of use. For this UX designer do user testing, card sorting, and task analysis.

VI) Create Personas: A persona is a fictional character constructed to represent the needs of a whole range of real users. Therefore personas help to find who our users? Personas can help ensure that you keep the users in mind during the design process.

The Scope Plane:

The scope plane is a valuable process in which we gather functional specifications and content requirements for our applications. With a clear sense of what we want and what our users want. Strategy becomes scope when you translate user needs and product objectives into specific requirements, and functionality the product will offer to users.
When we going to make our scope we divide it into these activities, Requirement Gathering, Functionality Specification, and Content.

Scope Plane activities:

I) Requirement Specification: Requirements at the beginning of the project to describe what the system should do. There are two main reasons to define the requirement for our system
(i) What you are building?
(ii) What you are not building?

II) Functionality Specification: On the functionality side we’re concerned with what would be considered the feature set of the application.

III) Content Specification: When we talk about content, we’re referring to text. But images, audio, and video can be more important than the accompanying text.

The Structure Plane:

The skeleton is a site map or top-down structure of a site. So the skeleton might define the placement of the interface elements on our checkout page. The structure would define how users got to that page, and where they could go when they were finished there. Therefore the skeleton might define the arrangement of navigational elements, allowing the users to browse categories of products. When we going to make our structure we divide it into these activities, interaction design, and information architecture.

Structure Plane activities:

I) Interaction Design: Interaction design is concerned with describing possible user behavior and defining how the system will accommodate and respond to that behavior. So interaction design concerns the steps involved in performing and completing tasks. Therefore interaction design relates to the conceptual model and Hierarchical task analysis

(i) Conceptual Model: It allows you to make consistent design decisions, A conceptual model can refer to just one component of a system or to the system as a whole. So it’s more important because conceptual models are used consistently throughout the development of the interaction design.
(ii) Hierarchical task analysis: It allows which step taken first from the conceptual model (component) to accomplish the task.

II) Information Architecture: Information architecture (also known as IA) is the foundation for great Web design, mobile design and for any other software. So information Architecture shows a complete road map or site map of your application, it provides information about navigation bar and interaction between pages of site or application. Information Architecture is a model of an application. There are two main approaches to information architecture.

i) Top-down approach
ii) Bottom-up approach

The Skeleton Plane:

The Surface plane is about an arrangement and placement of web elements buttons, controls, Toggles, photos, and blocks of text. The skeleton also called interface design. Therefore the skeleton is designed to optimize the arrangement of the elements for maximum effect and efficiency. So skeleton is the wireframing of your applications, it’s a purpose to find product element easily. When we going to make our skeleton, we divide it into these activities, Interface design, Navigation design, Information design, and wireframes.

Skeleton Plane activities:

I) Interface Design: Interface design is all about selecting the right interface elements for the task the user is trying to accomplish and arranging them on the screen in a way that will be readily understood and easily used.

II) Navigation Design: Navigation design is about putting links on every page that allow users to get around on the site. Therefore navigation design of any site must accomplish three simultaneous goals:
i) First, it must provide users with a means for getting from one point to another on the site.

ii) Second, the navigation design must communicate the relationship between the elements it contains.

iii) Third, the navigation design must communicate the relationship between its contents and the page the user is currently viewing.

There are some types of navigations used for web, mobile and desktop software, global navigation, local navigation, Supplementary navigation, Contextual navigation, Courtesy navigation, remote navigation (site map and indexing).

III) Information Design: Information design comes down to making decisions about how to present information so that people can use it or understand it more easily. Sometimes information design is called visual design. So information design explains which information comes first and which meaningful icon we should use.

IV) Wireframes: Wireframe is a page layout where information design, interface design, and navigation design come together to form a unified, cohesive skeleton. Wireframes capture
all the skeleton decisions in a single document, that serves as a reference for visual design work and site implementation. Therefore wireframes can contain varying levels of detail, this one is pretty light.

The Surface Plane:

The surface plane is a sensory design. So here, content, functionality, and aesthetics come together to produce a finished design, that pleases the senses while fulfilling all the goals of the other four planes. On the surface, you see a series of web pages, made up of images, text, illustration, graphic work and other animation work. Some of these images are things you can click on, performing some sort of function such as taking you to a shopping cart. Therefore on the surface plane, we ensure visual design making Sense.

Surface Plane activities (P1):

I) Visual Design: In visual design, we determine how that arrangement should be presented

II) Making Sense: Determining how everything about our design will manifest to people’s senses. Which of the five senses (vision, hearing, touch, smell, and taste).

i) Smell and Taste: In design, this sense ensures what new material( banner, images, video, etc ) we will use for our products, which will be tasty, fragrance and attractive for our user.

ii) Touch: In design, this sense ensures, what will be the shape of elements (cards shape, image shape) used in the layout. Such as the shape of a card rounded (radius) and square.

iii) Hearing: In design, this sense ensures different beeps, buzzes, notification, and messages to inform the user.

iv) Vision: In design, this sense ensures to apply a visual guideline to our design. So you might think visual design should be simple, sophistication, aesthetics and eye-catching. This is necessary because visual design plays a virtual role in every kind of application.

III) Follow the Eye: One simple way to evaluate the visual design of a product is “Follow the Eye” by asking, where does the eye go first? What element of the design initially draws the users’ attention? Are they drawn to something important to the product’s strategic objectives?

IV) Contrast: In visual design, one more primary guidelines that we use to draw the user’s attention is “contrast”. So contrast is vital to draw the user’s attention to essential aspects of the interface, contrast helps the user understand the relationships between the navigational elements on the page, and contrast is the primary means of communicating in information design.

V) Uniformity: Uniformity(consistency) in your design is an important part of ensuring that your design communicates effectively without confusing or overwhelming your users. Therefore uniformity comes to play different aspects of visual design. For example, keeping the sizes of elements uniform can make it easier to recombine them into new designs as you need them.

Surface Plane activities (P2):

VI) Color palette: Color can be one of the most effective ways to communicate an application. So a color palette should incorporate colors that lend themselves to a wide range of uses. Therefore in most cases, brighter or bolder colors can be used for the foreground of your design.

VII) Typography: The use of fonts or typefaces to create a particular visual style. Use a simple font is better. Because our eyes quickly get tired trying to take in lots of text in a more ornate typeface. That’s why simple fonts like Helvetica or Times are so widely used.

VIII) Mock-Up or Design comp: Comp is short for composite, a visualization of the finished product built up from the components that have been chosen.

IX) Style Guide: The style guide will also include standards specific to a particular section or function of a product. So the overall goal of the style guide is to provide enough detail to help people, make smart decisions in the future because most of the thinking has already been done for them. So creating a style guide is also helpful in imposing design consistency across a decentralized organization.

Why I write this article?

Because, there is seemingly a clear need for more articles on “The elements of user experience design”, I found a few experts bothering to explain “The elements of user experience design”. So I decided to write this article because I wanted there should be an article where the reader learns most easily and efficiently. I hope this article will be helpful for beginners and experts, this article takes you one step ahead in the UI/UX field. If you like it please comments on and share it with your friends. If you need UI/UX services to let us contact. You can check out our projects. Stay in touch with us LinkedinPinterestDribbble, Behance.

Open rights for students and teachers so they can use this article for their assignments and other documents. We appreciate it if you give a reference to our site in your documents.

Leave a Comment

Your email address will not be published. Required fields are marked *