interaction and interface design information arts & technologies university of baltimore summer...

Interaction and Interface DesignInformation Arts & Technologies

University of BaltimoreSummer 2011

Heuristics In Practice

Kelley Mesa, Laura Polutanovich, Ellen VarshavskyJune 2, 2011

Evaluation and ApproachHeuristics Evaluation

In this study, we evaluated a number of heuristic sets, including those by popular usability experts (Gerhardt-Powals, Krug, Nielsen, Shneiderman & Plaisant) as well as Apple’s iOS Human Interface Guidelines and the U.S. Department of Health and Human Services publication Research-Based Web and Design & Usability Guidelines. Together, we amassed a list of over 80 individual heuristics that were applicable to the HealthCoach4Me website.

Boiling Down the List

When evaluating a site, which guidelines contribute to improvements rather than muddy the waters? That was our challenge with such a long list of potential heuristic options. As we began looking closely at the individual heuristics, however, a number of overarching site themes seemed to consistently emerge across the sets, each containing several related heuristics.

Rather than choosing one specific set of heuristics, we have chosen to use this themed approach and present the heuristics that best apply to each area within the context of HealthCoach4Me.com, followed by both “non-compliant” and “compliant” website examples.

The themes we have chosen include:• Consistency• Navigation• Links• User Feedback• User Empowerment• Error Handling• Optimize Content

ConsistencyHeuristic – Ensure visual consistency

Not compliant… Compliant…

“Ensure visual consistency of Web site elements within and between Web pages.” (Koyani, Bailey, & Nall, 2004)

HealthCoach4Me.comThe Gadgets are visually inconsistent.

These gadgets look like they belong on another website altogether.

Here are three example of trackers:

SparkPeople.comThe tracking tools on SparkPeople.com have a cohesive look and feel .

Navigation

Heuristic – Differentiate and group navigation elements


“Clearly differentiate navigation elements from one another, but group and place them in a consistent and easy to find place on each page. Create a common, Web site-wide navigational scheme to help users learn and understand the structure of your Web site. Use the same navigation scheme on all pages by consistently locating tabs, headings, lists, search, site map, etc. Locate critical navigation elements in places that will suggest clickability (e.g., lists of words in the left or right panels are generally assumed to be links).(Koyani, Bailey, & Nall, 2004)

HealthCoach4Me.comOnce a user is logged in, when they click on Home, they get the original homepage, and not their dashboard. They don’t even see the navigation tabs anymore. These areas become disconnected.

About This Site and Health Library use left-side navigation, while My Coaching Plan does not. You also have a limitation of two goals you can work on at once. The site dynamically adds tabs based on goals. If you can only have two goals at once, why not show tabs as place holders until user decides which goals they want to track.

DailyBurn.com, Mint.comHere are some examples of sites that clearly show navigation elements, such as tabs and buttons. They also do a good job of grouping them in logical ways, which means they did their IA work.

Navigation

Heuristic – Present tabs effectively


“Users can be confused about the use of tabs when they do not look like real-world tabs. Real-world tabs are those that resemble the ones found in a file drawer. One study showed that users are more likely to find and click appropriately on tabs that look like real-world tabs.” (Koyani, Bailey, & Nall, 2004)

HealthCoach4Me.comThe tabs are not shown in a consistent or “real-world” way on this site. You can be on one page and see what looks like buttons and once you click on that button, you see it take the form of a tab, while the others remain looking like buttons. When you click on Add Goal, it never changes to look like a tab. It’s a mishmash of various widgets.

tumblon , BankofAmerica.com, 23andMe.comHere are some examples of sites that use tabs for their main navigation and are compliant to this guideline. The tabs all look and feel like “real-world” and there is no mistaking that it is a tab versus a button.

LinksHeuristic – Indicate internal vs. external links


“One study showed that users tend to assume that links will take them to another page within the same Web site. When this assumption is not true, users can become confused. Designers should try to notify users when they are simply moving down a page, or leaving the site altogether.” (Koyani, Bailey, & Nall, 2004)

