Assignment 3F

Usability Analysis

Team 404 looked over every member's redesign and consolidated them all in this final piece, it also took into account the redesign suggestions from peers. With this in mind, we highlighted all the issues and the changes that were made in order to provide solutions.

The usability issues can all be viewed in further detail on the slideshow labeled under 3C.

Prioritization of issues

We prioritized our issues with a number ranking system. We focused on eight major issues which were the following: color scheme and contrast, make text links more identifiable, make search bar more prominent, make language more inclusive towards the general public, create a menu button for the mobile interface, create a timeline under archive, add a sub-menu for FAQ page, and reformat the events calendar. Team 404's redesigns were based primarily on these usability problems.

Below readers will find summaries of some of the pros and cons of our redesign suggestions.

Solution Documentation- Pro/con analysis

Issue 1. Color scheme

Solution: Light grey background, black text, and red highlight

Why: The black background of the original website is reported to be "scary" by some users. When red is used for highlighted text, the original website fails to use a color combination that creates good contrasts(low color contrast score). To tackle this problem, our team came up with different redesign ideas: grey background, black text with the red highlight; white background, black content with red titles; light green-toned background and green text. After receiving suggestions from classmates, we chose to use the first redesign. Because it greatly preserves the color selection of the original website and is most aesthetically appealing.

Pros: The combination of light background and black text creates a good color contrast so the website can be more perceptible. The original highlight color was black so when a title/button is highlighted, it just disappeared in the black background. Changing it to red reduces the confusion users may have and preserves the old color selection.

Cons: Some classmates pointed out that having a black background can create a feeling of "Dungeon" since it is a game-related website. Replacing it with a lighter color can hurt the "Dungeon" feeling.

Relation to Readings: According to the WebAIM Checklist, "Text and images of text have a contrast ratio of at least 4.5:1." The grey text only has a ratio of 4.49 with the black background, lower than the required ratio. The score for the red highlight is even worse.

Issue 2. Links more identifiable

Solution: Add underline for each link text and remove [...] at the end of the text

Why: Some clickable links, such as the title of the news/article, disappear when users move the pointer on them and this is very confusing. Also, the links are not shown clickable until users point on them and the [...] in the preview of an article does not make sense. Therefore, in addition to change the color scheme, we decided to add underline for each link text and remove the [...] in preview.

Pros: By changing the color scheme and adding the underline, the "disappear" problem is solved and the links are more identifiable. And removing the [...] helps prevent users' confusion.

Cons: Since we only add the underline for the links and don't highlight them in colors or make them bold, the links are probably not completely identifiable, especially for people who are color-blind.

Relation to Readings: One of the first principles that Johnson mentioned in his book GUI Bloopers 2.0: Common User Interface Design Do's and Don'ts is "don't give users extra problems"(Johnson, 2008). The users of the Gopher Mafia Games website are mostly game lovers and customers of the store, they want to use the website to know more about the games and the store. Therefore, the goal of the website is to meet their needs without causing much confusion like disappearing links and meaningless text.

Issue 3. Search bar more prominent

Solution: Add text entry bar next to the search icon

Why: The search icon is not very easily noticeable, primarily because the actual search bar is not apparent until the icon is clicked which is kind of unnecessary.

Pros: By adding a text entry bar, the search function is now more noticeable, and it is easier and more efficient for users to search for information.

Cons: Users may not feel used to the change because the search icon was originally located on the navigation bar while it is on the top of the homepage now. Also, adding the text entry bar may take up some space.

Relation to Readings: High efficiency is achieved when the users reach their goals while expending as few resources as possible. In Heuristic Analysis, flexibility and efficiency of use are about giving users ways to speed up their work with more efficiency and flexibility. Adding the text entry bar next to the search icon gives users easy access to the search function and save their time.

Issue 4. Inclusive language

Solution: Gamer's glossary

Why: In order to create a more inclusive website while still meeting the needs of the regular users (gamers) a glossary tab was created that features acronyms and their full definitions. Based on much critique and feedback from peers, we concluded this feature would outweigh the negatives as it gave the site a much more inclusive feeling to non-gamers. There was much back and forth and a few more designs from other group members, but it became apparent that keeping the glossary was a positive and not a detriment as some of our peers had expressed concern about.

Pros: This glossary tab contains a search bar to search for acronyms, along with a dropdown menu that also contains options of various acronyms, terms, and definitions. This makes the site more inviting and less confusing for those who are unfamiliar. It also creates more accessibility.

Cons: The traditional gamers might be turned off by this feature as it may take away from the very gamer influenced identity it has within the gaming community. This feature could make it less exclusive for the hardcore card game enthusiasts.

Relation to Readings: As conveyed in our class readings, users will not return to a specific site if they are unfamiliar or confused by some of the wording or content. Therefore, it is important to always prioritize inclusivity by using more general terminology.

Issue 5. Mobile button

Solution: Hamburger menu button

Why: In order to allow ease of navigation and search for the mobile users we believe that both a menu button and a search option are important features. We suggest sizing and locating the hamburger menu in a way that makes it easy to locate quickly. We also suggest including a search option within the menu dropdown to allow users to search the site from a mobile device as well.

Pros: The benefit of this design choice is an easily identifiable button located prominently which facilitates site navigation. Users who may be on the go and using a mobile device to access the website are likely also to know what they are looking for already on the site and wish to simply search for it by name to avoid navigating through multiple screens.

Cons: On mobile devices screen real estate is premium and a balance must be struck between the amount of information shared on the screen and the perceptibility of that information. By increasing the size and prominence of the menu button we make less screen space available for other information.

