Design UX Introduction#

Summary#

User experience aims to provide positive experiences for the user. Some benefits are:

  1. Reduce cognitive load on the user to complete a task.

  2. Help improve user productivity.

  3. Improve customer loyalty.

  4. Help improve the customers’ journey to ensure business success.

UX design process summary#

Clever user experience design starts by following a simple process of

  1. Identifying the users’ problem.

  2. Listening and steering ideas to the solution.

Using Who, What, Why, How and When logic, we can build a simple design framework to get started. Some ideas are listed below.

  1. Who has the problem?

    1. end-users,

    2. a business group or

    3. others.

  2. What is the problem?

    1. Can the problem be solved with a UX design solution?

    2. What features will solve the problem?

  3. Why do users need this solution?

    1. Has the need been well defined?

    2. Has the benefit been well defined?

  4. How will the solution be implemented?

  5. When will the solution be required?

    1. This stage is for budget and resource estimates.

UX Design process detail#

Who#

  1. Getting to know the users allows you to understand their needs and gives them a voice in the solution.

  2. Create a user persona representing a particular user of the product or service you are designing.

What#

The design process may combine some or all of these suggestions.

  1. Conduct business representative interviews to understand the business needs. are under consideration?

  2. Conduct user interviews and, where possible, spend time with them interacting with their existing system.

  3. Write short descriptions of the features the user would like and the problems it will solve.

Why#

Clearly define each “problem” and each “benefit” in a report from information gathered in the “What” step.

How#

Some things to help complete this step are:

  1. Functionality mapping: This is a hierarchy of pages and subpages. Functionality maps can help accurately map user workflows.

  2. Wireframes: Visual guides to how the solution looks and feels. Users can use wireframes to provide input to remove useability issues before the development process begins.

  3. Prototype: A mockup of the final product.

  4. User testing: Users have the prototype to test and resolve issues before going to development.

When#

Often this is the first thing you need to understand; it can drive all the other steps timeframes, resource allocation and so on.

UX Design Tips#

Here are eight tips to help improve the UX design process:

  1. Rely on a design system, for example, Figma.

  2. Create a natural flow through the User Interface.

    1. Starting left and moving right is one natural flow style; there may be others more valuable. What’s important is to follow the natural flow identified.

    2. Following a left to right workflow, to go back, the user sees this as moving left, so the “back” button should be on the left side of the screen, not the right.

    3. Following a left to right workflow, the “previous” button is on the left, and the “next” button is on the right.

  3. Colours have meaning.

    1. A simple system is

      1. Errors are red.

      2. Warnings are orange.

      3. Ok is green.

    2. Use one colour for clickable components and other colours for accents.

      1. Using opacity can assist with the appearance of flows by reducing the visual impact and alerting the user.

      2. Icons can provide additional information to the user if coloured and positioned appropriately.

  4. Have a single primary clickable action per screen.

    1. Decide what the primary purpose of the screen is.

    2. Make any clickable actions on the screen less prominent, for example, changing them to outline instead of solid colour.

  5. Separate navigation from actions.

    1. Be obvious between the navigation and action settings within navigation bars, e.g. use buttons to distinguish the differences.

  6. Make your user interface predictable.

    1. Be careful adding and removing dynamic elements from the interface.

    2. Good example

      1. Disable <send email> action button while no user selected

      2. Enable <send email> action button when a user is selected.

    3. Bad example

      1. Hide <send email> action button while no user selected

      2. Show <send email> action button when a user is selected.

  7. Use space to separate things.

    1. Use spacing to define grouped items.

    2. Use spacing to define different user interface sections.

  8. Build an intuitive interface for the user.

    1. The user interface should make the users’ experience as easy as possible.

    2. Don’t design the user interface around how the system works.

      1. When user input is required for an action to occur, e.g. selecting a check box, action buttons for that action should be disabled until user input is received.

      2. When valid user input is required for an action to occur, e.g. an email address, action buttons should be disabled until validated user input is received.

These eight steps have been summarised from this fantastic tutorial about UX Design by ArjanCodes.