Digital Style and Branding – UX – Alexander’s Yr2 Blog

Introduction

This lesson was focused on user experience (UX) in websites. User experience is the experience of a user on a website – How easy is it for the user to get what they want from the website? Can you navigate the webpages easily? Can you search for specific words/topics easily? Is the website easy to look at and read or interact with?

UX ultimately determines how long a user will stay on the website and how much of the website’s content they will see/read.

5 dimensions of design

UX follows some important guidelines – the 5 dimensions of design. Each of these dimensions can be applied to the different aspects of a website.

1D – Words (Is it readable?)
2D – Visuals (Are they clear?)
3D – The page environment (Does it make sense?)
4D – Time (Do slideshows move too fast?)
5D – Behavior (Do buttons do what you expect?)

Example

I used the homepage of Wikipedia to test the 5 dimensions of design.

1D – The words are very readable on Wikipedia. You can clearly distinguish the headers, subheadings, and paragraph text on the page. There are clear sections dedicated to featured articles, events in the news, interesting facts, and things that happened on this day in history.

2D – The visuals on Wikipedia’s homepage are also very clear. There is a clear hamburger icon that can be used to access other webpages and features of the website, a Wikipedia logo which takes the user to the homepage upon clicking it, images for the featured articles and news as well as colours on the page to separate the blocks of text from each other visually.

3D – The page environment works well for a landing/home page There is a clear section at the top of the page for accessing other parts of the website, including a big search bar at the top center page to search for articles that the user wants to find – which is the main reason people visit Wikipedia (to look up things like an encyclopedia).

4D – There isn’t much of a necessary time aspect to Wikipedia. Nothing on the page moves. The landing page does change through time however, being updated with new featured articles every single day.

5D – Wikipedia’s home page behaves exactly how you expect it to. All of the links lead to their individual articles, the tabs for editing and viewing the history do exactly that, the search bar is a search bar and the hamburger icon opens a tab where you can navigate the rest of the site.

Over all, it is a functional and well-presented website according to the 5 dimensions of design.

Fonts

Fonts are the style of text on a webpage.

Some of the most common fonts on websites include:

Arial (sans-serif) – the most popular font.
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)

They are chosen because they are easy to read.

An important thing that makes a font readable is how accurately it represents the characters that are going to be typed out in that font. Letters that look similar to each other can be illegible in some fonts as they look the same – like a lowercase “L” and an uppercase “i”, or “O” and “0”.

OpenDyslexic is a font that is designed to help with some of the reading errors that people with dyslexia can make. OpenDyslexic can be selected as an option on a few websites, e-readers and a Chrome web extension that changes the font of a website to OpenDyslexic. Below is an example of OpenDyslexic.

The font uses spaces between letters and words, slanting characters and weighting certain parts of letters to make it clearer to a person’s brain which character they are reading.

A font that I like is Helvetica – a sans-serif font. It is very clear to read, and looks good as capital letters.

Colour schemes

Colour schemes are used in websites for readability, style and usability. Different colours used together can create a visual continuity, especially when complimentary colours are used. Colours can also signify an emotion or action and they can be used to help ‘theme’ a website.

This guide shows how complementary colours are arranged on the colour wheel.