UX Training

BEGINNERS GUIDE

Marko Aleksic

Chapters

Intro

User Research

Card Sorting

Contextual Interviews

First Click Testing

Focus Groups

Heuristic Evaluation

Individual Interviews

Parallel Design

Personas

Prototyping

Online Surveys

System Usability Scale

Task Analysis
Usability Test

Use Cases

Outro

III

VII

VIII

XII

XIII

XIV

XVI

XVII

What is UX?

CHAPTER I

Definition

The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother.

Next comes simplicity and elegance that produce products that are a joy to own, a joy to use.

- Don Norman and Jakob Nielsen

It’s not just what it looks like and feels like.

Design is how it works.

The User Experience is

Everyone’s Responsibility!

UX - U = X

Where “X” now means “don’t do it”

Who is

User Experience designer?

UX designers are primarily concerned with how the product feels. A given design problem has no single right answer. UX designers explore many different approaches to solving a specific user problem. The broad responsibility of a UX designer is to ensure that the product logically flows from one step to the next.

UX Designer also needs to be

Psychologist

Deliverables

Wireframes
Storyboards
Sitemap

Tools

Photoshop
Sketch
Illustrator
Fireworks
InVision
Etc...

User research

CHAPTER II

Definition

User research helps you to understand users so that we can respond more effectively to their needs.

It focuses on understanding user behaviors, needs, and motivations through observation techniques, task analysis, and other feedback methodologies.

Methods

Card sorting
Contextual interviews
First click testing
Focus groups
Heuristic evaluation
Individual interviews
Parallel design

Personas
Prototyping
Surveys
System Usability Scale
Task analysis
Usability testing
Use cases

Card sorting

CHAPTER III

Allows users to group your site’s information. This helps ensure that the site structure matches the way users think.

Definition

Method to help design or evaluate the information architecture of a site.

Topics are organised into categories.

Actual cards, pieces of paper, or one of several online card-sorting software tools.

Benefits

Build the structure for your website
Decide what to put on the homepage
Label categories and navigation

Types

Open card sort
Closed card sort

Open card sort

Users organize topics by themselves

Closed card sort

Users sort topics into predefined categories

Card sorting techniques
Best Practices
How to Conduct a Card Sort
Analyze Your Data

Summary:

Contextual interviews

CHAPTER IV

Enables you to observe users in their natural environment, giving you a better understanding of the way users work.

Definition

Researchers watch and listen as users work in the user’s own environment, as opposed to being in a lab.

Contextual interviews tend to be more natural and sometimes more realistic as a result.

They are also usually less formal than lab tests and don’t use tasks or scripts.

Benefits

Any issues that users are facing
Equipment they are working with
How their space is set-up
Preference between mouse and keyboard
The type of internet connection they have
How long does it take to complete common or target tasks
Whether there are people there and willing to assist the user if they need help completing a task

First click testing

CHAPTER V

A testing method focused on navigation, which can be performed on a functioning website, a prototype, or a wireframe.

Definition

First Click Testing examines what a test participant would click on first on the interface in order to complete their intended task. It can be performed on a functioning website, a prototype or a wireframe.

Y u so important?

First Click Testing allows you to evaluate the effectiveness of the linking structure of your site, including the navigation

See how users get around the site and complete their intended task

Hey First click testing

Methodology

Provide the participants problem to solve
Documented the correct path to completion for each task
Track each click
Track how long it takes the user to make this click
Assess were they able to find the correct information
Assess the ease or difficulty of completing each task

Best practices

Check optimal paths with note takers/data loggers prior testing
Hide from participant that he's taking First Click testing
Start tasks from Home screen

Interesting online tool

www.optimalworkshop.com

Focus Groups

CHAPTER VI

Discussion with a group of users, allow you to learn about user attitudes, ideas, and desires.

Definition

A focus group is a moderated discussion that typically involves

5 to 10 participants.

Through a focus group, you can learn about users’ attitudes, beliefs, desires, and reactions to concepts.

Focus group users tell you about their experiences or expectations but you don’t get to verify or observe these experiences.

Choosing participants

Age
Occupation
Experience
Education
Ethnicity

