Learn to speak designer: UI & UX basics

It’s not always easy talking to a designer, we can be a confusing bunch. What on earth are we talking about when we say things like “below the fold” and “information taxonomy”? Surely we can just speak plain English when designing an app or website?.

I like my clients to feel completely comfortable and up to speed when I’m working with them, so I actually tend to avoid using too much jargon. UX and UI specialists come from all kinds of backgrounds rather than just graphic design, all with their own frame of reference, so using catch-all terminology is a bit of a fallacy. But here are some clarifications of phrases that I use regularly, as well as some great online resources that give more detailed explanations of UI and UX basics.

UX is not UI – or is it?

People often mix up UX and UI, and designers like me who do a little of both don’t help matters. They are commonly perceived as different practices, with the accepted wisdom being that UX is about how the user feels, UI is about what the user sees. When I’ve got my UX hat on I’m working out how a user might behave and designing a product that gives them an enjoyable, intuitive experience. In UI mode I’m creating visual elements that communicate with the user so they access that great experience. When I’m enjoying getting thoroughly stuck in to a project, I have both hats on and it can be when I’m really at my best.

Recently, this medium article by Mike Atherton really summed up how a lot of UI/UX designers secretly felt about the “UX is not UI” argument. And if you need more info, Fast Company design have created this brilliant guide to the different types of designer you might encounter, including UX and UI designers.

The tap is a common UI/UX analogy – it’s real shiny looking so the UI is good, but if the water pressure sucks or there’s a queue to use it, that’s bad UX…allegedly

User flows – more than getting from A to B

When designing an app or website, we already have preconceived ideas of what our users will do. So when I talk about user flows clients often assume I mean a single flow that takes the user exactly where we expect them to go. In reality, we humans like to bimble about the internet in mysterious ways and my job is to design for this, so that the user doesn’t get lost or frustrated.

To summarise, there are often numerous interconnected user flows within a single web site as explained by Tech Republic.

Wireframes – do what they say on the tin

Wireframes are simply a line drawing or wire frame of each page in an app or website. Wireframing is a process used in the early stages of prototyping a product. Whether drawn by hand or in my preferred program Sketch, they all serve the same purpose; wireframes visualise how information is laid out, connected and accessed. I usually start with the wireframes on my whiteboard as it gives me lots of space to connect the pages.

Usability.gov cover wireframes in more detail including how to approach creating them.

Wireframes are exactly that – simple 2D line drawings of a page in an app or website.

UI toolkits – a fridge full of design ingredients.

Colours, fonts, styles, icons, buttons, – these are design elements that make up the visual language of an app or website. If you want to bake an amazing user interface you need the right ingredients, and UI toolkits can offer this. They can be designed from scratch or bought off the shelf. Remember that the ingredients are only half the process, you need a good chef and a great recipe for a delicious UI cake (I think that’s that metaphor well and truly used up!). In my experience UI toolkits can offer a cost effective solution for updating UIs, but work best if they’re implemented by someone who really knows their users.

Check out some UI toolkits on Dribble for inspiration, there are plenty to take a look at!

Usability vs Accessibility – user friendliness for all

Another pair of terms that can be accidentally interchanged by people new to design. Back in the day they may well have been respectively referred to as “user friendliness” and “inclusivity”. Usability is about ensuring that your users can easily work out how to achieve what they need to on your website or app. Accessibility refers to how easy it is for users with different backgrounds or abilities to also achieve what they need to. The two do not always go hand in hand as I’ve learnt recently when designing for people with low vision. For instance, keeping a clean interface by having links change colour when users hover over them just doesn’t work for someone with colour blindness.

Usabilitygeek.com talks about how the two terms differ and overlap here.

—-

These are very common terms and this is in no way an exhaustive list. Communicating clearly with customers that have no experience in digital design and development is really important to me, so if I spurt out any minion gobbledygook feel free to stop me! And in turn, if you’re embarking on commissioning some UI/UX design, its worth doing basic research so that you feel comfortable and in control.

Are you a designer that has to resist the urge to use jargon? Or have you worked with designers that made you feel the need to swot up? Let me know in the comments or tweet me your thoughts – I’m @zer0mike

——————————————————————————————-

Mike Hince is a UI & UX Designer and the co-founder of Bossanova Design.