3.3 Website Design Interface and Patterns
Smart Interface Design
Websites should be unique, content-driven and show a clear business purpose. Coming up with a new solution for design issues can be very time consuming. Smart design patterns allow us to ask the right questions of our website layout to ensure maximum cross-cultural usability.
The guidelines below have been curated through usability sessions, design iterations and A/B testing. Before we dive into patterns, we want our website to be usable by all and that starts with adhering to website accessibility standards.
Website Accessibility Standards
An Introduction to Web Accessibility[1] outlines patterns you must implement when designing a website to make sure the site works for everyone.
Review the Tips for Getting Started[2] and pay close attention to the requirement for alternative text on media, as it is a requirement for all images that are non-decorative. A decorative image does not add value to the content and is seen more as a placeholder on the site to ensure consistent flow of the page layout.
Layout patterns
Navigation
Besides being consistently stylized across all pages on your website, your navigation should also have the following features:
- Add a “home” button/link and set the logo as a link which returns home. On the left-most side of your menu, people will usually look for a way to get back to your homepage. This link is often called “home”, is the businesses logo or the name of the business.
- Navigation items look like a button/link. All links in your navigation should look like a link rather than plain text. WordPress.com will stylize your navigation to stand-out, however, using a specific colour pallet will ensure that your navigation links/buttons have sufficient contrast and “pop” when compared to the content on the rest of the page, is a must.
- Add a hover effect. People often read the web by moving their cursor over the content. When they go to click on a navigation link with their cursor, as opposed to tapping with a finger/thumb, the link is expected to change to indicate that you will be taken to another page.
Active White Space
Are there any glaringly large empty spaces on your pages? Are any of the images touching directly next to text? If so you need to think about “white” space on your page. For example, images should usually have some margin around them to prevent text from touching the side.
Active white space is used to create eye-catching space between components on your web page to make them easy to read and aesthetically appealing.
Too much white space leaves the layout looking plain and empty. Placing a decorative image in that space may enhance the layout and a non-decorative image may add value to the content.
Form layout
Every business website should have a contact form to make it easy for individuals to contact the business.
Forms are tricky but there are a few key patterns to follow:
- For complex forms, not typically of contact forms, break down the form into tasks (i.e. name and personal details, then order of relevant information)
- Put the tasks in a sensible order and use verbs to describe them (i.e. Shipping information)
- Tell users what they need before they start (i.e. documents, time)
- Make the submit button large enough and close enough to the form that it is easy to find.
Strategy, Usability and Style
In the article How To Evaluate A Websites Design?[3], Hardingham pays particular attention to the Strategy, Usability and Style, which are relevant to knowing if your website is effective, or not.
Past Student Examples
These two websites were built by previous students in the course ABT 270 – Maintaining an Online Presence. They graciously agreed to share their exemplary work:
EXERCISE 3.4 Which of the following two items in the list below are NOT accessibility issues?
- Text is yellow on white.
- Specific HTML elements are used to semantically define content.
- Text is set to 12pt.
- Images contain header text.
- A decorative image does not have alternative text.
- W3C. (n.d.). Introduction to Web Accessibility. https://www.w3.org/WAI/fundamentals/accessibility-intro ↵
- W3C. (n.d.). Designing for Web Accessibility. https://www.w3.org/WAI/tips/designing/ ↵
- Hardingham, A. (2020 August 31). How to evaluate a websites design?. https://www.rivmedia.co.uk/how-to-evaluate-a-websites-design/8486 ↵