University of Michigan-DearbornUsability Analysis

Prepared forTony England, Ph.D.,

Interim DeanCollege of Engineering and Computer Science

Prepared byAmir Barodi, Matthew Hunt, Wendy Kempa, Adam Mourtada

WAAM Technologies, Inc.

April 17, 2014

Letter of Transmittal

WAAM Technologies, Inc22000 Michigan AvenueDearborn, MI  48126(313) 555-2000, www.WAAMtech.com

April 17, 2014

Dr. Tony EnglandInterim Dean, College of Engineering & Computer Science4901 Evergreen RoadDearborn, MI 48128

Dear Dr. England,

We are pleased to submit the “University of Michigan-Dearborn Usability Analysis” in response to your request of March 20, 2014.

Based on your concerns about the university’s website, we performed usability testing and analysis to compare the University of Michigan-Dearborn website to the University of Michigan website.  We found three main problems involving navigation within the University of Michigan-Dearborn website.  First, returning to the Homepage was too difficult.  Second, navigation required too many clicks of the mouse and back button to locate information.  And third, important and every day information was difficult to locate.

The issues uncovered by the usability testing all point to navigation problems.  Our recommendations will make navigation easier.  First, incorporate Breadcrumbs into the navigation system, hence making it easier to backtrack and return to the Home page.  Next, we would like to add drop down menus to reduce wasted mouse clicks.  A drop down menu enables users to see what is available before they commit to choosing the link.  Lastly, make the important information easy to find, such as the list of majors, admissions, and deadlines.

Thank you for your time and attention.  If you have any questions, please do not hesitate to contact us.

Yours sincerely,

WAAM Technologies, Inc.

2

Table of Contents

Executive Summary ...…………………………………………………………………….……...4

Introduction ...…………………………………………………………………………….………5

Methods ………………………………………………………………………………….……….5

Results ………....……………………………………………………………………….………...6

Discussion …………………………………………………………………………….………….7

    Problems ………………………………………………………………………..……....……..7

    Solutions ………………………………………………………………………..…….….........8

    Solutions Overview ……………………………………………………………..…………….10

Closing Thoughts………………...………………………………………………………...…….10

Annotated Bibliography………………………………………………………………………….12

Appendix………………………………………………………………………………………....15

List of Illustrations

Figure 1 - Graph of Average Time to complete each of the 9 tasks …………………….……….6

Figure 2 - Site ID for University of Michigan-Dearborn ………………………………………...8

Figure 3 - Breadcrumb example.……………………….…………………………...………...…..8

Figure 4 - Screenshot of University of Michigan-Dearborn Jump-To Drop down ..…………......9

Figure 5 - Screenshot of Canvas’ Drop Down Menu Styling……………….……….……...…....9

Figure 6 - Programs and majors listed as Colleges and Schools…………….………………......10

Figure 7 - Website with important information clearly listed on the Home page….....................10

3

Executive Summary

The University of Michigan-Dearborn Usability Analysis examines the problems that users have experienced when visiting the website, while also providing solutions for them. A university’s website establishes its image and credibility.  Therefore, it is imperative that this website is updated in order to provide increased usability and efficiency.

Methods

The method we used to assess the problems of the site was to assign 9 different tasks to 5 people on both the UM-D and U-M AA websites while timing to see how quickly one could find the task we asked them to do.

Problems Observed

The three main problems observed were: Navigation to retrace steps and returning to the Homepage was difficult. Navigation required too many mouse clicks and use of the back button to locate

information. Important and every day information was too difficult to locate.

Solutions Offered

By incorporating a simplistic & content first design, the UM-D site will be significantly easier to navigate and will allow the most important information to be readily available.

The addition of breadcrumbs and a homepage button will allow users to understand the structure of the site better which will help sort out any confusion and make going back to the homepage a simple and obvious task.

Converting the current navigational menu to a dropdown categorical menu will help reduce navigation time and help inform the users of what they can expect from the link before they commit to it.

Placing the most important information in easily accessible places, such as the homepage, will help users find what they need quicker without having to dig or use the search bar for answers.

4

INTRODUCTION

