Some people use the words UX and UI interchangeably as if they are one and the same. Let’s find out how different they are and why people seem confused by it.
UI(User Interface) is easy to explain: It is simply what the users will see.
Say you are designing a login page for your iPad app. Your UI designer would create a nice photoshop visual like this:
Or for an iPhone app they might design something like this:
(Good) Designers have a pretty good sense of the color scheme and do an excellent job of matching the right colors with the rest of the app (or site).
You might think that this is sufficient information to hand over to a developer so that they can start coding. You would be soooo wrong !!!
Those visuals do a good job of highlighting how the page looks like but they really leave the door open to a lot of interpretation.
Let’s look at UX (User Experience)
A good UX deliverable often includes a set of documents such as:
- Site flows and navigation maps (sitemaps)
- And a lot of useful notes next to the wireframes.
- UI Designs (YES YES YES - UI designs are actually a part of the UX deliverables)
You might choose to develop the wireframes and focus purely on the UI design. If you do so, don’t forget to include the notes on the right.
Let’s look at another wireframe example.
Let’s zoom in on the contents on the left side:
Notice that the notes talk about the overall workflow on the page. It highlights the items that are grayed out, how the filters work, how the dialog box opens up.
Page flow diagrams are also very important to describe a UX properly. Here’s an example:
UX design is a very important deliverable from a Product Management point of view.
UX designs includes several artifacts including:
- UI Designs
- Page Navigation Map
- WireFrames + Useful notes that talk about the small little use cases
Now User Stories, Storyboards, Scenario Diagrams, Style Guides, Use Cases and Powerpoint Presentations are also sometimes considered to be part of the overall UX deliverable.
Anything can be considered UX.
Anything that helps in defining the user workflow and experience can be considered UX. Go crazy with it !!!