UX Assessment of Mayo Clinic’s Website

Part 1: Analyzing Interface

Section A: User Interactions & Observations

In this section I describe the user interaction function(s) of the element(s) identified as most important of frequently used.

Search Bar

The Search Bar is the most frequently used element of this site based on my observations. Though it was not the most successful most users attempted to retrieve their information via this element before going anywhere else. The user interacts with this element by typing in their query and then hitting enter either on the keyboard or clicking the hourglass to the right of the bar.

Patient Care & health Info Menu

The Patient care and Health info menu is the second most frequently visited menu. This menu is accessed so that users may browse the various options within the menu. The menu button is also individually selectable offering a link to an overview page. Users will visit this tab to find more information about symptoms, procedures, tests, drugs, and other related items. In relation to accessibly, that the element is clickable is a good plus for those using hands-free interfaces. This allows them to click an element without having to move down the sub-menu.

Symptoms A-Z Link

This element exists within the sub-menu. Its location as second in the list works well. It’s design as a blue hyperlink that underlines when hovered over adheres to current web standards and allows for recognition. That it is nested decreases its visibility however. This link may not be the most important feature the site wishes to showcase to visitors but in our case study it was one of the most used elements on the page. The choice of presenting this element in the way it was is acceptable however the text is small and may be hard for those who have vision issues to see. Screen readers will have trouble accessing this element as it is nested in a sub menu and is not immediately clickable via the tab key or by mouse-less browsing of the site.

Diseases A-Z Link

This element exists within the sub-menu. Its location as third in the list is acceptable as it is not as frequently selected by the user as the symptoms link. It’s design as a blue hyperlink that underlines when hovered over adheres to current web standards and allows for recognition. That it is nested decreases its visibility however. This link may not be the most important feature the site wishes to showcase. The link is useful however and is still a good heading for the content it links to. The choice of presenting this element in the way it was is acceptable however the text is small and may be hard for those who have vision issues to see. Screen readers will have trouble accessing this element as it is nested in a sub menu and is not immediately clickable via the tab key or by mouse-less browsing of the site.

Products & Services Menu

The Patient care and Health info menu is the second most frequently visited menu. This menu is accessed so that users may browse the various options within the menu. The menu button is also individually selectable offering a link to an overview page. Users will visit this tab to find more information about symptoms, procedures, tests, drugs, and other related items. In relation to accessibly, that the element is clickable is a good plus for those using hands-free interfaces. This allows them to click an element without having to move down the sub-menu. Section c


Section B: Evaluation of Choices

In this section I evaluate the appropriateness of the design choices made.

Evaluation Criteria

The criteria by which I assessed the following elements are grounded in Jakob Nielsen’s 10 usability heuristics for user interface design. These criteria are grounded in human sensory capabilities by their inclusion of review based on aesthetics. Aesthetics appeals to all the senses and though websites are primarily visual metaphors that match between the system and real world can trigger certain sensations. Observing the guidelines posited by Jakob Nielsen permits us to appeal to the senses. These criteria are grounded in user’s perceptual capabilities by their inclusion of visibility, consistency, and error recognition focuses. These guidelines focus on allowing users to easily perceive and understand the site. Adhering to these guidelines will ensure that this review takes into account the user’s perceptual capabilities. These criteria are grounded in cognitive capabilities by their inclusion of a key concept of recognition rather than recall. This approach allows for users to think less and do more. In adhering to this design guideline we ensure that we take into account user’s cognitive capabilities in our review of the site. These criteria are grounded in motor capabilities by their inclusion of user control and freedom. Allowing users to interact with the site in an efficient way. This means fewer clicks and easier navigation. In assessing the site based on this concept we will account for user’s motor capabilities.

Search Bar

