Individual Assignment #3: Representative User Test

The Website

The Norman Rockwell Museum is located in Stockbridge, Massachusetts. The website contains resources about the materials contained within the collection, information on visiting the museum, an ecommerce shop, a method to purchase tickets to visit the museum, and additional resources regarding the institution itself and ways in which a user can donate or contribute to the museum.

The User

The user I utilized for my representative user testing is female, aged 27-35, with moderate to advanced computer skills. They are employed as a graphic designer, and are familiar with concepts surrounding images such as dimensions, formats, and copyright licensing. They were also previously employed in a library so they are vaguely familiar with cataloging and organizational concepts surrounding large collections.

The Method

The method utilized for this representative user testing was the concurrent think-aloud (CTA) protocol. The user was instructed to perform their given task while stating their thoughts and reactions to the website with which they were interacting. Care was taken to ensure the tasks were not leading, while eliciting interaction with the elements of the website that required further examination.

This method was chosen based on available resources and time. It provides a cost-effective means of user testing requiring little more than a computer, a user, and a notepad. Despite its relative simplicity, CTA provides ample insight into issues users might encounter on a given website. While the verbal dialogue may be disruptive to the task being performed, it allows for greater insight into the users mindset and thinking when navigating to and using features on a given website.

The Tasks

Three tasks were given to the user to perform. They are as follows:

The user was instructed to purchase tickets to visit the museum. This represents arguably the most important task for the website, which is to facilitate paid visits to the museum. The user was informed that they would qualify for a college student discount, and were attempting to purchase a ticket one week away from the day they were participating in testing.
The user was instructed to find out more information about internships at the Norman Rockwell Museum, and if available, apply to one. This task is representative of the student persona created in our previous group assignment.
The user was instructed to obtain a high quality scan of a painting for use in a project. This task again represents our group persona, a college student. This task was refined from the initial task (to look up a painting) to better induce navigation to less visited areas of the site and interaction with more complicated information present on the site.

The Analysis

Task 1: Purchasing Tickets

The user is initially tasked with purchasing tickets for one week from the current day to visit the museum. She is initially drawn to the ‘Buy Tickets’ call to action in the main navigation menu beneath the title of the page. She is temporarily distracted by another “Buy Tickets” button on the carousel image in the center of the page, but as this is set on a timer to rotate, the link to buy tickets on the carousel image disappeared before she was able to click the link. She resorts to clicking the main “Buy Tickets” button on the navigational menu. It is worth noting that on the mobile version of the website, this menu and button becomes hidden, requiring the user to click the menu toggle in the top right to access the ticketing interface.

The user then selects the museum visit option from the pop-up booking window, after some time spent determining the proper link to click. The user notes that this interface is very resource intensive for her laptop, causing it to slow down her computer and web browser.

The date selection page in the ticketing system

On the date and time selection page for the museum visit the user selects her date but is confused by where to proceed. There is not a clear button highlighted to proceed to purchasing, instead the user scrolls the page looking for a “purchase tickets” option. Eventually she realizes that the only clickable element (besides Covid-19 guidelines and images) is the box beneath the calendar. She clicks the box, and proceeds to the next page.

The ticket type and discount type page in the ticketing system

On this page, the user easily selects one ticket for a college student in the initial ticket options, but she is confused momentarily by an additional drop down for discounts after selecting her initial ticket type. This likely stems from having two separate places to define your discounts, both initially in the top ticket type menu, and a secondary menu for other discounts (such as EBT or local resident discounts). Additionally, on this page she notices a required zip code box and fills it out, stating that “its weird they ask for a zip code when they will get my address”.

She then proceeds to bypass the donation and comments section of the page as they are unnecessary for her purposes. She then states that she is surprised by the addition of a $1 fee for the ticket, and wonders why that isn’t just included in the initial ticket price. She then clicks the add to cart button and proceeds to the checkout page. Upon reaching the checkout page, which contains a relatively standard form for credit card information, she concludes her first task.

Task 2: Researching Internships

