User interface design

User interface design
1st November 2019

Bridge the world of human and computer interaction with user interface design.

In today’s digitally driven world, interactions between humans and computers are a daily activity. Social interactions, professional duties, personal relationships and consumer behaviour, are only a few examples where humans and computers interact.

User interface design is an essential practice within the field of user experience design, but how can organisations can get the most out of it?

What is user interface design?

User interface design refers to the visual elements of a product or website. It anticipates the goals of users, ensuring that the interface has elements that are accessible and easy to understand.

Maximising efficiency and improving aesthetics through UI design can:

  • Help users achieve their goals
  • Clearly indicate what can be done
  • Be accessible to every user
  • Create familiarity by using well established conventions
  • Give clear feedback to the user actions
  • Work for the user

Implementing good UI design can:

  • Drive conversions and build a successful conversion rate optimisation strategy
  • Increase returning users
  • Create an experience that can elevate brand perception
  • Make it faster to implement and document by reusing existing UI patterns

The origins of user interface design

In their infancy, computers were exclusively used to automate complex calculations. This started shifting in 1963 when MIT computer scientist Ivan Sutherland introduced Sketchpad for his dissertation. Inspired by Vannevar Bush’s vision of “human augmentation” from the 1940s, (which also directly inspired the Internet) Sketchpad was the first system to demonstrate an interactive dialog with a computer. Using a stylus, it allowed the user to draw shapes directly on a screen and manipulate them in a similar way as it’s done with any graphic design software. Completely ground-breaking at the time.

As digital transformation and genius creatives took hold, this futuristic vision progressively become more real and accessible to everyone. The key moments include the creation of the first Graphical User Interfaces (GUI) by Xerox in the late 1970s, and the personal computer revolution of the 1980s – with Apple Macintosh, IBM PC and Microsoft Windows leading the way.

User Interface Design

Each era of user interface development has brought new concepts, learning from the previous successes and failures.

  • Operating systems Macintosh OS, MS Windows introduced the “mouse” and “desktop” metaphors.
  • Graphic design software’s introduced virtual toolboxes (Photoshop).
  • Websites introduced the concept of site navigation
  • Modern smartphones introduced touch interfaces (iPhone)
  • Smart assistants introduced voice user interfaces (Alexa and Siri)

The emergence of user interface concepts answers challenges introduced by AR in marketing and virtual reality experiences.

Goals and benefits

Whatever the medium is, user interface’s primary goal is to enable the user to achieve its goal as easily as possible. The challenge is that users might not be fully aware of what they are looking to accomplish, and so might not know what their goal is.

In “The Design of Everyday Things”, Don Norman identified the learnings that users encounter when interacting with a user interface as a “mental model”. A real-life representation of what can be done (inputs), what results these actions have (outputs), and how these inputs and outputs relates to the various goals that person might have.

User Interface Design

A successful user interface design achieves this by maximising the learnability and minimise the error-proneness, by using usability evaluation methods. Learnability is a requirement of any user interface. The user interface itself can teach new users how it works. Onboarding patterns are commonly used in today’s user interface design. By offering lightweight tutorials to explain the function of each interaction point, as they start using the system for the first time.

Affordances defines what can be done on a user interface. For example, a search result listing on an ecommerce website can be filtered down and sorted with various criteria. Signifiers are sensory and cognitive indicators of affordances.

Finally, it isn’t always obvious for the user that the output of the actions is answering their goal. This is because there might be a knowledge gap on what the user interface is trying to achieve. To limit this, the user interface needs to provide feedback to the user that explains what effect the user action had on the system. Using user interface conventions – or known usability patterns – can also help limit this gap. As the user might have already experienced and learnt the same pattern on a different website.

User Interface Design

Challenges and risks

Good user interface design gives a guarantee that most users will be able to use a website or digital product for what it is intended for. However, designing an effective user interface is not easy. It requires understanding of who the users are, their goals, and the type of user experience they would enjoy. Of course, this experience should also meet the business goals. This is all about balance.

UI patterns are important to use and gain inspiration from. The finer details such as spacing, choice of typography, colour tones, iconography style, animation speed, tone of voice, all add up and can make or break the experience. This fine line of getting it right shouldn’t be overlooked, as fine tuning a user interface is one of the most important parts of the production process.

User Interface Design

Unexpected behaviours

As “creative” as it might be, a user interface that’s trying too hard to be unique and original, is likely to frustrate people. Using a well-known UI pattern with a different output will definitely surprise most users, but not necessarily in a good way. To illustrate this, a burger menu should always trigger some form of navigation menu when interacted with – anything else would likely confuse users.

User testing should always be at the forefront of validating a new UI pattern, before building a user interface around it.

Forced friction

Friction can sometimes be necessary, the implementation of the GDPR directives is a good example of this. For legal and personal user information protection, most websites had to introduce an extra step for users to start using their website.

However, friction can often be an annoyance. A user interface not clearly indicating how to perform an important action at a critical moment is creating friction that could turn users away.

Let’s take the example of an airline checkout process. Airline checkouts force users to go through several pages of “extras offer” such as car rental or hotel booking. This is before allowing the user to complete their purchase, likely their main goal. A better option would be to make these extras offers clearly available, but as an optional and separate user journey from the main product purchase – the flight tickets. A user journey map helps businesses better map out enhancements and content.

Build better customer relationships with feedback

Feedback is one of the most important aspects of learning a user interface. By giving the user feedback on their action and why an error occurred when submitting a form, the user is likely going to get it right next time. Not giving a clear and descriptive reason why a form can’t be submitted would likely make the user feel bad. This could result in an increased bounce rate, impacting both user trust and form conversion.

Implement great user interface design with Sitecore

When it comes to implementing user interface design, Sitecore offers the modularity that enable to translate UI patterns into reusable components across the application. Performance is a key part of a successful user interface. Using a progressive web app approach for a website can make empower a user interface to be fast, lightweight and adaptive.

We are a top tier Sitecore Partner with over 20 years’ experience helping enterprise-level organisations achieve their digital goals through digital strategy, design, development and search marketing. Not currently using Sitecore? Get in touch to book a Sitecore demo.