UX lexicon

UX vs UI

UI vs UX

80/20 rule

In large systems, a high percentage of effects come from a low percentage of causes

Also known as ‘the Pareto Principle’, and ‘the Law of Vital Few and Trivial Many’, this rule declares that the majority (70-90%) of effects in a large system are caused by a minority (10-30%) of variables in that system. This rule can be applied to a range of systems including economics, engineering, design, project management, and quality control.

Examples of the 80/20 rule include:

80% of errors are caused by 20% of code
80% of revenue comes from 20% of customers
80% of time is spent using 20% of a product's features
80% of wealth in Italy is owned by 20% of the population
80% of website traffic occurs during 20% of the time

In design and development the rule can be useful in focusing resources. For example, if users of a product utilise 20% of its functions 80% of the time, design and testing time should be concentrated on the 20% of features which are used most often. Functions which fall in the less-used 80% could be hidden from the interface or removed from the system entirely.

A/B testing

Testing two targeted variations of a single page to analyze which one performs better

A/B testing is also known as ‘split testing’. Experimenters aim to discover whether changing specific elements can influence the performance of a website, app, advert or email campaign against a goal. From studying user behaviour (for example, website data), experimenters devise a hypothesis to test. They then produce a variation of a targeted element. Users are split between the ‘control’ (or original) and variant simultaneously, and left to interact with the product over a set period of time. Almost anything on your website, app or campaign can be tested, but some example include:

Headlines
Subheadings
Paragraph Text
CTAs
Images

Following close examination of how the user engages with the new design, experimenters use statistical analysis to determine which version (the control or the new) performs best against the pre-set goal. They usually focus on the overall conversion rate. For instance, experimenters could change the colour or layout of a certain element and test whether this has a positive, negative or no effect on visitor behaviour and conversion rates.

If a user’s engagement with a variant is high, and the change boasts an excellent or improved conversion rate, experimenters select the version with higher performance. They use it for future iterations of a campaign (for example, emails) or implement it on a web page or app. A/B testing tools often have calculators to help experimenters ensure results are statistically significant and test are not being concluded too early.

Through close, data-driven analysis, A/B testing removes the guesswork from website optimisation and ensures that changes yield positive results.

Adaptive Web Design (AWD)

Adapting web pages for the capabilities of the device or browser used to view them

The term Adaptive Web Design (AWD) was coined by Aaron Gustafson to describe a way of optimising web pages for the device or browser used to view them. Beginning with principles of progressive enhancement, AWD seeks to create an appropriate experience for users no matter what device or platform they use.

AWD uses techniques such as responsive web design (RWD) and feature detection to deliver an optimised version of the site. Though visuals will change, ideally functionality will be similar, and content should be consistent everywhere.

Optimisations may include increasing the size of controls to make them touch-friendly, integrating functionality like telephone calls or camera use when compatible hardware is detected, or sending smaller images to devices on slower internet connections.

Aesthetic-Usability Effect

A visually appealing design is perceived to be easier to use

A phenomenon where a good looking design is perceived as more usable than one that is less appealing, whether or not that is actually the case.

Masaaki Kurosu and Kaori Kashimura, researchers at Hitachi in Tokyo, demonstrated the aesthetic-usability effect in their study, Apparent Usability vs Inherent Usability: Experimental analysis on the determinants of the apparent usability. Their study measured the difference between the 'inherent' usability of a product and its 'apparent' usability by asking test participants to rate the beauty and usability of interfaces. It was shown that 'the user may be strongly affected by the aesthetic aspect of the interface even when they try to evaluate the interface in its functional aspects'.

This effect may influence user opinion more than expected, affecting the user's behaviour and their perception of the ease of use of a system. It can be witnessed in a wide range of design applications, from physical products to digital interfaces.

Affordance

The properties of an object which allow its function

Psychologist James J. Gibson first coined the term 'affordance' in 1977 when describing all actions that are made physically possible by the properties of an object or an environment. A bottle screw cap affords twisting. A hinged door affords pushing or pulling. A staircase affords ascending or descending.

Don Norman introduced the term 'perceived affordance' to refer to the actions a user perceives to be possible, distinct from those which are actually possible. A user's perception and understanding of affordances will vary according to their goals, beliefs, ability and past experiences. A bottle screw cap may be a mystery to a person who has not encountered one before. A staircase may afford an able-bodied person to ascend to a higher floor, but a person with poor mobility is not afforded the same action.

Cues can be used to communicate actions afforded by an object. The ridges of a bottle screw cap provide a high-grip surface, suggesting friction should be applied. A flat plate on a door at hand height suggests the door can be pushed in that place. The steering column connection in the centre of a steering wheel suggests it will turn around that point.

Affordances can be deliberately constrained to enable only correct or desired actions. A bottle screw cap cannot be tightened further when the bottle is sealed. A door with a plate instead of a handle cannot be pulled. A car steering wheel won't turn any further when the wheels themselves are at the limit of their movement.

Both actual and perceived affordances must be considered in design. Desired actions cannot be carried out if the object does not afford it, and afforded actions will not be carried out if the user does not perceive they are possible.

Agile

An iterative, incremental and highly flexible approach to designing and developing digital products

The term Agile was coined in 2001 in the Agile Manifesto. Agile is a highly flexible and pragmatic approach to delivering digital projects. It anticipates and embraces unpredictability and emphasises close collaboration of a cross-functional team, evolving requirements, incremental and iterative development and continuous testing. The approach aspires to deliver solutions that best meet customer needs with minimal costs, waste, and time. It contrasts with traditional waterfall approaches, which can be more linear, sequential and struggle to accommodate change.

There are multiple Agile frameworks. For instance, Dynamic System Model (DSDM) and Extreme Programming (XP) are frameworks that focus on software development. The popular Scrum framework suits software development and also broader project management.

Agile frameworks are generally tailored to the needs of the organisations using them, but tend to include:

Active customer involvement
Frequent, usually daily, communication
Close collaboration between stakeholders
A team that’s empowered to make decisions
Evolving requirements and minimal documentation
Short and frequent delivery cycles (or sprints) resulting in small, incremental releases
Testing early and often throughout the project

Anchoring

A cognitive bias describing the tendency of users to rely too heavily on the first piece of information offered

Anchoring (or focalism) bias is the common human tendency to rely too heavily on the first piece of information available (the ‘anchor’) when making decisions. Once set, an anchor acts as a reference point against which all subsequent information is assessed.

The design implications of anchoring are huge as it significantly impacts user decisions. For example:

Pricing – In sales, the initial price (or RRP) is the anchor, making the sales price look like a good bargain.
Item Order - If you display donation amounts on a charity website with higher figures first (the anchor) you’re likely to get higher donations than by listing lower amounts first.
Defaults – If you set a price package on a website as the default it often becomes the anchor.

Anti-Pattern

A common response to a repeated issue, which can be ineffective

Coined by Andrew Koenig in 1995, anti-patterns are the ineffective opposite of reliable design patterns. Two factors that must be present to define the common response (or solution) as an anti-pattern, rather than a bad idea or habit. These are:

The course of action appears helpful initially, but typically generates more negative outcomes than positive
There is another solution that has been documented and validated as more effective

Anti-patterns can occur from lack of knowledge (or experience) with solving a problem, or little awareness of other solutions. Others are caused by applying a good design pattern to an incompatible issue.

Common anti-patterns include:

Bicycle shed: reassigning resources to solve trivial issues
Bleeding edge: using new technologies that are not proven, which cause cost increases, performance issues, and/or delays
Design by committee: involving too many contributors in a design process, without a unifying vision
Scope creep: unregulated changes or adding new features to a project, after the original key requirements have been agreed

Atomic Design

A methodology for designing interfaces by designing elements and their combinations rather than pages

Introduced by Brad Frost in 2013, Atomic Design is an approach to designing interfaces by creating systems of components instead of pages. It involves designing small, standalone, reusable elements and combining them to create the whole. This enables rapid production of scalable and consistent interfaces that are easier to maintain.

In Atomic Design, there are five components of an interface:

Atoms: the smallest, most basic building blocks, that can’t be broken down (e.g. buttons, input fields, checkboxes, links). They can also be abstract (e.g. colours, fonts).
Molecules: bonded atoms that function as a unit (e.g. an input field and button can combine to create a search box). Molecules can be simple or complex, built for reuse or one-off use.
Organisms: groups of similar or different molecules (and possibly atoms) joined to form a distinct section of an interface (e.g. a page header can be formed from a logo, navigation and search box).
Templates: organisms combined together to form pages. They are client facing and begin to demonstrate the page layout and flow.
Pages: specific instances of templates. They test how the templates work with real content, enabling designers to go back to modify the molecules, organisms, and templates if required.

Brainstorming

A technique to generate spontaneous ideas around a specific problem

This popular technique for generating ideas by association often uses groups of people, but is also suitable for individuals.

There are several key principles that apply to both groups and individuals. By focusing on the quantity of ideas and not criticising each one, there is a greater chance of finding a radical, effective solution. Unusual or 'off the wall' ideas are also welcomed, and good ideas can be combined to create a new approach to a design challenge.