The user is now tasked with researching information about internships at the Norman Rockwell Museum, and applying to one if applicable. Her initial response is to quickly scroll to the footer of the home page looking for a link to “careers” or similar. Upon finding nothing along these lines, she returns to the main navigation menu above the banner image. Here she attempts to hover over the menu items looking for something similar to “careers” as before. She then attempts the same process on the secondary menu on the very top of the page. Upon discovering there are no drop-down or hover menus here either she proceeds to choose another location, the “Learn” link in the menu. She reviews this page and determines it does not contain the information she is looking for. She now clicks the “About” menu item, which is the page that contains her desired information.

On this page she quickly locates the link to more information on internships in the table of contents. This link brings her to a new page that retains the table of contents from the main “About” page. On this page, she scrolls down past other available positions (including full job descriptions) to find the internship section of the page.

She notes that this section doesn’t have any anchor links like the full employment section above does. After scrolling through descriptions of all possible internships (some of which are closed) she finds a short “how to apply” section that applies to all internships.

The how to apply section for internships

At this point she clicks the first bullet point, only to realize that it is an anchor link to where she is already located on the website. She proceeds to read the instructions and download the linked pdf from the button in this section. With an application form secured, and process understood, she has completed this task.

Task 3: Obtaining a Scan

For the third and final task, our user must start the process for obtaining a high-quality scan or print of a piece of art in the Norman Rockwell Museum collection. She is provided with a specific piece, “Santa’s Lap” and told to disregard cost. She correctly navigates to the “research” menu item in the secondary menu at the very top of the page. On this new page she finds “image resources” in the table contents, which is the correct section for image licensing and purchasing information, and clicks the link taking her to a new page.

At this point she reads the paragraphs at the top of the page and begins to scroll down to find more information. Here she discovers a button that takes her to the “online image order form” that is an anchor link to further down the page, as shown below.

She begins to read the form section in preparation for completing her task, but notices that they do not mention any prices for obtaining a scan. She begins to scroll back up the page to look for the pricing information in a linked pdf, located just above the anchor link. Upon viewing the pdf she continues to inspect the form for additional elements she might need to provide.

In the shipping section she notes that “it’s weird” that they ask for an account number. Upon further inspection she determines she simply needs to select an option lower in the shipping area to receive standard shipping. She also notes that there is no section for payment information, or to add anything to a cart. This form acts as a “request” form more than an “order” form, necessitating further interaction with museum staff to obtain a print or scan. After determining that she has the information and links required to obtain a scan of a painting, she has completed her third task.

The Recommendations

Upon completion, and reflection on, this representative user test, I can offer XXXX main recommendations to improve the usability of the Norman Rockwell Museum website.

#1 – Consolidate Menus

The museum website has at minimum two navigation menus at all times (up to three if you are on a page with a table of contents). The links often do not match each other in content, despite being titled the same in the menu. The two main menus should be combined to create a unified navigational menu that reduces overlap and increases information scent for the user. Additionally and related, elements of the menu that are more related the organization itself (such as “careers” and “staff directory”) should be placed in the footer of the website, to allow for quick navigation by users actively seeking that specialized information.

#2 – Add Anchor Links

Many pages on the site contain large amounts of information on a page, necessitating a large amount of scrolling by the user, leading them to become lost and fatigued. While creating dynamic pages that display the information requests (such as drop downs for the type of employment you are looking for) would be the optimal solution, a much more cost effective solution would be to enrich informational pages with anchor links. This would allow users to quickly navigate to their desired information, without having to scroll through information they do not need. A list of these anchor links should replace the “Table of Contents” present on many of the pages as that is the standard location for them.

#3 – Better Integrate Image Scanning

The system to request and purchase scans or prints of images is not integrated well into the rest of the website. If one were to find a painting they would like a scan of, they would need to manually copy the information for the painting, navigate to the image order form, and then manually enter the information themselves. This could be made markedly more efficient by creating a link on a link on a painting’s information page to purchase a scan or print that leads to a pre-populated form with the painting’s information. This would allow the website to remove multiple tasks for a user requesting a print, while not necessitating creation of a secondary purchasing system.

#4 – Simplify Ticket Purchasing

