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? o Interview/Survey/Observation o Think aloud o A/B testing o 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

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. 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.

Before Think Aloud 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

During 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.”

Think Aloud: example

After Think Aloud 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…) •

Focus Group

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: Objectives 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: Steps 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: Example

Focus Group: pros and cons Advantages • o Quick and relatively easy to set up. o The group dynamic can provide useful information that individual data collection does not provide (a big difference from interview). Disadvantages • o The discussion can be dominated or sidetracked by a few individuals. o Data analysis is time consuming and needs to be well planned in advance. o Does not provide valid information at the individual level.

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 of 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 orders by 90% and the average order 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.