To help you spot usability issues a little easier, we’ve put together these examples for you to experience on your own.
You can watch the demo videos and click through to use the actual interface yourself.
Demo #1: Navigation + Search
Navigation and search are critical ways for users to find content on a website. On mobile devices, ‘less is more’ on a small screen. Menus should be self-evident, have a clear hierarchy and require minimal effort on the user. In this demo, we look at both a good and poor example for comparison.
Text transcript:
Here is an example of poor navigation. There’s no search bar at the top and neither at the bottom if you want to go to the menu, you hit the menu button and you encounter over two dozen options to you. There’s no hierarchy or sense of direction. It takes up over a third of your phone space, which means you can’t see anything else, but the menu.
Here’s an example of good navigation. You’ve got a menu bar that opens up and is easily viewable within the small screen. You can also do a search right from the header. So let’s recap, do make navigation self-evident. Remember less is more on a small screen, ensure minimal effort and scrolling to get to the information you want and include a search function.
Demo #2: Accessibility + Contrast
An accessible user experience means everyone can access the information presented on your website. Create a comfortable reading experience, by ensuring adequate contrast between elements, avoiding grey tones and using larger font sizes on mobile. In this demo, we look at the impact of contrast.
Text transcript:
Here’s an example for colour contrast. The crayon gray colour tones make it hard to see the menu content and elements on the page. You can tell the difference when you increase the contrast.
So let’s recap, when looking at accessibility and contrast, do ensure adequate contrast between elements, avoid grey on grey, and use larger font sizes on mobile, and reduce content overall.
Demo #3: Layout + Feedback
Think mobile first, when designing for a small screen. Content should be organized logically, with clear hierarchy. Providing feedback to users is important. Let your users know if they’ll be leaving your site to view resources and videos.
Text transcript:
Here’s an example of a website that has not been optimized for mobile devices. The text is very small and requires the user to pinch and zoom to see the menu items. Users should be warned if they will be asked to leave the current website to view content. For example, if I wanted to view the first testing and evaluating video and I click on the thumbnail, it opens a new window asking me to log in.
To review, use a responsive mobile friendly layout, let your users know if they’re going to be leaving your website to view videos or resources that are hosted elsewhere or require you to sign in, and don’t forget to use less text.