{"id":562,"date":"2012-06-06T09:52:53","date_gmt":"2012-06-06T16:52:53","guid":{"rendered":"http:\/\/blog.mozilla.org\/ux\/?p=562"},"modified":"2012-06-06T09:52:53","modified_gmt":"2012-06-06T16:52:53","slug":"whats-the-difference-between-ui-and-ux","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2012\/06\/whats-the-difference-between-ui-and-ux\/","title":{"rendered":"What’s the difference between UI and UX?"},"content":{"rendered":"

Two weeks ago we were honored to have Brandon Schauer<\/a>, Adaptive Path’s CEO, come speak to us about the difference between User Interface (UI) and User Experience (UX).\u00a0 UX designers and researchers often say that UX is the most important element, and therefore a great UX and mediocre UI trumps a product or service that has a great UI, but mediocre UX.<\/p>\n

But can there ever be bad UI and awesome UX?\u00a0 Doesn’t a good interface automatically make you have a good experience?\u00a0 Not always.\u00a0 Virgin America is a prime example – the overall experience is pretty great – from booking a flight to finding your seat in the plane – but then when you go to order a meal or pick a radio station to listen to the on-flight interface sucks.\u00a0 You’re forced to scroll through options only 5 at a time and sometimes your touch screen doesn’t work.<\/p>\n

\"\"<\/a>And what about Home Plus, the Korean supermarket, that was a panel of images with QR codes in subways<\/a>? This allows busy commuters to buy food in the subway and get it deleivered to their homes.\u00a0 If the interface wasn’t strong, the whole experience end-to-end wouldn’t be realized, so here the experience relied heavily on the interface.<\/p>\n

\"\"<\/a>Brandon called out three ways to untangle a user experience problem:<\/p>\n

1. Context of the Experience<\/strong>
\nThink of the journey from the customer’s perspective.\u00a0 If this journey is happening over time and channels, then create an experience map<\/a> to show what the user is thinking, doing and feeling throughout the whole experience.<\/p>\n

2. Rules of Engagement<\/strong>
\nExperience Principles are guidelines for the interaction of the service.\u00a0 Much of a UI is dealing with how the service looks and feels and the voice and tone, but where many products are lacking is in the experience principle area.<\/p>\n

\"\"<\/a>
\n3. Measured Delivery<\/strong>
\nFigure out how to ship “cupcakes” to customers, not the bare cake as v1 and then the filling as v2 and then the icing as v3.\u00a0 Customers don’t think like that.\u00a0 Ship a product that has a little cake, a little filling and a little icing and then your next release can be a larger cake.<\/p>\n

\"\"<\/a>And of course we need to be concerned with the experience of the first run, since that is the first impression a user has with our product.\u00a0 However, another way to look at it is to building products in which we can delight customers at the peak and end of their experiences.\u00a0 According to Daniel Kahneman’s peak and end rule<\/a>, we judge our experiences almost entirely on how they were at their highest peak – whether that was pleasant or unpleasant –<\/em> and how they ended.<\/p>\n

\"\"<\/a>Thanks again Brandon for visualizing so clearly the differences between UI and UX – we’ll be referring to these slides<\/a> quite often!<\/p>\n","protected":false},"excerpt":{"rendered":"

Two weeks ago we were honored to have Brandon Schauer, Adaptive Path’s CEO, come speak to us about the difference between User Interface (UI) and User Experience (UX).\u00a0 UX designers … Read more<\/a><\/p>\n","protected":false},"author":308,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,1],"tags":[],"coauthors":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/562"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/308"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=562"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/562\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=562"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}