The search bar fills the role of textually search by query well. Not only is this consistent with standards it also is easily seen at the top of the page. Both of these factors allow it to appeal to recognition rather than recall and permit for a good user experience. The addition of filler text that explain what the search bar does is good for the site as well. Given the simplicity of this element it avoids errors by limiting user input. The return to the home page when searching without terms doesn’t offer feedback however and this could be improved. As this element relates to accessibility its size might be an issue but overall the search bar fills its role in the interface well.

Patient Care & health Info Menu

The Patient care and Health info menu permits for a cleaner landing page by nesting related items within the menu structure. The small downward arrow is recognized as a symbol for more underneath the heading. This is standard and signifies the functionality of the element as a heading. The element is not obviously clickable however but the content below responds to hovering the mouse and the addition of the picture within the menu adds a nice touch for recall and memorability. The image in the menu being a child and adult smiling also means the user will linger more in this menu and might recognize something. The location of the menu item as first on the left of the screen means it will likely be read first and clicked first as well. Keeping frequently accessed links here is a good choice. There is error prevention present in this element as the menu limits the user’s interactions so that they cannot trigger errors easily. This kind of nested menu is also a web standard in modern sites.

Symptoms A-Z Link

This element was observed as another frequently used element in relation to my observations with users. Users will visit this element so that they can access more information on the symptoms they may be feeling so as to find information about what might be causing them.

Diseases A-Z Link

The diseases link was not observed to have been used frequently however, it is an important element and is likely accessed for similar reasons to the symptoms a-z link. This element’s linked page offers a link to the symptoms checker function of the site as well thus illustrating the relation between the two pages. Users will select this menu item when they know what might be causing the symptoms but want to check and make sure it is what they think it is.

Products & Services Menu

The products & services menu showcases services that the organization offers. I am not certain but I feel the organization profits from these services. The location of this menu to right of the screen doesn’t distract the user and thus creates a feeling that this site is not meant to sell you anything. This is a good idea for a non-profit as it develops trust and limits the feelings of users that they are being advertised to. The elements structure is standard and consistent with the current state of the web and its click-ability allows for accessibility via screen readers. That it is the only tab that lacks a picture allows for recall and memorability as it seems to be an outlier. This however also means that users will likely linger less in this menu than the others on the site. A positive note is that the small downward arrow to the right of the text is easily recognized as a symbol for more underneath the heading and allows users to easily understand the functionality of this element.


Section C: Alternative Approaches

Here I identify a different way that this interaction function could have been designed and explain why this alternative would be better or worse than the interaction function chosen by the original designer.

Search Bar

The search bar’s location could be larger and located in the center of the screen much like google. This however would be a worse design than the current one in that the search function of the site is sub-par. Keeping the bar highly visible but away from the carousel and other more visual elements serves to illustrate it as a utility or functional element of the site and not as the primary feature of the site. An alternative way the search bar could have functioned might have been to have not have included the highlight effect when it is selected. This would have been a poor choice however and would have led to users typing in something and it not actually being input into the search. Ultimately this element does its job well and is well positioned given the sites overall goals.

Patient Care & health Info Menu

The patient care & Health info menu could be nested in a hamburger menu. This trend is present in more contemporary sites and allows for an exceptionally clean landing page. Though this may have permitted for more real estate on the landing page this trend is less common for desktop sites than the standard menu and given the perspective users of the site being older rather than younger the application of this method might have created confusion for users. One thing that could be improved in this element is the wording. It would be more helpful for the title of the menu to be “patient care & symptoms/conditions” This would more clearly tell users who come to the site to diagnose themselves where to look. As it stands now the title of the menu is overly vague.

Symptoms A-Z Link

This element is very simple and is nested inside the menu. An alternative to its present location could have been to have placed it directly on the menu as its own heading. This however would have cluttered the landing page and due to the fact that this is a specific link might mean that there would be no sub headings to place below it when hovered over. The location of it presently works well for the aesthetic of the site and plainly shows its functionality.

Diseases A-Z Link