Call To Action

An element that prompts a user to carry out a desired activity

An interface element that aims to encourage users to continue down the optimum path, as identified by the developer. For a website design, example actions would be submitting contact details or making a purchase.

The effectiveness of a call to action (CTA) is often measured by calculating the conversion rate, which at its simplest would be the total number of times the call was successful divided by the number of times the CTA was seen.

Card Sorting

A low-tech collaborative exercise used to categorise objects, plan workflows, or define system structure

This technique is often used to generate or evaluate website navigation, categorisation structures (i.e. taxonomies) and user journeys. It can be utilised on projects of any scale, from high-level structure to page-level prioritisation of content.

First, content or functionality is broken down into the smallest appropriate units and listed on Post-It notes or index cards. Related units are grouped together and these categories are given titles to build hierarchies. Categories and units are ordered to demonstrate routes through the system. Elements can easily be added, removed and rearranged until the optimal structure is found, at which point the result can be recorded with photography for later digitisation or further work.

Due to its simplicity, a single facilitator can guide an inexperienced group with no knowledge of the technique. The inclusion of clients, users and domain experts allows everyone to contribute and builds a sense of shared effort and involvement.

Chunking

Combining units of information into fewer units, to aid browsing and learning

A 'chunk' is a piece of information, like a word or a set of numbers, held in the short-term memory. The capacity of this memory is limited, believed to be between three and six, so by structuring information to fit these limitations, users' recollection of that information can be improved. The act of combining similar pieces of information into chunks is known as 'chunking'.

Designers should consider chunking for tasks which are specifically related to memory, not for information that will be searched or scanned. In the latter case, reducing the number of groups information is sorted into can make it more difficult to find the information being searched for.

Cognitive Bias

The inherent thinking errors that people make when processing information

Cognitive biases are flaws in judgement that shape how we perceive the world and how we behave. Some are so common you can use them to ensure your website achieves its goals.

For example:

The bandwagon effect is the tendency to do things because many other people do. It’s why it’s often recommended to state the number of customers you have or say how many people Liked your content.

Anchoring is the tendency to over-rely on the first piece of information we receive when making decisions. You can define the anchor to your advantage (e.g. by saying a product ‘was £100, now £80’ you make £80 appear good value).

Loss aversion is the tendency to overvalue loses and undervalue gains. This can be used to prompt user action with scarcity (e.g. ‘only 2 left in stock’) and time-limited offers.

The decoy effect gives people a third product option so that they’ll choose the higher priced of two other options. The preferred option goes from being the expensive option to the one that’s best value.

The endowment effect

is the tendency for people to demand much more to give up an object than they would be willing to pay to acquire it. It’s the reason why free trials are often so effective.

Cognitive Load

The burden on a person's short-term memory during complex tasks

Cognitive biases are flaws in judgement that shape how we perceive the world and how we behave. Some are so common you can use them to ensure your website achieves its goals.

When a user is working on a task, relevant information and processes are stored in their working memory. This information must be processed, and the amount of mental resources required to do so is known as cognitive load. As the brain has a limited amount of processing power, too much information delivered in too short a time can increase cognitive load to a point where it overwhelms the user.

Designers can reduce the cognitive load required of their users by reducing extraneous visual elements, building on information or models the user already knows, and performing tasks on their behalf wherever possible.

Colour Theory

A collection of guidelines and laws used to evoke emotion, set moods, and manage user attention through the application of colour

Colour theory is a collection of laws, guidelines, and interpretations which guide the selection and use of colours. In user experience design, the meanings associated with certain colours and colour groups is particularly significant.

There are two broad colour groups: warm and cool. Warm colours (e.g. red, orange, and yellow) convey happiness, enthusiasm and positivity. Cool colours (e.g. green, blue, and purple) can be used to create calming and relaxing environments.

Individual colours also have their own meanings. Red can be used to convey importance or danger; error messages and delete buttons are commonly red to make the user aware of this. Green can be used to reassure the user; success messages and primary buttons make good use of this colour to tell the user that everything is fine or that they are safe to proceed.

Beyond concerns of clarity and visual appeal, designers can consider the perceived meaning of the colours they use to strengthen the messages they are trying to deliver.

Constraint

The practice of limiting user actions on a system in order to make it easier to use

The right constraints can improve usability by limiting user actions. The concept was introduced by Don Norman, who suggested that the best way to avoid user errors is to prevent them from happening. There are two types of constraint, physical and psychological.

Physical constraints physically limit the user. For example:

Paths that allow only linear or curvilinear action, like a scrollbar.
Axes that enforce rotary motion, like the wheels on a car.
Barriers that stop or slow down user actions, like “Are you sure?” dialogue boxes.

Psychological constraints use the way that people perceive things to improve the intuitiveness of a design. They can be:

Symbols can be icons or sounds used to label, clarify, and warn users, like an error sound effect.
Conventions are based on learned practises, like the expectation that underlined text in the colour blue will be a link.
Mappings create a perceived relationship between elements – based on prominence, position, and appearance – to illustrate possible actions, like a label adjacent to a radio button.

Content Strategy

The planning, creation, and management of content

Content strategy is a collective term for many tasks related to the management of a set of content for a website or similar system, particularly with regards to creation, delivery, and maintenance.

It is the role of a content strategist to ensure each piece of content is delivered in the most appropriate form (be it text, video, image, or other media) and that it is findable, readable, understandable, actionable, and shareable.

Though content strategy is related to information architecture, the latter is more concerned with categorisation and labelling of content.

Cooperative Principle

Making the required contribution, at the appropriate time, as part of a normal exchange of information

Good communication boosts the design process through four considerations: quality, quantity, relation, and manner.

In practice, this means being open and truthful, only using the appropriate level of information, being relevant and orderly, and avoiding ambiguity and jargon. These are key ways to have an effective conversation, whether in person or as part of a design.

The Cooperative Principle is particularly relevant to the design of forms.

Dark Patterns

Interfaces designed to trick users into taking actions they may not choose otherwise

These visual techniques take advantage of cognitive bias. They are intentionally used to create interfaces that make users take actions that benefit the business – which they may not choose otherwise.

A dark pattern could be as simple as a pre-ticked checkbox during a registration process. Designers could manipulatively hide the checkbox and avoid prominent colours. Consequently, users are likely not to notice, fail to deselect and become subscribed to a newsletter, for example.

But they can be more complex. For example, some interfaces send emails or social media posts on users' behalf, to their own network – without them being aware. These could use hidden opt-outs, misleading buttons or confusing user journeys.

Common dark patterns include:

Roach motel: interfaces that make it easy for users to achieve goals, but difficult to exit if they desire e.g. memberships that are hard to cancel.

Forced continuity: after subscribing to a free trial, automatically rolling users over to a paid plan.

Sneak into basket: interfaces that add an extra item (or fee) to baskets during the online purchase process.

The outcomes seem lucrative, manipulating users to achieve business goals rapidly. But dark patterns are regarded as an unethical approach. Some businesses using these techniques have been publicly fined, which could reduce brand perception. Persuasive design has been advocated as the alternative.

Data-Driven Design

The practice of creating a design in which every decision is driven by empirical findings on user preferences, goals and behaviours

Because they are invested in the success of a project, even the most experienced designers cannot reliably predict what users want. Data-driven design techniques are used to remedy this issue. Unlike other design methods where the designer uses their intuition to make decisions, data-driven designs are steered entirely by empirical findings regarding user preferences, goals and behaviours.

Surveys, analytics and consumer research are all employed to see what design features perform well among users, instead of relying on the designer’s intuition. Those features that don’t perform well are discarded or altered in favour of more appealing ones.

There are various techniques designers can use to test their builds on users, including A/B testing. It’s also worth noting that the data designers collect can vary: it can be qauntitative or qualitative, and collected on a large or small scale.

Design Pattern

A reusable solution to a frequently recurring design problem

While working on a project, many encounter identical (or comparable) user experience problems that have already been 'solved'. These solutions are called design patterns. In most cases, they can be applied to solve issues quickly and effectively.

As design patterns are applied widely across the web, users have become familiar with (and even expect) them. Design patterns can help users quickly adapt to an interface. Users can interact without much thought, from using a similar interface to complete the same task elsewhere.

It's important to note that design patterns are not a one-size-fits-all solution. They may need to be tailored to fit the user interface and user experience of specific projects.

Examples of design patterns include:

Navigational breadcrumbs
Pagination
Using five stars for ratings
Dragging and dropping elements into the interface, or within it

Common responses that achieve the opposite (negative!) effect are named anti-patterns.

Ethnography

A qualitative research method where behaviour is observed in its natural setting

Ethnography is a practice that emphasises the detailed observation of people in naturally occurring settings. It originated in anthropology, with researchers studying a culture by spending long periods of time within it.

In User Experience terms, ethnography is when researchers observe and/or interact with users in areas of their everyday lives. This contrasts with interview-based research which is usually more time limited, takes place outside the user’s environment and is limited to a specific discussion format.

Ethnography enables researchers to go beyond demographics and gather rich data about users’ lifestyles, attitudes, motivations and context that couldn’t be achieved through other methods.

