.. include:: /extras.rst.txt
.. highlight:: rst
.. index:: Design; UX

.. _design-ux:

======================
Design UX Introduction
======================


Summary
=======

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

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

#. Help improve user productivity.

#. Improve customer loyalty.

#. Help improve the customers' journey to ensure business success.


UX design process summary
=========================

Clever user experience design starts by following a simple process of

#.  Identifying the users' problem.
#.  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.

#. Who has the problem?

   #. end-users,
   #. a business group or
   #. others.

#. What is the problem?

   #. Can the problem be solved with a UX design solution?
   #. What features will solve the problem?

#. Why do users need this solution?

   #. Has the need been well defined?
   #. Has the benefit been well defined?

#. How will the solution be implemented?

#. When will the solution be required?

   #. This stage is for budget and resource estimates.

UX Design process detail
========================

Who
---

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

#. 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.

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

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

#. 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:

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

#. 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.

#. Prototype: A mockup of the final product.

#. 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:

#. :sep:`Rely on a design system, for example,` `Figma <https://www.figma.com/>`__.

#. :sep:`Create a natural flow through the User Interface.`

   #. :emph:`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.`
   #. :emph:`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.`
   #. :emph:`Following a left to right workflow, the "previous" button is on the left,
      and the "next" button is on the right.`

#. :sep:`Colours have meaning.`

   #. A simple system is

      #. :emph:`Errors are red.`
      #. :emph:`Warnings are orange.`
      #. :emph:`Ok is green.`

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

      #. :emph:`Using opacity can assist with the appearance of flows by reducing the visual
         impact and alerting the user.`

      #. :emph:`Icons can provide additional information to the user if coloured and
         positioned appropriately.`

#. :sep:`Have a single primary clickable action per screen.`

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

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

#. :sep:`Separate navigation from actions.`

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

#. :sep:`Make your user interface predictable.`

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

   #. Good example

      #. :emph:`Disable <send email> action button while no user selected`
      #. :emph:`Enable  <send email> action button when a user is selected.`

   #. Bad example

      #. :emph:`Hide <send email> action button while no user selected`
      #. :emph:`Show  <send email> action button when a user is selected.`

#. :sep:`Use space to separate things.`

   #. Use spacing to define grouped items.
   #. Use spacing to define different user interface sections.

#. :sep:`Build an intuitive interface for the user.`

   #. The user interface should make the users' experience as easy as possible.

   #. Don't design the user interface around how the system works.

      #. :emph:`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.`
      #. :emph:`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 <https://www.youtube.com/watch?v=uAQAgPSwZf0>`__ by ArjanCodes.