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.

Semi-modal view with better context

Posted: May 4th, 2012 | Author: | Filed under: Custom UI, Development, iOS, UX | 7 Comments »

For a long time, since beginning of iPhone programming, the modal view has not had any major innovation. A quick search on cocoacontrol for “modal” returns 3 types of modal view:
– Fullscreen cover-up modal view
– Centered-popup type
– Date selector modal

The context problem

Out of the 3 types, the date selector is the only type that keeps the user aware of the current context that he is in (date for which field). By contrast, the other types of modal view practically cover up the entire screen and none or little context is visible. These implementations have been sufficient so far and sometimes the developers just have to include some context within the modal itself by setting the view’s title or include some kind of static labels.

But what if we could do better by adopting the same interaction by the date selector component? What if we need to somehow keep most of the context visible while presenting user with supplementary controls for adjusting behaviors of the context?

The Park Guides app by National Geography

The beautiful Park Guides app (iTunes link) launched just recently in Apr 2012 did an excellent job in solving the context problem.

So instead of the usual fullscreen modal view/popup view/UIActionSheet, the app shows a semi-modal view on top of the current view similar to the date selector component. However, the most interesting feature of this app is the way the current context is kept visible using a nice subtle animation. Instead of simply dim the view in the background like UIActionSheet, the entire view is scale down to about 80% and pushed back like a stack, creating a unique wow effect and at the same time, more of the background view is visible to the user. This is a great new way to interact with iPhone components.

It’s best to view the effect in a video clip here (1.3MB, .mov)

When it works, when it wouldn’t

Arguably this fancy implementation may not work in all cases. If you have a long Settings modal view in your app, it is not suitable. Or if you have a modal screen with text input, it wouldn’t work at all.

Nevertheless in many of the use cases it will be excellent addition to your app. Say for example you have a long Settings screen and different Tabs in your app, you might want to consider breaking down all the settings into different places where they are being used there and then.

Another use case showed in Park Guides app is providing extra content to the current view with a modal image (2nd screenshot above), adding more context while facilitate information-hiding.

KNSemiModal

In an attempt to learn CATranforms3D for the first time and replicate the same experience, I’ve created a custom Category add-on for UIViewController that makes presenting such a custom view easy.

Here’s the post explaining the library : KNSemiModal Category for iOS

Or you can go directly to the source file on Github here UIViewController+KNSemiModal


UI responsiveness: OSX vs. Windows, iOS vs. Android

Posted: March 30th, 2012 | Author: | Filed under: iOS, UX | 76 Comments »


I started using Apple products since 2007, when I started college. I used all my savings to order a custom 15″ Macbook Pro mid 2007 model with glossy screen (back then it was default to matte). And I then adopted iPhone trend beginning with iPhone 3G. Before that I had been a long time Windows user, starting all the way from 3.1 til XP. On the mobile side, I tried all kinds of smartphones including S40,S60,WM6.0,WM6.5,WinCE, even Linux phone.

For a very long time before the Mac and iPhone, I have never had the feeling of “this is it” for any laptop or phone that I owned. But once I embraced Apple product, it just felt right. And I always find it’s hard to explain or convince someone with simply “just right” reasoning.

A few weeks ago, I came across a post on Engadget and that really helped me to put all the pieces together and explain this phenomenon. The video in the article shows a vast difference in the user experience between a 100ms and 1ms lag time. That sparked everything else in my mind for this post.

Windows vs Mac OSX, the keys

Coming from a long history with Windows, I was very surprised to see how fast OSX was. Not in term of very demanding task but in term of extremely simple and common daily tasks such as opening a folder, file, copy, moving stuff around the screen. My very first impression was that the interface never freezes on Mac. Compare that with the infamous ‘cloned dialogs‘ bug on Windows.

So I did a bit of research, trying to understand why. Turned out the problem is much deeper than I thought: Fundamentally, Windows is meant to run on as many combinations of hardware as possible, while Mac was only meant for Apple hardware. I’m not an OS-engineer but my guess is that the number of abstraction layers in Windows has to be a lot more than in Mac. Because of that the overhead is a lot more for simple tasks like user input. And so that could have lead to more processing cycles.

Until today, having to switch daily between Win and Mac on the same machine running SSD, I still feel the lags of immediate responses in Windows UI. I’m a power user, doing stuff mainly with shortcuts and seldom with mouse. Many of the times the OS couldn’t keep up with quick window switching, key presses and sometimes typing ‘stucked’ for a few seconds and then the letters just spit out all at once. It doesn’t mean these don’t happen in OSX, they do, but much less frequent and the ‘freezes’ are much shorter. That brings me to the next point.

I do think that this is extremely important because on Windows, I always have that feeling “what I typed did not seem to be registered” and makes the whole OS seems to be unreliable although it is not. However, on OSX, I don’t have this same feeling of uncertainty, instead, I have a great feeling that no matter how fast I typed or used the shortcuts, they are always executed correctly. This is partly why I always felt ‘just right’ working on Mac.

iOS vs Android, the touches

iOS was built with all the principles of OSX and back in 2007 when the original iPhone was launch it created such a long-lasting wow impression for any one coming in touch with it. While Android was introduced not really long after but the initial impression was not as successful.

There are many reasons to that but personally I would love to credit that success to how responsive the UI on the device was compare to others at its time. As I mentioned, I was early adopter for many mobile platforms and the common (bad) trait of all of them was the huge delay of the interface, from the time you touch the screen to the time something happens.

Despite being a now-dead-slow device, the original iPhone has two extremely important features that are still very fast compare to today’s standards: touch response and responsive scrolling. The device immediately shows something, either a change of color or a glow effect when you touch the screen; and continuous dragging on the screen maintains the same pixel position relative to the finger. Both of these were poorly implemented in other mobile platforms and I would say in the early Android 1.x platforms as well.

That’s why I think Apple nailed it and started the mobile device revolution that are easy to use and great to the touch.

My UX principle: show something, anything

Among many UX principles that I derived from years of using Apple products, there is one that is directly related to this post and it’s not very hard to do: Show something, anything!

What that means is for any user interaction event, on web or mobile or desktop app, you need to show a change in interface. Anything. As long as it gives the instant feedback to the user that their action has been acknowledged and the system is processing the request.

This is even more essential in mobile app or handling network requests because they are always slow. Changing button color, showing an animated indicator, faking partial result list, … are all interface tricks that gives the impression of a fast application.

In one of my applications (Denso), I did use a lot of these tweaks to make the app feels a lot more snappier. Being an internet app, it has to make many network requests to different servers, no matter how fast the device could get, network latency is always a tough issue to handle.

Windows 8 could be something

I’m not bias against Windows or any OSes, I’m just stating my observations as a power user.

In fact, the Microsoft prototype video above was very impressive, not only that, just a day before this post, another Microsoft video became trending : Microsoft explains why Windows 8 touchscreens will be better. It is definitely a great showcase and I think Microsoft, with Windows 8 coming soon, is getting somewhere this time.

Also, Windows Phone 7 is a big step up for Microsoft’s mobile platform. I was very impressed with the responses of UI on the Lumia 800. I have not been using WP device extensively but I think finally MS got it right to the touches.