The diseases link could have been structured with an icon next to it. This however would likely mean that each link is larger and accompanied by an icon. I would recommend against this as it would clutter the menu and may cause confusion as icons are frequently vague.

Products & Services Menu

The products & services menu could have featured an image alongside it similar to the other menu items found in the menu. This would have drawn more attention to the menu and likely increased the amount of attention given to this menu. Adding an image might have been awkward given the amount of links nested under this menu. Still, the education menu item has a picture and the same if not more items under the sub menu. Ultimately adding a picture here would be consistent with the site and increase the effectiveness of this menu item.


Part 2: Proposals for a re-design of the website homepage

In the following sections I focus more broadly on the website as a whole and offer a few design revisions that I see as important.

Symptom Pages

Changes Made to Symptoms Pages

Requiring users to load multiple pages within content leads to more page views and less information overload but is ultimately less efficient for browsing and searching for specific information. I would recommend putting all of the information on a singular page and to divide that information up using cards. The installation of a floating “FAB” element so that users can easily return to the top of the page would be a nice addition as well. During our observations users would often back out of a topic if the initial page doesn’t give them the answer, even if the information is a few more clicks through the content. Being able to view all the content at once would certainly improve the time it takes for users to find the correct content. This solution doesn’t alter the content of the site in any sizable form. It simply eliminates the need for paging through several different iterations of the information. In theory, this allows for more ad views but the same number of adds can be placed along the side of the content as the page is significantly longer.

Search Results Page

Changes Made to Search Results Page

Moving some of the adds to the right hand side and positioning them under the “Narrow Your Search” box permits for each snippet to be more visible and not awkwardly condensed. This also creates a more standardized browsing experience and is easier to make responsive later. There is still room on the right for taller or narrower ads as well. The tradeoff for this design is that the “Narrow Your Search” box will not be associated with advertising and will be less likely to be used. A bonus however is that by placing your ads on the right of the screen they may get even more views and as a result more clicks boosting the ad revenue. This might not be a huge boost but when coupled with more readable and user friendly snippets should improve the overall user experience in relation to the search results page.

Landing Page Menu

*This image shows the view of a user who has already scrolled down the page a little bit.

Changes Made to Landing Page Menu

The landing page’s menu is a useful tool that should travel with the user down the page. A good example of a site that does this is the IAH’s website (http://iah.unc.edu/). Having the menu move with the users down the page benefits the users in that they maintain access to the menus functionality while they continue to explore the site. The tradeoff for this decision is that it takes more screen space and decreases the likelihood users will return to the top of the page. The screen space it takes up is countered by decreasing the size of the header to only include the menu bar. Allowing the user to navigate without having to remember that there is a menu bar at the top with options that might interest them allows for the users to not think as much when browsing the page. This is a common desire of most users when interfacing with a webpage or application. Having the menu bar travel with the user will undoubtedly increase the user’s experience with the site and the overall functionality of the site as well.

END REPORT

Disclaimer

This is a blog. That fact means nothing.

It is not a peer-reviewed journal, a final archive of my writing, a sponsored publication, or the product of gatekeeping and editing. That does mean something…it means that while the ideas and thoughts are often vital and the product of a long gestational period, the writing itself is not. It is essentially as it came from the keyboard: spontaneous, unproofed, unrevised, and corrected afterward only when necessary to address mistakes that grossly effect the intent. Where such changes have been made they are explicitly noted.

It would be distinctly unwise — not to mention uncharitable — to play connect-the-dots with my physical life and work and my “life of the mind,” as scanty as either might be. My attitude at work, my reaction to ideas, your grade (good or bad), the length and tone of my discussion at the coffee pot, the time it took for me to return your letter or email, and the quality and quantity of my response to you in any medium are probably not tied to anything you read here… at least not in a way that you will be able to confidently assume without sharing years of psychotherapy and the bills that come with it.

Show your support

Clapping shows how much you appreciated Connor Esterwood’s story.