The 5 Elements of User Experience Design

Noorul Ameen

11 Dec 2018

The 5 Elements of User Experience Design

 

According to Jesse James Garrett, co-founder of Adaptive Path (Strategy and Design Consulting firm), the following are the 5 elements of User Experience Design

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

 

While converting the user & business goals into great looking product visuals, a designer goes through a beautiful journey of transforming an abstract requirement into a concrete, working model. While strategizing the product, the designer ascertains its User Needs and Business Objectives. Scoping gets Functional Specifications and Content Requirements in place. The structure defines clearly on how the Interaction Design and Information Architecture are charted with the product. Skeleton is where the designer gets to define Interface Design, Navigation Design, and Information Design. Visual Design attributes like Typography, Layout, Branding start surfacing when the designer is almost complete with this journey.

 

It is important to note that the above-mentioned elements are interdependent, i.e., the choices a designer makes on one will impact the other. As a result of this dependency, it is also essential to start defining an element when the previous element is already Work In Progress. This will reduce issues like “changing design decisions very often, taking uninformed design decisions, etc”

 

Please remember the fact that Technology has to be appropriate. The right platform is critical in delivering great experiences. Technology extends User Experience Design across multiple OS, browsers, devices and form factors. So technology needs to be inherent in how we design.

 

STRATEGY

During this phase, the experience designer ascertains the business and user goals by conducting Stakeholder Interviews, Competitor Reviews, User Research, and Existing Product Audit.

The following are some of the key questions he tries to get answers during this phase

  1. What should the product accomplish for the business?
  2. How does this product fit with the company’s business strategy?
  3. How should this product be differentiated from the product line?
  4. Why do customers use a product like this one?
  5. What do customers complain about most often?

 

When building a B2B product, the designer asks the following questions to the stakeholders

  1. Tell me about your background and role.
  2. What makes a good workday for you?
  3. What are the different groups and roles involved in the process? How do they work together?
  4. What are the biggest problems and inefficiencies?
  5. Tell me about other systems that work with this process.

 

When building a B2C product, the designer asks the following questions to the target audience

  1. What makes a good experience to you (in the context of product usage)?
  2. What things would you usually do first here? Why?
  3. How often do you use this product?
  4. What do you use it for most often?
  5. What things do you use before, during and after this product?

 

SCOPE

“Scope and Trade-offs are essential to strategy. They create the need for choice and they purposefully limit what a company offers”

– Michael Porter, Harvard Business Review

 

Defining the scope forces all players to address potential conflicts – before time is invested in designing and building. Documenting scope provides a reference point for work to be done and a common way to describe that work. Documentation doesn’t have to be epic, but just a common understanding of features, schedules, and milestones. While trade-off is necessary to scope the work, in order to deliver continuous value (the long WOW), the designer needs to figure out how to systemically impress the customers over the life of their relationship with the product.

Follow these simple steps to make this happen

  1. Pack in features upfront
  2. Unfold new experiences over time
  3. Continuously evolve and integrate

 

STRUCTURE

Interaction Design (IxD) and Information Architecture (IA) are the key components which define the structure of the product being designed.

IxD strives to create meaningful relationships between people and the products by the following

  1. It effectively communicates interactivity and functionality
  2. It reveals simple and complex workflows
  3. It informs users about state changes
  4. When done right, it prevents errors

 

IxD revolves around the following principles

  1. Consistency helps people use what they know
  2. Visibility of opportunities can invite interaction
  3. Learning is easier when predictions are accurate
  4. Feedback facilitates learning

 

IA helps organize, categorize and prioritize content. A good IA will help

  1. Navigate efficiently and effectively
  2. Discover new content on repeat usage
  3. Persuade user to perform the intended action

 

The following are the different types of Information Architectures

  1. Hierarchical Tree – Standard structure with an index page and a series of sub-pages
  2. Hub & Spoke – Central Index (Hub) and user navigate out from here
  3. Nested List – Linear path for the user to navigate to more detailed content
  4. Bento Box (Dashboard) – Displays portions of related content on the main screen
  5. Filtered View – Allows a user to create an alternate view from a specific information set

 

SKELETON

To most people, UI is the system. A well-designed UI allows people to start using it immediately with little or no help. Building the UI equals performing Interface Design, Navigation Design, and Information Design.

With the help of the following, success in UI design comes from the balance between visual form and technical function

  1. You have to give people the things they need or want
  2. You have to give it to them when and where they want it
  3. You have to deliver it in a visual format that ensures they can (and want to) access all of it


The 10 core principles for great UI design are

  1. Predictability
  2. Consistency
  3. Progressive Disclosure
  4. Intuitiveness or Single-trial learning
  5. Context & Relevance
  6. Navigability
  7. Information Hierarchy, Scent & Depth
  8. Conventions & Metaphors
  9. Occam’s razor – The simplest solution usually tends to be the correct one
  10. Hick’s Law – Every additional choice increases the time required to make a decision

 

SURFACE

The visual language indicates context and conveys information through the following

  1. Layouts
  2. Typography
  3. Color
  4. Imagery
  5. Sequencing
  6. Visual Identity/Brand

 

The following are the basic principles of effective visual design

  1. Organize – Provide the user with a clear and consistent conceptual structure
  2. Economise – Do the most with least amount of visual cues
  3. Communicate – Match the presentation to the expectations and capabilities of the user

 

I am going to detail out the above in the coming posts. So stay tuned.

 

Special thanks to Joe Natoli, Founder of GiveGoodUX.com, for inspiring me with his 26 years industry experience in User Experience Designing & Consulting.

 


Have a question?

Need Technology advice?

Connect

+1 669 253 9011

contact@hashedin.com

linkedIn youtube