UX and UI design

17 October 2013

UX and UI design

Browsing a website should be like swimming in a warm ocean, not wading through mud. The User Interface (UI) of a website plays a key role in user experience (UX), but that is only part of the story....

User Experience(UX), also referred to as User Experience Design (UXD, UED) is the subjective perception of how a website feels to use. Its a bit like describing how a car feels to drive. The controls of the car are one aspect, but this just determines how you interect with the machine (ie the User Interface) . There are many things that influence how a car feels - how quick it is to respond, how smooth the drive is, how good the field of view out of the windows are, even the quality of the audio system and whether it has a good satnav. But beneath all these, there is an emotive experience to how feel when you drive the car. You don't always recognise it straight away, but when you reach your destination, a good drive will not leave you feeling tired or stressed. 

Website UX is like this. A well designed site should not only look pretty, it should feel comfortable to use. This has important consequences. If it's an ecom site for example, good UX should give you the confidence to buy online, or if it's an elearning site, it should help you assimilate the information more easily. 

There are 4 main components to UX: design, structure, usability and utility


There is no doubt that the visual design of a website plays a key role in UX. William Morris, the victorian designer once said "If you want a golden rule that will fit everybody, this is it: Have nothing in your houses that you do not know to be useful, or believe to be beautiful". The same applies to a website, there should be nothing on your site that is neither beautiful nor relevent the to website's purpose. Ideally, all elements of the design should incorporate both requirements.

Note, the design of the site needs to take into account several platforms. Since 25% of adults now own a tablet, optimising a site so it can be used on tablets is essential. Increasingly sites are beginning to use responsive layouts so that different mobile sites are not required. 


The structure and navigational elements of a website should be clear and logically organised. In designing a site, it is helpful to create storyboards to map out the key areas of the site, and for more complex sites, user journeys to establish how a person would use the site. 

User journeys are quite useful because you can simulate several different types of users and see how they would interact with the site. Wireframes are sometimes used to crate basic frameworks to test out the user journeys before a prototype is built. 


Once a prototype is built, user trialling can be employed to identify key areas of weakness with the structural design. Any accessibility requirements should be included in the usability testing. 

Once a site has been built and is live, testing does not finish there. You should test and tweak the site to continually improve it. Split testing (also known as A/B testing) can be used to make small changes to a site, then evaluate whether those changes increase or decrease usability. Often split testing is used in ecom sites to increase conversion rates.


This is the final part of the UX puzzle. basically it means this: a website needs to do what a website needs to do, no more no less. If you cannot do on your site what you need, the it needs changing. If you're website is overly complex, or has browser compatibility issues, then the usability is compromised and therefore your user experience is degraded.