Introduction to UI/UX

Key Principles of User Interface, Interactivity and User Experience Design


The goal of any piece of software – be it web application, website or other – is to provide an interactive experience for the user that is forgiving and all-at-once easy to understand. It should be helpful, empowering, continually saving progress. Ultimately, it should allow the user to accomplish what they set out to do.

To this end I’m a big believer in creating an interface that is transparent or seemingly non-existent – the user is unaware they’re even using it; they’re able to proceed automatically – on autopilot – because there are no barriers to learning, no skills to adapt. The buttons are self-explanatory. The controls are where you need them. The methodology is clear.

This is the holy grail of UI and UX and is rarely possible out in the wild. With most applications there will be a need to guide and assist users with visual feedback, tooltips, help boxes and the like. Understanding how a UX goes together is a vital step towards reaching a ‘transparent UI’ – so below I’ve put together an (abridged) list of some of the key elements of interactivity that any successful UX cannot do without.


1. Enable the user

Let the users make mistakes. Give them room to work how they want to.

If the user wants to be inefficient, let them. Some prefer to be methodical rather than efficient. It might take one click to reach their goal, but they prefer to do it in three because that’s their preferred path. Users feel empowered by the ability to control surroundings, and suffocated by a restrictive environment.

… but retain a level of responsible control.

Allowing user control has its limitations. Your environment sandbox should prevent failure-states and a broken user journey.

Some things are just complicated. Don’t try to hide them.

Some designers will obscure complex options to the point of hindering the usability of an interface, all for the sake of making it ‘clean’ or ‘pretty’. Some apps are complex – and the user needs complex actions to interact with it. Don’t hide them away just for the sake of not overwhelming a user – this will just cause annoyance later. If you must disable options, give users the power to re-enable them once they are familiar with your interface, or reveal them progressively once milestones are reached.


2. Predict the user

Put the buttons where they’re expected to be. Anticipate.

Nothing frustrates more than searching for an option you feel ought to be obvious.

To accomplish seamless prediction the UX designer must be completely aware of how the user interacts and what they expect.

Suggest actions, auto-fill form fields and set defaults – eliminate pointless busywork.

If you can provide a default value, or save time by filling in useful data on the user’s behalf – do so. If there is a way to store information to be used over again, do it – especially if it’s a long form like an address or an email account. If the user does the same thing every time they log in, make that action the easiest for them to accomplish. Put the button right in front of them.


3. Inform the user

Visual interface feedback should be obvious and instant. Written messages should be crystal clear.

Feedback can take many forms – chief of which are hover states, focus and click states. If an action takes time, provide a loading graphic or status bar. Explain what’s happening whilst they wait. Clearly mark disabled buttons and panels. If an action has completed, display a success or failure message.

Feedback should be consistent and up-to-date.

Your messages should be relevant and up-to-date. Don’t feedback for an action the user thinks is over.

Use feedback to create better users.

Feedback can also be used to guide users after passive actions. One example is if a user has not logged in for a time – feedback can explain what new features they’ve missed. If a user performs a similar action repeatedly, feedback can add this action to their home screen to make it easier. Feedback can suggest a better way of performing an action, or can incentivise an underused feature.

Keep the user aware of consequences and outcomes.

Users need to know what will happen (and sometimes why) when they interact with your interface. Don’t be afraid of explaining what a button will do – the user should never be surprised by an event (this leads to unpredictability, which engenders a lack of trust). If you’re going to save their data – tell them. If a button clears a form, tell them. If an action is irreversible, tell them.


4. Users make mistakes – always include failsafes

The outcome of a ‘Delete’ action should be crystal clear.

Deleting on most operating systems takes two stages – adding to a bin or trash can, then permanently removing it from that bin. Be careful how you describe your action – don’t call it a bin if it’s really a delete.

Provide an ‘Undo’ option.

Sometimes even if you ask them four times a user will still delete something they did not intend to. Provide an option to reverse this mistake. Apply the Undo to other common actions – archiving or moving content, changing certain settings and so on.

Create positive responses to negative actions.

If an error occurs, provide the user with the means to correct it – either themselves or via a contact or help point. If that’s not possible, explain what the error was so they can avoid it in future.


5. Consistency

Be consistent to: 1) your application – 2) to your platform – 3) to your products – 4) to your brand.

Consistency makes your users feel comfortable. It’s not always possible to retain full consistency across everything you create (under one brand), but you should at least maintain local consistency within your application. Keep the colour palette the same. The icons. The fonts. The position of elements.

Extend this to everything on your current platform. If you have a phone application, a web app, a website and stationery under the same platform – maintain consistency across it all.

Consistency is more than just the same fonts.

Being truly consistent means following trends within elements like buttons, fonts and icons – but also within colours, layout and interactivity. Make your feedback messages the same. Keep the same shortcuts. Allow your users to develop familiarity and become confident that things will behave the same.

Be consistent with the web.

Web apps and websites have their own internal consistency – buttons are clicked, scrollbars are dragged. A house icon takes you home, a question mark provides help, underlined text can be clicked. Fail to maintain this common language at your peril – users have built up years of experience and any deviation will cause irritation and confusion.

Resist fashion trends.

The web moves too quickly – whilst you’re implementing this months trend, designers are coming up with next months. At larger firms, interfaces take years to develop – when Apple rolled out their “flat design” iOS7 the rest of the web had been using flat design for months. It was already becoming passé.

Avoid following the next trend – otherwise you’ll still be updating your apps and websites when the next trend comes around – a bit like painting the forth bridge.

Be consistent with inconsistency.

If you change something, make it clear that thing has changed. Familiar users need to be able to identify a fresh user interaction or journey so they can “re-engage” their brain and disengage their autopilot — otherwise your interface will stop behaving as expected.


6. Maintain accessibility

Allow for colour blindness.

Consider users with colour blindness (around 8% of men, <1% women).

Allow for impaired eyesight.

Present your information in a form that is accessible to users with impaired eyesight – using sufficiently large fonts, icons and other interactive elements. Clearly define the borders of objects that perform different functions. Always provide sufficient contrast in type.

Allow for fat fingers and shaky mouse hands.

Your interface needs to be accommodating for all – consider those with chunky fingers and adjust your mobile UI to suit. Don’t put the delete button 10 pixels away from the save button.

Allow for novices.

Most users are well informed, some have grown up using computers – many have dozens of accounts with popular web services. However you should always also consider the less informed, the less savvy. These users might only represent a small proportion of your total audience, but designing for them can help you simplify for everyone.

Allow for the crappiest screen and the slowest connection.

Most of us have broadband and widescreen monitors at home, but there will always be someone out there with a tiny old CRT monitor and a dial-up connection. Consider the worst environment to ensure your platform works on everything.


7. Test, then test again. And then test some more.

Test everything.

Test for the lowest common denominator. Test null states (empty pages), test populated states. Test edge cases. Test the app when the data is awkward, when the titles are too long, when there’s too much or too little. Get others to test for you – on different devices, different skill levels. You can never be too sure your interface is a good one.

Finally: Accept that you’re probably wrong about some things.

UX design requires some degree of humility. You’re bound to be wrong occasionally, and it’s at those moments that you learn the most about what makes a successful user experience.