** This review was made on the old SSQ website, which they have updated as of June 2018. **
Introduction
This is a short evaluation of the SSQ website for desktop and mobile. The goal of this exercise is to emphasize the difficulties and obstacles to navigation for SSQ users.
This evaluation is made based on the known ergonomic analyses of Bastien and Scapin.
This method of work allows us to replace user testing in an initial phase.
Summary
We were able to isolate several pages and points which demande attention. Following our exploration of the site through 2 viewing modes, we were able to analyze certain pages and offer them to you as a first observation.
It must be noted that we always take the point of view of system users in the context of their use and of their knowledge of SSQ.
Criteria:
4.2. User Experience
Description:
The overall site is visually appealing and gives a good breath of fresh air to financial corporate sites.
Criteria:
1. Guidance, 1.2. Grouping/Distinction of Items
Description:
The 2 menues are easily identifiable. The fact of having a large distinction in font and font size between the menus is very helpful in identifying the different navigation types for the user.
Criteria:
2.1.1. Concision, 2.2. Information Density
Description:
The grouping of elements is well identified. The user feels immediately called to and can rapidly chose the path that fits their needs.
Criteria:
1.1. Prompting, 1.2.1. Grouping/Distinction by Location
Description:
The sections are clearly identifiable for the user. The graphics for the rest of the site are adequate.
Recommendation:
Less visual distinction. The blocks are already present.
Quick-Access Links: 'Actualités'
Criteria:
1.2.2. Grouping/Distinction by Format, 4.2. User Experience
Description:
Quick-access links are still below content text blocks. All the activity is between the 2 blocks of text.
Recommendation:
Move the link below the news blocks for more coherence on the welcome page.
Clickable Images: Advertisements
Criteria:
1.1. Prompting, 2.1.2. Minimal Actions, 7. Significance of Codes
Description:
These images are the same colors as SSQ, but are in fact advertisements. The images are affixed to each other with an indication that they are clickable. The user needs to ask themselves about the pertinence of this type of advertisement on the welcome page.
Recommendation:
Is it important for these images to be on the welcome page? If not, these images are not distinguishable from the rest of the welcome page. Redefine the goals of these clickable images for a better assessment.
Criteria:
1.1. Prompting, 1.2. Grouping/Distinction of Items, 1.4. Legibility, 2.2. Information Density, 3.2. User Control
Description:
Secondary carousel pages are only visited by 1% of users (source).
The fact that it's swift and always in movement weighs down the cognitive charge. Being able to pause the carousel is always a good initiative.
Recommendation:
We are aware that the carousel often responds to a communication and strategy challenge for the company.
In an ideal world, it would be preferable to create another method of presenting this information on the welcome page.
Design and Presentation of Elements
Criteria:
1.4. Legibility, 4.2. User Experience, 6. Consistency
Description:
The Sign-In box lacks coherence in relation to similar page elements from other pages on the site.
The text "ACCÈS | administrateurs" is on two lines. Furthermore, this information is already found on top next to the navigation menu.
Recommendation:
Improve the display of textual elements or remove repetitive information.
Criteria:
1.4. Legibility, 4.2. User Experience, 8. Compatibility
Description:
It's very possible that the user is unable to see the subtle green degradations on their computer screen.
Are these color choices compliant with accessibility standards?
Recommendation:
Make sure that the colors are in alignment with the Ontarian and SGQRI 008-01 accessibility standards.
Criteria:
6. Consistency
Description:
The user has just left the SSQ site without being made aware. The design as well as the URL are different.
Recommendation:
Make sure the user is in a common environment at all times. Adjust the header and footer to create more coherence.
Criteria:
1.4. Legibility, 3.2. User Control, 4.2. User Experience
Description:
This link should not be an image - the quality is lower than normal text hyperlinks.
Recommendation:
For coherence, it would be better to use a text link. Furthermore, it is easier to change the content of a text link should need be and is more compatible with accessibility systems.
Criteria:
1.4. Legibility, 2.1. Brevity, 2.2. Information Density, 4.2. User Experience
Description:
The text is too small for newer screen sizes and their resolutions. The user is more likely to make mistakes with this small of a font.
Recommendation:
Increase the text box sizes, the font, the buttons, and all other textual elements on the page.
Criteria:
6. Consistency, 7. Significance of Codes
Description:
The user is not familiar with this type of code. They won't understand it and, if they see it, it could stop the flow of the visit/experience.
Recommendation:
Hide the code if it's only for internal use.
Criteria:
1.3. Immediate Feedback, 2.1.2. Minimal Actions, 3.2. User Control, 6. Consistency
Description:
When the user clicks on this image, they leave the SSQ site entirely. SSQ loses the user since they go to the site for Québec City.
Recommendation:
Open the Québec City site in a new tab to avoid disturbing the user experience on the SSQ site.
Criteria:
1.3. Immediate Feedback, 2.1.1. Concision, 2.1.2. Minimal Actions, 2.2. Information Density
Description:
The user does not have enough information to let them know if, when they click, they will find an explanation.
At this stage of navigation, the user wants to be more informed on these programs and services proposed on the page.
Recommendation:
There are several solutions to clarify this:
- Put block buttons one above the other with a brief explanatory text to the side.
- Or: add key works to direct the user's choices.
- Or: Emphasize a clickable area
Criteria:
1.4. Legibility, 2.2. Information Density, 4.1. Flexibility
Description:
The images that announce content on the mobile platform are interesting, but makeup too much screen space (tested on the iPhone 5s).
You need to click on the carousel buttons to see more information. The carousel buttons are too small to be clickable without clicking on the incorrect one by accident.
Recommendation:
Make the images smaller.
If SSQ wants to keep the carousel images on mobile, change the navigation so the user can scroll to the following image rather than having to use the carousel buttons.
Criteria:
1.1. Prompting, 1.2.2. Grouping/Distinction by Format, 3.1. Explicit User Action, 6. Consistency
Description:
The user has navigation choices and can access other pages. The graphic design is not coherent in relation to the other buttons or links.
Recommendation:
Use text hyperlinks in the same graphic style as the other links.
Lower the visual load on mobile from these large blocks.
Prioritize the most important content for mobile.
Criteria:
1.1. Prompting, 3.2. User Control
Description:
The search bar at the bottom, just before the promotional images. The user she be able to use this feature higher up on the page.
Recommendation:
Show the search bar higher up on the page so that the user can search for things more quickly.
Criteria:
2. Workload, 2.2. Information Density, 4.2. User Experience
Description:
The footer is too large.
Recommendation:
Prioritize the footer content for mobile based on what the mobile user needs. The footer alone takes up nearly the entire screen height on a smart phone screen.
Criteria:
1.3. Immediate Feedback, 5.1. Error Protection
Description:
The user feels assisted in this user navigation context.
Criteria:
1.3. Immediate Feedback, 3.2. User Control
Description:
The user knows exactly where they are and where clicking the arrow will take them. The icon is clear and the navigation goals are clear.
Criteria:
3.2. User Control, 4.2. User Experience, 6. Consistency
Description:
When the user clicks on the 'Assurance' menu, they leave the SSQ site. A new window opens. They have no control over this.
Recommendation:
Ideally, as this information is still housed in the SSQ site, navigation would remain consistent and the user would stay on the same page without being brought to a new window.
Criteria:
2.1.2. Minimal Actions, 2.2. Information Density
Description:
The mobile user will want to have this information, but without having to fill out a form on their phone (and especially not via a downloaded PDF). Sauf si cet utilisateur est vraiment très mal pris.
Furthermore, the PDFs are large files and the bandwidth in Canada is costly on mobile.
Recommendation:
Show the user the information directly on mobile so they can inform themselves.
Do not sure the list of PDFs. Allow the user to send an email link to themselves in order to complete the form with a computer.
Criteria:
4.2. User Experience, 8. Compatibility
Description:
This license does not have public access, which means that the information is encrypted. Using MD5 for authentification is problematic since MD5 has several known weaknesses.
Recommendation:
Get a security certificate for the entire site.
Be certain that site performance for public computers is not affected during navigation.
Conclusion
After this quick evaluation, we've noted that the SSQ website is visually harmonious and consistent. The learning curve is not too high for new users or occasional users.
The attention required by users is not too much, neither is the concentration capacity, since the site is static and easy to consult. The major issue on the welcome page was the carousel and the amount of promotional images. The structure is overall simple and relatively fluide in comparison with other sites.
The critical points are not in urgent need of fixing, but do require more attention during the next improvement phase of next site evolution.