Over the course of the project, we have examined key areas when designing websites such as accessibility, consistency, usability, perceivability, learnability, predictability, feedback and the visual design.
This topical research has enabled us to not only get a greater understanding of what goes into making an effective website but also has assisted us in generating our own. Here we analyse the multiple factors that go into website design, covering in detail the main features and briefly going over the extra factors to improve your website.
So to start off, what is website accessibility? Well, accessibility focuses on how able your site is for disabled users and the ease of navigating and gaining information from the site. It is such as big part of the web as a whole as it is fundamentally designed to be used by everyone, not just a select few. As a result, developers need to make their websites accessible to all users by implementing features such as ALT Tags, Periods in abbreviations, Describe links, Clickables and Simple copy – all of which are discussed in more detail below.
Having an accessible website can bring many benefits due to the fact that it will have been designed to be used by more people. Accessible websites are generally the most used, this is because not only does it appeal to people with disabilities but it would also increase the experience of the regular user due to being easier to navigate and often more aesthetically pleasing.
Furthermore, having an accessible website would increase the traffic to your site as well as increase the number of people who will return. This occurs as when a website has good content with a good structure and well labelled links it will become more discoverable by search engines such as Google, so would instantly get clicked on more than if it didn’t have accessible features.
Below are the main features designers and developers can use to make their website more accessible:
When you hover over an image it should display a brief description of what is going on in the image, this makes it accessible for disabled users who have a screen reader and are unable to see the image.
When referring to an abbreviation, include periods such as C.I.A rather than CIA, this makes it readable for people using a screen reader.
Describing a link will make it easier for users to access it if it says where the link will be going rather than ‘click here’. Adding a contrasting colour or underline to the links will help colour blind people find the links without any issues.
Create a large clickable range for items so that it is easier for users with mobility problems.
Simple Body Copy
Break long parts of text into separate paragraphs or sections on the website, this can benefit elderly audiences or those with learning disabilities as it makes it easier to read and keep their attention.
Usability is essentially making the websites for people to use, done through user-centered design. The usability of a website has a huge impact on its effectiveness, as a website should be simple and intuitive for all users on any platform in multiple ways. This feature of website design is extremely important, because no matter how aesthetically pleasing your website looks or how much information is on it, if they can’t actually use it (such as not being able to view the information and links not working) then they simply will not stay on it and therefore find another website in which they can use. Below are some of the main features that link directly to the usability of the website.
Clarity & Navigation
Having a website that allows users to get from one page to another easily in order to find what they need in one of the main areas of usability. It is important to make sure the user is not overloaded with information and ends up forgetting what they came on for in the first place, which simply results in them not coming back.
The clarity of its design is impacted by multiple factors such as simplicity, familiarity, guidance, feedback and a good informational architecture.
Learnability is defined as the capability of a product to enable the user to learn how to use it. This feature of usability is often overlooked when designers are creating a website. This is because it is often fairly difficult to measure the potential benefits and test learnability in the short term, meaning you will need those features to be live before a clear trend is set to be able to work from.
The visual design and aesthetic look of a website is a huge impact for people deciding to use and stay on a certain website. As usability focuses on how well a user can interact with a website to gain an easy experience, the visual design of a website is what attracts sighted users to visit, stay on the website, and hopefully return.
A website should be consistent in all aspects from design to functionality. Users of a website should be able to navigate all pages of the website with the same understand they gained from the homepage. Furthermore, the theme and design should remain the same across the website to ensure users recognise recurring features such as home buttons and to ensure users relate each page to the brand of the website.
Visual hierarchy is the order in which a user processes information on a page.This is done by assigning different visual characteristics to sections of information (e.g., larger fonts for headings), a designer can influence what users will perceive as being further up in the hierarchy.
In website design, this is extremely important as it can assist users in the navigation of the website by making the links stand out from the text for example. Not only this but if all text and visuals where the same without any differentiation it would look boring and therefore users would not be interested in staying on it.
Below are examples of both good and bad visual hierarchy:
There are many characteristics of visual hierarchy that can influence what the user perceives in the website, some of which are shown in the example above:
Size: the larger the element, the more attention it will attract
Color: bright colors are more likely to draw attention over muted ones
Contrast: dramatically contrasted colors will catch the eye easily
Alignment: elements that break away from the alignment of others will attract attention
Repetition: repeating styles can give the impression that content is related
Proximity: closely placed elements will also appear related
Whitespace: more space around elements will attract the eye toward them
Texture and style: richer textures will attract more attention than flat ones