Website visitors are more irritated than ever. When a website isn’t properly structured and users don’t know where to go it becomes a big problem for the university. It is the responsibility of the university to make sure that it creates the best possible website because it is a reflection of the university.

The main purpose of this report is to improve the website’s usability. When formatted properly the site will attract more people to apply to UM-D and will help students find important information they are looking for such as admission information, registration deadlines, clubs/organizations, financial aid, etc. The Home page is a struggle for a lot of people because it doesn’t have the main things they are looking for. Instead they have to toggle through many pages just to find what they are looking for.

In this report, we will present the results of the usability testing and explain the results we gathered in the context of how it related to the UM-D website. This report will present our usability testing methods, results, and solutions.

METHODS

According to Usability.gov, usability is defined as “the quality of a user's experience when interacting with products or systems, including websites, software, devices, or applications. Usability is about effectiveness, efficiency and the overall satisfaction of the user.”  Usability is a blend of factors, such as how fast a user can complete tasks, how easy is it to remember enough for future visits, how many errors are made during visits and how long does it take to recover from errors (usability.gov).

We conducted our research with a user test pool consisting of six representative participants. According to Krug’s book, Don’t Make Me Think!  A Common Sense Approach to Web Usability, three to four users is a sufficient number of people to test (138).  We used the time and task analysis approach described in Balanced Website Design: Optimising Aesthetics, Usability and Purpose, by Lawrence and Tavakol, to complete our usability testing.  It entails observing and timing test pool users as they complete a list of tasks.  

We chose to compare University of Michigan-Dearborn (UM-D) to its prestigious sister college, University of Michigan-Ann Arbor (UM-AA), which has an easier to navigate website.  We chose tasks that would be important to current and future students.  We asked users to complete the following nine tasks, first on the UM-D website and then on the UM-AA website without using the Google search bar or the Quick Links:

1. Locate the BBA Admission requirements in the College of Business

2. Locate the Application for Admissions

3. Locate undergraduate tuition prices

5

4. Locate the list of majors offered

5. Locate information on financial aid

6. Locate information on internships and cooperative education (co-ops)

7. Locate the course list for the College of Engineering

8. Locate the college course catalog

9. Locate the registration deadline for the College of Business

The time it took to complete each task on each website was recorded in seconds and comments were also noted.  The two sets of recorded times were then compared and computed to a percent in change to more clearly see the true difference in searching each website.

We used all of our sources to determine the recommendations we would make for improving the navigation and efficiency of the UM-D website.

RESULTS

We tested five users on nine tasks which we considered important to current and future students. While navigating the UM-D website the average shortest amount of time taken was 24 seconds, while the average longest time was recorded at 225 seconds. As indicated in Figure 1, the average time taken to navigate the UM-D website took longer in all cases when compared to the UM-AA website.

Figure 1:  Average times it took to complete 9 tasks on UM-D website and UM-AA website

6

The task that created the biggest issue for users was when they were asked to locate the admissions requirements for the College of Business on UM-D’s website.  It took them 224.8 seconds to access on average. This equates to an average of 50 more seconds than the 173.6 seconds on average on  UM-AA’s website. We believe this is due to the large number of links necessary to navigate to the page, which could be cut down significantly. If they were reduced and the navigational menus were optimized to finding the most important information, it would encourage more people to look into the College of Business as a possible destination while attending UM-D.

When we asked our testers to attempt the most important feature of any college website, finding the application for admissions, the results show that while the UM-D website allows quick access to the application, it could be optimized by placing a link to the application from the homepage. It took our testers an average of 42 seconds to access the UM-D application as opposed to the 24.6 seconds on average to access the UM-AA application, for a difference of 17.4 seconds. Unfortunately, this navigational issue was present in all of our tests with most of our test subjects.  This led to an average of 22.4 second difference over the 9 different tasks between navigating the UM-D site and the UM-AA site.

While completing the nine tasks, several users were observed clicking the back arrow.  When testing was complete, the users were asked why they used the back arrow button.  Three out of the five users indicated they needed to return to the Home page when they became confused in their search for task items.  Four of the testers were observed attempting to use the “Quick Links” drop down menu in hopes of finding some of the tasks more easily, even though they were previously instructed not to.  

