Design for Usability
Introduction
Apart from the visual appeal, you should work towards making a design that works for everyone. Be sure to consider users that may have limitations by using some of the elements on this page.
What's on this page?
Designing Across Devices
When preparing your content you'll need to take into account a variety of users, so just as your content should target your audience, so should your design. You don’t need to tailor your content to everyone in the world, think back to your target audience and take their path through, and to, your content.
You should consider:
How do users get to your content?
Will they be on the go or sitting at a desk?
Will they Google your site and end up on the front page or be led to a specific sub-page?
What will users do once on the website?
Will there be videos? Games? Other multimedia?
How will users move around your website?
Consider how the navigation will work.
Can this all be done on a variety of devices?
A laptop/desktop, tablet, mobile phone, maybe even a console browser if your specific audience might be gamers for example.
Example
Your user accesses your website with a mobile phone.
The text is large and easy to read, but specific images (e.g. an infographic) are really tiny and the user needs to zoom in and move across the infographic, unable to see the infographic as a whole.
However, if this same website was created for an assignment where your instructor will likely be accessing it from a desktop then the size won't be an issue.
Check for Responsive Design
If you’re using a template from a website like Wix or Google Sites, give it a test to make sure it works for your target audience.
If you’re designing from scratch, create some wireframes (see Design Principles) and test what might work best for various screen sizes. Try creating a “responsive” design which means that the page will automatically adjust and rearrange itself based on screen size. Test out your media on all device types.
Web Accessibility
There are multiple factors to consider for creating accessible media.
An accessible website is one that takes into account the different needs of its users and is designed in such a way to allow everyone access to its content.
Your media should consider the barriers visitors may experience. Users may be colour blind, use a screen reader, or have other access limitations. Accessible media allows a wider range of users to access your content.
Watch
Learn about web accessibility and why it's important to provide equal access to your content in this short video.
Alternative Text
If you are using images, add alternative text for viewers who may be unable to see the content.
By adding alternative text (or even a caption), users with a screen reading device will then have the content read out loud to them. Or, if the image doesn't display, your readers will still understand the context of the image. Your alternative text should communicate to users what information the image is conveying.
When writing alt text
All images important to your content should have alt text.
Decorative images are best left without alt text, (alt="")
Be descriptive and provide context, but don't make it too long
Watch
Learn about the basics of alt text and how you can craft appropriate alternative text for your images.
Subtitles, Closed Captions and Transcripts
Subtitles, sometimes called closed captions or transcripts, are very common, and a requirement, for accessible videos and even podcasts. Subtitles basically provide a text version for audio.
Most video hosting sites like YouTube, Netflix, Vimeo and more have some form of subtitles/closed captions. These allow users who can't hear the content to read it instead. This helps everyone, such as those who are hard of hearing or those who need to watch without audio.
For some users reading the content may be easier to consume, especially if the information is not in their native language.
Whatever the reason, all your videos should include a transcript.
A video with transcript in Microsoft Stream
How do I create a transcript?
YouTube and Microsoft Stream are great platforms because they can automatically create a transcript, while not perfect at capturing every single word, are very easy to edit. If you’ve created a script for your video, you’ve already got your captions ready!
You can upgrade your subtitles and make them closed captions by including descriptions for any sounds heard. This includes things like music that may be playing, an introduction tune, a door knocking sound, or other audio elements.
When thinking about a podcast or similar audio-only project, you should still supply a transcript so users can access your content.
Explore more about subtitles, closed captions and transcripts.
Colour and Contrast
Colour can be used to convey an emotion and feeling, but also to convey meaning. When it comes to accessibility you want to be careful about conveying meaning with colour. As an example, we often use red for incorrect/bad and green for correct/good, but this can pose a problem because not all users can interpret all colours.
You want to make sure any meaning conveyed through colour, has an additional means of communication.
Explore our Design Principles page to learn more about colour and contrast in your projects.
Example
On the right are two course lists for students to register with.
The first one uses only red and green to communicate if a course is available or not. The second one uses the red/green method, but includes an additional status column, that further communicates to students a course is full.
There are a multitude of ways you may consider conveying the same information.
Watch
Take the guesswork out of designing for color blindness and learn how to improve the accessibility of your websites in this tutorial.
Read more on contrast and accessibility
Contrast checkers
Descriptive Links
If you’re creating links, ensure that they describe where they're leading. If your visitor is using a screen reader it will scan a page for any links and will read aloud the link text.
Vague descriptions like click here won’t provide any context and your user won't know where the link is taking them. In contrast, bulky URLs read aloud are complicated and are hard to listen to. So are long, wordy links.
Learn more about accessibility and web design by exploring the Web Content Accessibility Standards 2.0 (WCAG 2.0) which provides full guidelines for accessible websites.
Watch
This LinkedIn Learning course discusses how to setup a website for accessibility from start to finish.
Seneca username and password required