Eye Tracking

Technology which calculates and records what users are looking at, for the evaluation of user interfaces

Eye tracking is a usability testing technology that tracks the direction of a user's gaze, calculates the point on a screen where their eyes are focused, and records this data many times per second. This data can be visualised, and is often overlaid on video of the interface in use, enabling insight into the behaviour of users. Besides the gaze data itself, direct video and audio of users is often captured simultaneously to assist interpretation.

Typically, a test facilitator will be present to watch the user's performance in real time, but recording allows for review and in-depth analysis after the test has finished. Other user testing techniques like observation, interviews, and the think-aloud protocol are often combined with eye tracking to substantiate findings.

Due to the high sample rate, it is possible to precisely calculate useful statistics like discovery time. Gaze plot and heatmap visualisations are common products of eye tracking analysis software, and are often used as evidence to demonstrate observations and back up suggestions.

Findability

How easy it is to find information in an expected location

Findability is about a user’s ability to locate a specific piece of known information in an expected location. Users already know where to find the information, they are just trying to get there. If the location has high findability, users can reach it easily. This differs from searchability, where users are hunting for information in an unknown location.

There are two sides to findability: how easily a site is found through organic search and how easily content is found from within the site itself. For a site and its content to have high findability, it needs to have a good user interface with a search bar, high accessibility and great SEO.

Good findability is also characterised by search term suggestions, term highlighting, and the ability to locate items even if search terms are spelt incorrectly.

Fitt's Law

The size and distance of a target affects the time required to move to it

Devised by psychologist Paul Fitts in 1954, this law states that the time needed to make a single movement to a resting position over a target is influenced by the distance between the starting point and the target, and the size of the target. For example, moving a mouse pointer to rest on a large button a short distance away will take less time than moving the pointer to a smaller button at a greater distance.

Fitts's Law has been shown to work in a wide range of conditions and using different parts of the body, for example hands, feet, eyes, and head-mounted sights. It also works with different input devices and in various physical environments.

Faster movement speeds and/or smaller targets will reduce accuracy. Designers can make targets larger or closer to decrease the time needed to move to them, but care should be taken to ensure the benefits of these changes don't cause other usability problems.

Five Hat Racks

Information can be organised in five ways: by category, time, location, alphabet, and continuum

The organisation of information highly influences how it is understood by users. The Five Hat Racks design principle was originally developed as part of Richard Wurman's 1989 work

Information Anxiety,, exploring how to increase the amount of information we can grasp, given the digital age's creation of a sharp increase in the volume of data available to us.

Wurman highlighted that "while information may be infinite, the ways of structuring it are not"; regardless of the specific subject material, effective structures can increase the amount of information people can retain. The 'Five Hat Racks' design principle reveals the five ways to best organise information.

Location: sorting by physical (geographic or spatial) location. It should be used when giving directions, or where position is important, such as landmarks on a map, or historic sites.
Alphabet: ordering by alphabetical sequence, such as dictionaries and encyclopaedias. It is most often used to increase efficiency when people need to access vast amounts of information, and exists as a back-up when it isn't clear which sorting strategy is most appropriate.
Time: ordering by chronological sequence, such as TV guides. It is most effective when users require a time-based sequence or presentation, such as cooking instructions or historical timelines.
Category: grouping by similarity or relatedness, such as by colour, shape, or model. It should be used when people would naturally look for something by category, like when looking to purchase a new fridge, they would expect it to be grouped with kitchen appliances.
Continuum (or hierarchy): ordering by magnitude, such as highest to lowest, or best to worst. It is best used when users will naturally wish to compare the information.

The five methods are also known by the acronym ‘LATCH’.

The name is derived from an analogy, where 'hats' represent information, and 'racks' are the organisation strategies on which they are hung.

Flexibility Usability Tradeoff

As flexibility is increased, usability decreases

Designers must compromise between the extremes of a completely flexible system and perfect usability. A completely flexible system, which could accommodate any task, would be infinitely complicated and so very difficult to use. A perfectly usable system, through removal of confusing or distracting elements and functions, would be incredibly simple, to the point where its usefulness would be very limited.

A good balance between flexibility and usability is dependent on the needs and expectations of the user. If the needs of the audience are clearly defined, specialised solutions that target those needs exactly will be more successful. If the needs of the audience are very broad or cannot be clearly defined, a flexible solution will be necessary.

Fogg's Behaviour Model

Motivation, ability and a successful trigger are all necessary, in a single moment, before an action will be carried out

At its simplest, this model helps designers to identify what stops users from performing particular actions. Named for its developer BJ Fogg, it states that a lack of motivation, an inability to carry out the task, or the absence of a trigger can each be responsible. Each of the three elements has a collection of subcomponents which can assist the designer in identifying the exact issue.

It is important to note that the model states all three elements must align simultaneously for the action to be taken.

Folksonomy

A system of user-defined content classification, where content is tagged with phrases they feel reflect the subject

Folksonomy is a system of content classification where users attach tags containing words or phrases they feel are most relevant to a specific piece of content. Similar to (and sometimes referred to as) social tagging, they aid navigation outside of a traditional taxonomy system, where site owners classify content within a rigid framework. User generated folksonomies can be used alongside taxonomy to give users greater freedom in navigation.

The term ‘Folksonomy’ was created by Thomas Vander Wal in 2004 to describe the way websites were giving users the freedom to decide what a page’s content was about. Flickr is an early advocate of this system. Flickr allows users to tag words they felt best described the images they were uploading. If any user wants to see all images tagged with a specific word (or phrase), they could click on it to reveal all images associated with it across all of Flickr. This way, image uploads aren’t constrained by a site owner’s taxonomy that may not be relevant to their content. Visitors have the freedom to navigate through user-generated content classification.

A folksonomy gives rise to collective intelligence. But, as it’s publicly sourced, the system can be open to abuse. Tag clouds are a common visualisation of folksonomy, with the most used phrases appearing more prominently than others. This sort of functionality can be found most regularly on blogs or news sites, where a large amount of content can create patterns in phrase popularity.

Gestalt Laws of Grouping

A set of principles which describe how humans perceive patterns in objects

Proximity: when elements are placed near to each other, they are perceived to be grouped. For example, in a HTML form, if a label is placed too far away from the field it is associated with, they will not appear to be related.
Similarity: when elements look similar or are identical to each other, they are perceived to be grouped. For example, in most desktop operating systems, each file format has a unique icon. When files of various formats are shown together, the files of each format are perceived as a separate group.
Closure: when elements are arranged together in a manner resembling an incomplete shape, the shape will be perceived. For example, a circle broken into four quarters, with space in between, will still be perceived as a circle.
Continuity: when two or more objects intersect, they are perceived to be one object. For example, when two straight lines intersect, they are perceived to be a single 'cross'-shaped object, not two separate objects.
Common fate: when objects move in the same direction at the same time, they are perceived to be grouped. For example, navigating between slides in a carousel, the images, text and buttons on each slide will move together, showing that they are grouped.

Graceful Degradation

Building an application for modern browsers while ensuring it remains functional in older browsers

Graceful degradation is a practice which enables the use of modern internet browser features, without sacrificing accessibility in older browsers.

For example, rounded corners on elements can be achieved with simple CSS rules in modern browsers, and simply not shown in older browsers. A website which ‘gracefully degrades’ may not appear the same in older browsers, but will typically retain core functionality and usability.

Care should be taken that the user experience is not be compromised. For example, telling users to upgrade their browser is not ‘graceful’.

The approach is associated and compared to progressive enhancement. Both approaches can be combined to offer the best support for a variety of browsers.

Grid

A two-dimensional structure of guide lines used to structure web pages

Grids have long been used in visual design to add structure and consistency to a page. Objects on the page are sized and placed to fit a regular, two-dimensional system of lines, ensuring regularity and alignment. The guidelines themselves are invisible in the final product.

For the web, grid systems can broadly be categorised as 'fixed' or 'responsive'.

Fixed grids have predetermined dimensions, often intended to suit the size of certain devices. For example, the popular 960 grid, named for its width of 960 pixels, is intended to fit neatly on computer monitors with a width of 1024 pixels. When viewed on a smaller device, the page must be panned or zoomed to be seen in its entirety.

Responsive grids restructure the page to suit the size of the device used to view. In this way page content appears to be optimised for a range of screen sizes. Though flexible grids are not new, the rise of smartphone and tablet devices has fuelled the growth of responsive technology.

Modern web grid systems are often packaged with code libraries (together known as 'frameworks') to simplify development of pages designed to fit the accompanying grid system.

Heuristic Evaluation

A method used to identify usability problems, by judging adherence to established usability principles

This technique assesses the usability of an interface by examining its compliance with established heuristics, or 'rules of thumb' – principles which are widely recognised to improve the usability of a system.

For example, a common heuristic states that the user must be able to determine the current state of the system at all times. In a heuristic evaluation, the tester would examine the system under a variety of conditions, noting if the system demonstrates its state in each case. The heuristics used in any given test may vary, and some may only be applicable under certain conditions.

Hick's Law

The time taken to make a decision increases as the number of options increases

