web-design-thought-process

11 Jan Some of the Thought Processes Behind Modern Web Design

Web design is continuously evolving and becoming much more of a science than it ever has been before. Arguably there is now more science, psychology and logic involved than art and expression when designing a website. The most successful and most creative websites that you see online will have been through a meticulous web design process and every element on-screen will have been heavily planned to appear the way it does.

There are two underlying reasons why web design has evolved to what it is today and they are both quite similar, though equally important… Usability and User Experience (UX).

Usability is the judgement of how easy a website is to use and UX is how gratifying users find interacting with a website. There are more than a billion websites online today so it is vital that modern websites are optimised for these two factors, otherwise visitors will quickly look elsewhere.

Essentially, if you’re trying to achieve targets with your website, whether this be as an E-commerce platform, generating leads or developing greater brand awareness, focus will need to be duly afforded to the full user experience and not just how the site looks.

To best achieve effective usability and an enjoyable user experience (ie: ‘good web design’), the following considerations need to remain at the forefront of a web designer’s mind throughout an entire project. They truly are key factors in determining a site’s success…

 

SIMPLICITY

The impression that your website gives is important, especially on your home page or on any page which visitors might land on, however the vast majority of users aren’t browsing your website simply to evaluate your online presence or how good your design is. Their conscious goal will be to complete an action, or find specific, relevant information.

enjoyable-web-experience
Utilising too many design elements that serve no functional purpose will make it difficult for visitors to quickly fulfil the reason they have clicked onto the site.

Because users want to accomplish something specific, simplicity is therefore vital in achieving good usability and UX. Just because simplicity is a major focal point, that doesn’t mean that the website’s visual impact has to be sacrificed however…

  • Only use graphics if they’ll help a visitor complete a task, perform a function or help simplify page content
  • Use a limited amount of colours in the website’s design, generally between 3 and 5
  • Different typefaces should be limited, a smaller amount helps maintain a theme and improve overall legibility

 

VISUAL HIERARCHY

After site-wide simplicity is considered, the next step is to organise and arrange website elements so that all visitors naturally take a desired journey through a website or gravitate towards more important elements before others. From a usability and UX perspective, these actions should be completed by users in an enjoyable way, avoiding potential uncertainty and confusion.

frustrated-web-browsing

Positioning, size and colour adjustments can help to structure site elements such as calls-to-action, essentially persuading visitors to interact with them first. The trick in implementing a visual hierarchy like this successfully is to move away slightly from the uniformed theme whilst making sure not to make the site look messy and confusing.

A lot of scientific research has been conducted into what naturally catches the human eye, particularly on-screen.

 

CONVENTIONS

There are a number of web design conventions which have been proven to be highly effective over the years and after wide-spread use, visitors will already be familiar with these devices. Some of these conventions are:

  • Clicking on a company logo to return to the home page
  • Links change their appearance when they are hovered over
  • Links are in a different colour and can be underlined
  • Basket and trolley icons are visual cues for the pre-checkout area
  • Navigation consistently at the top or down the side of every web page

conventional-website-device

Including common web experiences that users are already familiar with helps greatly with the UX. These web conventions allow visitors to interact with a website in a language that they already understand through browsing experience, which makes a website inherently easier to navigate.

Innovative, unique design for a modern website can still be achieved, but the skill is to keep some conventions to make sure visitors aren’t becoming frustrated or confused by unaccustomed elements. If users have a negative experience with a website they will quickly leave and unlikely return.

 

NAVIGATION

Intuitive navigation is crucial in determining a website’s usability. If visitors can’t achieve the purpose of their visit, or have to apply extensive thought to do so they will have a very negative experience. Focusing on effective navigation will allow visitors to get from A to B (and back again if required) without feeling frustrated.

Including a search box near the top of the site and enabling users to search by keywords will go a long way to improving UX, however every site still requires at least one structured navigation platform. A clever navigational structure will help to dictate user journeys, but it is vital to keep the primary navigation structure simple and near the top of the page.

Other key points when planning optimised site navigation are:

  • Limit the number of navigation options on a page
  • Navigation should have a secondary position in the site footer
  • Drill down only so far, employ no more than 3 levels of navigation
  • Use breadcrumbs so visitors are aware of their navigation trail
  • Keep all navigation consistent on every page

You can read one of our previous blog posts focusing on website navigation: “A guide to planning your website navigation (or how to avoid a swift exit!)”

 

CONSISTENCY

It is important that navigation is consistent across a website, though the theme and appearance should also include consistency across most pages. Colour schemes, backgrounds and general layouts that don’t change or differ can have a positive effect on both usability and UX, with users far less likely to become confused whilst browsing.

web-design-layout

Consistency doesn’t have to be maintained on a site-wide basis however. Many web designers group types of pages together (such as Help pages or Category products for example) and give them different layouts, colours and graphics.

This approach will not damage usability or UX, rather it can be an effective practice that greatly improves the visual impact of a website whilst making it easier for visitors to understand what type of information they are likely to find on certain pages.

 

ACCESSIBILITY

Tablet and particularly Mobile internet browsing are still seeing growth and in many cases Mobile browsing is outperforming Desktop browsing. In order to provide an enjoyable user experience it is essential that any modern website is created with a responsive design to cater for mobile and tablet browsers.

With a responsive site, all content is resized and reshuffled automatically to fit the dimensions of the device the visitor is using. This highly flexible structure is applied at the design stage and ensures that any website provides an enjoyable user experience across multiple platforms.

responsive-design

This inevitably means that a website might look entirely different from one device to another, but it is more important that it is functional and provides a positive experience.

You can read another one of our blog posts focusing on responsive websites: “Are you as unresponsive as your website?”

This framework of thought processes comprises the user-centered web design that leads to effective usability and a gratifying user experience.

Despite everything above though, usability and user experience will always hinge on the preferences of the end user. The real key to improving the design of a website is after launching, to conduct user testing, gather feedback and make alterations based on the findings.

If you have a project in mind, we would love to hear about it. Get in touch on 01472 269243 or drop us an email at info@keyzo.co.uk to speak to a member of our team.



Return to our blog for more design and technology insights...