UX ≠ UI

Posted: May 10th, 2012 | Author: | Filed under: iOS, UX | 6 Comments »

(My free set of personal namecards from moo.com)
This post is a guest post written for Inspired Magazine on the same topic of understanding user experience.

What is UX?

UX stands for User eXperience. A little more comprehensive would be: the entire interaction that starts even before your user uses your product until long after.

I don’t remember when I began to hear the term UX, but definitely not when Windows eXPerience was introduced. I’m pretty sure all the hype about having great UX just started within the last two years. Before that, everything I knew about making websites emphasized mostly on good UI. But now, it’s simply not enough. What ever you do, it has to have great UX.

What I think UX really is

To me, every little details make up the entire experience and not just what you see. Putting that into a website/app context it would mean tons of things: how your users got to know about your site? is it easy to download your app or get to your site? is it a simple series of actions to start using your service? do you have a way to guide and help the user in the beginning? are your buttons at where the users expect it should be? do the buttons have the glow effect when you touch them? What if their network has problem, how do you tell them? How many clicks before they would get to do what they want to do? What if the user need to contact you? do you have support service? etc… the list is endless.

UX is about the entire experience, UX is about satisfying the needs of your users, make them feel comfortable using your service. While UI is simply the visuals.

I recently attended a seminar by Ben Hamey from Bonono and in his slides, the exact words are “User experience is anthropology, psychology, usability, research, behaviour, graphic design”. I couldn’t agree more.

UX ≠ UI

Great UI does not mean great UX
Bad UI does not mean bad UX

The full-flash hotel sites or wedding planner sites are usually designed by actual artists, and that’s why they are very cachy, interesting. But what puts me off most of the time is the slow loading time, frequent crashes and because the navigations are so unconventional that I don’t even know where to click to get information. It’s easier to give up and find another site than to spend time figuring out.

On the other hand, sites like Craiglists, HackerNews have very poor text-based UI, but they have excellent UX because they do exactly what the users expect them to do, fast!.

Craiglist is simply a place to find and sell used things, as long as I can post my old TV or buy a used bike, I’m happy with it. I don’t care if it is a pure text action link or a fancy button. I just want to get over it quickly.

Some might strongly disagree with me that a site with bad UI can’t have great UX. Well, a few millions users per day couldn’t be wrong. People just love getting things done easily and quickly. You might want to do that in style, but it’s just you, not the other millions.

And ofcourse there are full of examples of bad UX. I found this interesting recent article that describe exactly what I wanted to say about the state of business software: What’s the waiter doing with the computer screen?.

How I learnt UX

When I first got my iPhone 3G, it was simply wow at first sight of the UI. However, only until a few months later I started to realize the passion to make great software and stop making crappy websites. There wasn’t much resources on the Internet about UX back then and even I didn’t quite fully understand the term itself like I defined in this post.

So I tried and failed, at the beginning it was mostly the desire to create nice UI, but that wasn’t enough, there was always something missing in the works I’ve created. I was too focused on a single page at a time and didn’t see the big picture. I downloaded tons of apps on the phone. Some good, and a lot of bad apps. I started to pay attentions to extremely small details on the screen.

Then one day, I spent 15 minutes just to examine transition of the header when “Back” button is pressed and that’s when everything kicked in. I started to see that it’s not about any single element of the design or the whole design, it’s about how things are connected together and those tiny invisible links matter more than the entire UI.

From that day, whenever I hear about a new app, I search for it, look at the website, then the copywriting and design/navigation of the website, then download the app, try to make it fail, try to stop the registration process half way and resume, try to break the best case scenarios or closing the app while it’s doing some heavy processing, etc… I began to spot a very distinct pattern between a great app and a normal or bad app. The best apps handle all those disruptions extremely well and I can always pick up from whatever I did (wrong).

The truth is that it takes a lot of effort to create such a seamless experience and it’s not something developers especially the beginners want to be doing. Implementing great custom UI is hard enough, creating a seamless transition between actions requires solid but flexible architecture.

To sum it up, if you want to learn how to create great UX, begin downloading apps and inspect them with a microscope today!

If you like my stuff, do checkout the iOS custom UI components that I wrote by checking the links on the right side bar. Perhaps that would save you some time when developing your killer app.

  • http://twitter.com/Grinblo Evgenia Grinblo

    Great post. I absolutely love the last sentence. Especially because it emphasizes once again that there is a logic/ science to UX which requires broad thinking, strategy, and insight into the empirically-observable. Thanks for sharing this!

  • http://www.facebook.com/paulnowosielski Paul Nowosielski

    Great points! This is exactly how I started out as well!
    UI/UX is everything!

  • http://www.twitter.com/shacked_up Shacked Up Creative

    Great article!

  • Pingback: UX and Scrum Part 2: What Not to Do - Chris Steele on Agile

  • Tuan Le Anh

    Thanks for sharing. Great post!

  • http://www.facebook.com/AenTan Aen Tan

    I don’t really like the notion of UI = screen and UX = flow. The UI is what the user interacts with and should thus encompass the flow. UI happens in the product and UX happens in the user’s mind. Here’s a diagram to illustrate the roles of the said actors http://mocku.ps/2upc3c.

    Apply Craigslist to this and it explains why Craigslist has great UI and UX despite shitty graphic design, and why it’s not a strong brand (people who post on Craigslist also post elsewhere).

    Another equation I like is UX = UI × Content. UI is simply an enabler (or disabler) of content. The better the UI, the more content can be used and the better the UX.