Hick's Law is also known as the 'Hick-Hyman Law'. In situations where a decision is made between multiple equal options, the time taken is related to the number of options available. A decision between few options will take less time than a decision between many options.

In interface design, this principle is often quoted to argue for the elimination of distractions and a reduction in the number of options presented to the user. It is especially relevant for tasks where time is an issue.

Hick's Law does not apply when:

Options are spread between layers in a complex hierarchy
Options are presented on unequal terms
The user is highly familiar with the options available
Significant reading is required to understand each option

Hook Model

A four-phrase process that companies use to design habit-forming products and services

Nir Eyal defined the Hook Model as a process where users become ‘addicted’ to a product or service. The model builds upon BJ Fogg’s Behavioural Model (Behaviour = Motivation + Ability + Trigger).

The hook has four sequential stages that if repeated can generate unprompted, repeat user engagement. These four stages are:

Trigger – that cues the user’s action. Initially external triggers (e.g. an alert) are required. After going through the hook repeatedly, internal triggers, often negative emotions (e.g. fear or anxiety), suffice to engage the user as the behaviour has become habit (e.g. Tweeting when bored).
Action - is the behaviour done in anticipation of reward (e.g. receiving a ‘Like’). Actions require triggers and their likelihood depends on the user’s motivation and how easy the action is.
Variable Rewards – are required to form habits. Anticipation of unpredictable rewards is highly motivating, and activates brain areas associated with desire.
Investment – is what the user puts into the product to improve it for their next use (e.g. inviting friends, subscribing). Investments make triggers more engaging, actions easier, and rewards more exciting, so habits are more likely to form.

Information Architecture

The organisation of a set of information to maximise the ease of locating each piece of information.

Information architecture (IA) refers to the process of structuring and organising information to make it easily navigable by users. A well-considered structure is an important part of any system which allows users to browse and add to a large database of information.

A key consideration in IA is the taxonomy, which defines how all information in the system is categorised and labelled. Typically, the information 'set' in a system will be related to a specific topic, or 'domain'. For example, the information set for a stock system for a music store would be related only to the items they sell, and its taxonomy would include labels like artists, releases, etc., and it would be categorised by genres, media formats, etc.

Researching the mental models of the information held by key user groups is crucial. A middle ground often has to be found between the mental models of domain experts and laymen, so the architecture can be grasped by both user groups. If the model used to structure the information does not match (or is not compatible with) the models of the key user groups, they will struggle to understand it.

Iterative Design

In a bid to improve quality and functionality, this approach involves a cyclic process of prototyping, testing and refining a product

Iterative design promotes the constant refinement of a product throughout the production process. At every stage of the design, the product is tested and analysed to ensure that it meets and exceeds user expectations. Any areas for improvement are identified and remedied before the product moves on to the next stage of development and a new iteration.

One of the biggest benefits to iterative design comes from having users interact with the various iterations. Researching and testing the iterations like this means you can identify unpredictable user needs and behaviours and design the next iteration to accommodate for those requirements.

This is a cost-effective approach to design because if you can recognise issues early on, it is easier to rectify them than during the final stages of the production process.

Job Stories

Defining design problems based on user motivation and situation can facilitate team discussion about finding the best solution

Writing job stories helps the team to discuss potential design solutions while building a product. Each job story explores a user's situation, motivations and goals, alongside the expected outcome of using a product. This becomes a specific design issue to solve.

The structure is as follows:

"When___, I want to___, so I can___"

For example:

"When I find an interesting article but I don't have time to read it (situation), I want to save the link (motivation) so I can read it when I have some free time (expected outcome)."

The challenge is described as a need that a user might have in a specific context / situation, then what outcome they expect. But, it doesn't indicate the specific implementation needed. In the example above, it doesn't specify the solution should be a mobile app, browser plugin or bookmark. This means the design issue is left open for discussion, so the team can find the best solution(s) without any initial restrictions. Refusing to specify a user type is another advantage of job stories. This helps avoid assumptions based on personas. Instead, the design issue is focused on the concrete causality of the user's need.

Job stories are often presented as an alternative to user stories. But the two tools can be used together. Writing job stories can be used to define goals. Then, user stories help describe the features that will address each goal.

Job Stories were first mentioned by Paul Adams on the Intercom blog.

Kairos

The opportune moment when users are most susceptible to relevant, persuasive messages

Kairos is an Ancient Greek word that translates as ‘the supreme moment’, originally referring to persuaion in rhetoric. It’s a key persuasive technique. Considering Kairos is essential to boost appeal with audiences exactly when they are most likely to be persuaded, or when the content is most useful to them.

In UX design, applying Kairos effectively means considering the context in which a message or opportunity will be presented to the user. That’s combined with analysis of when the user is mos likely to engage with it. For example, museum visitors are encouraged to ‘exit through the gift shop’ as they’re more likely to purcase items after they have appreciated the exhibition. Similarly, there’s a better chance digital users will engage with content if it’s presented to them at a relevant and beneficial point in their journey. It’s where their attention and interest peaks.

Considering the timing and context of information from the user’s perspective is an essential element of creating effective user journeys that lead to successful outcomes. Understanding patterns of user behaviour is vital. Determining at what point in their journey, day or even lifetime that a user’s choice is made can be valuable in UX design, favouring those decisive, influential moments through Kairos.

Kano Model

A product development theory that classifies features into five areas to aid prioritisation

By classifying features into five categories, designers can meet basic needs and deliver delightful innovation without scaring off users.

Must-have features are the minimum expected functionality; they are taken for granted. Users will not be excited if they are present, but disappointed if they are absent.
One-dimensional features are received differently depending on how fully (or well) they are implemented. Users will be excited if they are implemented well, and disappointed if they are not.
Attractive features are unexpected. Users will be excited if they are present, but not disappointed if they are absent.
Indifferent features will neither excite nor disappoint users.
Reverse features are divisive; their reception depends on individual needs or desires. When present, some users will be excited, but others will be disappointed.

The model can also to be used to track the shift of features over time as innovative features become basic needs.

Laddering

A one-to-one interview technique to uncover the underlying reason behind a user's behaviour or decision

Laddering is a technique that helps interviewers gain deeper insight into the behaviour and rationale behind the participant's decisions. It can also be used to extract more detailed responses from conservative participants.

Interviewers often start with a simple, broad question. Listening closely to the participant's response, they would follow-up with another question to probe further. An example of this format would be:

Question: Why did you choose that pattern?

Answer: It was really simple.

Question: Why is a simple pattern important to you?

There are issues associated with this technique. As interviewers probe deeper, their questions can become more personal for the participant. If they are uncomfortable, participants could answer untruthfully to divert the focus elsewhere, or avoid the question completely. Alternatively, participants may genuinely not know the answer to a question.

Law of Trivialty

This principle refers to situations where trivial issues are given too much weight over more substantial ones

This principle states that the amount of discussion around an issue is often inversely proportional to its complexity.

C. N. Parkinson was the first person to distil this principle. It's best explained by using the example of fictional committees who preferred spending more time discussing the refreshments or colour of the bike shed, than considering the build of a nuclear reactor. This phenomenon is also known as the 'bike-shed effect' or 'bike-shedding' after the metaphor became popular in the 90s.

There are several reasons why this principle happens:

- People can find it easier to focus on smaller problems than what's most significant. The consequences of wrong decisions for trivial issues would have a smaller impact than bigger, complex problems.
- Trivial issues are likely to engage more people in discussion. Everyone can relate to something they see and experience every day, so more people are likely to feel knowledgeable enough to share opinions. Naturally, this can end up creating very long debates.
- A problem can be so simple that it puts extra stress on people. There are no logical criteria that can help make every decision. As they often come down to subjective elements, this can make people feel less confident. As a consequence, people spend more time considering than necessary, feeling overwhelmed by the amount of information to process.

This principle is useful to consider so the most important issues and ideas are prioritised, either during group discussions or considering issues alone. Suggestions for how to avoid this situation include:

Asking how significant the task is, and how much impact it will have on the bigger picture.
If a decision does not have a big impact in the long term, it may be necessary to opt for one of the options and stop worrying about the others.
Sometimes there is no need to involve too many people in a discussion. Also, it's good practice to ask for others' opinions only when you are ready for the feedback.

Leading

The space between each line of text

Also known as line height or line spacing, leading can improve the readability of text and create a vertical rhythm. The term is derived from hand-typesetting, where strips of lead were used to create space between each line of text.

Increasing or decreasing the spacing between lines of a block of text can alter readability. Reducing leading places lines closely together, which can make text hard to read. Users' reading flow is disrupted, as finding the next line is difficult. Increasing the leading can stop this issue, improving readability. Too much leading can cause the opposite effect. Lines of text appear disconnected, and use space less efficiently.

Leading is also used to create vertical rhythm on pages. Techniques include maintaining consistent spaces between different elements and repeating patterns, like a list of news articles. This allows the page to appear organised, balanced and easier to read as a whole.

Lean UX

A design practice which focuses on the end-goal and the elimination of unnecessary tasks

Lean UX is inspired by lean and agile development theories. It places greater focus on the actual experience being designed, and less on the deliverables.

