Skip to content

ux.md

Latest commit

 

History

History
988 lines (562 loc) · 33.8 KB

ux.md

File metadata and controls

988 lines (562 loc) · 33.8 KB

UX notes

A few notes prepared while writing training courses...

What is UX?

A typical project can be seen as a collaboration between business owners, users and designers/developers

Typically in the past users weren't consulted in the process

UX makes a project's focus user-centric - design for the users, understand the problem from their perspective

UX's job is to ensure people can accomplish their goals when they come to a product

Elements of UX

There are the three key areas of UX:

User research

Identify users, carry out product testing

Can be qualitative (interviews) or quantitative (surveys), behavioural (observations) or attitudinal (interviews)

Information architecture

Create and arrange content with the intent to communicate information

Understand why a user is coming to your product, give the user the information they are looking for, help them make a decision

Interaction design

Creating a system's interactivity and functionality

Usability

There are five key areas of usability to consider:

Learnability

  • How long does it take to use the product? It should be as easy to use as possible
  • People have come to do a specific task, help them to do this
  • Test it:
    • Set a task, measure how long it takes to complete
    • Compare it with competitors' websites...

Efficiency

  • How well does the product do what it should do?
  • Is it consistent?
  • Does it use widely accepted standards/conventions?
  • Are there shortcuts for experienced users?
  • Does it prevent user errors? (e.g. forms, etc)

Memorability

  • Does the product rely on a user's recognition or recall of how to use it?
  • Don't create a product that requires a user to remember things
  • Make the product do the work, not the user

Error management

  • If the user encounters an error, alert them and tell them what to do
  • Catch and explain errors in a way that make sense to users

Satisfaction

  • How satisfied is the user after using the product?
  • It may be different in different markets/contexts
  • You can only find this out through testing (e.g. A/B testing)
  • Test, learn, fix, (repeat)

A project journey, from scoping to launch

  • Scoping
  • Research
  • Information Architecture
  • Design
  • Prototyping
  • Build, launch and handover

(A caveat)

  • This is a simplification of the process
  • Not every project will go through these exact phases
  • Phases can take place concurrently
  • Phases many not take place in this order
  • Budget and time often dictate process

It helps to keep a process Lean and Agile:

  • decide what you want to learn
  • build (a way of learning what you need to learn) and measure
  • iterate

Scoping

The brief

Most projects start with a brief

  • "I want to sell my jewellery online..."
  • "I am organising an event..."
  • "My company needs a new website..."
  • "My new company needs a website..."
  • "I want to create the new Facebook..."

No standard format, they come in all shapes and sizes

  • Formal or informal
  • Verbal or written
  • Technical or otherwise
  • etc...

If the client doesn't supply you with a written brief, it is a good idea to request one

It helps them to articulate, in their terms, what they require

Their chosen format can help highlight their priorities

This is often all the information you have when you decide whether to take a project on

Even if you are building a website for yourself, and you think you know what you want, write yourself a brief

It comes down to working out the most important requirements for the site

To take a lean approach, it helps to decide what can go into your Minimum Viable Product (MVP)

Requirements gathering

Once we receive a client brief (and have decided to take it on) we need to create a set of requirements

We need to understand why someone wants a website in the first place

"A requirement is a statement about an intended product that specifies what it should do or how to do it. For requirements to be effectively implemented and measured, they must be specific, unambiguous and clear."

http://usabilitygeek.com/requirements-gathering-user-experience-pt1/

We need to identify the key requirements of the site.

For example:

  • To provide a service
  • To disseminate information
  • To sell products
  • To make money
  • etc...

We make a list of everything the client wants the site to be able to do

This helps to identify what functionality the site needs to offer.

As a user I need to be able to:

  • Find the information I came to the site to read
  • Register/login
  • Personalise content
  • Order products
  • Share content

As the site owner I need to be able to:

  • Add content
  • Review users' submissions
  • See statistics on how the site is being used

Specifying needs in this way makes it possible to test the success of the website

"As a user I need to..."

can be tested by changing the start of the sentence to:

"Is it possible to..."

Further reading:

Scope of work

A useful document to produce:

  • Shared and agreed by both the client and the project team
  • Documents the aims of the site - the requirements we discussed earlier
  • Describes the work to be done and what the end deliverable will be
  • Outlines the time schedule and budget
  • Outlines who is responsible for what (should something come from us or the client)
  • Lists assumptions and questions

Further reading:

Research

By analysing our brief, we have created a set of requirements that outline what our client would like the website to do

We need to plan how our new website can meet these requirements

The following steps are especially useful when working on large sites

But they don't have to be complicated

Even small simple sites can benefit from time spent on research

How can we do this?

  • Client and team meetings
  • Client research
  • Competitor analysis
  • Audience research
  • Analytics review
  • User personas and user stories