Relation to Readings: We chose to maintain the menu hamburger button as well as put a search function within the menu list out of consideration of Jeff Johnson's principle of progressive disclosure. This principle of hiding information details or levels of complexity until the user needs it is appropriate especially for mobile interfaces. Not only does the screen size increase the risk of creating clutter on mobile devices, but mobile users are often multitasking already and predisposed to have a low tolerance for features that increase the cognitive load.

Issue 6. Timeline under Archive

Solution: Card-layout Archive page

Why: The Archive page of the old website contains no direct information about posting date. If users do not know about the posting date, they can be confused by outdated information. Especially for the Gopher Mafia website, most posts under Archive are about new products available in store. If users think a specific post is recent and visit the store, they will be disappointed by the fact that the product they are looking for is already out-of-stock. Redesigns include adding dates next to titles of posts and adopting a card-layout organization. Since most posts have at least one picture, we decided to use the card-layout solution. Having a picture accompanied with post titles can help users quickly have a sense of what the post is about. In addition, this solution was most liked by our classmates.

Pros: Displaying pictures can make the page more appealing and offer more information without requiring users to go into each post. Also, post date will be added under titles of posts to reduce confusion users might have.

Cons: Compared with the old design, inserting pictures can take up more space so that fewer posts can be displayed on a page. This layout also requires the website manager to insert a picture for every post when uploading.

Issue 7. Sub-menu under FAQ

Solution: keep 3 tabs(Store policies, How to, Events) + add a "Popular" tab

Why: Given the anticipated high frequency of use of the FAQ section of this website, we found it prudent to recommend an improvement to the navigation of information found within the FAQ pages. First, we pair down the sub-menu by removing the "play space" and "magic the gathering" menu options. These two menu options create unnecessary cognitive load by requiring a user to interpret the meaning of these two options. Alternatively, the remaining three sub-menu options, "Store Policies," "Events," and "How To" are sufficiently clear. In recognition that this site will have a significant number of repeat visitors we chose to add an additional sub-menu item called "Popular." This menu option would make use of analytics to filter the FAQ posts by showing those most frequently accessed by users. This facet offers usefulness to new and returning users.

Pros: Reducing ambiguity and the resulting cognitive load created by menu options that are unclear as to what sort of information waits on the other side of the link is a positive outcome of the recommended redesign. The addition of the "Popular" menu option would save users time by making browsing the FAQ more efficient.

Cons: We recognize a potential drawback created by removing the "Magic The Gathering" menu option. It is apparent from our review of the site that this particular game title is among the most popular games played by patrons of the store. However, it is not the only highly popular game title and an additional rationale for removing it from the sub-menu options is related to an interest to avoid bias toward a particular game title which could be interpreted as endorsing a specific brand.

An additional potential drawback exists in the decision to maintain a sub-menu at all instead of replacing it with a search function. As this site grows browsing the FAQ may become inefficient for users who could waste a significant amount of time clicking and scrolling in order to find information on a subject they are interested in.

Relation to the Readings: The choices made regarding the creation of menu options and the grouping of related information found in an FAQ demand insight and considerations in the realm of information architecture. In the Complete Beginner's Guide to Information Architecture three issues, cognitive load, mental models, and decision making are among the most valued by information architects. With more time on this project, we would apply methods such as an analysis of the labeling rubric and taxonomies inherent in this site followed by a card sorting test with potential users in order to make more targeted recommendations for redesign based on information organization strategies that are most relevant to the vision and mission of the Gopher Mafia organization.

Issue 8. Reformat Calendar

Solution: Event Flyer type calendar

Why: It is much more easy to navigate through and it only displays events that will be occurring on that day. This makes the calendar more visible and less cluttered overall. We came to this final redesign as it was suggested by one of our peers. After much evaluation and thought, Team 404 agreed on this final redesign because based on our other member redesigns this seemed the simplest and least cluttered for site users to understand, therefore it seemed like the best fit.

Pros: It only shows specific events occurring on that same day making it easy to read and non-confusing.

Cons: Some individuals like to be able to see events far in advance or months ahead and this calendar would only display the current month.

Relation to readings: In our readings over the semester we have learned that the less clustered a site is with too much content information, the more comfortable the user is. Calendars are one of those features on sites that can become overwhelming if not visibly designed in a way that puts users at ease. When a user visits a website they usually want to complete their task without much hassle and in the easiest way possible. Including this type of flyer calendar can be helpful for that particular reason in mind.

New suggestion from comments

Accepted suggestion: Embedding a Google Map to display store location

Rationale: One reviewer recommended us to add map views on the footer and Contact Us page so that people could know the exact location of the store without googling. We definitely think this is an amazing suggestion because not every visitor of the website will have the patience to check out the address on Google Maps manually and implementing a map view would be more convenient for customers to locate the store. Additionally, a footer and Contact Us page with embedded maps will be visually rich and engage the users better.

Conclusion

Our team really enjoyed accomplishing this semester-long project step by step and reflecting on how much we have learned and improved. Starting from the usability test, we recognized the issues and gave our first redesigns after ranking and prioritizing them, then we took advice from peers and finished our final redesigns. We applied the concepts we learned during the class to our redesigns and analyzed the pros and cons of each of the changes. We now have better resolutions to the problems we were stuck on before, for example, thanks to one of our peers, we came up with a wonderful idea about reformatting the calendar. And with the help of analyzing the pros and cons, we see that there are actually weaknesses in some of the redesigns, even the ones we are very satisfied with.

In the future, our team is happy to talk with the developers of the Gopher Mafia Games website and better understand their needs if there is a chance and we would like to conduct another usability test if possible.

Billable hours

Team 404 offers its consulting services at a rate of $100 per hour. The log of hours can be seen here.