HealthCoach4Me.comThe Health Library has many links that pointing to PDF files. When you click on one of these links, you get a pop-up which asks you if you want to open the file using Adobe Acrobat. It would be helpful if you had the file type and size in parenthesis (see example on your right) or an Adobe PDF icon and file size next to each file.

Usability.govThe Guidelines section has many topics that are in the form of chapters from a book. As you can see, the user can tell that this will be a PDF file that opens when they click on one of the links below.

LinksHeuristic – Avoid misleading cues to click


“Ensure that items that are not clickable do not have characteristics that suggest that they are clickable.”(Koyani, Bailey, & Nall, 2004)

HealthCoach4Me.comCan you pick out which text/objects are clickable in the examples below?

DailyBurn.comThis website uses the color for links consistently, no matter what page you are on.

User Feedback

Heuristic – Help and documentation


“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.” (Nielsen, 2005)

HealthCoach4Me.comStep two of creating a goal asks the user to select small steps to help her get started on the goal.

There are brief instructions in the small paragraph, but, if she’s like many users, she’s scanning the page and jumps directly to the blue, bolded text in the colored ovals. She now wonders, “What do I need to do here? Are these links?...”

Facebook.comShort, descriptive “action phrases” on Facebook’s site grab the user’s attention and help her immediately understand what she needs to do.

User Feedback

Heuristic – Design dialogues to yield closure/Offer informative feedback


“Sequences of actions should be organized into groups with a beginning, middle, and end. Informative feedback at the completion of a group of actions gives operators the satisfaction of accomplishment, a sense of relief, a signal to drop contingency plans from their minds, and an indicator to prepare for the next group of actions….For every action, there should be a system feedback.” (Shneiderman & Plaisant, 2010)

HealthCoach4Me.comAt the end of the various assessments and quizzes, the user is presented with the result plotted on a large table with one recommendation: “talk to your doctor about the results. ” It is unclear how she should approach the next step in her sequence, or how the steps work together.

Similarly, when a step is completed, the user is “congratulated,” but there are no feedback recommendations for the next step in the goal sequence, leaving the user to ponder her next move.

Mint.comGoals are created by the user and connected to the accounts/ resources in the system. Upon completing a goal, the system suggests several next steps.

User Em

powerm

entHeuristic – Cater to universal usability


“Recognize the needs of diverse users and design for plasticity, facilitating transformation of content. Novice to expert differences, age ranges, disabilities, technological diversity each enrich the spectrum of requirements that guides design.”(Shneiderman & Plaisant, 2010)

HealthCoach4Me.comA number of accessibility concerns arise with this heuristic, including the lack of any easy font resize tool to make the rather small font size larger…

Poor color contrast that might make it difficult to distinguish content from background for visually impaired users…

Relatively short session lengths (10 minutes) before “timeout” and requiring another login may confuse/annoy novice to expert users.

HealthCare.gov, Pfizer.comEasy text resize options allow users to increase and decrease the page text for easier reading…

SparkPeople.comHigh-contrast in headings and overall page text also allow for easier reading…

Long session lengths (2+ hours) mean the users can step away from her computer for a moment, then come back and pick up where she left off without having to log in again.

User Em

powerm

entHeuristic – Support internal locus of control


“Experienced users strongly desire the sense that they are in charge of the interface and that the interface responds to their actions. They don't want surprises or changes in familiar behavior, and they are annoyed by tedious data-entry sequences, difficulty in obtaining necessary information, and inability to produce their desired result.” (Shneiderman & Plaisant, 2010)

HealthCoach4Me.com While a user creating her health plan for the first time may wish to choose all the health concerns relevant to her, she is restricted to only two health goals at a time…

The similar restriction occurs when trying to choose more than two small steps…

Another issue the user may face

is a wish to customize her “dashboard,” but is currently unable to move the gadgets, goals, etc…

SparkPeople.comA user can choose as many conditions and interests as she desires…

iGoogle.com A user can add many widgets and organize them as she desires on her homepage…

Error Handling

Heuristic – Help users recognize, diagnose, and recover from errors


“As much as possible, design the system such that users cannot make serious errors….If a user makes an error, the interface should detect the error and offer simple, constructive, and specific instructions for recovery.” (Shneiderman & Plaisant, 2010)

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