Topics you would like to cover
Pretest questions to ensure they are clear and logical
Develop open-ended questions to encourage discussion
Arrange questions in a way that flows naturally
Hire a skilled moderator to facilitate the discussion
Create a script
Change the order of questions and topics to keep the discussion flowing smoothly
Plan to spend about two hours with the group
Tape the sessions
Have one or more note takers to ensure everything is captured

Heuristic evaluation

CHAPTER VII

A group of usability experts evaluating your website against a list of established guidelines

Definition

A heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design.

10 heuristics most commonly used in industry

Jakob Nielsen's heuristics

Visibility of system status

PRINCIPLE I

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Match between system

and the real world

PRINCIPLE II

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

User control and freedom

PRINCIPLE III

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

Consistency and standards

PRINCIPLE IV

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Error prevention

PRINCIPLE V

Even better than good error messages is a careful design that prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

Recognition rather than recall

PRINCIPLE VI

Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use

PRINCIPLE VII

Accelerators—unseen by the novice user—may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Aesthetic and minimalist design

PRINCIPLE VIII

Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Help users recognize, diagnose, and recover from errors

PRINCIPLE IX

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Help and documentation

PRINCIPLE X

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Other used heuristics

Gerhardt-Powals’ cognitive engineering principles

Weinschenk and Barker classification

Best practices

Small set of expert evaluators
Examine and use usability principles (the "heuristics")
Quick, cheap and easy
Developed to aid the design

Benefits

Quick and inexpensive feedback to designers
Early feedback
Best corrective measures to designers
Usage with other usability testing methodologies
Further examine potential issues.

Methods

Planning
Running
Reporting

Planing

Heuristic evaluation

Experts

Material an equipment

Expert analyst familiar with the product

Running

Heuristic evaluation

Heuristics briefing first

Experts use mock tasks and record observations

If 2 or more, they should not communicate during testing

Problem list rated

Reporting

A list of identified problems
Report sent to development team
Problems should have prioritisation

Heuristic evaluation

Individual interviews

CHAPTER VIII

One-on-one discussions with users show you how a particular user works. They enable you to get detailed information about a user's attitudes, desires, and experiences.

Definition

Individual interviews allow you to probe their attitudes, beliefs, desires, and experiences to get a deeper understanding of the users who use your product. You can also ask them to rate or rank choices for site content. These interviews can take place face-to-face, by phone or video conference, or via instant messaging system.

Parallel design

CHAPTER IX

A design methodology that involves several designers pursuing the same effort simultaneously, but independently, with the intention to combine the best aspects of each for the ultimate solution.

Definition

Several people create an initial design from the same set of requirements. Each designer works independently and, when finished, shares his or her concepts with the group. Then, the design team considers each solution, and each designer uses the best ideas to further improve their own solution.

Benefits

Ideas generated quickly and cost effectively.
Several approaches to be explored at the same time.
Final solution benefits from all ideas proposed.

Best practices

Define which layouts to address
Clarify the expectations regarding fidelity of the designs
If using a team approach, be sure your teams have equivalent skills
Establish the evaluation criteria

Personas

CHAPTER X

The creation of a representative user based on available data and user interviews. Though the personal details of the persona may be fiction, the information used to create the user type is not.

Definition

The purpose of personas is to create reliable and realistic representations of your key audience segments for reference. These representations should be based on qualitative and some quantitative user research and web analytics. Remember, your personas are only as good as the research behind them.

Example

Peter
Male
College
35 years old
Married
Apple user
Active on Twitter
Drives Toyota

Prototyping

CHAPTER XI

Allows the design team to explore ideas before implementing them by creating a mock-up of the site. A prototype can range from a paper mock-up to interactive html pages.

Definition

A prototype is a draft version of a product that allows you to explore your ideas and show the intention behind a feature or the overall design concept to users before investing time and money into development. A prototype can be anything from paper drawings (low-fidelity) to something that allows click-through of a few pieces of content to a fully functioning site (high-fidelity).

Benefits

Cheaper to change product early in the development
Allows gathering feedback from users while you're still planing and designing

Low-Fidelity prototyping

Paper-based
Do not allow user interactions
Hand-drawn mock-ups to printouts
Quicker to create
Enable early visualization of alternative design solutions
Users may feel more comfortable suggesting changes

High-Fidelity prototyping

Computer-based
Allows realistic (mouse-keyboard) user interactions
Take you as close as possible to a true representation of the user interface
More effective in collecting true human performance data

