NN/g has been around since 1998 and has established itself as the go-to experts on usability and no UX designer is complete without a deep love for Jakob Nielsen and the team.
This post briefly highlights some examples of good usability principles from their own website as well as suggest some areas for potential improvement.
Dedicated home button
Not everyone is familiar with the concept of clicking the logo to return home, so they add a dedicated home link in the navigation.
Using text where icons are not clear
The website is aimed at the masses and NN/g know that not all users know what a hamburger menu is so they call out text when needed. One example is the menu where the word is clearly displayed, this ensures that no-one is left guessing how to find the navigation.
Another example is the back to top button. By simply adding the word “Top” it makes it much clearer what the button actually does.
Visual hierarchy
The navigation indents the links to that it is easy to understand the hierarchy and which pages are sub pages.
Useful information about videos
It’s useful to know how long each video is before you click on it. By displaying the time below the video the user can make an informed decision whether they have enough time to view it.
Honest unsubscription policy
The website makes it easy to know how to unsubscribe. This is positioned on the same page as the subscription form. While many other websites may want to hide this information, NNgroup show their honesty and give the user the information they are looking for.
Inform file size before download
This is a useful idea to help the user understand if downloading the file will have an impact on their mobile data.
Showing content type
The website often shows the content type before you click on a link so the user knows if they will be taken to a video or an article.
Now here are some potential usability improvements.
Activate the logo as a home button
This is an accelerator for those who know how to use it. The logo takes you to the homepage on the desktop site but on the mobile site it isn’t clickable.
Clean up line heights
The line heights in the footer buttons look too high, so the second row of text doesn’t immediately look as if it is connected to the first row.
Maintain consistency when showing more information
The first image on the left shows a short list of authors and you can click the link to see all authors. We would expect that clicking “See all authors” would only affect content below the link, however the authors above the link disappear.
Maintain consistency in form instructions
In the subscribe form, optional fields are marked with “(optional)”, whereas in the login form, the required fields are marked with a red asterisk.
Improve contrast in buttons
The gradient used in the search button means that it’s not very easy to read the text.
Make links look different to text
In the footer we have the text “Visit Don Norman’s Website www.jnd.org”. The text is all styled the same but only the link is clickable.
Consider a different style for huge pagination
Once the search results grow to many pages, the pagination looks overwhelming and misaligned. Only a few links need to be shown in mobile pagination rather than all the pages at the same time.
Ensure alignment consistency
The menu and search buttons are slightly misaligned which makes the page feel unbalanced. In the image below, the menu button is slightly higher than the search button.
Ensure the content fits the space
When the contact page loads, the content is too wide so as you scroll up and down on a mobile device it is easy to bounce around left and right.
Avoid distractions
In the example below, expanding the section actually moves the position of the title, whereas ideally only the arrow should move. The image below overlays the position of the title when the arrow is expanded and collapsed.
Resolve layout issues
There are a few layout issues in the site for example when something is added to the cart. In the image below the menu and logo are partially appearing over the top of the popup.
So there we have it, some great usability examples from NN/g and some potential usability improvements too.
Array