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:

• Customizing the style of your navigation can dramatically make your website more user-friendly. 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:

• https://katieconacherphotography.wordpress.com
• https://ciaerialstudios.wordpress.com/