Can someone please help me to formally define the difference between User Interface and User Experience?

I need to come up with a definition so that if ideally two different people were to be assigned to UI and UX on the same project it would be clear which responsibility each of them would have.

8 accepted

This is an interesting article discussing the issue with a non-technical example.

From Wikipedia:

  • User Interface - The aggregate of means by which users interact with the system (e.g., all the means of input and output)
  • User Experience - The architecture and interaction models that impact a user's perception of a device or system ("all aspects of the user?s interaction with the product").

So it seems like UI would deal with the "how" of creating an interface (implementing shiny controls, that sort of thing) and UX would deal with the "why" (creating a good experience for the user).


(1) UI User Interface literally means "user between face." Put simply, it means how the user "faces" the system/app and how the system/app "faces" the user. A good UI example is the old home page or first page of Google search. With one text box and one button, that UI cannot go wrong. A bad UI example is a web page where you can't easily find the link or button you need to do your job, where there are more than 3 cilcks from a place to place on the site.

With both these good and bad UIs, we can pass judgement even before we know how they work or respond. Just by the look, just by the layout and the display, we know the app/system in question is somehow right or wrong.

It's like how a store displays its items: lighting, shelf height and width, isle width and lengths etc. You don't need to know yet its prices, services, refund policy, etc. UI is thus about the surfaces.

(2) Interaction Interaction literally means "between action." Put simply, it means how the user "acts" on the system/app and how the system/app "acts" on the user. Here, I borrow heavily from Chris Crawford's book I mentioned in my previous answer. He postulates that a good interaction resembles a good conversation, and that a good conversation has the 3 essentail attributes, which I will explain in the example below. He says a good interactive participant "listens," "thinks" and responds within a reasonable interval.

To carry on with the Google search example, suppose I copy Google's UI 100%. Thus, my UI at least must be as good as Google's UI.

But what about the interaction?

First, consider "listening." Suppose you intend to type in "new york mayor biography." But once you've just typed in "new york," my app clears the text box for the search, and shows what it thinks you are searching for. You have to race, type fast, type faster than my app can respond. The app isn't listening to you, the user, at all.

Second, examine "thinking." Suppose my search engine app does "listen" to you. But, it doesn't bother to "think" but responds "thoughtlessly." Suppose you type in "new york mayor biography" and you get a list of links for New York Times issues, New York real estate agents, schools in New York, museums in New York, and so on.

Third/finally, take "speed" or responsiveness. Now, suppose my search engine app does "listen" and "thinks" but takes time. It takes your input seriously, it comes up with relevant answers when it does but you have to wait from 3 to 30 minutes for the answers to any search query.

According to Chris Crawford, and as you can see from the examples, once any one of the 3 dimesnions is lacking, the quality of the interaction suffers.

It's like how a store carries out its backend functions. The same holds true for softwares.

(3) UX X stands for "experience" here. Again, let me go with an example.

To carry on with the Google search example, suppose that my UI is perfect, and that my app's interaction is fine too. In other words, suppose that my search engine app is 100% as good as current Google in terms of UI and Interaction.

Does that mean I have the same UX as Google does? Given the identical UI and the identical interaction, how can the UXs differ? Can they diifer at all?

Yes, they do. Suppose you know (actually you don't need to "know", just "feeling" or "suspecting" is enough) that I collect your IP address, your identity and your search terms, and that other people can get access to this knowledge. Whereas you use Google with relative comfort, won't you fee uneasy about your privacy while using my app? Won't you become a tad paranoid?

That's UX. Same UI, same interaction, ... yet, you "experience" different things, feelings, emotions, moods, and so on. That's UX.

It's like a store that you know or "feel" expoits child labor, that you know or "feel" pays only lip service to the green issues. Same shelves, isles, items. And same staff and services, ... yet, different experiences. It's the "experience chain," a key concept from the second book I mentioned in my previous answer.

Please read both books, whether you are doing games or shopping carts or malware intrusion detection.




Nice explanation User Interface (UI) vs. User Experience (UX)


Do you mean user interface design or user interface development?

It doesn?t make sense to me to divide labor between ?user experience? and ?user interface design,? because user experience includes user interface design so there won?t be clearly separate responsibilities. They pretty much require the same skill set, with UX having a somewhat broader scope.

  • User interface design includes everything in the product that comes in contact with the user: content, information representation, controls, feedback, visual design, layout, structure and links among pages/windows, and so on.

  • User experience includes everything about the product that comes in contact with the user, including all the above, plus its purchasing, packaging, installation, customer and technical support, and branding. Yes, UX overlaps with marketing as well as user interface design.

It does make sense to divide labor between user experience and user interface development. The UXer (or user interface designer) creates the wireframes and specs for the UI and the developer implements it in code. Designing a UI/UX (e.g., via user-centered design) is a distinct skill set from developing it (e.g., via HTML, PostgreSQL, and AJAX), although some people have both sets.

Otherwise, you need to look at each individual?s skill set to best decide how to divide responsibilities. For example, the inexperienced UXer/designer can take direction from the senior UXer/designer. Or the one with a stronger background in graphic design can do the visual design, while the one with a stronger background in information architecture can do the application structure. Whether they call themselves a ?user experience specialist? or ?user interface designer? doesn?t matter much.


Compare and contrast

Here's a freshly minted blog post about UX myths you might find interesting too.


The user interface is the means by which you provide a user experience; it's the I/O, where you put the screen elements and what screens/screen elements there are. Defining the user experience involves cognitive walk-throughs and heuristic evaluations. However, you cannot forget that the architecture of your system can influence the experience. Is the system fast or slow? Can an action be canceled or undone?


User Interface is the part of the application with which the user interacts to operate the software. User Experience is resultant experience of operarating the User Interface


Given those two positions, UI could be considered the more 'mechanical aspects' - that is, building the UI, making it all work together nicely.

UX is more about actually determining if this is a good UI. Is it intuitive? Can a user grasp easily how to make it do what he needs? Can all important tasks be done simply?

Perhaps a good analogy is UX being more architecture, while UI being more construction. Of course, if there is no UX person, the UI person tends to take on that role as well.


UX: where to put your elements corresponding to priorities. "NOTE: elements must match user needs not OWNER or CLIENT NEEDS :'( " UI: how to appear these elements on website.