Sean Connelly

Personal Website and Blog

UX vs. UI Infographic – The Difference Between User Experience and User Interface

This entry was posted on Thursday, October 18th, 2012 at 4:44 pm, and it's filed under Blog.

Last week, I wrote a post about writing project requirements, and in the process found this awesome little infographic on the difference between User Experience and User Interface. It’s such a great way of representing the subject of UX vs. UI that I felt like it deserved some deeper explanation and accreditation.

The infographic uses a bowl of cereal as an example, and breaks down the difference into 5 major sections:

1. The Product

All of the puzzle pieces that exist to the user. First, let’s lay out all of the components that make up our end-product. We have a bowl, some milk, a spoon, and the cereal itself — everything that the our hungry breakfast-eater needs to fill their belly in the morning.

2. The User Experience – UX

The whole puzzle, ready to consume. Now that we know all of the puzzle pieces that make up the product, let’s assemble them in a way that the user can understand. Cereal goes in the bowl, the milk gets poured on top, and our spoon gets placed — spoony end down — in our bowl full of goodies. As we present our user with the product, they will see the spoon handle and understand exactly what to do next. **nom nom nom** When the cereal is all gone, they inherently stop eating. Great experience.

3. The User Interface – UI

The puzzle piece(s) that our user needs to get the job done. Enter the spoon. It’s the actionable piece to the puzzle. Our user interfaces with the cereal by dipping the spoon, scooping out some crunchy goodies, and eating. Without this interface element, our user would be stuck with a poor/incomplete user experience. To relate this problem to the web or mobile landscape, imagine a sign up form on a website with no ‘Submit’ button as an interface element: you can fill out the form, but then what? If you hand someone a bowl of cereal with no spoon, they’ll have to either stare at it and go hungry or come up with their own solution, which will probably be crappy (drinking from the bowl and spilling milk/cereal all over themselves would). Deliver a crappy interface and you’ll get a crappy experience.

4. The Server

One subset of data that can be served and re-served. Ideally, milk would be in this image next to the cereal. Our user just finished their first bowl of cereal, but they’re still hungry. Their current experience is an empty bowl and a spoon. If we re-fill the milk and cereal portions, they will once again have a complete user experience and be able to eat another bowl of cereal. We reach to our server, and re-build our end-product.

5. The Datacenter

All subsets of data that can be served and re-served.Imagine the refrigerator containing milk as another datacenter. This is our area of mass storage — our database. We have a couple of different cereal boxes, and then some containers that have a mix of cereal. If we need to change the type of data being displayed or consumed (cereal and milk in the bowl), we look to our datacenters (cabinet and refrigerator). Maybe the user wants to switch the second bowl to granola and soymilk. I think you get the idea. Here’s the infographic:

UX vs. UI Infographic taken from this post on Design.org
ux-ui-infographic

  • http://twitter.com/S_2K Stephan

    Nice post.
    Concerning the milk next to cereal issue: They’re coming from different servers, that, well, serve different needs (dry storage vs. cooled storage for your breakfast ingredients).

    In real life there may be an SQL database for most of the stuff, but some key-value-storage for others or something using LDAP…

    • http://seanconnelly.me/ Sean Connelly

      Valid point. Maybe the user likes milk fresh from the cow, and their neighbors have a dairy farm. Enter the RESTful API!

  • extremekc

    Very nice – although I think the UX image should include the “USERS” hand on the SPOON

    • rahil

      Nailed it.

  • http://www.facebook.com/1tiagosantiago Tiago Santiago

    great :)

    • http://seanconnelly.me/ Sean Connelly

      Thanks, Tiago :)

  • Dhruva Chopra

    Very nice interpretation.. i like it Cheers ;D