Wolverine Access Interactive Advisement Visual Analysis
Kumud Bihani Mohammad Hadra wi Andrea McVittie Ning Wang
Wolverine Access The Wolverine Access (WA) system is an online web application for accessing and managing an individuals information related to the University of Michigan. Access is given to students and their families, alumni, faculty and staff. Depending on a users role, different types of the user's account information can be managed through the system, including course schedules, contact information, housing information, and payroll options. A new version of Wolverine Access is going to be launched within the next six months for use by the University of Michigan community. This upgrade will include a significant change in the interface, as well as the inclusion of many new features. Included in these new features will be the "Interactive Advisement" module. This report will focus specifically on this new feature.
Wolverine Access Interactive Advisement Interactive Advisement will allow students to view their degree progress by displaying their program's academic requirements. The system will indicate which requirements have been fulfilled and which have not. Below each requirement, a list of courses that would count towards fulfilling that requirement will be listed, along with how many credits the course is worth, and when it is offered. This new advisement portion of the service will also eventually allow students to examine the impact on their academic advancement if they switch to a new major for their studies. A report detailing how their earned credits will transfer between degree programs will be generated and sent to the student. Users will access advisement through a new section called "Self Service" (Figure 1). Figure 1.
The student will then need to select "My Academic Requirements" under the "Degree Progress / Graduation" section. (Figure 2.)
Figure 2.
Once the student has selected "My Academic Requirements" they will be presented with the automatically generated report detailing their academic progress. (Figure 3.) Figure 3.
Target Audience Wolverine Access is used by and intended to serve all enrolled University of Michigan students. For the Winter 2008 semester, there are 37,851 students registered. This population is made up of 24,786 undergraduate students and 13,065 graduate students.[1] Figure 4. Wolverine Access System Users – Winter 2008
The undergraduate population consists of students enrolled in over 200 different degree programs. Incoming Freshman arrive from over 1650 different high schools. The undergraduate population originates from all 50 states and out-of-state undergraduate students make up over one-third of that population. The undergraduate population includes students from over 80 foreign countries. Four percent of undergraduates are international students. One quarter of the undergraduate population is African American, Hispanic American, Native American, or Asian American. The gender distribution of undergraduate students is approximately 50/50.[2] In addition to enrolled students, 180,000 Alumni are also granted access to portions of the system in order to access their transcripts.[1] Teaching staff is also supported by Wolverine Access. Currently, 6,610 total faculty members are registered users. Of those, 5,025 faculty members are teaching during the Winter 2008 semester, while the rest have taught courses within the last year.[1] The Wolverine Access system is also used by 6,800 users with administrative access who enter data, run reports and view information. These users are members of a variety of departments including Payroll, Benefits, Human Resources, Recruiting, Admissions, Curriculum, Academic Advising, Student Services, Student Financial, and the Financial Aid office. Also included in this group of users is the Wolverine Access Support Staff.[1]
Figure 5. Wolverine Access System User Types – Winter 2008
The Interactive Advisement portion of Wolverine Access will be mostly used by the enrolled student population including undergraduates, graduate and professional students.
Visual Analysis Goals The team conducted a visual analysis in order to evaluate the new visual design of the Wolverine Access system. The goal of this analysis was to examine what aspects of the new design were assisting the user and enhancing their experience, and which aspects may be causing the user difficulties or detracting from their experience. The team wanted to more closely examine the visual aspects of this system as it is a drastic change from the current system and was well received during user testing, despite general frustration with the system.
Methodology & Heuristics Each member of the team reviewed the system, comparing the visual aspects to the Visual Analysis Heuristics developed by the team, using material covered during this course, as well as other standards. (Table 1)
Table 1. Visual Analysis Heuristics Heuristic Category
Description
Text
Text on site presented in way that is easily comprehensible
Emphasis
States whether the right thing "pops out"
Standards
Adheres to standards put out by the University of Michigan. established conventions of web sites.
Color
Color used uniformly Use of colors that harmonize with each other according to the color [5] wheel
Post Processing : memory
States whether the user requires to keep things in memory, or commit [5] things to long-term memory
Consistency
Use of similar icons and text type for similar purposes throughout the site
Objects
Effective use of icons and symbols
Layout
Visual mapping of elements on the page
Gestalt
Adheres to Gestalt Principles of visual perception
[3]
at the user [4]
or
[6]
Successful or unsuccessful visual aspects of the system were noted. The team then compiled these notes and assessed the severity of identified issues.
Summary of Findings The visual analysis discovered several strengths (Table 2) in the system as well as area in which the appearance could be improved both for aesthetic reasons, as well as usability reasons. (Table 3) While varying from the specific color and logo-use standards prepared by the University of Michigan, the system does successfully represent the general visual and brand identity of the University, tying it to U-M. This theme is applied consistently throughout the system. Text and color are used successfully and in many instances, visual elements have been used to attract the users attention to important elements on the page. Table 2. Visual Design Strengths Finding
Category
1 Line width is good
Text
2 Green buttons "pop"
Emphasis
3 Consistent design throughout
Standards
4
Design reflects University's Identity (although it does not follow the specific Standards guidelines)
5 "i" icon is effective in getting attention
Emphasis, Objects
The majority of the visual issues our analysis revealed revolve around the left side menu. The presentation of links, as well as the use of icons and color creates does not communicate clearly with
the user the purpose of the menu, or it’s status. Table 3 lists the groups findings, organized from the highest priority to the lowest. Priority was ranked from highest (4) to lowest (1). Table 3. Visual Analysis Findings Organized by Priority Finding
Page
Category
Priority
1
The links do not indicate "visited" status
All
Post Processing : memory
4
2
The links are visually inconsistent
All
Text, Standards
4
3
The user is required to remember the icon key
My Academic Requirements
Post Processing : memory
4
4
The use of arrows is inconsistent. Arrows are sometimes used for "drop down" and sometimes to accent the link.
Student Center
Consistency
3
5
Visual density is too heavy
Student Center
Text
3
6
Icons do not communicate clearly
Self Service
Objects
3
7
The menu is cluttered.
Self Service
Layout, Text, Objects
3
8
Hidden menu items prevent the user from browsing all options easily
First page
Post Processing : memory
3
9
Icon key is hard to find
My Academic Requirements
Emphasis
3
10 The arrow required to expand menu items is not clear
All
Objects, Emphasis
3
11 The logotype violates the university standards
All
Standards
3
12 Colors violate university visual standards
All
Standards
3
13 The page is not balanced
First Page
Layout
3
14 Logo pixelization is distracting
All
Standards
3
15 Using the same color for highlighting as well as headers is confusing
All
Color
2
16 Excessive use of icons makes the page cluttered
Self Service
Layout
2
17 The yellow used in several icons make Self Service them stand out more than others
Color, Emphasis
2
18 Create new Report button introduces new color to pallette, that is only represented once or twice.
What-If Report
Color
2
19 Arrangement of objects on the upper left corner forms a distracting negative space.
All
Gestalt
2
20 Underline not aligned with tabs, effecting illusion
What if report
Layout
2
Detailed Findings The following detailed examples are listed in order of priority. Priority was selected based on the team's assessment of the impact of this feature on the users experience. All Pages High Priority: •
The links are visually inconsistent - Some of the links are underlined while some of them are not, making the navigation bar confusing for users. The appearance of some links follows the convention of hypertext links, while those in black appear to be static text, leading to user confusion. (Figure 6.) Figure 6. The Menu with Inconsistent Links
•
The links do not indicate "visited" status - After a link is visited by users, it’s appearance remains the same as an unvisited link. Changing this appearance could help guide users through the system.
Medium Priority: •
The arrow required to expand menu items is not clear - The triangle icon on the left side menu that indicates that a menu expands is too small to recognize. Also, this design may be more familiar to the Mac users. PC users are more used to "+" and (Figure 7.) Figure 7. Very Small Arrows
•
The logotype violates the university standards - The logotype used violates the university logo standards[4]. The standards do not allow for this arrangement of text.
•
Pixelized logo is distracting - The quality of the logo image in the top left corner is low and has pixelized, causing the logo to no longer be seamless with the background. (Figure 8.) Figure 8. Logo Pixelization
•
Colors violate university visual standards - The colors used in the site do not conform to the university visual standards[4]. Specific hex codes for both maize and blue are provided by the university as the "official" web colors.
Low Priority: •
Using the same color for highlighting as well as headers is confusing - The highlight color in the navigation bar is the same as the theme color which styles the header of the page and the tables. (Figure 9) Highlighting with a different color would more easily show users their location within the site. Figure 9. The Menu Highlighted with the Header Color
•
Arrangement of objects on the upper left corner forms a distracting negative space The alignment of the logo, menu, and other design elements create a distracting shape with the negative space. (Figure 10) Figure 10. Distracting Negative Space
Proposed Solutions: • • • • •
Style links consistently throughout the menu. Use a distinct color for highlighting. Consider using "+" and "-" instead of the small triangle for expanding menus. User a higher quality image for the logo Adjust layout to avoid awkward alignment Redesign the logo making it conform to the University logo standards.
First Page High Priority: •
None
Medium Priority: •
The page is not balanced – The page is heavily weighted to the top left corner, leaving the page feeling unbalanced. (Figure 11) Figure 11. Unbalance Page
•
Hidden menu items prevent the user from browsing all options easily – The use of “# More …” on the menus (Figure 12) require additional click-through by the user in order to view all menu options. This prevents users from easily browsing for their desired item, and requires return user to continue clicking through, or alternately, remembers each menu list. Figure 12. Hidden Menu Items Under “More”
Low Priority: •
None
Proposed Solutions: •
Visually balance the page by distributing the visual weight.
•
Modify the menu to display all the options.
Self Service High Priority: •
None
Medium Priority: •
Icons do not communicate clearly – Icons used do not clearly communicate to the users. The symbols used do not necessarily communicate the purpose of each category. (Figure 13)
Figure 13. A Cluttered Menu with Unclear Icons
Low Priority: • •
Excessive use of icons makes the page cluttered – Small icons before each item add visual clutter. (Figure 13) The yellow used in several icons make them stand out more than others – The brighter yellow color draws a users eye, emphasizing some of the icons more than others. (Figure 13)
Proposed Solution: •
Evaluate symbols used in the icons to see how effectively each communicates with users. Select simpler icons which effectively express the purpose of each group.
•
Remove excess icons and clutter
•
Use a less vivid yellow on the icons to ensure visual uniformity.
What - If Report High Priority: •
None
Medium Priority: •
None
Low Priority: •
Create New Report button introduces new color to palette, that is only represented once or twice - That color is not consistent with the website theme. Use the green throughout the system on other important buttons to unify the design. (Figure 14) Figure 14. The Green Button Introduces a New Color to the Palette
•
Underline not aligned with tabs, effecting illusion - The line under "What-If Report" is not aligned with the tabs borders (the tab vertical line) on the top. (Figure 15) Figure 15. The Title Underline Does Is Not Aligned with the Edge of the Tabs
Proposed solution: •
Use highlight color consistently throughout
•
Shorten underline
Student Center High Priority: •
None
Medium Priority: •
The use of arrows is inconsistent - Arrows are sometimes used for expanding menus (Figure 16) but sometimes to ornament links (Figure 17). Figure 16. “Drop Down” Arrows
•
Figure 17. Decorative arrow
Visual density is too heavy - There is a large amount of dense text on this page, which does not allow users to quickly skim for the content they are seeking. (Figure 18) Figure 18. A Text Heavy Page
Low Priority: •
None
Proposed solution: •
Use arrow icons consistently
•
Lighten the visual density of the right side of the page
My Academic Requirements High Priority: •
The user is required to remember the icon key - The legend is on top of the page. It is small and fixed. When users scroll down and try to find the information they need, they have to scroll up and look up the legend information to identify the information below. (Figure 19)
Medium Priority: •
Icon key is hard to find - The icon key is not obvious on top of the page. When users need them, they may have difficulty locating the key. (Figure 19)
Figure 19. Icon Key Is Subtle and Disappears as a User Scrolls
Low Priority: •
None
Proposed solution: •
Emphasize the icon legend visually
•
Consider a “floating” legend that follows the user as they scroll down the page.
Appendix References [1] Information Provided by Client [2] University of Michigan – Office of Undergraduate Admissions (2007) Fast Facts. Retrieved February, 2008, from http://www.admissions.umich.edu/fastfacts.html [3] Newman, M.(2007) Visual Analysis , Unpublished Classroom Presentation [4] University of Michigan University of Michigan Identity Guidelines. Retrieved March 2008, from http://www.logos.umich.edu/standards.html [5] Color Matters Color Theory. Retrieved March, 2008 from http://www.colormatters.com/colortheory.html [6] Katz, David (1950). Gestalt psychology: its nature and significance. New York, Ronald Press Co.