Interface Design Week 1 – Websites: Conventions & Usability

In this first session for Interface Design, we learned about what Interface Design actually is.

  • Method = Design
  • Medium = Visual
  • Objective = Communication

It encompasses a range of activities involving the creation of software, websites, apps and other interactive products – with the focus on maximising usability and creating a successful user experience (UX) – ‘communicating’ effectively with an audience.

Important considerations in the design process include:

WHO is the site or product for? Know the audience

The designer should know what needs will bring people to the website, then go about providing a design which will draw them in further.

In a nutshell this can be summed up as “what for” and “where next”. A visitor to a website should be able to work out what the site is for in less than 4 seconds! Then they should have a clear idea of where to go next.

If they can’t work out “what for” and “where next” in 10 seconds they will leave!

A useful tactic is to check out other similar websites – especially those which are rated highly in that particular field.

Knowing who a website is aimed at, the target audience so to speak is crucial in the design process. This is an example of the differences that should be considered when designed a website aimed at children vs designing a website with  primarily ‘adult’ audience.

Screen Shot 2017-05-02 at 20.10.28.jpg

Image credit to

Structure and consistency in design & Navigation Principles

Simplicity is key, in that a great interface will be easy to understand and interact with. Navigation around an app or website should be subtly guided process, without the need for a user to have a map in order to find what they are looking for. Strategic use of elements such as colours, typography, and visual hierarchies all aid the guidance process.

Each part of the interface should be kept consistent throughout the design – most importantly language, layout and design. Users need consistency – it makes them comfortable, so design rules should be established and adhered to.

Layout and visual hierarchy

This controls how the user’s eye perceives the order of the information on the page.

The most important elements of an interface should be highlighted so that users are drawn to them. The design process offers many ways in which this effect can be achieved – for example, simply making one element larger than the rest.

The Netflix website often uses this method, and the user is faced immediately with a larger ‘highlight’ which occupies the top half of the screen.


The Netflix Website

A visual hierarchy clearly shows users which parts of the website are of primary significance, as in the Netflix example, then secondarytertiary and so on. Other methods of doing this include contrast, colour, scale alignment and proximity.


The main task for this session was to find a website that I think works well…and why.

I chose Truffleshuffle as a great example of a website which I think works well. It is one I return to time and again, so it must be doing something right!


In terms of those crucial first 10 seconds, in which a visitor needs to be able to work out WHAT the website is for, and WHERE they can go next, I think that TruffleShuffle fits the bill.

It is clear as soon as you land on the front page WHAT kinds of products they sell (primarily retro style 80s/90s TV-themed t-shirts and other related products) and all the picture ‘blocks’ are direct links to the products which makes for a spontaneous and exciting shopping experience.

This partly fulfils the WHERE NEXT criteria, and there is also an easily located search facility at the top of the page. For more general browsing, the blue bar contains different categories which expand when rolled over with a mouse/touch-pad.

The TruffleShuffle website’s target user would most likely be adults in their 30s or 40s who have a soft spot for the TV and movies of their childhood. Or anyone else who is a fan of retro styling.

There is a strong visual hierarchy in the structure of the website with it’s nice solid ‘blocky’ feel and simple but effective colouring and layout.

The top section of page (everything above the pictures/product links) remains consistent even when searching in a particular category, which makes for smooth-sailing navigation, and clicking the TruffleShuffle logo in the top left corner always brings the user back to the front page.

The bottom part of the website contains all the TruffleShuffle links to social media, as well the accepted payment methods (extremely useful, as often this information is buried within terms and conditions, or even more inconveniently only made known after going through the checkout process).


This area also has the facility to sign up for email newsletters, and clickable links to general information regarding delivery and all that jazz!

TruffleShuffle is one of my favourite websites. It is awesome..