With this approach, traditional documents are stripped down to their bare components to provide the minimum amount of information necessary for very short, iterative, design cycles.

A key element is feedback – early and often – both from the development team and users.

Lean UX requires input from the whole team to ensure success, rather than relying on a solitary designer working to a specification.

Learnability

Refers to the ease with which the use of a product can be picked up and understood by users

Learnability describes a platform’s capability to help users become familiar with the functionality easily and quickly. If a product, website, app or software has high learnability, the amount of time (or training) a person needs to become familiar with the system is reduced. It’s vital for the success of a platform!

Considering learnability encourages designers to seek a balance between designing for first time users and experts. Intelligent design can ensure first time users get up to speed easily and quickly without hindering expert (or power) users who demand more from a product or service.

Ways to improve learnability include understanding how users expect similar products to work. Aim to provide functionality that match users’ expectations, unless a different approach is found to be more intuitive. Usability testing is the key to proving great learnability in a product, as designers can see how users will interact with their product. That’s why usability is closely linked to learnability.

Progressive disclosure is another technique that’s valuable for increasing learnability. Making products look simple to use helps to establish a good initial perception. Decluttering the user interface is one way to achieve this. For example, showing users a selection of the most important options they might need, with specialised features for advanced users easily obtainable on request.

Legibility-vs-Readability

Related, but often confused, concepts which affect the user's ability to consume text content

Legibility concerns the recognition of text: the ease of identifying the shapes of characters and words. If the user can recognise text consistently, without strain or difficulty, it is legible. Many factors can influence legibility, for example the size of the type, and the contrast or the choice of font. Words that use a font regarded as legible can still be unreadable if the setting or the placement is poor. At the same time more controversial fonts can be made more legible by considering the layout.

Readability concerns the content behind the text: the words chosen and the concepts discussed, and how easily those are understood

Mapping

The implied relationships between controls and their effects

Mapping implies the nature of the relationship between a control and the effect it will have when interacted with. If the actual effect of the control matches what the user expected, then the control has good mapping.

For example, when a button for moving left in a series of images is aligned to the left of the current image, its placement implies how it will behave; it would be mapped well. If, on the other hand, the button was centred beneath the image, its placement would be ambiguous; it would not be mapped well.

Mental-Conceptual Models

The concepts are thought processes which define a user's understanding of a system's functions or structure

Users have a mental picture of how a system is organised, often mapping how objects work in the physical world. If the model used by the system designers is similar (or complementary) to the user's mental model, the user's understanding of that system is accurate. If the system uses a different model from the user's own, it can be difficult to use.

A system's actual model, whether or not it is compatible with the user's own, is known as the conceptual model. It is important to thoroughly research users' understanding to be sure the conceptual and mental models are compatible.

Miller's Law

The observation that the average human can hold around seven objects in working memory

Miller's Law (also known as The Magical Number Seven) is derived from a paper by cognitive psychologist George Miller, published in 1956. It states a human can have only 7 (plus or minus 2) pieces of information in their short-term memory at a single moment.

Miller’s Law has been used to justify limiting the number of items in an interface or display, for example the number of links in a menu. However there is some disagreement around that application of the law. The law only applies when the options are held in memory rather than, for example, visible on screen. The exact number of items which can be held in working memory is also disputed.

Most agree that Miller’s Law encourages the “chunking” of information into smaller, more logical groups, making it easier for users to remember, navigate, and choose between them.

Minimum Viable Product (MVP)

The most basic version of a product that early adopters will use or buy

The term Minimum Viable Product (MVP) was popularised for web applications by Eric Ries, the author of The Lean Startup. In the MVP approach, the product is brought to market as soon as possible, then features are added or improved based on the feedback of real users instead of assumptions.

An MVP can be launched sooner than a ‘complete’ product as non-essential features are postponed, reducing development time. This allows developers to discover if there is a real demand for the product, without spending a significant amount of time and money.

It includes only the minimum set of features that will satisfy the goal of the product, and the needs of early adopters. Choosing which features to include is a judgement call, but successful MVPs share some traits:

Valuable – users understand how the product will benefit them, and they want to use it.
Usable – the product can be used to fulfil its purpose.
Feasible – the product can be created and delivered when it’s needed, with only the resources available to the developer.
Encourages feedback – users are encouraged to provide feedback that can guide future development.

Many of the world’s most popular web applications and websites were developed in this iterative way. For example, Twitter was launched with basic functionality, with advanced features like “retweeting” being added later, after observing user behaviour and identifying the need for it.

Mobile First Design

The practice of designing for the smallest expected screen size, then enhancing on larger screen sizes

Often, when a responsive web design (RWD) starts with a large screen, designers can run into difficulty trying to squeeze elements onto smaller screens in later stages. By starting with the smallest screen size and working upwards, reconfiguring the layout and enhancing features, this dilemma can be avoided.

This approach can also be applied to content, contextual features, and development (specifically in the structure of CSS media queries).

Modular Scale

A series of numbers used to create consistency and rhythm

Modular scales are ratios that are used to determine the size of elements in a design. A harmonious scale ensures that sizes will be consistent and proportional. This makes the overall design more pleasing to the eye and easier to read.

When applying a modular scale to the web, a base number is required. In typography, this is usually the value of the body text size. The base value is multiplied (or divided) by the ratio to find the next value above (or below). Continue finding new values sequentially, by multiplying (or dividing) using the ratio.

For example (where body text size = 16px): 16 * 1.618 = 25.888 25.888 * 1.618 = 41.887 41.887 * 1.618 = 67.773

Common ratios include The Golden Ratio (1:1.618), The Perfect Fourth (4:3) and The Perfect Fifth (3:2). After values have been generated, they are applied to typography elements that must be larger than the paragraph text, like headings and sub-headings.

Multivariate Testing

Comparing complex multi-variable systems, especially for understanding market perceptions

A process for comparing the effects of multiple components of a website in a live environment. This is essentially many comparison tests performed on one page at the same time.

A dynamic website can be used to serve up different versions of a page in equal proportions to visitors. The key is then to gather the statistics on how all the different elements performed and what each visitor went on to do after seeing the elements under test. With many variants this can be a complex statistical challenge.

Numerous factors impact customer behaviour; this process can be used to test alternative text, form layouts, images, background colours, and so on. Not all elements have the same impact, so by comparing results from different tests, it is possible to identify the combination of elements that consistently produces the most desirable effect.

Carrying out multivariate testing on sites with low traffic can be time consuming as it then takes a considerable time to expose a significant number of people to each variation.

Native, Web and Hybrid Apps

Different approaches used to deliver mobile apps

When creating an app a number of different approaches can be used:

1) Native Apps Are installed through an app store and accessed via icons on the home screen. They are developed for a specific platform only (e.g. iOS or Android) and can take advantage of most of the device features (e.g. camera, contacts), incorporate gestures, use the device’s notification system and work offline.

2) Web Apps Are mobile-optimised webpages that look and sometimes behave like an app. They are accessed via a browser like any other web page. Web Apps are built in cross-platform web languages that enable some native-like functionality to be obtained in the browser, and work across all mobile platforms.

3) Hybrid apps Are web apps wrapped in a native app, to allow access to all device features and produce a better user experience. Like native apps, they are installed from an app store.

Each type of app has pros and cons, so the choice depends on your objectives and audience needs.

Ockham's Razor

When choosing between two equivalent options, the simplest should be selected

Ockham's Razor is a principle which argues that simplicity should always be preferred to complexity. When choosing between two designs with the same function, the option which is simplest should be selected. It may also be described as choosing the option which makes fewer assumptions.

Like the 80/20 rule and signal-to-noise ratio, Ockham's Razor is often cited to argue for the removal of elements which are not immediately useful or relevant.

Omni Channel UX

An experience including many touchpoints, with consistency and seamless movement between them

Omni-channel UX is an approach to design which seeks to create a seamless, integrated, consistent experience across all touchpoints, or “channels”.

A consumer might move between many channels in the lead up to a purchase: researching the product online, visiting a shop to try it, using a mobile device to check competitor pricing, then buying over the phone. With an omni-channel approach to UX, the retailer would examine all of these channels, looking for opportunities to ease the transition between channels, and to make information and messaging consistent.

An ideal omni-channel experience will make the same information available on all channels (e.g. inventory, promotions, customer account information, and purchase history) and allow customers to pause their task on one channel, then resume it on another.

It is important to consider not only the experience of each channel, but also how they hand off to each other, and how they track and make use of customer’s goals and details, to demonstrate continuity.

Paper Prototyping

Disposable Interface mock-ups, sketched on paper for quick iteration and experimentation

Website design in its most crude form, this exercise encourages designers and stakeholders to sketch interface concepts on paper to experiment quickly and efficiently. By working roughly with paper and pen, ideas can be tested and discarded before creators become attached to their work. Crucially, a great deal of progress can be made without spending time on detailed functional prototypes.

Paper prototyping can be an effective kick off exercise with clients, helping to surface requirements and expectations, and share vision for the project. Prototyping can be carried out as a group exercise, or participants can create sketches individually followed by group discussion to combine concepts for further exploration. The results of these sessions are useful reference points to take forward into wireframes or prototypes.

