MA Web Design + Content Planning materials for applied art for the web • major project

Interface Design.

user icons, maps and devices

How do you design an interface which is not only easy to use, works well across various devices and screensizes - and is aesthetically appealing as well?

Like a key to open a lock, your UI needs to give access to the content without bothering the user with the complexities which might lie beneath :)
The commonly uttered phrase “good design is invisible” applies perfectly to the design of interfaces. If no one notices your site menu and happily browses the site, your design works. You have achieved your goal of a user-friendly and accessible navigation.

Before you fall into the usual pattern of doing what’s popular – it will serve you well to consider all aspects of the interface to be designed — and once in testing, ask the right question to review the proposed design.

inside view of lock, key enter + turn
‘how keys work’ via tweet from @Cennydd

who / what / how

Planning for the approach to interface design:

  • who will be using it? – your target group Remember that it is not you, or your client, but the end user who is to guide the approach to interface.
  • what is their motivation and goal? – user journey Keep in mind whether your interface is purely navigational or features more involved functions (like sign-ups etc).
  • how will they be accessing it? – device / connection / app Plan well to avoid complications during testing. Test early and frequently.

asking the right questions

Only testing and observation will yield the right result:

  • how easy is it to complete the task in hand? Do your users navigate with ease? Or pause and hesitate?
  • how efficient is the process? Do your users complete the task smoothly? Or does the involved process take too long?
  • how well are confirmations/errors handled? Does your user understand and navigate errors easily? Or is the error handling likely to prompt user to abandon the process?
  • is using your interface a pleasure or pain? Are you users happy when using your interface? Or do they frown and feel frustrated?

Good design is thorough down to the last detail.

Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.

Dieter Rams, Vitsœ

good principles for UI design

  1. Respect your users
    A successful interface design will leave the user in control and aim to ease interactive processes by good feedback ('reactions' to interactions via visual means).
  2. Clarity + simplicity
    Above all, a good interface will be clear to understand and intuitively/easy to use. Strive for recognition over recall.
  3. Consistency
    Key to accessibility, usability and UX — clear patterns should be established for familiarity and ease of use. Integrity of both content (tone) and visual language will ensure an effective experience of the interface.
  4. Low cognitive load
    Cognitive load is how much mental energy it takes to use an interface. Ideally, your users will barely notice your design and simply use it. This often mentioned phrase comes to mind: Good design is invisible.

Good design is as little design as possible.

Dieter Rams, Vitsœ

Test & train your eye for detail

screenshot of quiz

NOTE: this is the wireframe for a digital tool, designed to help youth workers (referred to as coaches) and young people (referred to YP) to collaborate on personal and professional development.
view on Whimsical

Atomic Design

... all that goes into creating and maintaining effective design systems. Brad Frost

Highly recommended reading!
read online now

interface considerations

Your work on interfaces will come in various shapes and sizes – you might start from scratch, work on a relatively small project – or be tasked with revising an existing system. Brad Frost’s article interface inventory highlights how vital consistency is for a successful UI design and how an inventory can help the process of a redesign.

login and buttons

interface inventory

Your task is to create an interface inventory of a site of your choosing. Capture the UI elements of the site via screenshots and collect them into categories.

The goal is to study your selected site’s UI design and check on consistency of all aspects such as wording and phrasing for microcopy as much as spacing, typesetting and colour of interactive elements.

This exercise should be a useful trial of how you might approach the UI design on your final major project’s website :)

UI/UX expertise

Nielsen Norman Group

Practicing, researching, and teaching user experience for decades – NN/g was founded by Don Norman and Jakob Nielsen . Highly respected in their fields, we can learn much by exploring their site, read articles and watch the videos.

Don Norman: Design for the elderly

If you're not familiar with the design story of the potatoe peeler already, do have a read:
Behind the Design: OXO’s Iconic Good Grips Handles
The untold story of the vegetable peeler that changed the world

Jakob Nielsen: Don't listen to the customers