Human-Computer Interaction 11. Evaluating User Interface (2) Dr. - PowerPoint PPT Presentation

Human-Computer Interaction 11. Evaluating User Interface (2) Dr. Sunyoung Kim School of Communication & Information Rutgers university

Quiz #3 Max: 20 Median: 17 Min: 4 5 3 3 3 2 2 2 2 1 0 0 0 0 0 0 0 20 19 18 17 16 15 14 13 12 10 9 8 7 6 5 4

1. Explain why the interface on the right is user-friendly using one of Don Norman’s 6 design principles. (There is one unique strength in this interface, the round-shape control. You need to explain that strength in relation to a design principle) • Mapping • Affordance

2. What is responsive design and why is it important? • To make websites responsive to their environment • Make pages that look great at any size

3. Write down the name of red part in the font below and explain its role in relation to legibility.

4. Describe two things that visual hierarchy can create in UI design. Create a center of interest that attracts user’s attention • Create a sense of order and balance • Guide the user through your UI – Visual path • Tell a story…Like all good stories, there should be a • beginning, an end, and a point

5. Describe two advantages of not having too many colors in design.

6. What color temperature is best to give a sense of professionalism? Warm colors are reds, oranges, yellows. • Generally energizing, passionate, positive • Red & yellow are primary colors, with orange in • the middle, which means warm colors cannot be created with a cool color Cool colors include green, blue, purple. • Blue is the only primary color within cool • spectrum, which means other cool colors are created by combining blue with a warm color Use cool colors to give a sense of calm/ • professionalism Neutral colors include grays, browns. • Often serve as backdrop in design • Combine them with accent colors or use them • Alone for a minimalistic, clean loo •

7. Describe two strengths and one weakness of the interface below reflecting on Mobile UI design principles.

8. Compare the two websites

Class participation points (5%)

Today’s agenda Evaluating User Interface • Cognitive Walkthrough • Heuristic Evaluation

Design process (Koberg & Bagnall)

Why doing evaluation? If we build a product, service, an interface, etc., how do we know: • § Whether it’s any good? § Whether the interface (between a system and user) meets requirements and criteria? § Whether the users are able to complete all important tasks? à Test Usability

What is usability? “The effectiveness, efficiency and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment.” (by ISO) 5 E’s • o Effective: Can a user reach one’s goals? Find what they are looking for? - Do what they want to do? - o Efficient: How fast to pursue the goals? Number of steps - o Engaging: Use it again? Recommend it to others? Number of revisits - o Error tolerant Number of errors - Satisfaction Recovering from errors - o Easy to learn Amount of effort to learn -

Identify relative importance of evaluation factor

Museum website

Museum exhibition

Evaluation factors What about… Self-service filling and payment system for a gas station • On-board ship data analysis system for geologists to search for oil • Fashion clothing website • College online course system • Online shopping website like Amazon or eBay •

When to evaluate? Throughout the design process • From the first descriptions, sketches, etc. of users needs through to the • final product Design proceeds through interactive cycles of “design – test - • redesign” Evaluation is a key ingredient for a successful design • Interactive Paper Wireframing prototyping sketches Coding User testing User testing User testing User testing

How to evaluate? Asking experts • – Experts’ opinions, inspections, walkthroughs – How do experts think the users will perform on a system? Asking users • – User opinions – How do users think they will perform on a system?

Asking experts Cognitive Walkthrough • Heuristic Evaluation •

Cognitive Walkthrough A usability evaluation method in which one or more evaluators work through a series of tasks and ask a set of questions from the perspective of the user. The focus of the cognitive walkthrough is on understanding the system's learnability for new or infrequent users To see whether or not a new user can easily carry out tasks within • a given system A task-specific approach to usability • Premise: most users prefer to do things to learn a product rather • than to read a manual or follow a set of instructions.

Define the tasks and actions needed First, you need to define the tasks. And then, you need a complete, written list of actions needed to complete the task. E.g., Task: Create a customized voicemail message on an iPhone Actions 1. Tap Voicemail 2. Tap Greeting 3. Tap Custom 4. Tap Record and speak your greeting 5. When you finish, tap Stop 6. To listen to your greeting, tap Play 7. To re-record, repeat steps 4 and 5 8. Tap Save Sometimes defining the tasks is all you need to do to realize there is a problem with the interface. (e.g., http://buenavista.typepad.com/buena_vista/2007/06/the_mobile_user.html)

Three Questions to be Asked The cognitive walkthrough is structured around 3 questions that you ask of every step (or action) in the task. You ask these questions before, during and after each step (or action) of the task. If you find a problem, you make a note and then move on to the next step of the task. 1. Visibility: Is the control for the action visible to the user? 2. Affordance: Is there a strong link between the control and the action? (Will the user notice that the correct action is available?) 3. Feedback: Is feedback appropriate? (Will the user properly interpret the system response?)

Q1. Visibility: Is the control for the action visible to users? To find problems with hidden or obscured controls E.g. is the button visible? To find issues with context-sensitive menus or controls buried too deep within a navigation system. If the control for the action is non- standard or unintuitive then it will identify those as well.

Q2. Affordance: Is there a strong link between the control and the action? Will the user notice that the correct action is available? To find problems with ambiguous or jargon terms, or with other controls that look like a better choice

Q3. Feedback: Is feedback appropriate? Will the user properly interpret the system response? To find problems when feedback is missing, or easy to miss, or too brief, poorly worded, inappropriate or ambiguous. For example, does the system prompt users to take the next step in the task? Will the user know that they have done the right thing after performing the action? E.g. A control panel for an electronic toilet door on a British train: What button would you press if you want some privacy?

Class activity Task: Change a profile picture of my google account

Who should conduct a Cognitive Walkthrough? Anyone can conduct a cognitive walkthrough; however, there is a risk that someone who is already familiar with your jargon, language and system is going to miss things that someone who lacks that familiarity would find. If you have to use someone who is very familiar with the product, make sure they have user personas to hand – to try and guide them to “walk a mile in the user’s shoes”.

What do you do with the answers? You should record the step in the process where an assessor found an issue and what that issue was. When the process is complete, roundup all the assessors’ reports into a single report and then prioritize issues for fixing.

Heuristic Evaluation A principle or “a rule of thumb” which can be used to identify usability problems in interaction design: a researcher walks through a product and compare it to the heuristics and make their own assessment as to whether the product follows these rules of thumb or not (the “heuristics”) To see whether or not a given system has any usability flaws • A more holistic usability inspection • Developed by Jakob Nielsen (1994) • Can be performed on working UI or on sketches •

Heuristic Evaluation Originally based on heuristics distilled from an empirical analysis of 249 • usability problems These heuristics have been revised for current technology, e.g., web • HOMERUN • 1. High quality content 2. Often updated 3. Minimal download time 4. Ease of use 5. Relevant to users’ needs 6. Unique to the online medium 7. Net-centric corporate culture Heuristics are still needed for mobile devices, wearables, virtual worlds, etc.