The ticket purchasing system and process offers ample opportunity for improvement. As many ticket purchasing systems exist for quick implementation, this section of the site can be streamlined with minimal associated cost. Some specific recommendations for this section are to reduce the process to two pages, one where users select their tickets, dates, and additions, and a second page where they checkout and pay. Beyond being more efficient, reducing the pages removes the issues with the forward/backward navigation in the purchasing system. Additionally, the removal of low frequency ticket options (such as “memberships” and “donation” and specific events) will streamline the process for users, directing them to the two most common ticket types “Museum Visit” and “Museum Visit + Tour”.

###

September 26, 2022September 26, 2022

Individual Assignment #2: Heuristic Evaluation (Cummer Museum)

The Website

The homepage for the Cummer Museum website

The Cummer Museum of Art & Gardens is an art museum located in Jacksonville, Florida. The museum was established in the 1950’s when Ninah Cummer gave her humble art collection and home for the creation of a public art museum. Today the museum has grown exponentially to become one of the largest fine art museums in the region, encompassing over 5,000 pieces of art along with a manicured garden.

The Scenario

For my scenario I chose a very simple one, but one that is likely repeated frequently on the site: a potential visitor looking up hours, admission prices, and directions for the museum. As a public museum that is not well known outside of the region this scenario would be undertaken by potential out-of-area visitors, local residents who have heard of the museum but not visited, as well as returning visitors who need to refresh their knowledge of how to visit the museum.

Knowing this, I focused my heuristic valuation on two main aspects: the ease of navigation to necessary information for a visit and how clearly and directly relevant information is presented to the user. While this evaluation does not focus on a specific user, I kept in mind that this scenario is likely very common amongst all demographics of site users.

The Analysis

As our user is likely to do, this analysis begins on the home page where we find the first usability issues with the site. These issues center around heuristic #8: aesthetic and minimalist design. In other words, keeping the interface centered around the information users need and not cluttering the site with extraneous or little used information. If a user was going to visit the Cummer museum, where does one suppose they will click on the homepage? Let’s try the large call -to-action on top of the page…

Call-to-action button at top of Cummer Museum website

Well, it’s unlikely a new visitor would want to become a member without even visiting the museum, so let’s move on to the main navigation menu…

Again, our scenario has hit another roadblock. While learning more “about” the museum, looking up upcoming “events”, or trying to “donate” are useful links, none are the primary goal of the user in this scenario, which is to visit the museum. Assuming the user chooses to dig further into the “about” menu item, as it is likely to contain their required information, they will discover a submenu on hover…

Cummer Museum hover menu for the “About” page

In yet another instance of ignoring heuristic #8: aesthetic and minimalist design, all options are unrelated to the actual act of exploring the museum in person (while not within the scope of this blog post, it is worth noting that nothing on the Cummer Museum website, including this hover menu, supports tab/shift+tab functionality which presents a raft of accessibility issues). After much exploration, and scrolling, the user will eventually find the link for the museum hours and admission prices. In the footer

This link opens an external page, unlike all other pages on the website. While this choice still provides the information the user requires in this scenario, it violates the consistency of the website, heuristic #4: consistency and standards, and the ability for the user to quickly and easily reverse their action, heuristic #3: user control and freedom.

Main “about” page for the Cummer Museum website

This page further strains heuristic #4 by actually being designated the main “about” page on the site, meaning that it is labeled on the main page as both “about” and “hours and admission”. Further, the hover menu as previously referenced does not reflect the contents of the actual “about” page in any meaningful way. Exploring this page, the user will quickly find that they cannot purchase tickets online, but they may still want to know the price for tickets.

Admission pricing section for the Cummer Museum website

In this small section, there are clear issues surrounding heuristic #2: match between the system and the real world. It is operant of the designer to make sure terminology is clear and easily understandable without necessitating additional information seeking. In this section, it begs the question what age qualifies someone as a “senior”? Additionally, what about “students” who are 18-year-old seniors? While a minor infraction, the wording choices cause confusion in a prospective visitor.

At this point in our scenario, our hypothetical user has discovered the hours to the museum, and the cost to admission, as well as the fact that they cannot purchase tickets online. Assuming that they have decided to carry onward with their visit they will need the address to the museum. On this “about” page there are two locations for the address, in the “contact us” section and in the footer. Both require excessive amounts of scrolling. This is due to both the lack of jump links and corresponding menu items, a clear violation of heuristic #7: flexibility and efficiency of use. Without accelerators like jump links, the user is left to scroll through the entire page, analyzing all information until they come upon the required address.

