Human-Computer Interaction 15. Evaluating User Interface Recap: What - - PowerPoint PPT Presentation

Human-Computer Interaction

• 15. Evaluating User Interface

Recap: What is critique?

• Show a project in progress through prototypes
• Get solicit feedback from peers (small groups work best)
• Design critiques help you broaden your communication skills.
• An opportunity to explain not just what you did but why you did it.

Recap: Design critique tips

A good critique will help you iterate on your ideas & come up with a better design 1. PNP Sandwich. 2. Be descriptive. 3. Ask for alternatives. 4. Then brainstorm suggestions. 5. Critique the design, not the designer. 6. Be honest but not harsh. 7. The designer(s) lead the meeting.

Today’s agenda

• Testing Environment
• Think Aloud
• Focus Group
• A/B testing

How to evaluate?

• Asking users

– Users’ opinions – how do users think they will perform on a system?

• Interview/Survey/Observation
• Think aloud
• A/B testing
• Focus group
• Asking experts

– Design Critique, Experts’ opinions, Heuristic Evaluation, Cognitive walkthroughs – How do experts think the users will perform on a system?

Testing Environment

Usability lab

Usability lab

Usability lab

Eye tracker

Mobile usability testing

Think Aloud

• Empirical technique for assessing the usability of a prototype of an

interface.

• Ask the user to Think Aloud while performing tasks on a system. You

watch and learn how the user thinks about the task and where the user has problems using it.

Think Aloud

• Observers are asked to objectively

take notes of everything that users say, without attempting to interpret their actions and words.

• Test sessions are often audio and

video taped.

1. Define a goal. 2. Create tasks that the user needs to accomplish, within the constrains of the framework: Identify and articulate the questions you are trying to answer. 3. Prepare Think Aloud environment - Screen capture, video, other artifacts, scripts. 4. Practice with a confederate 5. Run experiments

Before Think Aloud

“Please keep talking.” “Act as if you are alone, speaking to yourself as you solve the task. Explaining something changes your thinking strategy and slows you down performing the task.”

During Think Aloud

Think Aloud: example

Thinks to look for:

• Artifacts involved
• Intentions and goals leading to incident
• User’s expectations
• What happened
• Users’ mental & emotional state
• Users’ strategies (i.e., undo, reset, etc…)

After Think Aloud

Focus Group

An exploratory research method used to help researchers gather in-depth, qualitative information of their participants' attitudes and perceptions relating to concepts, products, services, or programs.

Focus Group

• To generate new ideas. Open discussions with users may lead to

new perspectives on the product/system, as well as provide a means of evaluating user satisfaction.

• To search for questions, vocabulary, and perceptions of users.
• To explore users reactions to new products/services.
• To formulate hypotheses that can be tested with quantitative

surveys.

• To interpret previously obtained qualitative data.

Focus Group: Objectives

1. Define a goal 2. Identify sample population 3. Select the focus group moderator 4. Plan focus group: physical planning 5. Generate and pre-test an interview guide: write a screening questionnaire and develop a moderator's outline (both could be standardized) 6. Recruit the sample 7. Conduct the focus group 8. Analyze and interpret focus group findings 9. Write and present report

Focus Group: Steps

Focus Group: Example

• Advantages
• Quick and relatively easy to set up.
• The group dynamic can provide useful information that individual

data collection does not provide (a big difference from interview).

• Disadvantages
• The discussion can be dominated or sidetracked by a few individuals.
• Data analysis is time consuming and needs to be well planned in

advance.

• Does not provide valid information at the individual level.

Focus Group: pros and cons

A/B Testing

A/B Testing

A/B testing is to compare two (or more) versions of a web page to see which one performs better. You compare two web pages by showing the two variants (let's call them A and B) to similar visitors at the same time. The one that gives a better conversion rate, wins!

• Tracking the things users point at with the cursor, click on
• Tracking where they’ve been and where they go

A/B Testing

• To compare one function

against one or more variations that contain one major difference in an element of the control function

• Every visitor will see one version
• f the page or another, and

you’ll measure conversions from each set of visitors.

• A/B tests allow you to test one

version of copy, images, forms

• etc. against another.

What can you test?

Almost anything on your website that affects visitor behavior can be A/B tested.

• Headlines
• Sub headlines
• Paragraph Text
• Testimonials
• Call to Action text/button
• Links
• Images
• Content near the fold
• Social proof
• Media mentions
• Awards and badges

A/B testing: examples

Spelling out “Add To Cart” increased cart adds by 49% over the original.

A/B testing: examples

The replacement of the price guarantee with a trust symbol increased sales by 107%.

A/B testing: examples

Adding free shipping increased

• rders by 90% and the average
• rder value (AOV) by 7.32%.

A/B testing: examples

Version A increased click-throughs by 325%.

A/B Testing: Pros and Cons

Advantages

• Subjects decisions to data rather than HiPPO (Highest Paid Person’s Opinion)
• Great for optimizing copy, colors, placements, shapes, imagery
• Can even (in theory) be used to optimize some elements automatically (text

colors, link styles

• You can be running hundreds simultaneously

Risks

• Hard to test completely new products, features
• If many many aspects are subject to fluctuation, what is the ‘actual’ site?
• Make sure you are asking the right questions!

Group project

• P11. Hi-fi prototype

First, update your wireframe. Then, using a mobile app prototyping tool of your choice (recommend: Indigo Studio), develop an interactive, full-fledged, content-rich, high- fidelity prototype of your mobile app. It should look and behave like a final product. It should have full, possibly fake, contents. It should work with no error or link-breakage. This should be up on your website.

Exemplar: https://indigodesigned.com/share/run/pjjnckkzefp6#f=login&s=c0204b

# Due by midnight 4/17

• P11. Hi-fi prototype

Turn-in

• A link your final hi-fi prototype: you should ensure that others

without any permission can access and interact with your prototype

• A png file (400X250 pixel) of your logo image
• Example:

Rubric

• It’s all or nothing: If your hi-fi prototype works like a charm, you will

get a full point; If there is any missing page/broken link, you will get

• none. If instructors can’t access it, you won’t get a point either.