Participatory Design

Including the widest range of skateholders throughout the design process

This approach to the design process directly involves stakeholders, from project leaders to end users, anywhere from requirement gathering through to the appraisal of proposed solutions. By integrating these people into the process, designers can identify true needs and verify that solutions truly meet those needs.

Quick, low-fidelity exercises like card sorting and paper prototyping are often used in participatory design to start conversations and draw out useful knowledge.

Pattern Library

A collection of user interface (UI) design patterns

Design patterns provide standard, effective reference points. From the libraries, designers can build the elements required for common user interactions, as well as create solutions to usability problems.

There are many different types of pattern libraries, which focus on different aspects of website or app design. These include navigation, gathering data, social media, user onboarding, typography and alerts. Specific examples of design patterns include calendar pickers, form input fields, search bars and social icons. These design patterns are generally tailored to match a company's visual design, as well as their website's specific usability needs.

In large organisations where multiple disparate teams are working on a website, pattern libraries are an essential way to maintain consistency throughout. Applying a pattern library also means elements can be reused and updated centrally, thus reducing design and development time.

Peak-End Rule

A psychological heuristic that gauges judgment of experiences by evaluating users' feelings at their peak intensity and final moments

The peak-end rule is a heuristic evaluation where a person judges their experience based on their feelings at two key moments – the most extreme (peak) and the end. These two moments are proven to have more influence on a person's final judgement than the sum (or average) of their feelings overall. This rule holds for positive or negative experiences, and believes other reactions are not used to form a judgment (but are not forgotten).

In their 1993 study "When More Pain Is Preferred to Less: Adding a Better End", Kahneman, Fredrickson, Schreiber and Redelmeier provided evidence that test-subjects would be more willing to have a long unpleasant experience with a more favourable end, rather than a shorter, consistently unpleasant one. Kahneman and Fredrickson consequently theorised that emotions of peak intensity or the final moments provided a reliable average of the experience as a whole. They reasoned that the memory bias connected to emotional or recent events have a stronger impact over other events.

Using the peak-end rule means designers aim to create moments of user clarity within an experience, which would be found during user research. These important moments are to be emphasised so users recall the experience as enjoyable and valuable, even if the net unpleasantness/pleasantness could be improved.

Personas

Example characters who represent the user groups of a site, brand, or product

Personas are created to better understand the goals, desires, and limitations of each key groups of users or stakeholders for a design. As part of a user-centred design, personas are useful in making design decisions, defining features, and refining interactions.

Personas are typically created from data collected from user interviews. This data can include user behaviour, aims, ambitions, abilities, and environment. Developers often use additional details to create a well-rounded character. More than one persona is usually created for each product or design to represent the key groups, but only the most relevant persona should be the primary focus.

Persuasive Design

Designing interactions to influence the behaviour and decisions of users

Persuasive design considers the psychological principles of influence, decision-making, engagement, and social psychology at every stage of the production process. It highlights opportunities where interactions could be created as an emotional trigger, encouraging users to complete actions desired by the designer.

As opposed to dark patterns, persuasive design is used with best intentions in mind. For example, a service could compliment a user after completing an action, triggering an emotional response that could make them feel positive about themselves. Another example could be giving a user valuable information based on their inputs. This could improve the way they live and work.

From the designer's perspective, these triggers can increase user engagement with the service and help to build a stronger relationship with the user.

Examples of persuasive design techniques are:

Completeness: when prompted, users feel the need to fill in missing information.

Positive Reinforcement: telling users when they are doing well to keep them engaged.

Loss Aversion: telling users when they are about to miss out on something is a chance to hold their attention.

The Power of Free: users tend to go for items that are free, even if there is a price later on.

Privacy by Design

This encourages developers, designers and system engineers to consider the privacy of personal data throughout the design process

Privacy by design focuses on the prioritisation of data protection controls from the outset of the design process, as opposed to leaving them as an afterthought. It enshrines privacy enhancing techniques, such as encryption or de-identification, that aim to decrease the identifiability of personal data. Likewise, it may also include measures that increase the user’s control of their personal data, including granular consent mechanisms and privacy notices with high readability.

With the advent of the General Data Protection Regulation (GDPR), privacy by design principles will be legally required in some areas. However, it is generally good practice to encourage good practice in privacy by design in all sectors, as the UK’s Information Commissioner’s Office recommends.

These measures aim to minimise the risk of data breaches by maximising the protection of personal data.

Progressive Disclosure

A method for reducing complexity by showing only necessary or requested information

A technique for handling complex or feature-rich designs. By keeping the initial design simple and revealing less important information in stages, complexity can be reduced.

In interface design, a common application of progressive disclosure is to show the most frequently used features at the top level, and hide seldom used features in another layer, e.g. in a submenu. In this way, key features are noticeable and easily accessible, as infrequently used options are not a distraction.

The prioritisation of information should be carefully researched and verified to ensure it meets user needs and expectations. Once prioritised, the 80/20 rule can be used to determine what should be shown and what should be hidden.

Progressive Enhancement

A design and development technique which delivers essential features regardless of browser capability, and advanced features where supported

Progressive enhancement is an approach to web design that encourages the use of web technology layers (e.g. HTML, CSS, Javascript, images) in a manner that enables everyone to access the basic content and functionality of a website, regardless of their browser capability or connectivity. This base experience is then enhanced for those with a browser or connection capable of displaying them. Progressive enhancement can be best explained by a quote from American Stand-Up comedian Mitch Hedberg: 'An escalator can never break – it can only become stairs'.

For example, CSS3 animations enhance the user experience for browsers that support them, while older browsers still get the basic functionality.

The difference between progressive enhancement and graceful degradation can be hard to grasp. The former advocates delivering a base experience which can then be enhanced where possible, whereas the latter advocates allowing the website to remain presentable even if technologies assumed by the design (such as Javascript) are not present.

Rapid Prototyping

The rapid development and iteration of interactive prototypes, for testing purposes

Rapid prototyping is a cyclical approach towards design that focuses on quickly creating a functional, interactive prototype of a website or web application. The prototype is tested with potential users and stakeholders to check how the concept, usability and viability of the product are received. Based on the feedback gained through testing the prototype is then improved and iterated upon. The cycle of prototype, test and iterate is repeated rapidly until the developers are confident the prototype is ready to go into full production or release.

Rapid prototyping is an effective method for quickly communicating how a design might work. Though it cannot completely replace extended and more in-depth usability testing, it can help quickly identify major interaction, navigational, structural and presentation issues in a product.

As prototypes are produced and subsequently iterated upon quickly they can often be developed with minimal costs. Risk can also be mitigated as it enables designers to identify and resolve major issues during the prototyping process early on, rather than after time, resources and other costs have been invested.

Despite this, a risk with rapid prototyping is that designers may not have sufficient time to properly consider the implications of their design and explore viable alternatives. Therefore it should not be seen as a silver bullet and should be employed when appropriate, particularly if there is a shortage of time and/or budget.

Reciprocity

Encouraging users to carry out an action by offering an incentive

In many situations we pay back what we receive from others. This social convention is widely used in user-interface design, giving users something for free before asking them to carry out an action.

For example, a user may be willing to provide their contact details in exchange for a free research paper on a topic they are interested in.

The balance of the value of the offer and the effort required of the user should be carefully considered.

Recognition over Recall

Recognising familiar things is easier than recalling them from memory

Recognition memory is simply the realisation that something has been experienced before. It is easier to develop than recall memory, and it lasts longer. Recall memory is the retrieval of events or information from the past. It is slower, and harder to develop and maintain.

Stimulating recognition memory is more effective than expecting users to recall things unaided. For example, it’s easier to choose the correct answer from a list of possible answers than it is to remember the correct answer outright. The list of answers narrows the number of possibilities that need to be considered, and provides cues which help us to pinpoint the correct memories.

Furthermore, a familiar option is often preferable to an unfamiliar option. Simply recognising one of the available options is often enough reason for users to choose it.

Make options clearly visible and available to aid recognition memory. Don’t rely on users to recall essential information without help.

Responsive Web Design (RWD)

Techniques and technologies for optimising user experience on a wide range of devices

The growth of smartphone and tablet devices in recent years has seen the range of screen sizes and resolutions skyrocket. As it would be impractical to build many websites to suit every possible environment, responsive design has emerged as a method for creating single, flexible websites which can deliver an optimal experience throughout this huge range of devices.

Through use of CSS media queries, many device properties can be detected. By identifying the width, resolution, and display ratio of the screen (amongst other things) the layout and style of the page can be adjusted to suit.

It is important to note that responsive web design (RWD) only affects the layout and visual style of the page. Commonly confused with RWD is Adaptive design, a catch-all term which includes other techniques and technologies used to enhance the user experience to best suit the device.

Satisficing

In decision-making, this term indicates when the option that is good enough is chosen over a better path, which require more time or effort to discover.

In most cases, users will look for the quickest solution to their problem, even if it isn’t the ideal one. They do this by subconsciously weighing the importance of their query against the time taken to find the answer. The quickest solution that will suffice is often favoured over the optimum solution which would take longer to conceive or achieve.

