UI Design – A Practical 2017 Guide

Jargon can be found in pretty much every industry, design included.  One of the most common terms bandied around is UI. Meaningless, right?  Well, no.  In fact, focusing on the user experience have said that if they didn’t find what they were looking for on a mobile site, they’d head elsewhere. So, what is UI design and how can it benefit you?

UI-H1

Put simply, UI design is the principle of creating an interface with the focus entirely on ensuring the end-user has a positive experience.  That the design makes your website, app or software as simple, easy and pleasant to use as possible.

Why bother?

Because usability makes a huge difference to retention.  Indeed, a NewVoice study showed that 58 % of consumers would never use a company again after a bad experience. If users find your software tough to use and operate, they won’t stick around.

So how does a UI designer combat this?

UI-H2

All-round design geniuses Constantine and Lockwood hold that there are six main principles to UI design, and these principles are a great place to start.

  • Your design should ensure the interface is organised with purpose, and that it makes use of clear, consistent models.  Similar elements should resemble each other, and dissimilar elements shouldn’t.
  • If your user wishes to complete a simple, common task, it should be easy for them to do so.  Any communication within the interface should be clear and in the user’s own language.
  • Your content should keep all needed options available and visible, without over-complicating the design and including redundant information or features that aren’t needed.
  • Your design should keep users informed of actions and interpretations, changes of state or condition and of any errors or exceptions that have taken place. (Even if your software crashes, for instance, it should still notify the user clearly, explaining the situation).
  • Your design should be flexible and tolerant of user errors.  Users should easily be able to undo any mistakes they make.
  • Re-use and consistency. Your design should re-use the same internal and external components and behaviours, maintaining consistency across the board. (We’ll cover this in more depth during the next section).

67% of consumers use bad experience as a reason to end communications with businesses.

UI-H3

There are a number of main factors UI designers need to take into account.

Clarity

First and foremost, good UI design is about simplicity: the best UI design is one that the user stops noticing after a few minutes.  (Don’t take our word for it – even Usability.gov defines the best interfaces as those that are ‘almost invisible’ to the user.) The whole design should be very clear and simple to look at and explore.  (This isn’t just a matter of visuals, by the way – excessive use of complicated jargon is very anti-UI). Your user should be able to access your content and then use it intuitively.  If they reach for a manual or a help guide, you’ve not done your job! It’s important to avoid any kind of ‘busyness’ – a cramped, over-populated design is one that’ll have users running the other way.  (Plus, in today’s world of hyper-distraction, designs should do all they can to conserve attention – 55% of users spend fewer than 15 seconds on your website.)

Consistency

You need to make sure your content is designed with consistency in mind – every part of it should operate in the same way.   This can apply to a number of areas:

  • Pick one colour scheme and stick to it.  Though a poor scheme won’t necessarily make content harder to use, you can be sure it’ll put customers off.
  • If there are different ways of referring to a particular thing, stick to one of them throughout. Don’t have a link on one page describing your checkout as ‘checkout’ and another elsewhere that describes it as ‘basket’.  You’ll confuse users if you do this.
  • System consistency. If you’ve got systems in place – a booking engine, for instance – then they should be in-keeping with how such systems usually work elsewhere.  Customers should be able to arrive at your site and – using their knowledge of other company web sites – know roughly how everything works on yours. (And, of course, you should ensure that the aesthetics of any such system – the colours, shapes, typography and so forth – are internally consistent).
  • General consistencies. There are certain design principles that are expected in today’s world.  Hyperlinks, for instance, are always a different colour to the text in which it’s contained.  If there’s a search form, it will nearly always be on the top bar of the page.  If there’s a company logo, it usually goes to the top left.  It’s best to stick to the common rules here.

(Apple phrased this best by noting that apps should ‘avoid forcing [users] to learn new ways to do things for no other reason than to be different’.)

What is the end goal?

When the goal is to help the user move intuitively from point A to point B, you need to know in advance what point B is! If you’re creating a simple landing page, then the aim will probably be to either get click-thrus to a sale page or for the user to fill in their e-mail details.  If you’re creating an e-commerce website, point B is – in the end – the user completing their purchase So, your design must be focused on ensuring that this process is as easy as possible for the customer. If you want two very well-known examples, take a look at Facebook and YouTube.  They both share the same, simple aim: to keep people on their site as long as possible!  Both sites rely on advertising for their income: essentially, they operate in the same way as traditional newspapers did. The more visitors they have, the more money they make.

So, both sites are designed in a way that makes staying on them as easy (and as enticing) as possible.

