1st Floor, 17-21 Old Street, London EC1V 9HF

t +44 (0)20 3058 1100 f +44 (0)20 7253 6846

e jay.nicholl@makeitclear.co.uk www.makeitclear.co.uk

UI matters: Making your users experience valuable

Good user interfaces deliver information effectively. The best user interfaces (UIs) utilise age old principles to take advantage of the way people interact with information, helping to create a compelling user experience (UX). This is what matters to your users; when user interfaces are well designed they make the experience of interacting with digital property more enjoyable and enhance utility increasing their perceived value.
This guide explores the features that can help to ensure your digital tools have intuitive and capable UIs, methods that will allow you to create fantastic user experiences, making your digital properties more valuable to your consumers and more profitable for your company. Ever since the Apple Lisa arrived as the first consumer oriented computer with a user-friendly interface, graphical user interfaces (GUIs) have been the standard of mainstream digital navigation and utility. Graphical user interfaces are with us throughout our day, serving working and social purposes. Bigger mobile screens, tablets and touch interfaces have forced software developers to recognise the importance of placing the user interface centre stage, replacing mechanical navigation and physical buttons with gestures and direct contact. The reason digital tools like the iPhone, Facebook, or even the BBC website are so popular is because of their exemplary user interfaces. But what is it that makes a good UI great? And how can your UI deliver an engaging user experience?

A GOOD EXAMPLE
A fantastic example of user navigation is the brilliant iOS. With only one physical button, iPhones, iPads and iPods allow users to navigate to the home screen in one click. Other navigation elements on the device feature a standardised appearance and clear naming. The ubiquitous back button is an ever-present device, toggles act as the default switch mechanism and expanding arrows are easily spotted. The benefit to users is that they can rapidly scan the page and identify ways around the entire device, and once a user is familiar with one iOS device or application, they are ready to use any other.

SOME UI EXAMPLES EXPLAINED

Back button The back button features heavily on iOS apps and within the OS (Operating System). Its a simple tool that provides easy routes around content.

NAVIGATION
Navigation is the first hurdle for users. When designing there is a need to consider first time users as well as experts, a need thats often ignored. Simplicity is not always an option, particularly when it concerns tools that feature advanced functionality such as photo editing or databases. In developments that feature complex functionality, good navigation is essential. Clear navigation empowers users, educating and allowing them to utilise a wider range of features more easily. They can extract the value of your product as intended rather than running into dead ends and complex puzzles at every turn, an experience that can be infuriating, a dangerous outcome in a market driven strongly by review and recommendation. A good example of a stellar product that is hindered by its daunting user interface is Adobes Creative Suite. Their products are complex enough to baffle even the most technically minded, immediately limiting the width of their user base, and their profitability. The next button The next button is seen in many devices and is clearly indicative of its function; expanding content to reveal greater detail and more options.

Toggles A simple switch, the toggle is easy to operate and is found within apps and interspersed throughout the operating system.

white paper | UI MATTERS

page 1

CLARITY
People learn from experience, and the way we interact with digital properties is no different. In much the same way you can identify a door and expect it to open to a new space, the function of buttons should be easy to identify and lead to a predictable (and desirable) result. The essence of each interaction should be well signalled to users in advance of necessary actions. If a user opens a gateway they will expect their interaction to be reflective of their location within a cycle. For instance, when a user clicks a Buy now button on an e-commerce website, content on the resulting page is expected to reflect their position in the site, adding the relevant item to a shopping cart and simultaneously opening up options to proceed to checkout. Clarity can be achieved by labelling actions practically, making their purpose explicit, and making sure all available interactions stand out on the screen. Navigation around a digital property can be made much simpler by keeping screens free from clutter. Only place the appropriate content on each screen and allow users to make decisions by marking all available options clearly. Dark UI is the questionable art of guiding users by obscuring directions away from conversion, however this practice is ethically questionable and can work actually work to achieve the opposite if users perceive your intentions. Make sure your users cannot accuse you of such behaviour by making their routes around your digital property support their goals, not just yours.

Give users access to the tools or resources they are likely to need on a contextualised basis. For instance when viewing content like images or articles make sure sharing buttons are available. Once logged in, make sure a log out button is present on screen or at most one step away. Provide navigation options to the next logical step, such as checkout options on e-commerce product pages.

OPTIMISATION
Once your property is live, take advantage of free and premium tools to measure interactions. Free tools like Google Analytics can track social interactions such as sharing with Facebook and Twitter, they also show how the majority of users are getting to your site in the first place. Once you have mapped out the most common routes around your website you can optimise the routes to conversion or other usage goals. If the conversion rate for purchases is higher after a user has read a detailed description of the product, bring the descriptions up to a higher level instead of a subpage, or place Add to basket buttons in pages featuring detailed descriptions. If users are logging out after navigating to content from offsite sources, make relevant items clearly available on each content page. Every digital property is a living ecosystem, as such the users and uses will change on a regular basis. Regularly monitoring the users and uses of your site, app or application will allow you to reach out to wider audiences, provide more relevant resources to your users and increase conversions. UI is a key part of all optimisation and you should be willing to respond to new or unexpected interactions to enhance the achievement of business goals.

PLANNING
Understanding the chronology of your digital property as experienced by users is key when defining and planning digital properties. Wireframing routes around your UI will help you to refine your user experience. It can also help to frame useful insights that help you understand the main utility your digital property is likely to serve. There are a number of free and premium tools that can shed light on user segments and journeys around existing sites. Tools like Google Analytics are able to capture routes for individual users that can be used to help boost conversions and create better, more engaging user experiences. Existing properties can benefit from an audit that tracks user routes and engagement, this data can be used to refine specific routes through content, allowing for advanced segmentation and targeting. Of course this cant be done for concepts; here mapping out potential user journeys based on hypothetical usage scenarios helps to create digital tools that users can get to grips with quickly. The benefits of user testing, even at the level of paper prototyping cannot be overstated.

WHAT NEXT?
There is a plethora of pitfalls awaiting any foray into UI design, and its only with careful planning, a lot of empathy and a wealth of experience that you can avoid them. This guide has just skimmed the surface of UI design, but wed be happy to hold a more in-depth conversation about possibilities and considerations of UI. Feel free to give us a call, or swing by for a coffee to discuss the issues that matter to you. Wed be happy to help you get the results you need to develop more valuable UI solutions.

white paper | UI MATTERS

page 2