engage: U - M Clinical Research Visual Analysis Report Team Envolve (Pratibha Bhaskaran, Liz Blankenship, Tammy Greene) SI 622 • Assignment 8 • April 3, 2008
engage: U – M Clinical Research Introduction Each year thousands of people take part in clinical research studies at the University of Michigan. Engage is the central resource for those participants to find general information about clinical research, search for studies and allow potential participants to enroll in a registry that matches them with research studies based on the medical and personal information provided by the participant. Target Population The target users for the Engage site are potential participants in the University of Michigan community. Results from recent user data show that currently women within a wide range of ages largely dominate (75%) the participant user base with the largest percentage being between the 18 to 25 age range (21%). The 26 to 35 and 36 to 50 age ranges, both 18%, follow a close second and third portion of the user base. Another large demographic of the participant user base is UM employees. Most (56%) of the current users fall into this category. Though these are typical users, Engage would like to strengthen its use among minorities, which is a very small part (20%) of its user base. Currently, most of the users are white or Caucasian (80%). Goals The purpose of the visual analysis is to critique how the visual elements on the Engage site impact its usability in an effort to deepen our inspection and evaluation of the Engage site.
Team Envolve • Engage U - M Clinical Research
2
engage: U – M Clinical Research Methodology In order to have some tangible methods to apply to the visual analysis of the Engage website, we met as a team to brainstorm heuristics that we might use. We used several principles as a basis for this exercise, including the Gestalt principles of proximity and similarity (Ware, 2003), considerations of the cognitive load and perceptual abilities of the user, and design guidelines such as maintaining consistency through color, font and layout (Mullet and Sano, 1995). We developed the following heuristics: 1. Maximize readability using contrasting color values 2. Text and other content should be arranged using white space appropriately to indicate groupings 3. Items that are related should have a similar visual appearance 4. Create visual "pop-out" using color, size and shape to highlight important items 5. Use color and layout consistently through the interface 6. Use color and size to signal error and to capture the user's attention 7. Balance the amount of text with white space and surrounding features 8. Use visual cues to maximize recognition of important tasks and minimize recall 9. Use font and font attributes (size, italics, boldness) to augment meaning of text 10. Use visual metaphors that users will understand based upon prior knowledge 11. Use visual cues to indicate location within the system and options available at that location We then each performed a heuristic analysis of the Engage website, using the severity ratings proposed by Nielsen, but modified the significance of ‘0’ to incorporate areas where good usability practices were being followed. See table 1 for the description of the five severity ratings.
Team Envolve • Engage U - M Clinical Research
3
engage: U – M Clinical Research Rating
Description
4
Usability catastrophe: imperative to fix before this product can be released.
3
Major usability problem: important to fix, so should be given high priority.
2
Minor usability problem: fixing this should be given low priority.
1
Cosmetic problem only: need not be fixed unless extra time is available on project.
0
This is an example of good usability.
Table 1: Severity ratings’ description
Team Envolve • Engage U - M Clinical Research
4
engage: U – M Clinical Research Findings Our findings, organized by section of the site are as follows: 1. Ge neral E ng age Websi te
Issue
Heuristic Severity
The overabundance of text and navigation options on the homepage creates an unbalanced visual design and diminishes the prominence of important features
7
4
Important tasks like enrolling in the registry, searching for studies are buried within multiple levels of pages and text. Users have to remember the path to these links.
8
4
In-line links are inconspicuous and do not promote rapid recognition of these navigational cues
4, 8
3
When a link has been visited, the text doesn't provide enough 1 contrast with the background color to appear boldly on the page to the user; the color of the visited links (light blue) makes reading difficult, especially when the text is small (the light blue on light yellow).
3
Although the site maintains the top navigation bar throughout all the pages, side navigation appears on the left in some parts of the site and on the right in others, while not at all in still others.
5, 8
2
On some pages, like within the find studies page, the navigation is not highlighted to indicate where you are on the site.
8
2
Engage graphic location changes from page to page; it could be moved above the sub-navigation to maintain consistent position
5
1
The black on yellow background and blue on yellow background makes the text "pop-out" and more readable.
1, 4
0
Team Envolve • Engage U - M Clinical Research
5
engage: U – M Clinical Research Using underlines and rollovers for the links helps make the links "pop-out" and more readable
1, 4
0
Feature to increase text on the homepage also makes text easier to read base on user preference
1, 4
0
Summary Engage users are typically first-time visitors looking for more information about clinical research or frequent users of the registry or search features. Regardless of the audience, there are a few overall issues with the site that have a large impact on the usability of the site. An important issue that affects many of the other visual heuristics is the lack of balance between the amount of text, white space and surrounding features on the pages of the Engage site (see figure 1). The Engage site is overwhelmingly saturated with text and navigation options on the homepage. This overwhelms the screen, creates an unbalanced visual design and diminishes the prominence of all the important features. One of the most recurring issues with this site involves the lack of visual cues to aid the user in recognition and recall relying heavily on the user's memory. For example, important tasks such as enrolling in the registry and searching for studies are buried within multiple levels of pages and text. Users of the Engage site must remember the paths to accomplish their tasks. Similarly, inline text links that are inconspicuous due to the large amounts of text do not promote rapid recognition of these navigational cues. These links make it hard for the user to recognize the contextual navigation and recall their destination. Each of these features hinder the user's ability to recognize and recall important information to accomplish their tasks on the Engage site. Another significant issue with the site is the color of visited links once selected. When a link has been visited, the link color doesn't provide enough color contrast with the background color to appear boldly on the page. The light blue and yellow have similar color values that make reading difficult, especially when the text is small. Though these issues negatively impact the usability of the site, there are examples of visual elements that positively impact it as well. The use of the black text on the light yellow background produces enough contrast to make the text stand out on the screen. Also, using
Team Envolve • Engage U - M Clinical Research
6
engage: U – M Clinical Research the underlines and rollovers for the inline links, helps make them stand out on the screen as well and makes them easy to recognize. Lastly, the feature that allows the user to increase the size of the text on screen creates a visual "pop-out" as well making the text easier to read. Recommendations •
Change the color of the visited links to a color that contrasts the light yellow background
•
Provide direct links to important pages such as the registry and search page to reduce the need for recall and easily orient new users to the site
•
Reduce the amount of text and navigation options on the homepage to create a balanced visual design
•
Provide consistent navigation position
•
Highlight the section on the navigation bar for all pages
•
Move Engage graphic above the sub-navigation to main consistent position
Team Envolve • Engage U - M Clinical Research
7
engage: U – M Clinical Research
Figure 1: Engage Homepage
Team Envolve • Engage U - M Clinical Research
8
engage: U – M Clinical Research 2. Ge neral I nfor mati o n a nd Q ues tio ns/ A ns wers
Issue
Heuristic Severity
The Questions/Answers page is a long uncategorized list of links that are closely spaced, making reading difficult. No white space is used to break up the text or organize related content.
2, 7
2
The About Research portion of the site has an adequate amount of text and white space.
7
0
Summary The purpose of the general information located on the Engage site is to inform potential participants about clinical research, its importance and relevance and to help them answer any questions they may have while considering their participation. The problem that most frequently impedes the ability to efficiently find general information on the Engage site involves its visual elements and how they are displayed. From the homepage, users have two obvious options for finding general information about clinical research on the Engage site, the About Research page and the Questions/Answers page. The About Research page does a good job of managing an appropriate amount of text and white space necessary to convey what's needed. But the Questions/Answers page fails to do so. This page includes a long list of closely spaced questions that are linked to the corresponding answers at the bottom of the page (see figure 2). The small amount of space between the links violates the visual heuristic of using white space to indicate groups with text and other content. This violation makes scanning the page difficult for a user looking to find a quick answer to a question. Recommendations The Questions/Answers page should be organized using white space to indicate groups of related content. Coupled with headings, this will aid the user in quickly finding the answers to their questions.
Team Envolve • Engage U - M Clinical Research
9
engage: U – M Clinical Research
Figure 2: Question/Answer list
Team Envolve • Engage U - M Clinical Research
10
engage: U – M Clinical Research 3. Sear c hi ng for S t udie s
Issue
Heuristic Severity
Getting to the page where a search for studies can actually be performed involves traversing multiple levels of pages and text. Users have to remember the path to these links.
8
4
When searching by condition, some users may not know that clicking on the plus sign expands the results
10
1
Studies are grouped visually by using white space to separate listings.
2
0
The condition being looked at can be expanded, while the others are visible as collapsed options. This gives the user a good focus plus context.
11
0
Summary Searching for studies is an important part of the Engage site. It provides four options to search for studies - by medical condition (e.g. lung cancer, diabetes), by keyword (e.g. gender, age, location), viewing a list of studies requiring healthy volunteers and viewing a list of recently added studies. Search results are displayed in a list form that makes good use of white space to facilitate scanning the page (see figure 3). There are a large number of categories on most search result pages, which may be expanded or collapsed by clicking on the '+' in front of the category. This allows the user to focus on part of the page, while still maintaining the context of the rest of the information. However, it requires the user to have prior knowledge of the '+' metaphor, and this may be good or bad, depending on the type of audience. Recommendations Links to the search studies page should be quickly accessible from the homepage. A button or icon could also be developed to denote the ‘search for studies’ task, and should be quickly accessible from the homepage.
Team Envolve • Engage U - M Clinical Research
11
engage: U – M Clinical Research
• Figure 3: Listing of studies after a search
Team Envolve • Engage U - M Clinical Research
12
engage: U – M Clinical Research 4. E nrol li ng i n t he Reg istr y
Issue
Heuristic
Severity
Link to registry on "Volunteer For Research" page does not stand 4 out from rest of text
4
Links to login for U-M ID or Friend account are hard to discern from the large amount of surrounding text
4
4
The top navigation changes color and font but otherwise remains 3, 5 the same when the user transitions from the normal site to the Engage registry. This sends mixed messages about where the user is in the site. (see figure)
3
There is no feedback to indicate where the user is in the application process for the registry.
11
3
The questions when enrolling in the Engage registry visually run 2 together with no space in between.
1
Unscreened study text can contain all capital letters, which takes more effort to read
9
1
During the registration process, errors are indicated in large red 6 text at the top of the page and next to the items that are incorrect. This signals to the user that something is wrong.
0
Summary The Engage registry allows users to enter their preferences for participating in studies and their personal information and medical history pertaining to qualifying in studies. The first issue we noted in our visual analysis that pertained to the registry portion of the site was the lack of clear visual cues in navigating to the registry. Users had to read through text and click on in-line links to find the registry. Upon revisiting the site, the nearly hidden links do not aid easy recall of how to navigate to the registry as well. The next issue we identified was the lack of
Team Envolve • Engage U - M Clinical Research
13
engage: U – M Clinical Research visual display of progress as the user is enrolling in the registry. This failure to give visual feedback about context leaves them wondering where they are in the process (see figure 5). One problem we rediscovered during the visual analysis was the misfit of the change in menu style at the top of the page (see figure 4). Recommendations •
Change the Volunteer for Research page to have two buttons or links that “pop out”: "Log in" and "Sign up." This, along with the current explanation of the registry on the page will give users a clear idea of what their options are.
•
During the enrollment process, display a list of the various steps and an indicator of where the user is in the process.
•
Keep the top menu consistent throughout Engage if it is to be available on the registry portion of the site.
Team Envolve • Engage U - M Clinical Research
14
engage: U – M Clinical Research
Figure 4: Engage registry display of possible studies (displayed after enrolling)
Team Envolve • Engage U - M Clinical Research
15
engage: U – M Clinical Research
Figure 5: Some questions from the Engage enrollment process
Team Envolve • Engage U - M Clinical Research
16
engage: U – M Clinical Research Conclusion In general, the Engage site looks professional and is visually appealing, following the style of the University of Michigan Health System layout. This mostly text content-based site does not require a lot of aesthetic appeal to be an effective tool for volunteers to find clinical studies. However, when we look more carefully at the integration of various parts of the site, the visual cues given for navigation, and the styles and colors chosen for the design, we can see significant room for improving visual aspects of the design that affect usability. Using our set of visual heuristics, we were able to identify such issues and suggest solutions. Some overarching themes of our findings were that the design of the site could be improved by having consistent and balanced layout and giving clear navigational cues to the user by using color, size, whites pace, and other features.
Team Envolve • Engage U - M Clinical Research
17
engage: U – M Clinical Research References Mullett, K. and Sano, D. (1995). Designing Visual Interfaces: Communication Oriented Techniques. Sunsoft Press. Ware, Colin. (2003). Design as Applied Perception. In J. Carroll, ed. HCI Models, Theories and Frameworks. Morgan Kaufmann. http://www.ncsu.edu/scivis/lessons/colormodels/color_models2.html
Team Envolve • Engage U - M Clinical Research
18