UI design

And happy users mean better results for you

Facebook has a scrolling timeline that’s constantly updated, and as the algorithms learn more about the user, they start to filter content according to what’s most likely to grab the user’s attention. YouTube, meanwhile, offers a homepage – like Facebook – that’s tailored according to what the user has previously watched.  What’s more, YouTube automatically starts to load up another video the user’s likely to enjoy, ready to auto-play next.  All without the user lifting a finger.  Why do we spend so long wasting time on both sites? It’s because the designers have made it as easy as possible for us to do so! Know your end goal, and you can design specifically with it in mind.

Remember, people scan websites, they don’t read them

If you’re working on the web – and in some capacity, more or less everyone is these days – it’s important to remember that more people scan the web than actually read it. This has been a key factor in the rise of infographics, which provide a visual, engaging interpretation of single, one-off data points. People will delve into areas that they consider interesting, but they’ll use main headlines as an indication as to where they might want to dive in deeper.   If you’re using a lot of text in your interface, it’s important to ensure that it’s scannable – the easier it is for users to flick through, the more likely they are to see something they want to explore in more detail.

UI-H4

All design goes through stages, and UI design is no different.  Different projects may spend more time on different areas, of course, but the following is a fairly standard step-by-step on how a UI design is put together.

  • Brainstorming the requirements. What is the design required to do? (Point A to point B!)  Which features are to be included in the design, and what is the goal of each feature. What are the needs of the users?
  • User and task analysis. This is the stage where potential users of the system are analysed in more depth.  The idea is to know before the project begins how potential users would like the system to operate.  Topics researched will include the technical savvy of the demographic, which design colours and styles they prefer to use, how your content will fit into their day and simply how the users prefer their interfaces to operate.
  • Information architecture. This sounds complicated, but it’s not. It’s simply a matter of developing the overall process and information flow: i.e. how the content will function. A website’s site-map, for instance, is an example of information architecture.
  • The development of wire-frames, either on paper or on relevant digital software.  These initial wire-frames strip away all of the visual elements and focus on the first-principles: is the interface easy and intuitive to use?
  • Usability inspection. At this stage, a relevant group – or single inspector – will test out the interface fairly early on in the creation process. By doing this, they can analyse the simplicity of the system, and pick up any early problems or usability issues.
  • Usability testing. Here, the prototypes will be fully tested on an actual user. Often, the user will be asked to talk aloud about their thoughts when using the interface, in order to highlight any further issues from a neutral, unbiased viewpoint.
  • Graphical user interface design. Once the wireframes and prototypes are cleared to proceed, the graphic designers will begin to flesh out the look and feel of the design, often based on the user research.  Any usability problems found during testing will also be fixed at this stage.

Does it all matter?  Well, statistics show that judgements on a website’s credibility are based 75 % on how it looks…so you decide!

UI-H5

We thought you’d never ask.  We mentioned customer retention at the beginning of this piece, but the truth is that there are multiple benefits of taking a UI approach to design.

Such an approach simply pays off.  Here’s why:

  • More customers. This is the obvious biggie.  If you’ve taken the time to do the in-depth analysis and testing, you’re going to come out with a design that potential customers want to use.  They’ll feel immediately comfortable with the consistent, intuitive interface.  As a result, they’re simply more likely to stick with it.
  • It’ll give you a stronger brand. There’s no downside to earning a reputation for usability, quality and reliability: all three characteristics will make customers want to come back.  A good UI design – which will be the first point of contact with you for many customers – is a great way of increasing your reputation.
  • Less cost per acquisition. Online businesses require traffic, and traffic costs money.  (Even you’re developing free traffic through SEO, it’s still a time investment).  You want to ensure that your business has the best possible chance of converting that traffic. An effective, high quality UI design will convert and retain customers at a far higher rate than the alternative.  And in the modern day, conversions often mean the ability to obtain customer’s e-mail addresses: which, on their own, are another great resource.
  • The data is transferable. In-depth research isn’t a case of grabbing the data, using it once and then throwing it out. Remember, UI design research will take in everything from the colours your customers love, to how they want to engage with technology, to which styles of interface are likely to make them want to buy.  This information can all be used again. (And again!)

UI-H6

Remember, today’s online market is as competitive as it’s ever been.  Thousands of websites, apps and software packages are released each week.

At Iconic Solutions, we pride ourselves on getting results for our clients. Improve your profits by giving us a call today.

 

Stay Informed!

Sign up to be notified of new blog post and be the first to receive helpful tips from Iconic Solutions