The tasks that took the greatest amount of time to complete were those that prospective students would be likely to attempt.  These included admission requirements for the College of Business (average of 3.7 minutes), course list for the College of Engineering (average of 2.5 minutes), and the registration deadline for the College of Business (average of 2.3 minutes).  This is far too much time to expect a prospective “customer” to spend on searching for imperative information. The inability of a university to provide the user an easy website experience translates to a loss in revenue.

DISCUSSION

Problems

“It’s a fact:  People won’t use your website if they can’t find their way around it” (Krug 51).  A poor website uses too much time and energy.  At the conclusion of our usability study and research, we found three main problems involving navigation within the University of Michigan-Dearborn website:

1. Navigation to retrace steps and returning to the Homepage was difficult.2. Navigation required too many mouse clicks and use of the back button to locate information3. Important and every day information was too difficult to locate

7

Solutions

We found that focusing on the three main problems would help to resolve the overall navigation issues with this website.  According to Steve Krug, the first law is to not make the user think.  A web page should be self-evident, obvious, and self-explanatory.

Home Page Navigation and Breadcrumbs - The notion of the Home page is extremely important.  It is a fixed place like the North Star and it makes the user feel grounded (Krug 58).  Being able to easily return to it gives a user a fresh start, like pressing the Reset button.  Therefore, it is important that every page on the UM-D site provide a way back to the Home page.  The University of Michigan-Dearborn site ID, as noted in Figure 2, doubles as Home page link, but not all people know that.  They mistake it for just the title of the webpage.

Figure 2:  Site ID for University of Michigan-Dearborn also is a link to the Home page

Therefore, it is important to add the word “Home” everywhere but the Home page.  An easy and extremely helpful way to accomplish this is to use Breadcrumbs.  The term originated from the fairy tale Hansel and Gretel when they dropped breadcrumbs to find their way back home.  Breadcrumbs mark the path the user took from the Homepage to their current location.  They can use it to backtrack or go straight back to the Home page. Based on Steve Krug’s recommendation in Figure 3, we suggest Breadcrumbs be placed at the top of UM-D’s webpage above everything, written in small font, using the words “You are here,” and boldfacing the last item.

Figure 3:  Breadcrumbs can be placed at the top of a website to provide an easy way to backtrack your steps and to return to the Home page

Drop downs - Drop downs can be a significant addition to any website’s usability as they help to create a menu that allows access to different sections of the website while helping

8

to inform the user of the route they took to get there. Combining drop downs, or even consolidating them into the current headings that make up the current menu, could help cut down navigation confusion and help keep the data organized and readily accessible. This can help cut down the reliance on the custom Google search bar, which immediately increases the website’s native usability by keeping most of the traffic on the actual domain.

Figure 4: A picture of the current Jump-To dropdown featured on the UM-D website.

As noted in Figure 4, using a drop down setup like Canvas’ will allow UM-D’s website to achieve the level of compartmentalization that it requires, while making information easily accessible across the different sections of the website. A major issue we noticed through our research, is that there is a redundancy in having both a “Jump-To” drop down as well as a “Quick Links” drop down. Our solution is to either consolidate both of these menus into one or go with a multi-leveled menu such as Canvas.

Figure 5: A picture of an example of the type of drop downs suggested to UM-D as a replacement for their current dropdowns.

Make Important Information Easily Accessible - Users are in a hurry.  They don’t need to read everything and they tend to focus on words and phrases that match their task (Krug 23).  Studies show that users decide quickly which parts of a webpage are useful and then they almost never look at the other parts (37).  Therefore, it is important to place the most frequently used links on the Home page.  For example, according to the Nielsen Norman Group, while researching college websites, prospective students search for lists of programs and majors, not items called Colleges and Schools.  Students have a hard

9

time determining which degrees belong to which college or school.  The University of Michigan-Dearborn refers to undergraduate programs as colleges and schools, as shown in Figure 6.  

Figure 6:  It is hard to determine programs and majors when they are listed as Colleges and Schools, as UM-D does on their website.