Meetings

  • Regular client meetings are important to demonstrate progress
  • Gather further information and feedback
  • We probably won't have the perfect solution immediately
  • Discuss potential ideas
  • Requirements may change over time
  • It should be an iterative agile process

Further reading:

Client research

Research the client, the company, the sector

Conduct stakeholder interviews to reveal their requirements

These may be formal or informal, individually or in groups

Stakeholder questions to cover:

  • The company's focus
  • What products they sell or services they provide
  • Aims and goals for the new website
  • The current website - likes and dislikes
  • Target audience
  • Branding
  • Content
  • Similar websites

Further reading:

Competitor Analysis

Look at similar websites and services

  • What do they do well
  • What can we improve on
  • What ideas can we 'borrow'

We're looking for a USP

We want to know how to position our website in the market

Further reading:

Audience research

Find out who is the target audience, and what they want

Speak to potential users

Find out their desires and requirements

There are lots of different types of user research you can conduct:

Each of these techniques has its own pros and cons

A combination of techniques will help identify requirements for the site

You can decide which techniques to employ based on budget, timescale, personnel, etc

Further reading:

Analytics review

If the client has an existing website, reviewing its analytics can be revealing

It can help to identify where they are meeting (or failing to meet) the requirements you have identified

Many different areas to review:

  • Page views
  • Browsing time
  • Journeys through the site
  • Traffic sources
  • Bounce rates and page exit rates
  • Browser/Device usage

Further reading:

User personas

User personas are short descriptions of fictional characters who represent the website's potential users

They should be based on audience research, modelled by grouping results into similar types

Personas should contain core details

  • The user's goals when using the website
  • Aptitude and technical ability (in general, and website-specific)

Basic persona details are often supplemented with further information:

  • The user's chosen technology/devices
  • Demographic information - age/gender/location
  • Professional information - career/experience
  • A background bio
  • etc

Some example personas:

User personas help to:

  • Focus on the needs of a specific type of user
  • Communicate the views of different types of user
  • Identify user journeys and user stories

User personas

  • Naming is hard, so we sometimes use a random persona generator
  • Personas are best kept simple unless in-depth detail is required
  • Additional personas can be created during a project if requirements change

Further reading:

User stories

A user story is a sentence that encapsulates a required piece of functionality, in the language of the user

Earlier, we noted the need to capture all site requirements

Every site requirement could be restructured into individual user stories

Each story can be attributed to the most appropriate user persona

We need to add an e-commerce solution

becomes

As Jack I can buy a ticket so that I can go to the gig

Creating user stories puts the user at the centre of the experience

This is a good way to prioritise requirements

If a requirement doesn't match any persona it may require a new persona, or it may not be as important as first thought

Format

User stories often follow a standard format:

As [Persona] I can [Goal] So that [Benefit]

The example we saw earlier follows this pattern:

As Jack I can buy a ticket So that I can go to the gig

User stories are particularly useful if you are using an agile process

You create a backlog of stories, and prioritise them

Each sprint you select a set of stories to work on

Managing stories is important

Stories can be written on cards and stuck onto a wall

To aid collaboration we often use software to manage stories

Trello is a good simple solution for creating and managing stories

