User Experience vs User Interface Design

UX vs UI Design – Clarifying The Confusion

Tags

#UX

#UI

#design


Design is continually evolving. As the nature of the work changes with technology, so does the way we describe it. UX and UI design are some of the newest players in the ever-changing field. They’re also some of the most ambiguous, confused roles. Interestingly, the UX and UI of a product are both vital to its success. In the following, we’ll fill you in on both UX and UI, and why they’re important to your business – whether you’re a start-up or a Fortune 500.

UX vs UI: A Quick & Dirty Difference

A UI without UX is like a painter slapping paint onto canvas without thought; while UX without UI is like the frame of a sculpture with no papier-mâché on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success. Rahul Varshney, Co-creator of Foster.fm

UI Design

UI design is specific. UI (user interface) design is the design of interfaces with the goal of creating efficient, painless interactions. Think…a website’s menu. An app’s interface. The controls for an airplane. Anything that a user interacts with – either digitally or physically.

UX Design

UX (user experience) design is far more general. It’s the design of every touchpoint a customer has with a product – from the beginning to the end of their experience. As such, UI design is naturally a part of UX design.

Simply put, where a UI designer wants to create easy to use interfaces, a UX designer wants to create positive customer experiences. While a good interface is part of the overarching ‘User Experience’, that doesn’t make a UI designer’s job less important. While theirs is more specific and focussed, the UI is an essential element of any product. Still confused? Let’s take a look at the good and the ugly of both UX and UI in the real world.

The Good Vs. The Ugly

User Experience (UX) Design

The Ugly

Yale School of Art

Yale. Yep. You can thank that prestigious Ivy League school for this site. They say “…this website is the continuously evolving effort of many people from many disciplines within the Yale School of Art.” Continuously evolving – perhaps…But only if evolution was completely unchecked by natural selection. The results? This multi-colour, multi-patterned, 90s-esque horror.

To be fair to Yale, it is an open-source, collaborative site for the art department. Lesson learned? Hire a professional. The menu is disorganised. Each page is populated with blocks of text against pixelated, overwhelming imagery. You can’t even return to the home page – and forget trying to contact the school (spoiler: you can’t). Overall, this makes for a difficult, unpleasant user experience. But who knows…maybe it’s just art? Check out more horribly designed user interfaces.

The Good

WikiWand

Take Wikiwand as an example. From the clear, straightforward structuring of the site through to highly-responsive icons, the site is an example of a well-designed user experience. Not only are the basic functions smooth and seamless – the attention to detail is impressive (check out the interactive articles section!). Every element of the interface leads to a more pleasant, useful user experience. It’s no surprise the site was a nominee for The Webby Awards 2015 for UX Design.

Wikiwand Good UX Design Screenshot

Take Apple as a larger-scale example. What defines them from the rest of their tech competitors? Their user experience. From Apple stores through to their intuitive iOS, every step of a user’s experience with the company is smooth and seamless (more or less!) – and makes Apple users feel like a million bucks. Needless to say, UX design is a very important element within any company, and Apple are living proof.

Check out some more awesomely designed user interfaces. GoodUi.org also provides great information on how to create great online user interfaces.

User Interface (UI) Design

The Ugly

Photoshop

Bad user interfaces are everywhere. Look at your keyboard. Why isn’t it alphabetical? Because it’s a design invented in 1868 – for typewriters. An alphabetical layout would be quicker, but the QWERTY layout was designed to space out the most commonly used keys (to avoid clashes between said keys).

Sometimes, the most ubiquitous things in our lives have badly-designed user interfaces. Adobe Photoshop is an example. While it’s one of the most powerful image manipulation tools on the market, its interface is far from intuitive. Want to make a simple adjustment without prior Photoshop experience? Have fun googling the instructions.

Here are some more tragically bad user interfaces.

The Good

Authentic Weather

Okay, sure. It’s not 100% serious. But since when did good UI design have to be serious? The Authentic Weather app – created by Tobias Van Schneider (trust me, there’s a beard to go with that name!) – shows the day’s weather in a clean-cut, no-nonsense manner (Okay, I lied…there’s a little nonsense). Anyway, besides the dry wit, the UI of the app is impressive. Its features are simple and intuitive, and the interface is clean-cut. And - unlike other weather apps - offers you only what you need. Nothing more.

Authentic Weather UI Design Screenshot

Want more inspiration from excellently designed user interfaces?.

Why Does it Matter to You, Anyway?

As some of the newer roles popping up in the field of design, you might find yourself wondering “…do I really need a UX/UI designer? Can’t I just use a normal designer?”. To understand the importance of UX/UI, you first need to understand how design has changed.

In the early days, good design was design that ‘looked good’ and fit the client’s expectations. In 2016, good design is design that ‘looks good and works well for customers’. As such, it’s far more user-focussed. From start-ups to huge corporations, design that leads with the user’s ‘experience’ first and foremost, will come out ahead.

Good User Interface (UI) Design…

  1. Saves money (because interfaces are streamlined and require less maintenance and customer support)
  2. Creates a customer experience that’s simplified and more productive
  3. Makes money (by being more effective at converting and retaining customers)

Good User Experience (UX) Design…

  1. Increased customer satisfaction – an easier, more enjoyable customer experience = happier customers
  2. More sales and new customers – satisfied customers tell their friends and family about your products, leading to more sales
  3. Builds a deeper understanding of your ideal customers, their behaviour and their preferences (which will positively influence every strategic decision you make in the future)

Hopefully the differences between UX and UI design are cleared up for you. Remember – they’re both inherently intertwined. They’re also both essential aspects of any business operating in 2016 – big or small. If you have any questions or comments, post them below!