Guide to a Successful Website
Important things to remember when designing a modern website.
Content of the website is the most important area and must be interesting and relevant for the user. Effort must not be wasted on good design for bad content.
A website should load quickly, in as short a time as possible. Images and other elements should be compressed appropriately (jpeg, png-8, and gif files; avoid TIFF etc). This is less an issue now with widely available broadband internet but should still be a consideration. The longer a user is forced to wait, the higher the chance they will leave the page.
Do not unnecessarily split pages. Unless a new ‘chapter’ of information has been established, all that information should be available on one page for speed and ease of access.
Text Equivalents (Alt Text) should be provided for Non-Text elements (images, videos). This allows users who are visually impaired to understand these elements. This information also often helps in search engine algorithms.
Common Hardware
The site should be designed to be compatible with common hardware and software, aiming to be in the 95th percentile of commonality.
The most common desktop OS is Windows with 82.45% share, with macOS holding 12.64 of the market. However, desktops and laptops are no longer the most common means of browsing the web, with 52% of all devices being smartphones. Of these smartphones, 86% are android with 13.7% being iOS (according to.
The most common browser on Desktop is Chrome, with a huge dominance in the market of 66%. This is followed by Internet Explorer, and Mozilla’s Firefox. On mobile devices, Chrome can be seen to have a 60% share with Apple’s Safari to hold a 20% share. Mobile devices are more important in web design as they (since November 2016) are now the primary method of browsing the web. Mobile holds a 54% share.
The Home Page
Users should be able to access the homepage from any other area of the site. A good way to do this is having the site logo being ‘clickable’, however unsavvy users may not know of this convention so a button labelled home can go a long way.
The home page should be a guide to the rest of the site, allow the user to access all the major areas from here.
The home page is where first impressions are made, so this is where your site should look its best. You only get to make first impressions once.
Ensure that the purpose of the website is clear, and why it is valuable. Users will not read a lot of text to interoperate your purpose. A tagline may be necessary.
The amount of text on the homepage should be limited as people don’t use the homepage to gain information, but as navigation. They will likely ignore text on the homepage.
Because of this, the Homepage should have a different general layout to the rest of the site to differentiate it.
Page Layout
Avoid cluttered layouts. Too much information on the page will confuse the reader and they will ignore most of it.
Users anticipate where common items will appear on the screen, and so you should aim to have these items where they are expected, particularly across individual pages (see, Header)
The most important items on a page should be positioned centrally, as this is where the readers eye is most likely to fall when they open a page.
Alignment of elements on a website are incredibly important. Alignment creates consistency and order in a page. Poor alignment leads to clutter.
In a modern world, a fluid layout has become a necessity. With huge variation in screen size (from Ultra-High Res Retina Displays to smartphone screens), having a fluid layout makes your page much more accessible and comfortable for the majority.
White space in web design is hugely important. It gives the user time to digest the information they have just observed, resting their eyes. Lack of white space creates clutter. White space allows users to scan a page faster, however too much separation of information may require users to scroll unnecessarily.
Navigation
It is essential that the user can then get to their destination and achieve their goal as quickly and efficiently as possible
A great interface makes everything clear to the user and avoids ambiguity through hierarchy and logic. It is important that the interface does not over-label and throw too many options at a user all at once, as this quickly becomes difficult to navigate and confusing. Instead, the UI should be concise while retaining the maximum amount of clarity in navigation. Familiar designs and hierarchy should be used to allow the user to quickly adapt to the website. Correctly labeling hyperlinks, having elements in familiar places (search bars at the top) go a long way to improving UX. This means that the user will not have to spend their time learning a completely new format to interact with the site. It can be said however, then breaking the bounds of familiarity at times can generate interest and make a site stand out amongst the crowd and be unique. A Website should also try and stay out of the way of the user. They have come to complete a task, and if interrupted in this they will become frustrated. This means no popups, overbearing ads or auto-playing videos, etc. A good website should be responsive, in that it should respond quickly and notably when a user interacts with it. For example, changing the colour or size of an item when a user clicks on it or hovers over a hyperlink. This encourages the user that what they are doing is correct and highlights interactivity. These elements should not be overbearing and too loud however. Aesthetics should not be disregarded in all of this, and I would argue is one of the most important areas of a good User Experience. While an ugly website that works in all other facets will perform well and will not hinder a user, they will likely want to come back to or spend more time with a website if it was aesthetically pleasing. Every step should be taken to ensure that there are as many ‘shortcuts’ for users as possible. This means that they will not become frustrated when trying to complete simple tasks. A ‘take me to the top’ button on a long website, or a ‘swap inputs’ button on a journey planner are really useful shortcuts that vastly improve a UX where there are relevant.
Keeping in mind the Target Audience of the website is essential to a great UX experience. What may be simple to navigate or attractive for one group of people may be impossible for others. A site designed for the tech-savvy-internet-age Generation Z may be completely unusable for a baby boomer due to differing cultural and technological references used throughout.