(More complex solutions exist, but they're less friendly to inexperienced users)

Further reading:

Information Architecture

We have gained a good understanding of the website's requirements

Now we need to plan how the website can meet these requirements

As with research, the following steps are especially useful when working on large complex sites

Small simple sites will still benefit from time spent on Information Architecture prior to design and build

Complex information architecture documents can take a great deal of time, without leading you closer to producing the product. So don't get stuck on wireframes for a great deal of time. Move into code as soon as possible

The lower the definition, the better the discussion/feedback

Further reading:

Content

Content should inform decisions about website architecture

Think about the purpose of the page, and therefore what information people should notice first

It is difficult to structure a page around lorem ipsum text

Content can't just be dropped in at the last minute

Working with a content-first approach ensures the site architecture and design will be fit for purpose

Content audits

It may be helpful to carry out of a content audit to assess and categorise existing content

Review existing content to prioritise and categorise

This should be cross-referenced with any available analytics and site requirements.

Further reading:

Sitemaps

Most clients know what kind of content they want already

We need to organise content into a logical structure that is easy to navigate

  • A way to document the structure of a website
  • Easily see a list of sections/pages of a website
  • Hierarchical - shows how pages relate to one another
  • Identify the different templates/layouts that will be used
  • Doesn't contain visual detail or information on the layouts themselves

Further reading:

Wireframes

Plan the placement of content on each page

Organise the importance of each element within a page - the information hierarchy

Decide what we want the user to experience first, second, third, etc. based on its prominence within the page.

Create ideas, so it's easy to move things about

Not looking at the visual layout of the site

User journeys

User journeys identify how users flow through your website

They help you to design the structure to ensure users can complete their goal efficiently

User journeys make use of the user personas and user stories (discussed during the research phase)

Mapping the user journey of a user story helps to validate your selected site structure

They also help to identify any potential pain points in the journey

You could create a user journey for every user story

This would allow you to test your assumptions and solutions

There is no standard format for creating user journeys

They can look more varied than wireframes/sitemaps

Further reading:

Design

At this stage we should now understand our brief, and its key requirements

We should have come up with a plan for what we want to create

Design fundamentals

When designing a product - magazine, book, website, etc - there isn't a right or wrong way to do it

There are considerations to take into account

And there are definitely things to avoid

Designing things properly is a difficult, skilled process

"I've got a hard afternoon ahead of choosing fonts and colours"

Good design is about creating a balance between the different elements on a page

Sticking to a set of recognised design guidelines can help to control the layout of the various components

It can help to present information in a way that's simple, attractive and appropriate

When creating any new design, it is important to bear in mind:

  • Usability (Is it easy to use?)
  • Functionality (Can I do everything I want to?)
  • Effective (Is information presented in a useful way?)
  • Efficiency (Is it quick to navigate and find information?)
  • Aesthetic (Does it look good?)
  • Cohesive (Do all pages of the site share common design/layout elements?)

Design is a balance

If a website works well but doesn't look good, people won't want to use it

If a website is beautiful but isn't usable or accessible, people won't want to use it

"We stand out by looking to tomorrow instead of simply referencing the design trends of today. We strike a balance between cookie-cutter design and beautiful anarchy."

Branding

A client's brand can be thought of as their identity

Usually branding refers to the logo, choice of colours, fonts, etc

A brand should target the intended audience

Consistent strong branding helps to increase recognition

Strong brands help to win and retain users

People know what to expect with recognisable brands

They are more than just logos - a brand is a way to represent all of their associations, experiences and characteristics

The tone of voice of the writing is important

The choice and use of appropriate imagery also helps to emphasise brand values

Many large companies and organisations produce their own brand guidelines to describe how designs using their logo should be produced

"our logo is the face of our brand and a key element of our brand identity. Consistent use of the logo is essential to maintaining our identity and gaining instant recognition across all marketing channels and media"

Best buy http://bbybrandidentity.com/guidelines-bby/brand-overview/

"Our logo is a very valuable asset. We must treat it nicely. Never abuse our logo, it doesn't have arms so it can't fight back (our lawyers however, are another story)."

Skype http://issuu.com/bondo/docs/skype_brand_book_-_look

"Do's and don'ts. You wouldn't wear one blue and one orange sock. Take a moment to think about how you apply the Skype logo."

Skype http://issuu.com/bondo/docs/skype_brand_book_-_look

Further reading:

Layout and composition

People expect consistency in a design

Consistency and predictability in design allow people to feel safe and confident as they navigate

It reduces cognitive load for visitors, allowing them to focus on the content of a site

Having a consistent and predictable layout means that when something does not follow the predefined pattern, it will stand out

This is particularly useful if there is a specific part of the page you want to highlight

The best way to create a consistent and predictable layout is with a grid

Grids

Grids go a long way towards ensuring that a layout is consistent.

Grids constrain a design, providing order and structure to information

There are two parts to any grid:

  • Columns
  • Gutters
Columns

Columns represent the each major piece of a grid.

When attaching items to a grid, they are attached to a whole column, or multiple columns (which would then include gutters).

Gutters

Gutters are the space between each column

Content is never aligned to a gutter

Each gutter is the same width

Composition

The most common type of grid is a symmetric grid (where each column is the same size)

Looking at successful websites, even those with a huge number of pages, often showcases that there are only a few layouts

It is a good idea to use as few page layouts as possible, and especially few complex layouts

This makes it easier for people to understand, and easier to maintain

(http://www.fabricland.co.uk/)

White space

White space (or "negative space") refers to any area of a page that doesn't contain text or imagery

It is possible to fill every part of a web page with content, but leaving white space on a page is important

Without white space, designs can feel crowded

White space helps people differentiate between different parts of a page

Less is more is a good design principle

Don't cram too much content into one page, it can be overwhelming - keep it simple and uncluttered

(http://www.lingscars.com/)

Components

As experienced web users, we are used to a number of layout conventions:

  • Header
  • Navigation
  • Content
  • Footer
  • (etc)

We expect specific functionality to be in certain parts of a page:

  • search - top right
  • login/register - top right
  • about us / contact us / T&Cs - footer link
  • store locator - top right / footer link

"For generations, humans have used conversation to pass down stories and learn about the world. Leverage this tradition. Instead of providing all information at once, allow a user to explore through the content, inviting conversation with them. This is often referred to as Progressive Disclosure. Respond to users as they ask for more information, don't throw it all at them at once. Focus on one item at a time and push secondary items off to the sides, waiting for user interaction."

https://github.com/north/north#visual-design

Further reading:

Typography

Type styling is an important factor in communicating meaning and hierarchy across the design.

It is an incredibly complex (and engrossing) subject

We will briefly cover just a few of the essentials...

Tone

Different types of font can represent a different tone of voice

Fonts have characteristics that can portray a range of connotations about a brand

Select a font that helps to convey the brand values (that we discussed earlier!)

Use weight, size and colour of type to create a hierarchy

It is also possible to control how the space around a font is rendered with kerning and leading

Fonts

Up until a few years ago we used to be limited to a small set of 'web-safe' fonts

Thankfully in the last couple of years new browser technology has enabled us to embed almost any font into a website

Services like Google Fonts allow us to use a huge range of fonts - for free!

"Use typography to create a hierarchy of content across the site"

  • BBC GEL

"Large bold type should be used to establish a clear information hierarchy"

  • BBC GEL

"Typography built around clarity and uniformity, designed to be legible in a range of sizes"

  • Best Buy

"Our font is compatible across all computing platforms and systems"

  • Best Buy

"Words don't just hold meaning; they communicate by their very form. We primarily use the Gotham font family: elegant and direct, stylish but not exclusive. Putting well-designed words in our product enhances the user experience"

Further reading:

Colour

Choosing a colour-palette for a website is not simple

Selecting a limited number of recurring colours can give a website cohesion

There is a lot to consider:

  • Aesthetics
  • Identity
  • Usability

Colour theory:

  • Analogous
  • Complimentary
  • Shades
  • (etc)

https://kuler.adobe.com/

"Our colour palette contains a range of related tones to add nuance, depth and dimension for a more engaging consumer experience"

  • Best buy

"Always ensure that there is enough contrast between the text and the background colour"

  • BBC GEL

"Our colours are what give us our personality. We're bright, bold, colourful and confident. They're simply loud and clear"

  • Skype

Further reading:

Design inspiration

Look at other websites for inspiration

Style tiles

Prior to starting on a site design, consider creating a style tile

They provide a way to demonstrate fonts, colours and interface/layout ideas

They're a catalyst for discussion

Further reading:

Responsive design

Designing websites to work across a wide range of devices and browsers

We can no longer assume that most people primarily use a desktop or laptop computer to browse the internet

People use a variety of internet browsers and operating systems

These devices are increasingly being used in place of 'traditional' desktop browsers

We also can't assume the context of why people use a mobile device rather than a desktop device

Traditionally it was thought that people browsing the web via their phone were 'on the move', needing quick access to information, and so many mobile websites were optimised for this

But research shows that people are just as likely to use their mobile phones at home while watching television

We can't assume people's requirements based purely on the device they use to access our websites

Responsible responsive design

We should ensure that our websites work across all commonly used desktop browsers

We should take non-desktop browsers/devices into consideration when building a website

These devices have different display resolutions (or browser dimensions)

These devices also have different methods of interaction

Responsive patterns are important

Users may expect different behaviour at different viewport dimensions

Further reading:

Prototyping

What is prototyping?

The creation of experiments Usability testing Allow us to test whether our ideas will work

It took 5,127 prototypes for James Dyson to get cyclone technology exactly right for his vacuum cleaner

Prototypes are typically interactive (clickable) wireframes/designs

When do we prototype?

Prototyping often take place during the Design and Build phases

Innovative design ideas need testing with real users to test whether they work

Increasingly this is happening publicly

Why do we prototype?

An anecdote:

"I have an idea for a website, now I'm going to spend a year learning to code so that I can build it!"

A year before you can test your ideas with potential customers?

Instead, we can create a quick prototype to validate (or change) our ideas

Building a website is complex, and time-intensive.

Building the wrong thing is a waste of time and money.

  • Demonstrate ideas
  • Test complex interactive solutions
  • Receive quick feedback
  • Refine ideas iteratively
  • Efficiency - quick update process

How do we prototype?

We want to create a simple website without any technical knowledge

There are plenty of tools available - http://prototypingtools.co/

There are two main types of prototyping tools:

  • Build prototypes by dragging and dropping elements from a toolbox
  • Use your own sketches or images, link these together with hotspots

Further reading:

Build

The site has been designed

developers have taken over

Is the UX designer's job done?

...not quite

These aren't discrete stages

With responsive design, collaboration between designer and developer is vital

It is an iterative process

The designer may be needed until the site build is completed

Further reading: