User Experience Design

By

|

Created on

|

Last revised on

Reading time: 9 min

What is User Experience (UX) Design?

User experience (UX) means “user’s perceptions and responses that result from the use and/or anticipated use of a system, product or service”. [1] Here we focus on the user experience in the digital world.

Always remember that UX design must be an ongoing effort, continually learning about users, responding to behaviours, evolving the product or service.

In addition, familiarize yourself with the factors that influence user experience.

The Process of Creating a Positive User Experience

Jesse James Garrett has created a conceptual framework for talking about user experience problems and the tools we use to solve them. This framework includes five planes – strategy, scope, structure, skeleton and surface. [2, 3] Naturally, in reality the lines between these areas are not so clearly drawn.

On each of these planes, the issues you deal with become a little more concrete. And each plane is dependent on the planes below it.

Strategy

The basis of a successful user experience is a clearly articulated strategy. Strategy should always incorporate

  1. Product objectives (what the people running the product want to get out of it)
  2. User needs (what the users want to get out of it)

Knowing these goals informs the decisions you must make about every aspect of the user experience. Therefore, research and analyse these goals carefully. You can also use service design techniques, and specific customer experience and service design tools in this process.

Important things to keep in mind:

  • Key performance indicators (KPIs): make sure the goals are always measurable.
  • Documentation: product objectives and user needs are often defined, on a higher level, in a formal strategy document or vision document.
  • Transparency: always make sure all participants – designers, developers, project managers – have access this documentation to make informed decisions about their work.
  • An iterative approach: revise and refine your strategy systematically.

Scope

In order to transform the strategy to scope, you need to translate user needs and product objectives into specific requirements for what content and functionality the product will offer to users.

This process forces you to address potential conflicts and rough spots in the product while the whole thing is still hypothetical.

Additionally, it gives the entire team a common language for talking about the work and a reference point for all this work to be done.

Structure

Next you need to describe how the pieces fit together to form a cohesive whole. In other words, you must develop a conceptual structure for the product.

The scope gets structure through interaction design and information architecture:

  • Interaction design is about describing possible user behaviour and defining how the system will accommodate and respond to that behaviour.
  • Information architecture is about structuring information so that the users can understand and use it.

The structure should be appropriate and flexible (must be scalable). A good structure means intuitive access to content.

Depending on the complexity of the project, the documents needed to describe the structure of a product can vary substantially. However, the major documentation tool for information architecture or interaction design is an architecture diagram, which is a visual representation of the structure.

Skeleton

The next step is to further refine the structure. This means identifying specific aspects of interface, navigation, and information design that will make the structure more concrete.

  • Interface design involves providing users with the ability to do things – it is 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 easily understood and used.
  • Navigation design involves providing users with the ability to go places – on every page, it is vital to communicate to users where they are and where they can go.
  • Information design involves communicating ideas to the user. Information design comes down to making decisions about how to present information so that people can use it or understand it more easily. It can be visual, or it can involve grouping or arranging pieces of information.

These three elements of the skeleton plane are closely bound together and form a unified page layout. Page layout document is called a wireframe.

The level of detail varies but wireframes rarely contain colour, images, or styling. Pencil sketches with sticky notes attached might be enough for a small team. However, when there are more people (and possibly locations) involved, using a dedicated tool is probably a good idea.

The number of wireframes depends on the complexity of the project. You probably will not need a wireframe for each screen, however.

Surface

Finally, you need turn your attention to those aspects of the product your users will notice first: the sensory design.

Visual design

Every experience we have fundamentally comes to us through our senses. Which of the five senses (vision, hearing, touch, smell, and taste) you can employ depends on the type of product you are designing.

From these five senses, visual design plays a role in virtually every kind of product there is – therefore vision stands out of from the five senses above. Visual design is the process of improving the user interface and user experience through visual elements and effects. In other words, it focuses on the aesthetics of a website or any other type of digital design.

Visual mock-up or design comp is a visualization of the finished product. Comp is short for composite.

Documentation

Over time, the reasons for the design decisions made fade from memory. In addition, people eventually quit their jobs, and walk away with the knowledge about how a product gets designed and built on a day-to-day basis. Therefore, always make sure you have appropriate documentation regarding design decisions in place:

  • Style guide: the definitive documentation of the design decisions. It defines every aspect of the visual design, including also global standards for the product. Global standards can include things like colour palettes, typography standards, logo treatment guidelines, or order of commonly used items – things that affect every part of the product.
  • Design System: a style guide can be a starting point for a design system, which is even more comprehensive approach – it is a collection of the reusable assets and components you use to build a digital product, and it also guides on why and how to use the design components.

Move up to

Sources