UX Design Overview and Notes

An overview and notes on the topic of UX (User Experience) design.

UX design is primarily concerned with how the user will interact with a website, and aims to make their interaction experience as good as possible.

Whether the website is visually appealing to the user is not the primary concern of UX design, that is a concern of graphic design.

Pattern Library

A library of user interface (UI) patterns that designers and design teams use to build digital products. They are referred to as 'patterns' because they're recurring solutions that solve design problems. The purpose is to ensure consistency.

Pattern Library Examples

Typical Contents of a Pattern Library

Reference https://ux.mailchimp.com/patterns/

Colours

Grid System

Spacing

Page Layouts

Data Visualisation

Typography

Headings

Media Queries

Icons

Note FontAwesome is an internet icon library and toolkit.

Components

Buttons

Checkbox

Dialog Boxes

Feedback - How the website gives feedback.

Footer

Form Elements

Images

Lists

UX Design Process

Document a UX design procedure that you can use when creating new websites or apps.

Always start with the persona, user goal and user flow before the high-fidelity prototypes.

Example UX Design Process from Finastra

Gather Business Requirements

Establish and document the business requirements for the digital service you are building.

For example, if you were building a logo design contest website, one business requirement might be that the customer requesting the logo can post a detailed design brief.

Create a detailed requirements document. You may wish to get a sign-off from the customer at this point.

Build Personas

Work out who will be using your service, i.e. do user research and analysis.

Wireframing

Create wireframes which give the key functionality required from the service.

This will define the workflow the service can perform.

Early User Testing

Do some early user testing. Find some work colleagues from other departments that can test your system for you. Give them a list of tasks and watch if they can do them easily.

UI Design (User Interface Design) is where you add the visuals.

Gather feedback. Monitor analytics.

PLEASE NOTE We have not finished writing the full UX Process yet, it's on the long To Do list. In the meantime, take a look at the UX Design Principles below.

UX Design Goals

Meet the user needs. Allows the customer to interact with the business with as much satisfaction as possible.

Address the business needs.

Video on How to Become a UX Designer

UX Design Principles

Make Information Digestible

Information should be presented in ways that can be easily digested by the user. For example, ways to help with this are organising with hierarchy, and colour-coding. An example of bad practice would be to present a user with a wall of text instructions.

Make Things Clear

Make things as clear as you can to the user and explain things where needed. For example, when presenting pricing, explain everything the user needs to know.

It should be clear to the user what they can do next. They should not have to think hard to work out what can be done next.

Simplicity

Make things as simple as possible.

Avoid unnecessary distractions.

Your website should have obvious paths to follow, allowing the user to complete a task intuitively. It should be obvious to the user what they can do.

Keep the number of choices to the minimum possible. Cutting down the number of choices can be a good thing. For instance, if a buyer is presented with too many choices, conversion rate can go down, because they find it too difficult to consider all the options.

Create step by step consecutive processes for task achievement, and keep the user updated on progress.

Only show information that is vital to the task the user is trying to accomplish.

Don't let features compete with each other.

Don't Get In the User's Way

For example, don't bombard the user with excessive tutorials that they may not need. Make these optional.

Don't have too many requests for permissions. Ask for the various permissions that may be required at the same time.

For new users, think about whether a forced sign-up is really necessary.

Orient the User

The user should be able to tell where they are on your website.

Layout

Where possible, group together related features.

Content should be easily scannable.

Visual Hierarchy

Colour
Contrast
Position
Proximity to Like Items

Colour coding can be used to help the user identify functionality.

Make sure there is enough colour contrast so users can identify different colours.

Scannable

It should be easy for a user to scan your page to quickly see what it is about and what is available. This means a good information hierarchy, with the most important information at the top.

Use text size and colour to make the page more scannable.

Performance and Speed

Users want a fast response time. Users are impatient, so your system should be able to respond to them as quickly as possible.

Consider system performance and be able to handle peak loads.

Convey Trust

A user will not transact with your website unless they trust it, so make sure your user interface conveys trust.

Familiar Design

Use popular conventions, familiar design patterns, icons and presentational styles so the user easily understands and feels comfortable with your product.

Consistency

Your interface design should be consistent across your product.

Don't introduce new UI concepts unless you have to.

Delight

If your product is a delight to use, users will extol its virtues to others and do some of your marketing for you.

What is your UX great at? Does its look reflect this?

Feedback

You should have a mechanism for users to provide feedback, so you discover any user issues and can continuously improve your product.

Identify and Fix Bugs

Have a process which enables you to identify and fix bugs.

Fix the small bugs.

Dealing with User Questions

Don't require configuration for the user to get value.

Ask a question once, don't repeat it.

Look to keep the number of questions down to a minimum and for opportunities to consolidate.

Consider Different User Level Cases

Consider first-time user.

Consider repeat experienced user.

Device Screen Size

The experience should work over different screen sizes, i.e. implement responsive design techniques.

Be Interruptible

Account for acquiring and losing connectivity.

UX Design Tools

Sketch
A vector design tool for Mac focused on user interface design. Costs a lot less than Adobe tools. Helps you to plan UI for websites and apps.

InVision
A prototyping, collaboration and workflow platform.

Web Design Techniques that Contribute to Good UX Design

Fix the main menu at the top of the page, so the user can still see it when they scroll down the page. Use a distinctive colour for this menu.

Make sure there is enough contrast so that you can always read text.

Where you have clickable buttons, use a distinctive colour for them, and make this different from the colour of page headings, at least slightly different.

Where you have social media icons, put them in colour instead of monochrome, so they are more distinctive.

Put your important contact details in the header.

Use colour differentiation in the various forms of text on your page, so that the user can infer it is something different. E.g. heading text is a different colour from body text, logo text is a different colour from heading text etc. The colour difference can be subtle.

Terms Related to UX Design

Customer journey optimisation.

User experience.

User interface design.

UX Designer.

UI Designer.

UX design jobs.