So, the concept of satisficing suggests a tendency in human decision-making to exert the minimal effort. The term was first coined by psychologist Herbert A. Simon in 1956 as a mixture of the words ‘satisfy’ and ‘suffice’. Users consider their time as precious. This should be closely considered in a user-centred design process.

For example, don’t presume users are prepared to take additional steps to reach their goal. By providing easy steps for users to follow, the likelihood of them continuing their journey to find what they need increases. Presenting clear options at a glance that meet users’ needs is often more effective than designing detailed, elaborate interfaces. Consider satisficing by ensuring users realise what they can gain from a website, before exhausting the time they will spend searching for it. Simple and effective, over advanced and impressive.

Searchability

If an item has high searchability, users can easily locate information from an unknown location, either internally or externally.

Searchability refers to how easy it is for a user to pinpoint information in an unknown location. Users input the information they do know, such as a specific word or phrase, in an attempt to locate more information about a topic. A highly searchable item will then rank highly among the results.

For instance, if you type a phrase into Google, it will supply you with all results pertaining to that phrase. The lower down the results list you go, the lower the searchability of the items shown.

Searchable websites feature strong accessibility and well-written content that is user focused in all respects. They are made searchable through meta tags, strategic keyword placement, and links to related and relevant content.

However, a searchable site isn’t only searchable on search engines. Users may also look for content internally, so linking content together via a logical information architecture and using strategic keywords is of the utmost importance.

Signal to Noise Ratio

The ratio of relevant to irrelevant information visible in a display.

This term is borrowed from scientific and engineering fields such as electronics. It is used to demonstrate the amount of useful or important information that is visible, compared to the amount of irrelevant or unimportant information. The highest possible signal-to-noise (SNR) ratio is desirable.

Designers should consider removing, hiding, or reducing the visual weight of unimportant information to increase the SNR ratio, and therefore clarity.

Sitemap

A hierarchical diagram which defines the number, nature, and structure of pages (or views) in a website or application

Typically created during the early phases of a project, this document defines the pages or views which make up a website or application, how they are related, and how content and functionality will be distributed between them. This will then be used as the basis for further development, for example wireframing.

For websites or applications which are rich in information (and so probably comprised of many pages) it is important to ensure the structure is compatible with the mental models of their users.

Note that this planning document is separate and distinct from the sitemap web page used to help users navigate a website, or the XML document intended to allow search engines to index it.

Skeumorphism

The use of elements from an older design in a place where they are no longer necessary

Skeuomorphic design makes use of elements from a previous form of an object, when those elements are no longer needed. Examples can be found in designs of all kinds. In digital design the term typically refers to a resemblance to real world objects.

On-screen examples include tabs that behave like tabbed folders, a button which appears to have depth, or a page-turning movement in an eBook. Skeuomorphs can also be audible, like the sound of a shutter on a digital camera which has no shutter.

Critics of skeuomorphism say it creates forced metaphors, relies on nostalgic elements (e.g. address books) that are foreign to younger users, and can hinder creation of more useful designs that aren’t constrained by the physical world or previous designs.

Advocates say the approach can help users understand new technologies by using shared cultural understanding to quickly convey the purpose of an object.

Social Proof

A persuasive phenomenon where a person's decision is based upon the observations of a group

This persuasive phenomenon describes how people can make decisions based on others' observations. Ultimately, this may mean they arrive at the same conclusion. The behaviour is fuelled by people's desire to act 'correctly' in any given situation. When unsure of the decision they should make, people often follow others who they perceive to have greater knowledge.

In essence, social proof can help sway people's decisions. But this mentality is more likely to occur for recognised peers. For example, their boss may be less persuasive than a colleague.

Social proof is one of the six principles of persuasion by Robert Cialdini. In a noted 1935 experiment by Muzafer Sherif, participants were asked to describe how they perceived the movement of stationary lights in a darkened room - both on their own and with a group. Sherif discovered participants consistently agreed with others in a group situation, relying on each other's outspoken observations for guidance.

As a persuasive marketing tactic, social proof has been employed in the physical world for a long time e.g. organisers creating seemingly unnecessary queues into shops/nightclubs. Especially since the rise of social media, it has also been used in the digital space.

There are five types of social proof (with examples):

Expert - recommendations from a credible industry leader
Celebrity - endorsements from a well known public figure
User - testimonials/reviews/star ratings from current users
Wisdom of the crowds - numbers of users/social media followers of product/service
Wisdom of friends - a friend through social media mentions product/service.

Other examples include:

Badges/Certifications
Media logos
Social media sharing
Featured clients of the product/service

Style Tiles

A sample of fonts, colours and interface elements, deliberately separate from page layout, used to explore graphic design options

Somewhat like a textile swatch, a style tile is a small sample of a proposed graphic design direction. Wireframes are used to explore page layout separate from visual design, so style tiles are used to explore visual design separate from layout, helping stakeholders to focus their feedback only on the visuals.

Another similarity style tiles share with wireframes is their simplicity and low fidelity, allowing multiple directions to be pursued and iterated on rapidly, at the same time, before settling on one to develop further.

The Fold

A theoretical horizontal line, below which the content on a web page is not visible without scrolling

This term is borrowed from the literal horizontal fold in the centre of broadsheet newspapers. In that medium, headlines and other eye-catching content are often placed above the fold line, to be visible when the newspaper is folded in half for display.

On the web, the 'above the fold' area is seen as the page first loads, before the user has scrolled down. Due to the many varied display sizes used to browse the web today, the exact location of the fold will differ between devices.

The importance of the concept of the fold on the web, and how content is arranged relative to it, is still debated.

The Good Enough Principle

This suggests that consumers will use a product that is good enough for their needs, so it is unnecessary to strive for perfection with a design's first iteration

During development, a designer’s default approach is often to strive for perfection. But the ‘good enough’ principle suggests that doing so is too costly - both in time and money - and that perfectionism increases the risk of a competitor releasing a similar product first and stealing market share.

This principle assumes that consumers will use a product that meets a vital user need, regardless of how it looks or the quality of its functionality. If the product does a great job of its core function, users will utilise it.

Once the basic new product has been released, designers can begin to harvest real, immensely useful customer data and feedback early on. With this information, they can improve and refine the product as they go.

Google, Microsoft and Facebook are all excellent examples of the ‘good enough’ aproach in action: since their first iteration, these companies have consistently refined and improved their platforms based on consumer data and feedback.

The KISS Principle

This principle states that simplicity should be a core aspect of any design, with complexity kept to a minimum

KISS is shorthand for ‘Keep it simple, stupid’, a design principle that prioritises simplicity over complexity in all aspects of a design. It originates from the U.S. Navy in the 1960s, and is most associated with the aircraft engineer Kelly Johnson. Johnson aimed to encourage simplicity in aircraft design, to the point that the average mechanic could repair a jet with minimal tools even under combat conditions.

Since Johnson first introduced his principle, KISS has been adopted across the engineering world, including software engineering and UX design. That’s because the easier something is to understand and use, the greater chance it will catch on and users will engage with it. After all, if users can’t understand a product it is unlikely to increase its market share, but one that is easier to understand will.

Importantly, the design must not be made so simple the user cannot complete their objective. If a complex design will enhance the user’s experience it should be used, but complexity shoud be eradicated if it’s presence is unnecessary.

Think Aloud Protocol

A method of gathering verbal data during usability testing

This technique asks participants to verbally describe everything they do, think, see, and experience while they take part in a usability test.

Researchers can observe first-hand how tasks are completed, rather than just seeing the end result. It is important that observers simply take objective notes of everything users say and do, without interpreting or influencing them in any way. Using audio and video recording allows researchers to gain understanding of how and why participants reacted in certain circumstances.

There are two main approaches: capturing what is recorded during the task, and what is recorded after it.

A slightly different method is the Talk-Aloud Protocol. Users only describe their actions, and do not offer an explanation. This can be more objective, as the users do not interpret their actions for the researcher, or justify their choices.

Tunnelling

Guiding users through a sequence of activities, step by step, to encourage certain behaviours

B.J. Fogg coined the term tunnelling as one of his seven tools of persuasion. Tunnelling, also known as Guided Persuasion, is when you lead users through a series of pre-defined steps. All navigation, content and functionality that could distract the user are eliminated, decreasing the user motivation required to complete a task and increasing the likelihood of task completion. For example, software installation wizards typically apply tunnelling techniques.

Tunnelling makes it easier for users to go through a process as the interface directs them. It controls their experience, in order to encourage specific behaviours, without taking away their sense of control.

In addition to helping users to complete tasks, tunnelling can also persuade users by exposing them to things they otherwise may not see. For instance, throughout software installations users are captive audiences, so may be presented with promotions for supplementary products.

URL First Design

URLs should be designed in the early stages of website development, as users must be able to read, guess and edit them, and it helps designers to define site structure

This principle advocates that URLs should be designed before creating the sitemap, wireframe, or code for any given website. This is because URLs are the 'one universal syntax' of the web (Kyle Neath, 2010), and remain the same across any browser. As users often attempt to memorise URLs and type them directly into a browser, users should be able to read, guess, and edit URLs. An example of a 'readable' URL is: http://www.cyber-duck.co.uk/user-experience.