By providing a link to a list of programs and majors on the Homepage, users can quickly find the information without searching links under Academics or Future Students.  In addition, it would be best to place links to admission applications, registration, and deadlines on the Home page, as seen in Figure 7.  Placing these items on the Homepage will only increase the usability of the website for prospective students, thus leading to a boost in revenue.

Figure 7:  An example of clean, concise university website with important information clearly listed on the Home page.

10

Solutions Overview

By incorporating a simplistic & content first design, the UM-D site will be significantly easier to navigate and will allow the most important information to be readily available.

The addition of breadcrumbs and a homepage button will allow users to understand the structure of the site better which will help sort out any confusion and make going back to the homepage a simple and obvious task.

Converting the current navigational menu to a dropdown categorical menu will help cut navigation time in half and help inform the users of what they can expect from the link they click without having to commit to it.

Placing the most important information in easily accessible places, such as the homepage, will help users find what they need quicker without having to dig or use the search bar for answers.

By consolidating the two different dropdowns into one, including an obvious homepage button, and using categorical navigational menus the UM-D site can remove most navigational roadblocks.

Closing Thoughts

We have documented the issues of the usability problems at the University of Michigan-Dearborn website. With the proper recommendations to make it more efficient and user friendly, UM-D has the opportunity to give back to their students, faculty, parents, and also to prospective students.  This is a further opportunity for the university to stand out because it carries the prestigious Michigan name.  Afterall, a website can define a university’s credibility and its values.

We would like to thank you for taking the time to review our report and hope you find it very useful.  Please feel free to contact us with any questions or for your future needs at contact@WAAMtech.com or call us at (313)-555-2000.

11

Annotated Bibliography

Krug, Steve.  Don’t Make Me Think!  A Common Sense Approach to Web Usability.  Berkeley: New Riders Publishing, 2006. Print.

Krug’s book provides all types of information on web usability.  It includes guiding principles, how people really use the web, designing navigation and home pages, the importance of usability testing early on and often, and concerns and outside influences.

    This is an informative, concise source.  The book is short, includes interesting illustrations, examples, and humor to keep it interesting. The author provides an objective view and has over 20 years experience in making websites easier to use at companies like Apple, AOL, Netscape, and BarnesAndNoble.com. He is also a highly respected usability consultant. He provides great insight on what types of things work best on websites and which ones are bad ideas.

Lawrence, Dave, and Soheyla Tavakol. Balanced Website Design: Optimising Aesthetics, Usability and Purpose. London: Springer, 2007. Print.

Lawrence and Tavakol’s book contains quite a bit of information about making a website the proper way in order to make sure the usability and purpose of the site are clear to the user. It focuses on defining and achieving the desired purpose, usability and aesthetic characteristics.

The information about usability is presented in bullet-points which makes it easy to as a checklist of sorts. With both authors being professors in web technology and digital media at Middlesex University, the book instantly has a lot of credibility. The authors’ straightforward approach to usability, that usability tips in general apply to websites as well, provides a method of assessing usability that even those who aren’t tech-savvy can apply and appreciate. The book also admits that there are too many variables to be able to write a complete guide to usability.

Margolin, Jonathan, Shazia Rafiullah Miller, et al. “The Community College Website as Virtual Advisor: A Usability Study.” Community College Review. Volume 41. 44-62. Web. 5 Apr 2014.

This article summarizes peer reviewed research on community colleges. This article emphasizes on all aspects of colleges, from administration to the education system around the world. This website claims to be the best site with scholarly research for the past 40 years, and is very reliable.

This source seems to be very useful. They have podcasts, collections and editions all within their works cited. The information is very reliable but confusing to gather since it is a little biased. Although the main goal of this source is to prove how accurate and efficient the article is through the site.

12

This source is helpful to our assignment, but not as much as our other web-site articles. This source helped us see that some sites are easier to use than others, and why that may be.

Sherwin, Katie.  “University Websites: Top 10 Design Guidelines.”  Nielsen Norman Group.  N.p. 19 Jan 2014.  Web.  14 Apr 2014.

