UI Theory & Optimisation
Whilst organisational design plays a part in customer experience, much of what exists in the digital realm is abstracted a step away from that: apps, websites, emails, social media accounts, digital advertising and so on… So whilst we can do all we want in terms of digital transformation of an organisation, it’s not going to amount to much when it comes to delivering amazing digital experiences if we don’t also consider how we go about designing, developing and optimisation digital assets. We’ll take a look at the optimisation element here, and then move on to design and development after. We covered the technical side of how to go about gathering data for this earlier, so now we’re going to look at the ways we can modify layout and content to optimise interfaces. We’ll start with the eleven ways we can change how things are placed, before moving on to look at the three ways you can change what is shown to the user. Clarity & Affordance The first options to improve an interface are to take its constituent parts and make each stand out (clarity) and more obvious in what it does (affordance). For example, if you see text that looks like this on the web, you know what is, you can see it easily against other text, and you already know how to interact with it. If you want to improve any interface, you can start by making it clear what different elements are and do, and ensure that they appear to be what they actually are. For example: Each of these looks like a button, to a greater or lesser extent. However, depending on the interface design, and the context in which these things are placed, it may be more or less clear that the item in question is, in fact a button. Consider the following to versions of the same form: It’s fairly clear that what we’re looking at is a contact form, and the so with that context, that button is 1. a button, and 2. clicking it will submit the form. We have an understanding of what a contact form is, what it looks like, and the likely components of it. At the bottom, we’d expect there to be a button to press to hit send. However, even with that context, the left version is more obviously a button than the right, which is too similar to the input fields. However, if we had the same button at the bottom of a page, on its own, for a user to take an action like downloading a PDF, then all of a sudden, it’s not quite so clear. We’d want to ensure we used the most button-like button you’d ever seen, with text around it in bold and a big arrow pointing at it, to make sure the user understood what the button was, what it would do, and what to expect next. Signposting Our second option for improving a UI is to use elements to directly or indirectly highlight an element of an interface. There’s all sorts of ways to go about this, from the subtle to the deeply obvious. On the subtle end, we have visual clues provided by images. Firstly, you’ve got the now oft-cited example of a person in an image looking towards the CTA on the page. The person provides a visual clue to where you should look with where they’re looking. We can create more direct and obvious methods of drawing the user’s attention to where they should go now though. From text, stating what the user should do now,…
Like to keep reading?
This article first appeared on toughcompetent.com. If you'd like to keep reading, follow the white rabbit.