URL-first design is an exercise which helps designers to explore potential ways to organise the information which is to be contained on the website. It ensures the site structure is defined with the content in mind, and duplication is avoided. This is better than letting the site structure define the URLs towards the end of the design process. This idea adheres to the 'Don't Repeat Yourself' (DRY) principle, which states that 'every piece of knowledge must have a single, unambiguous, authoritative representation within a system'.

URLs should be:

Simple, avoiding mixed-case, using hyphens (-) between words where appropriate, and stripped of file extensions like .html, .php & .aspx.
Understandable, as people attempt to 'read' them, and will use them to determine how useful the page is to them.
Linked to permanent, unique resources on the website.

Usability

How easy - or hard - it is to use a site

This judges whether a design helps users achieve specific goals in a particular context with effectiveness, efficiency, and satisfaction. It is often associated with the function of a product as well as being a characteristic of the user interface. It is a key part of the definition of 'usefulness' alongside utility, and is composed of five main elements.

'Learnability' determines how easily users can navigate and operate a product, while 'efficiency' comes from how quickly they can perform those tasks once they have learned the design. The 'memorability' comes from the ease of returning to the design after not using it for a while, and there is the 'satisfaction' that comes from how pleasant the design is to use. It is also important to monitor how many 'errors' users make, taking into account the impact of these and how easy it is to recover.

There are two main ISO standards for usability: ISO/TR 16982:2002 on the ergonomics of human-system interaction – usability methods supporting human-centered design; and ISO 9241 on the Ergonomics of Human System Interaction.

User Centered Design

An approach to design where user needs and desires are primary concerns

While user experience (UX) is an overarching title, User-Centred Design (UCD) is a design process and methodology where the user and the user's experience are pivotal to the whole project. The core elements of UCD are visibility, accessibility, legibility, and language when designing a system, app or website.

UCD was originally conceived by Donald Norman in his book Design of Everyday Thingsin 1986. He suggested that design should be based on the needs of the user, and slightly de-emphasised aesthetic concerns. When UCD is used in the most pure form, project stakeholders and target users are consulted via testing prototypes to identify issues early.

User Experience

A blanket term for all factors which influence the user's perception of a product or service

User experience is often abbreviated to UX, and is also known as 'experience design'.

When interacting with any system, there are many qualities which affect the emotional response of the user. Aesthetics, responsiveness, familiarity, and usability are just some of the elements which contribute to the experience, and the whole can be loosely described as the 'feel' of 'look and feel'. With such varied factors to consider, evaluation of user experience is examination of the work of many disciplines: graphic design, user interface design, copywriting, information architecture and so on.

User experience design as a profession is thought of by some as a directorial role, where professionals in many disciplines are led in the creation of a product. At the very least it can be said that user experience design is an inter-disciplinary role which calls for knowledge and practical ability in multiple areas, such as interaction design, psychology and research.

It is important to note that user experience is not the same as usability or user interface design. The former is a measure of the ease-of-use of a system. The latter is one factor of many which comprise the total user experience.

User Journey

An outline of the overall scenario and subsequent steps a user will take while interacting with a product or service

Designers create user journeys to explore how users currently (or potentially) interact with a product, service or website. Informing UX strategy and design, they are usually made during the requirements gathering phase of a project.

User journeys are beneficial for a few reasons. Firstly, they help communicate the project's vision – showing stakeholders what the work could achieve for users. Secondly, analysing current user behaviour and needs helps designers map out required features and functions easily. Thirdly, they help designers formulate the information architecture and interface design required to deliver the steps users typically take.

A user journey should be produced for each persona. Each one will tell a unique story from that user's perspective and help designers meet their overall needs.

The layout, complexity and content of user journeys will depend on the project and product. But common elements include:

Persona characteristics
Journey phases
Triggers
Channels
Context of use
User touch points
User activity & interactions
User thoughts, feelings and emotions
System actions

User Stories

In an Agile environment, this tool is used to describe a feature from the end user's perspective, in simple language

Writing user stories helps to gather all the requirements of a product's audience. Then, project managers can prioritise what order they should be solved, involving the production team and stakeholders.

A user story contains a role or user type (the 'who'), a goal or desire (the 'what') and finally a benefit (the 'why'). They must be brief and written in plain language, so non-technical people can easily understand them. A user story is normally structured as follows:

"As a____I want to___so that___"

For example:

"As a registered user, I want to select my topics of interest, so that my dashboard is personalised."

Sometimes stories also include acceptance criteria. These are conditions the product must have for the story to be considered complete. So, acceptance criteria are especially useful for testing.

User stories should be very specific. If they are more generic and describe a macro functionality, they are called epics. Epics should be recorded, then broken down into more granular user stories. These would work together to 'solve' the over-arching epic. User stories are told from the user's perspective. So, designers should write them after research, as they would have built sufficient knowledge about the audience. Some teams use personas and their goals to define what stories to write.

Some of the benefits of using user stories are:

They are simple to understand
They help developers to estimate effort to build
They help communication between parties
They give an overview of the project requirements

Some of the cons are:

If created just by using personas, they could be based on assumptions. Job stories are an alternative tool
They do not address non-functional requirements
They can be too vague

User Testing

Evaluating the usability of a product by observing user behaviour

User testing is the process of observing the use of a system in order to discover technical or usability issues. The findings from these studies are then used to improve the system.

Though user testing is a discipline in itself, it does not need to be carried out with a large group of people, and does not require any expensive hardware or software. Up to 80% of usability issues can be discovered with only five participants, after which the rate of discovery diminishes.

Common user testing methods include:

A/B testing
Card sorting
Eye tracking
Focus groups
Interviews
Observation
Surveys
Think-aloud protocol
User diaries

Ideal participants for usability studies are real users (or representative users) who have had no involvement in development and who are not knowledgeable about the system.

User testing can be carried out as part of a bug testing or quality assurance (QA) phase. However, it is advisable to test with users early and often in the development process. In this way findings can be implemented directly without the need to revisit work which was thought to be completed.

User testing is also known as usability evaluation.

UX Versus UI

UX refers to the whole User Experience, whereas User Interface (UI) is one element of this experience

User Experience (UX) is how users think and feel when interacting with a website or product. UX designers aim to improve customer satisfaction by enhancing the value, ease of use and pleasure experienced during these interactions.

User Interface (UI) refers to the physical and technical ways that users interact with websites or products (e.g. clicking on a button). UI designers visually guide users through an interface, defining how elements look, work, where they are placed and how easy it is to understand them. Being at the front line of how users interact with many businesses UI is one of the most important tools of UX.

Some argue that UX and UI are synonymous as the output of UX is often manifested in the user interface. Most, however, agree that this overlooks the strategic nature of UX - utilising research and user testing to ensure you build things that people actually want, need and will use.

Visual Weight

The ability of a region or element in a composition to draw attention, often though contrast or colour

Elements of a design or image have different degrees of 'heaviness' in relation to each other. By ensuring that key elements are 'heaviest', the viewer's attention can be drawn to what is most important.

The visual weight can be obvious, such as when a large object looks heavier because it takes up more space than smaller ones. However, things get more complex when different colours and colour combinations are introduced. The contrast of the foreground and background, the changes in density and complexity, and varying levels of saturation also play their part in the relative 'heaviness' of each element.

By carefully balancing all of these options, a visual hierarchy, symmetry, balance, and harmony can be developed.

Web Accessibility

The degree to which websites and web applications are available and usable by people, regardless of ability

Web accessibility is a term often used to describe the right of access to web services and products for the elderly and people with disabilities. In this context, accessibility depends on how a person's disability or age affects the way they perceive content on a page and how they navigate between pages. A wide range and scale of disabilities can affect accessibility, from visual, hearing, and physical impairments, to motor and cognitive impairments.

Though providing an inclusive and open experience for disabled users is an important facet of web accessibility, it is a far more wide-reaching topic. Creating an accessible website or application can benefit any user. A good example of this is a responsive design that makes a website's content and functionality more accessible for people, regardless of what device they are using to access the web.

Web accessibility is not to be confused with web usability, which is the extent to which a website can be used by people to complete specific goals with ease and efficiency. That said, implementing accessibility best practices will often help improve the usability of a website or application. A good example of this is when Tesco launched an 'accessible' version of their website in 2002. A huge success, by 2005 it was generating revenue in excess of £13 million per annum. While in large part this was due to blind customers now having access to Tesco's online store, a study found that many non-disabled customers switched to the Tesco Access site, reporting it easier and faster to use.

Wireframe

The framework of a design without textures, colours, typography or graphics

A typical wireframe defines the overall layout, key elements and navigation of a design. It shows what goes where, providing a visual overview of how everything is organised and interlinked.

Wireframes are particularly useful in helping to arrange design elements in the best way, making sure that the original reason to develop a site can be achieved within the creative and other design parameters.

They come in many forms – anything from a simple pencil drawing to a detailed software-generated overview. What they typically have in common is their focus on functionality, behaviour and priority of content, taking into account any user research.