Sherwin’s article provided a great deal of information on university website usability testing. By having an effective university website, it can create a positive brand image, save time, and improve user satisfaction. She goes on to mention that from the research she has conducted, most university websites are very sub par.

This is a very helpful source because it provides a top ten list of suggestions on how to improve a university website. There are pictures that are by the 10 different suggestions so that people will have a better understanding of what they are talking about. The Nielsen Norman Group is very credible because they have observed over 4,000 users in people in 18 countries, conducted many user tests, and their researchers cover the most relevant topics in usability today.

Snider, J. and Martin, F.  “Evaluating Web Usability.”  Performance Improvement.  Vol. 51, Issue 3 (2012), pp. 30–40.  Web.  28 Mar 2014.

Evaluating Web Usability is about the evaluation of a college website.  It used one-on-one testing, focus groups, web analytics, peer university review, a marketing focus group, and demographic data.  This source serves as a good example of testing and determining a website’s usability.  Its purpose was to enhance the public face of the student page and provide more resources to the students.  This source also provides recommendations to fix this website and also provides general information for good college websites.

This is a good source because of its recommendations for strong college websites, but its use of focus groups and web analytics do not pertain to our usability testing.  This source is credible as it was written by two professors at the Univ. of North Carolina and is based on eight resources.  Compared to our other resources, this resource provides less usable information due to its focus on peer review, focus groups, and web analytics.

"University of Michigan." University of Michigan. N.p., n.d. Web. 31 Mar. 2014.

The University of Michigan website seems to flow so much better and should be used a model for the University of Michigan–Dearborn website. The site’s navigation doesn’t rely entirely on the search bar like UM-D’s does and also offers quick access to the relevant information for transfers and prospective students.

The point of the website is to help future students feel acclimated with the UM-AA before ever having set foot on campus, help current students and faculty stay connected to the university while they are a current part of UM-AA, and help alumni stay connected to the university. The website has undergone a redesign within the last year which has

13

really streamlined the website’s different sections, making it quicker to find information that is most important to current and future students, as well as faculty.

"University of Michigan-Dearborn: UM-Dearborn Home." University of Michigan-Dearborn: UM-Dearborn Home. N.p., n.d. Web. 31 Mar.. 2014.

The point of the University of Michigan-Dearborn website is to help guide current students, future students, faculty, and interested parties to information about the school and its various tools.  It serves as a main interface between the school and the people on many different levels, i.e. admissions, registration, tuition, programs of study, course tools.  The website has been recently updated, but there are remaining things it could improve on. Our team will use this website as the main source of our usability study.  We will perform testing on it and complete research so that we can make recommendations for improvement in order to provide a more valuable resource for the student and faculty community.

The UM-D website is a credible source because it is a university managed website.  We will be comparing it to the University of Michigan-Ann Arbor website for testing purposes and ease of use.

Usability.gov." Home | Usability.gov. N.p., n.d. Web. 31. Mar. 2014

This website is designed for you to have a better understanding of what usability is and does. The topics that are covered through the website are content strategy, project management, what and why of usability, virtual guidelines, and basics of user experience we believe that this site is a useful source. The reason I say that is because it gives different designs on how to make the usability better for the user.

This source can be useful because it explains different aspects of usability and how it can prove to be more beneficial for people that use the UM-D website on a regular basis. I took away from the usability website of  how important it is to make a website easy to operate so that your audience will return again and again because the experience is simple and quick.

14

Appendix

Site Usability Testing

A. Task List for Testers

1.       Locate the BBA Admission requirements in the College of Business

2.       Locate the Application for Admissions

3.       Locate undergraduate tuition prices

4.       Locate the list of majors offered

5.       Locate information on financial aid

6.       Locate information on internships and cooperative education (co-ops)

7.       Locate the course list for the College of Engineering

8.       Locate the college course catalog

9.       Locate the registration deadline for the College of Business

B. Test Pool

1. Junior student at UM-D

2. Freshman student at UM-D

3. Freshman student at a community college

4. Junior student at UM-D

5. Graduate of UM-D

15

C.  Usability Test Results

Note:  All time in seconds

16