SparkPeople.comWhile registering, the user sees no indication of required fields as well as no indication of incorrect password entry…

She has to try to submit her registration before learning of errors, and then only one error at a time…

HealthCoach4Me.com When creating an account, as the user types in her email and password the system flags required fields with asterisks and notifies her of incorrect entries as she types…

Later, as she is adding a goal , the system also notifies her about an incorrect action she has taken and explains why it occurred…

Optim

ize ContentHeuristic – Design pages for scanning


We don’t read pages; we scan them for keywords/interests. “[Users] tend to focus on words and phrases that seem to match (a) the task at hand or (b) our current or ongoing personal interests.” (Krug, 2005)

HealthCoach4Me.comLong list of disorganized links to resources in small text

BoxesAndArrows.comLarge text with headings and subheadings emphasize this issue’s main storiesUsers can quickly scan headings to see if they want to read any of these articles

Optim

ize ContentHeuristic – Provide text alternatives for non-text content


“Provide text alternates for any non-text content…Provide text alternatives for time-based media.” (Schneiderman & Plaisant, 2010)

HealthCoach4Me.comOnly way that users can learn about the site is watching the tour video.Need to offer alternate ways of getting such crucial content, preferably a separate text introduction, but at least a transcript of the video

HealthCoach4Me.comProvides transcript of video so site users do not need to watch the video to access the content

Optim

ize ContentHeuristic – Use attention-attracting features when appropriate


“Draw attention to specific parts of a web page with the appropriate (but limited) use of moving or animated objects, size differential between items, images, brightly-color items, and varying fonts.” (Koyani, Bailey, & Nall, 2004)

HealthCoach4Me.comHome page flash animation of moving stock photos calls attention to a part of the page containing no content, distracting users

Mint.comUses varying font sizes, images and magnification to emphasize important parts of the page

Optim

ize ContentHeuristic – Link related content/link to supportive information


“Provide links to other pages in the website with related content.” (Koyani, Bailey, & Nall, 2004)

HealthCoach4Me.comNo related resources links on the dashboard, even though there is plenty of unused space to accommodate additional info

WhiteHouse.govWhite House site’s Education page includes links to related blog posts

Link to additional information

Optim

ize ContentHeuristic – Don't make me think!


Steve Krug’s first law of usability. “[A user] should be able to ‘get it’—what it is and how to use it—without expending any effort.”…”When you’re creating a site, your job is to get rid of the question marks.” (Krug, 2005)

HealthCoach4Me.comRegistration option: Choose a time zone. Choices are continent/city names and a Greenwich Mean Time notation

Mint.comClear what Mint is, how to get started and how to learn more

Also addresses user concerns about security and cost right on the home page

Who is Kate? What will I learn from her?

Who is Kate? What will I learn from her?

What’s “GMT”? Is DC an option? Aren’t there any countries listed? Where is Noronha? Why are they asking for this?

What’s “GMT”? Is DC an option? Aren’t there any countries listed? Where is Noronha? Why are they asking for this?

SourcesSources

Gerhardt-Powals, J. (1996). Cognitive engineering principles for enhancing human- computer performance. International Journal of Human-Computer Interaction, 8(2), 189-211. iOS Human Interface Guidelines. (2011). Retrieved from http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf.Koyani, S. J., Bailey, R. W., & Nall, J. R. (2004). Research-Based Web Design & Usability Guidelines. Washington, DC: The U.S. Department of Health and Human Services. Krug, S. (2006). Don’t Make Me Think: A Common Sense Approach to Web Usability. Berkeley, CA: New Riders.Nielsen, J. (2005). Ten Usability Heuristics. Retrieved from http://www.useit.com/papers/heuristic/heuristic_list.htmlShneiderman, B., & Plaisant, C. (2010). Designing the User Interface: Strategies for Effective Human-Computer Interaction. Boston, MA: Pearson.

interaction and interface design information arts & technologies university of baltimore summer...

Documents

navigation tabs

use of tabs

navigation scheme

site map

critical navigation

web pages

individual heuristics

related heuristics