Heuristic Evaluation 1
Usability Problem Defined:
The links in the navigation bar do not change color upon hover.
Usability Problem Explained:
While having the cursor change to a hover state indicates something is a
link, another well-known indication is having the element change slightly.
For navigation bars, this is generally done by having the background or
the font color change. However, for US Quadball's navigation, the
background and font colors stay the same, whether hovering over the links
or not. This affects the user experience since no visual feedback is
provided when the user hovers over the link. Additionally, most of the
other links on this website change on hover, so not having a consistent
theme involving links and how they react to a user could confuse and
frustrate users. Thus, the website should decide whether to change the
background or color of a link on hover and then remain consistent
throughout the site anytime a link is involved.
Recommendations for Improvement:
Make the links in the navigation bar change color when the user hovers
over the link. Also, make the current page have a specific color on the
navigation bar to tell the user where they are on the website.
Heuristic(s) Violated:
#1: Visibility of system status
#4: Consistency and standards
Severity Level:
2 = Minor usability problem
Heuristic Evaluation 3
Usability Problem Defined:
There is hard-to-read text over each page's images at the beginning of each page's body.
Usability Problem Explained:
By having white text with no shadowing or other text decoration, it
can be pretty hard to read if it lies over a complicated background.
This is especially difficult for users who have eyesight issues. On
the US Quadball website, at the beginning of a majority of its page
bodies, there is an image with white text over it. Many of the images
have white in them, frequently causing the white text to easily blend
into the background, making it take much longer than expected for a
user to comprehend what is fully being displayed. A user should not
have to wonder what is trying to be said; the image and text must
contrast one another. However, if the website cannot do such a thing,
it should go a different route and remove the text and image
altogether. However, the best solution would be to decorate the text
to make it stand out more than its background.
Recommendations for Improvement:
Change the font size, font, font color, and background image for better readability.
Heuristic(s) Violated:
#1: Visibility of system status
#8: Aesthetic and minimalist design
Severity Level:
3 = Major usability problem
Heuristic Evaluation 5
Usability Problem Defined:
On the 'Sponsors' page, the div containing the sponsors is wider than any other div on the page's body, making the page look disorderly.
Usability Problem Explained:
Throughout the US Quadball site, all elements on a page align. This makes it very helpful when using mobile devices,
as fewer elements must be adjusted when making the page responsive since they are already inline. On the 'Sponsors' page is a list of
US Quadball's sponsors, along with their logos, and below that is a body of text. However, the width of the sponsors' elements exceeds the width
of the text body, making for an unappealing layout. The best solution would be to add a maximum width of this particular div to match
the text body's width below it. An alternative strategy would be to resize the logos to fit more comfortably within the page's grid, potentially
arranging them in a single row. This adjustment would create a more streamlined layout and afford each sponsor equal prominence
within the design, further contributing to the site's professional and considerate presentation.
Recommendations for Improvement:
Fix the div container's padding and margins so the images align with the rest of the page.
Heuristic(s) Violated:
#4: Consistency and standards
#8: Aesthetic and minimalist design
Severity Level:
2 = Minor usability problem
Heuristic Evaluation 7
Usability Problem Defined:
When looking at a particular event on the 'Events' page, there are two links to an 'Earlier Event' and an 'Later Event.' A button with an arrow
would make it much easier to understand what the page links to: the earlier or later events.
Usability Problem Explained:
While hyperlinks are very useful in bodies of text, they make the page disorderly and unappealing when they are all alone. For this particular
'Events' page, for example, the hyperlinks in their current form blend in too seamlessly with the body text, resulting in a
missed opportunity for straightforward navigation. They need the visual cues that signify their functionality, leading them to often go unnoticed
and unutilized by users. The best way to get users' attention would be to transform these hyperlinks into buttons. This change would
increase the discoverability of these links and minimize the need for users to navigate back to the central 'Events' page to continue their
journey. Adding such button-style hyperlinks would create a more intuitive and visually structured layout, promoting a more engaging and
user-friendly experience on the 'Events' page.
Recommendations for Improvement:
Add buttons on the left and right side of each event; the left
button goes to the event after this event, and the right one goes
to the event that happened before the current event.
Heuristic(s) Violated:
#1: Visibility of system status
#2: Match between system and the real world
#3: User control and freedom
#4: Consistency and standards
#6: Recognition rather than recall
#8: Aesthetic and minimalist design
Severity Level:
3 = Major usability problem
Heuristic Evaluation 9
Usability Problem Defined:
The contact form on the 'Contact' page allows invalid emails to be submitted.
Usability Problem Explained:
Contact forms need to validate the information that users are filling in, ensuring that all data entered meets the required
format and content standards. Suppose a situation arises where invalid or improperly formatted information is submitted through these forms. In that
case, it can easily lead to confusion and misunderstandings among the individuals tasked with receiving and processing these submissions. They may
need help comprehending the requests or queries posed by the user who completed the form due to the ambiguity of the information provided. In the
worst-case scenario, the absence of proper validation measures opens the door for individuals to deliberately spam the contact form with an avalanche
of useless, irrelevant, or even gibberish information, which can not only frustrate the recipients but also clog up the system potentially leading to
an overwhelming and chaotic pile-up of responses that hinders effective communication and timely response to legitimate inquiries.
Recommendations for Improvement:
Make the contact form validate the information the user gave before submitting.
Heuristic(s) Violated:
#5: Error Prevention
#6: Recognition rather than recall
#9: Help users recognize, diagnose, and recover from errors
#10: Help and documentation
Severity Level:
4 = Usability catastrophe