The Recommendations

Overall, the Cummer Museum website needs additional work to improve navigation, providing a clear path to their users’ primary goals. The most direct way to do this is to redesign their navigation menu to better represent the page hierarchy while focusing on the most common user tasks on the website.

Another simple solution to improve usability would be to change the large call-to-action at the top of page from “become a member” to something like “visit us” or “buy tickets”. This way, users can more quickly and directly navigate to their desired information.

It would also pay dividends to bring the address and “hours and admissions” further up the page, instead of in the footer. Again, this will greatly aid users in navigating to their desired information.

And probably one of the most simple solutions would be to change the wording on the ticket prices page. By combining “Students (6-17)” and “College Students” to simply “Students (with valid I.D.)” the users will more easily be able to identify the admission category that reflects their reality.

###

September 6, 2022September 6, 2022

Individual Assignment #1 – Designing for Users

The Website and User

The website chosen for this assignment was Microsoft Bookings (bookings.microsoft.com), a web-based booking system built upon Microsoft Outlook and included in the Microsoft 365 program suite. It is intended to create a seamless system to allow clients and other users to quickly select appointment times based on your Microsoft Outlook availability.

The user identifies as female, aged 30-35, and regards herself as technically savvy. While she is not familiar with Microsoft Bookings she is familiar with the rest of Microsoft’s 365 suite of programs, especially programs one would use in a typical office setting. She works as a professional graphic designer, so she is familiar with concepts central to graphics and media.

The User’s Actions

I gave my user a straightforward task to create a page for people to book a 30 minute appointment with them, based on their Microsoft Outlook availability. The first observation I had was that they followed the prompts included in the onscreen splash page that guides them to create a new calendar within the program. As someone who frequently uses this webapp, and related booking software, I tend to exit out of these immediately, as the nomenclature and functionality is fairly clear to me.

Additionally, the user was confused by the layout of the main bookings page, and was unable to ascertain where to go to further create or alter the 30 minute appointment page she was tasked with creating. As an experienced user who had gone through this same process, I was aware that Microsoft Bookings refers to these different types of appointments as “services”. This disconnect between the user’s broad knowledge and the specific nomenclature of the web application was a recurring theme in our testing, and a direct result of her being a novice user of the application.

The left navigation menu for Microsoft Bookings

Expert vs. Novice User

My first observation was that although Microsoft provides new user prompts to guide them through the process, these were not clearly explained and actually led to an outcome that most people would not want. After completing the new user prompts on the page, the user wound up with a counter-intuitive booking setup with business hours that we were both unable to correct during our testing.

The prompts for a new user using Microsoft Bookings

Even after the user recreated the meeting type from scratch, and seemingly set their preferred hours, and restricted the meeting to just themselves, they were still led to create the following booking page:

A Bookings page with times that the user did *not* select.

An easy way to improve this would be to orient these new user prompts towards the goal of the user instead of the tasks to be performed. For example, instead of “discover calendars” and “create new calendar” the prompts could be to “create a shared booking page” or “create a personal booking page”. This would help clarify the steps the user is going through, as well as lead them to an outcome that the majority of users likely desire (to create a booking page for just themselves, not a team).

Additionally, some issues were simple information architecture and web design errors. An experienced user knows that these are unusual and counterintuitive, but also has learned to utilize the correct tools and links within the program. A prime example of this (and why I wanted to test this particular web application) was the use of the “copy” icon twice on the same page, with two completely different functionalities.

The ‘copy link’ button the user is likely to use.

Copying the link to a given “service” page is arguably one of the most commonly used functions of the site, and a novice user is apt to click the copy link by the meeting title. My user was incredibly frustrated that this button inexplicably opens up a create new service dialog box and doesn’t copy a link (that copy button is “copying” the settings for that service into a new service that the user is supposed to then edit and save as a new service). The copy button for the web address is located in the information about the service on the right of the page.

The ‘correct’ button to copy the page link.

A way to improve this aspect of the user experience would be to simply use a different icon for the copy button on the left, one with a “+” perhaps, and better highlight the copy link button on the right, as it is a high use item.

###