What the heck is UX/UI?
Ever heard the terms “UX” and “UI” in regards to website and/or app design? A lot of people use the terms interchangeably, but there’s a big difference – and both can have a big impact on your business. Here’s the difference between the two and how you can harness both to delight your customers.
But first, the definitions:
UX = User Experience
How something functions
UI = User Interface
How the experience should look
SO let’s put that into context of something we’re all familiar with: an iPad. In this example, the user experience of an iPad is a touchscreen that uses gestures to move and access things. The user interface of an iPad is the design and layout of the screen’s contents.
Why People Confuse The Two
Now that you know the definitions, it seems easy enough to distinguish the two. So why are the terms so often misunderstood?
Well, as a concept, UX has been around for … well, as long as people have been thinking about and building stuff. Developing a ‘user experience’ is not necessarily limited to the digital realm. Prior to computers, UX planning always had to come first when developing a product. For example, the user experience for driving a car is through a steering wheel. Nobody is going to design what a steering wheel should look like and then figure out what it should control.
In the digital realm, however, actions and interaction with content requires a visual interface. The nature of a website or app UI is essentially positioning elements on a layout, so yeah…you actually could end up designing what it should look like before you’ve considered how it should function. It might even look awesome…but it also might be a pain in the butt to use.
The Classic Blunder
Let’s use a restaurant website as an example of how good UI doesn’t necessarily mean a good user experience.
Scene: you’re starving and ready to order takeout from a restaurant you’ve been hearing about. You go to their website looking for the phone number or maybe their hours. Instead you are presented with a useless (albeit, gorgeous) display of imagery. Maybe there’s even a video playing. You scroll some more and are then presented with the full backstory of the chef’s childhood trauma’s and inspirations. All you want is JUST GIVE ME THE DAMN CONTACT INFO!!
This is a classic example of a beautiful user interface, but a very bad user experience. So what’s the best way to plan for good UX and good UI?
Planning For Good UX
Ask The Questions
UX planning is a much more analytical approach. When trying to determine the best UX approach, you’ll want to consider questions like:
What problem are we trying to solve?
What does the user need to achieve?
What are the pain points users have accessing what they need?
Is there a simpler approach to getting the user to the desired outcome?
Get Some Feedback
You may not have the answers to those initial questions yet, so a lot of these questions will naturally lead to getting some feedback. Survey your users, or host focus groups – even if it’s just a small ‘friends and family network’ and get some feedback on what the user wants.
If you already have something in use, analyze your usage analytics. Look for patterns or pain points – if your most popular content is three clicks deep, maybe it should be on your homepage instead.
Start Planning
Once you have some insights, start by planning your information architecture (which is a fancy term for ‘organize the content you need to share). You can use software designed especially designed for this task or keep it simple and use sticky notes and string, CSI-style!
No matter what tool you use, The beauty of planning out your information architecture ahead of time is that it forces you to think about all the things and how it should be organized.
Start Organizing
With answers and an idea for what information you need to communicate, it’s time to start wireframing.
Wireframes are low-fidelity layouts that help you quickly determine how content should be organized for the best user experience. The beauty of wireframes is you don’t have to get bogged down with design decisions. It allows you to rapidly layout items and objects and then iterate on them quickly to determine the best experience for the user.
Planning For Good UI
Ask The Questions
UI planning is a much more creative approach. When trying to determine a look and/or feel for a user interface, you might ask yourself questions like:
How will the user find the desired action on the screen?
What’s the most critical item for a user to see on screen at this point?
How can we make this specific or important information more clear to the user?
Start Exploring
To answer some of the questions above, it might be time to start exploring things like color palettes, typography and icons or images. The way you style your text and position things on the screen can have a huge impact on legibility and clarity of intent.
Start Designing
With the results of all these efforts, you should have everything you need to begin designing hi-fidelity mockups. This is the process of taking the wireframes from your UX planning and apply a visual design to them.
This is the part of the process where every design detail does matter. The more thought you put into the hi-fidelity process, the less room for error when you hand designs off to a development team to build.
Build A Mockup
The mockup or prototyping process is the last step in identifying any gaps or unforeseen pain points in how your users will interact with your website or app.
Using a tool like InVision or Sketch will allow you to load your static hi-fidelity designs and link them together with clickable ‘hotspots’ that simulate what it would look and feel like to navigate through an app or website project.
If it looks and feels right after walking through the prototype process, you know all your hard work has paid off! You can hand the project over to a development team to build knowing that all the details have been considered – and your users will thank you for it.
