Harvard Graduate School of Design: Heuristic Evaluation Report Allison Hall LIS 644 Usability Theory and Practice Pratt SILS 10.16.13
1 Executive Summary Harvard University is known worldwide as having some of the most prestigious programs available in higher education. The school has a long history of producing groundbreaking research as we as talented professionals. Harvard s website offers extensive information about the university and serves as a visual representation of the institution. This report evaluates Harvard s Graduate School of Design section of their website. Based on a heuristic evaluation performed by three usability experts it has been determined that users of the site experience prominent navigation and usability issues. The issues found through the evaluation are simple fixes that if implemented will help Harvard maintain their strong reputation of excellence online and off. Recommended fixes include: Placing the main navigation menu in a prominent, consistent location at the top of each page. A user should not be expected to scroll down or look in an unconventional place to find the site s main navigation. Provide breadcrumbs for users to easily retrace steps if they want to go back or need to recover from an error. Users will appreciate navigating the website more efficiently. The current Graduate School of Design site is very different from other websites and virtually emulates the uniqueness the program. Harvard should capitalize on this strength and strive to create a better overall user experience for this site. These research supported findings will help create a more intuitive and useful experience for the user.
2 Contents Executive Summary... 1 Contents... 2 Introduction... 3 Methodology... 3 Finding and Recommendations... 4 Conclusion... 7 Appendix A... 8 Appendix B... 9
3 Introduction As the oldest higher education institution in the United States, Harvard University has an excellent reputation known worldwide. The University s Ivy League status ensures that the institution is held to certain professional standards and academic expertise. Harvard s website serves as a virtual representation of the institution and it must reflect the high standards that the university holds for itself. This report uses a heuristic evaluation to assess the Graduate School of Design section of the school s website. While the School of Design site is very attractive and unique, the findings of the report show that there are some navigation and usability issues. Below are the results of the report and recommendations for solving the usability problems. Methodology A heuristic evaluation was performed by three usability experts to examine several tasks on the Harvard Graduate School of Design website. The heuristic evaluation method assumes that usability problems fall into distinct categories. This report utilizes Jakob Nielsen s original ten usability heuristics to supplement and help explain the problems found within Harvard s Design site. Additionally, Nielsen s heuristic rating system helps determine how severe a usability problem is. Nielsen s heuristics and rating system are shown in Appendix A. Each usability expert completed tasks, shown below, to find at total of eighteen usability problems. Several problems were found by more than one expert. The problems were assigned to specific heuristics that were then rated on a severity scale of 0 to 4. The results of the findings were then examined in a table to highlight which problems were most severe and or recurring. The complete table can be found in Appendix B of this report. Interface: www.gsd.harvard.edu Harvard School of Design This website provides information to current and prospective students, faculty, staff and alumni. Task 1 - Navigate the website to find a Course that is of interest. Use filters to refine search if desired. - Click the course to browse the description and note the professor s name (it is used in the next step). - Navigate the website to find a bio/profile for that professor. Task 2 - Navigate the website to find Resources and click on the Fabrication Laboratory. - Go to the Rapid Prototyping Devices Main Page. - Find and click on any tutorial for 3D printing and browse. - Find and click on the 3D Printing Queue and see if there is anyone waiting to print. - Find and view the 3D Printing Order Form.
4 Finding and Recommendations Harvard s Graduate School of Design website is different than any other site. They use crisp images and interesting visual design to present information to the user. It is clear that Harvard is proud of their excellent design reputation and want this to show through on their website. While the site is certainly original, a user must be able to fully navigate and use the website. The findings of this heuristic evaluation show several usability issues that can easily be fixed to improve the overall functionality of the site. Problem poor visibility of main navigation menu On the home page of Harvard GSD, the main navigation menu is collapsed at the bottom left corner of the page. While the placement of this feature allows for great visibility of the background image, it is confusing for the user that is used to finding the navigation bar at the top of the page. Furthermore, it is more likely that a user is visiting the site to find information more so than they are trying to find pictures of the program. A shortcut sub-menu can be found on the upper right side of the page which may confuse the user further if they have not yet scrolled down to find the main navigation menu. The current main navigation for this site does not align with typical platform conventions and will ultimately slow down the user and their tasks. Heuristics Violated: 1 visibility of system status 2 match between system and the real world 4 error prevention 8 aesthetic and minimalist design
5 Recommended Fix move the menu to the top left hand corner It is best practice to have main navigation options displayed clearly and prominently when a user first comes to the site. This eliminates confusion and prevents the user from having to scroll down or search to find critical information. This recommendation is a simple suggestion that the main menu be brought up to the top left hand corner. The menu can remain collapsible so that the school can showcase a featured background image and maintain the minimalism that was originally sought. The main menu expanded would only need to be inversed so that the information logically dropped down instead of floating upwards. The first place users look for navigation is toward the top of the page. Assuring that the user will find navigation options in the place that they expect it will significantly improve this serious design issue. Problem no breadcrumbs when navigating Courses Whether a student is researching classes to register for or a prospective student is seeking to learn about course offerings, navigation should be simple. Harvard s GSD website has a great search function with several filters for looking up or browsing courses. However, once a course is clicked on to read the description, the user has no way to go back to their original search query. If they X out of the overlay box that is standard to the layout design of the site or click the back button of the browser, the user is navigated back to the home page. Due to the fact that there are no breadcrumbs for users to retrace their steps, the user experience of the Course page is frustrating and not ideal. If a user is trying to explore different courses they will have to repeat the same steps over and over. It should be immediately clear to a user where they are, how they got there, and how to go back to where they were. Heuristics Violated: 1 visibility of system status 3 user control and freedom 4 consistency and standards 5 error prevention 7 flexibility and efficiency of use
6 Recommended Fix The recommended solution to this problem is to create a way for users to back track their steps so they can easily navigate the site. This would ideally be done with a breadcrumb system so that a user could follow their trail back to where they started. While this feature would have to be added on the backend of the website it most certainly will be worth the small extra effort. Making sure that users can find and refind information is of utmost importance. This feature allows an excellent constraint so that users don t have to X out or use the browser back button. Furthermore, breadcrumbs are already a standard convention with many websites so users will connect the action with the result. With a small redesign of the Courses section implementing breadcrumbs will satisfy users and help them find information more efficiently.
7 Conclusion Harvard s Graduate School of Design website is unique in a way that most websites are not. The site itself gives a great feel for how dedicated the program is to providing a superior design education. Unfortunately the website falls short in terms navigation. Harvard is not an institution that falls short of much. If a user can t navigate a site efficiently then the design has failed. Making simple changes to their home page menu as well as adding breadcrumbs will improve the overall navigation of the site and strengthen their online presence. Based on the recommendations it is evident that the Graduate School of Design would not need to sacrifice their clear originality while implementing these fixes. The School of Design is proud of their achievements and should have a confident website that reflects their program, passion, and Ivy League reputation.
8 Appendix A This appendix provides Jakob Nielsen s Ten Usability Heuristics and rating system. Nielsen s Ten Usability Heuristics 1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation Problem Severity 0 Not a problem 1 Cosmetic problem 2 Minor problem 3 Major problem 4 Catastrophe References Nielsen, J. (1995, January 1). 10 Usability Heuristics for User Interface Design. www.nngroup.com. Retrieved October 15, 2013, from http://www.nngroup.com/articles/ten-usability-heuristics/.
9 Appendix B This appendix includes the heuristic evaluation table used in determining the results found in this report. Heuristic Evaluation Problem Table Problem Heuristic(s) Rating Expert 1 Expert 2 Expert 3 In course description, professor names do not link to their bios 4,6,7 2,2,3 x x x Email widget/envelope icon is mislead 1,3,5 2 x Confusing labels on Rapid Prototyping Page 1,4,6,10 2 x 3D Printing Queue is hard to read 1,6 2 x Can't return to GSD Home page from Fabrication Lab page 1,3,5,6 3,3 x x Fabrication Lab link has confusing pop up before the page is reached 1,2,4,7 3 x No breadcrumbs when navigating courses 1,3,4,5,7 3,4 x x Rapid Prototyping Link is buried on Fabrication Lab page 2,6 3 x Main Menu layout doesn't stand out/is unconventional 1,2,4,8 3,4 x x Faculty Profiles are tiled and then have a pop up - overcomplicated 2,4,8 3 x Unconventional right side bar icons are confusing on home page 1,2,4,5 2 x Fabrication Lab page redirects to another site 1,3,4,10 2 x Constant pop-up overlays are distracting 1,4,8 3 x User can t go back other than using browser back button 3,4,5 3 x Fabrication Lab Menu is inconsistent and confusing 1,2,4,6 3 x No header on the top of the page - what site am I on? 1 3 x Minimalist design of default "news" pop up on home page is hard to read 1,4,6,8 2 x