Tools

Pen and paper

Balsamiq

InVision or Marvel app

Photoshop

Axure

WebZap (PS plugin)
HTML

LucidChart

Surveys

CHAPTER XII

A series of questions asked to multiple users of your website, help you learn about the people who visit your site.

Definition

An online survey is a structured questionnaire that your target audience completes over the internet generally through a filling out a form. Online surveys can vary in length and format. The data is stored in a database and the survey tool generally provides some level of analysis of the data in addition to review by a trained expert.

System Usability Scale

CHAPTER XIII

SUS is a technology independent ten item scale for subjective evaluation of the usability.

Definition

Provides “quick and dirty”, reliable tool for measuring the usability. It consists of a 10 item questionnaire with five response options for respondents; from Strongly agree to Strongly disagree.

Benefits

Industry standard
Useful for new products or features
Is a very easy scale to administer to participants
Can be used on small sample sizes
Effectively differentiate between usable and unusable

Task analysis

CHAPTER XIV

Involves learning about user goals, including what users want to do on your website, and helps you understand the tasks that users will perform on your site.

Definition

Process of learning about ordinary users by observing them in action to understand in detail how they perform their tasks and achieve their intended goals.

Tasks analysis helps identify the tasks that your website and applications must support and can also help you refine or re-define your site’s navigation or search by determining the appropriate content scope.

Purpose?

What your users’ goals are
What users actually do to achieve those goals
What experiences users bring to the tasks
How users are influenced by their physical environment
How users’ previous knowledge and experience influence
How they think about their work
The workflow they follow to perform their tasks

When to perform?

Early in the process - prior to design work.

Helps you with:
Website requirements gathering
Developing your content strategy and site structure
Wireframing and Prototyping
Performing usability testing

Types

Cognitive task analysis

Focused on understanding tasks that require decision-making, problem-solving, memory, attention and judgement.

Hierarchical task analysis

Focused on decomposing a high-level task subtasks.

How to perform?

Identify the task to be analyzed.
Break this high-level task down into 4 to 8 subtasks
Present the analysis to someone else who has not been involved

Usability testing

Identifies user frustrations and problems with your site through one-on-one sessions where a "real-life" user performs tasks on your site.

CHAPTER XV

Definition

Evaluating a product or service by testing it with representative users. Typically, during a test, participants will try to complete typical tasks while observers watch, listen and takes notes. The goal is to identify any usability problems, collect qualitative and quantitative data and determine the participant's satisfaction with the product.

To run an effective usability test, you need to develop a solid test plan, recruit participants , and then analyze and report your findings.

Benefits

Lets identify problems before they are coded.
Learn if participants are able to complete specified tasks successfully
Identify how long it takes to complete specified tasks
Find out how satisfied participants are with your Web site or other product
Identify changes required to improve user performance and satisfaction
And analyze the performance to see if it meets your usability objectives

You don't need a formal lab!

Cost factors

Time
Recruiting costs
Participant Compensation
Rental costs

Use cases

CHAPTER XVI

Provides a description of how users use a particular feature of your website. They provide a detailed look at how users interact with the site, including the steps users take to accomplish each task.

Definition

A use case is a written description of how users will perform tasks on your website. It outlines, from a user’s point of view, a system’s behavior as it responds to a request. Each use case is represented as a sequence of simple steps, beginning with a user's goal and ending when that goal is fulfilled.

Benefits

Explain how the system should behave and in the process
Help brainstorm what could go wrong
Provide a list of goals and this list can be used to establish the cost and complexity of the system

What use cases include

Who is using the website
What the user want to do
The user's goal
The steps the user takes to accomplish a particular task
How the website should respond to an action

What don't

Implementation-specific language
Details about the user interfaces or screens.

Main success scenarios

Use case in which nothing goes wrong.

BASIC FLOW

Alternative paths

These paths are a variation on the main theme. These exceptions are what happen when things go wrong at the system level.

ALTERNATIVE FLOW

How to write a Use case?

Identify who is going to be using the website.
Pick one of those users.
Define what that user wants to do on the site.
For each use case, decide on the normal course of events when that user is using the site.
Describe the basic course in the description for the use case.
When the basic course is described, consider alternate courses of events and add those to "extend" the use case.
Look for commonalities among the use cases. Extract these and note them as common course use cases.