Problem statement: Aptic
The task was to evaluate Aptic's website, focusing on the Swedish homepage (https://www.aptic.net/sv/). The company sought assistance in determining the impression the page gave and whether it enticed further reading. The evaluation was also conducted from an accessibility perspective to include more types of visitors to the Aptic website.
Duration: 10 weeks
Approach: Heuristic evaluation using Nielsen's heuristics, perspective-based review, interviews, as well as color and contrast measurements.
Deliverables: Results and analysis of evaluations, a prioritized list of issues, and improvement proposals including a prototype.
Heuristic evaluation
A heuristic evaluation using Nielsen's 10 heuristics was used as a basis to identify usability problems on a broad level.
Results:
The evaluation showed that the homepage contains an excessive amount of text at times, which can overwhelm a visitor. Despite the amount of text, it was difficult to determine which of Aptic's solutions are suitable for the different industries that Aptic caters to. There were also some inconsistencies in the language used. For example, what is called "branscher" (industries) in the menu is called "industrier" on the homepage, and the different solutions and industries are sometimes written in Swedish and sometimes in English.
Regarding the visual design, problems were found with the information hierarchy, as many different text sizes were used.
Perspective-based review
As a complement to the broader heuristic review, a perspective-based inspection was conducted to evaluate the product from different predetermined perspectives. The perspectives focused on were ADHD and various visual impairments.
ADHD perspective
The main problem found from the ADHD perspective was the large amount of text on the homepage that was overwhelming. The text size was also too small in many places, making it difficult to read. The combination of text quantity, text size, and advanced vocabulary made the text difficult to comprehend. Something that can affect people with ADHD is that the page had many moving elements, such as a video header, text intonations, and hover effects on some buttons. The video in the header was constantly moving and could not be paused, which should be possible according to the WCAG criterion 2.2.2. During rapid scrolling through the page, the amount of movement can exacerbate the experience for a visitor who has difficulty with too much cognitive load.
Visual impairment perspective
Contrasts and color schemes can be an important aid for visually impaired users, but they can also lead to problems if not used correctly. An overall problem identified in this perspective was that much of the text on the homepage was difficult to read. This is partly because text sizes were often too small, but also because the fonts were sometimes unsuitable for people with visual impairments as they were too compact, making the letters harder to distinguish.
Interviews
Two interviews were conducted with participants who have an economics background. The aim was to gather their opinions and impressions of Aptics' website by asking them to think aloud about what they saw and how they interpreted the information on the website. Industry-specific terms were also clarified to determine whether the participants were familiar with them and their meanings.
Results
The results showed that both interviewees had similar first impressions of Aptics' website. They both perceived the site as modern in its expression and appreciated the animated design, with one participant expressing that other finance-related websites seemed a bit "stiff." However, both interviewees expressed confusion about the information content on the homepage. One participant stated that it was not clear enough how the solutions relate to each other, or what advantages Aptics' solutions have compared to other companies offering similar products. The other participant expressed that the whole site had too much information and expected to find more information when clicking through the site but not directly on the homepage.
As a conclusion, one of the participants stated that the information on the site was sometimes redundant and yet not clear enough.
“I shouldn’t have to wear glasses when I sit in front of a screen, but I probably have to put them on, I see.”
Color and contrast measurement
To investigate how Aptics' homepage could be experienced by people with color blindness (deuteranomaly, a reduced ability to see red-green colors), the Colorblinding add-on was installed in the Chrome browser. The plug-in simulated how this type of color blindness affects the experience of Aptics' homepage in relation to the colors found on the webpage, and whether this impact would lead to any significant problems for the understanding and experience of the content.
Contrast measurements were based on the W3C's international accessibility standards on the web, WCAG 2.1. A total of three different criteria were checked for contrast: a minimum criterion for text, an expanded criterion for text, and a criterion for buttons and icons. Sample tests were then performed on different elements on the homepage.
Results
The simulation of color blindness showed no significant problems for the experience and understanding of the content on Aptics' homepage.
Several elements were identified where the contrasts between text and its background were not large enough and therefore did not meet the contrast requirements. Overall, the investigation found that a large part of Aptics' homepage did not meet WCAG's contrast requirements.
An example of measuring the contrast for green text on a purple background that was found on Aptics website.
Prioritized problems
A selection was made to prioritize the most severe problems and determine which ones would make the biggest difference for the user to address. The prioritized list was used to create guidelines for the prototype that can be used for future usability testing of the prototype or for changes directly on the website.
The headings for solutions & industries are not clear, neither visually nor in content.
The homepage is difficult to read.
- Terminology/word choice is inconsistent.
- There is too much text and information on the page.
- Text sizes are not adapted for good visibility on screen.The "Book a demo" button is not visible enough.
The menu and language options above the menu are not discernible enough.
The cognitive load on the website is considered high.
Below are the usability goals and user experience goals that have been developed in the project.
Impact goal: The user should quickly and clearly get information on the homepage about what type of company Aptic is and what services they offer.
Usability goal 1: All text on the homepage should be visually adapted for users with visual impairments.
Usability goal 2: The page's moving elements should not overload cognition.
User experience goal 1: Users should not feel confused about what type of solutions Aptic offers to its customers. The homepage should only contain necessary information to not overload the user cognitively.
User experience goal 2: The homepage should be perceived as easy to navigate.
Suggestions for improvement
After sketching and iterations, a mid-fi prototype was created in grayscale in Figma based on the list of prioritized problems and goals that were set. The focus was on the design and adaptation of various elements according to different guidelines, and therefore, the prototype was created in grayscale to avoid the risk of the focus being on, for example, color choices.
In the first section, a pause button has been added to give visitors the option to pause the video header. The language selection has been moved to the same line as the rest of the menu options and is indicated by a globe icon. A navigation aid has been added to the right to indicate the visitor's position on the page. At the bottom, a navigation arrow indicates that more information is available and can be used to move down to the next section of the website.
In the second section, Aptic's solutions are displayed. Here, the amount of information has been reduced and the information hierarchy has been made clearer.
In the third section, the industries that the company targets are displayed. Here as well, the amount of information has been reduced and the information hierarchy has been made clearer.
In the fourth section, two elements have been added. One provides clarification on Aptics offerings and the other presents the company in more detail. Both of these elements were something that the interview participants requested.
In the last section, the visual clarity of the information has been improved by placing the background image to the left within the frame of the subtle zigzag pattern that is present throughout the prototype. By not having a full background image with text on top, the cognitive load is reduced and the message that one wants to convey becomes clear and distinct.