Kate Williamson and Cait Vlastakis Smith — UX Designers at Centerline Digital — explore the differences between UX and UI. Good UX is the manifestation of deeply understanding people. Learn more at: http://www.centerline.net

1. What’s the difference?
@caitvsmith | @kateawilliamson
vsUX UI

2. UX = USER EXPERIENCE
UI = USER INTERFACE
USER EXPERIENCE = USER INTERFACE

3. UI
A USER INTERFACE IS:
• A TOOL
• A POINT OF INTERACTION
• A MEANS OF COMMUNICATION BETWEEN PERSON AND SYSTEM

4. UX
USER EXPERIENCE:
• IS THE INTERACTION ITSELF
• INCLUDES INTERFACES
• ADDRESSES ALL ASPECTS OF A THING AS PERCEIVED BY A PERSON

5. CONTENT
ALL TOGETHER NOW...
Images and concept modified from Ed Lea’s infographic at:
http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal
USER INTERFACE USER EXPERIENCE
What people are looking for. The tool that serves it up. Consumption.

6. Let’s apply this to a website.

7. This is a button.
It’s one element of an interface.
PRESS ME
You know you want to.

8. All these elements together on a
screen make up a UI.
American Express Open Forum Website

9. Why is “My Account”
located here? Why are these
specific topics
highlighted?
Why is it important to
highlight social sharing
here?
Why are these the
related key words?
Why is some
content hidden
behind this menu?
UX answers the “Why?”
Why is there a Log In button?Why is it important to make “Rewards”so prominent?
Why do we assume
readers would also
like this content?

10. Where do you find the
answers to “why?”

11. UXPeople. Good UX is the
manifestation of deeply
understanding people.
Aka: “Users”

12. Adaptive Path Experience Map featured at
http://adaptivepath.com/ideas/the-anatomy-of-an-experience-map
What understanding people
looks like:

13. What do UX people do?

14. EXPLORATORY DEEP DIVES
THROUGH:
What UXers Do
• Interviews
• Content/IA* Audits
• Analytics Analyses
• Usability Testing
• Competitive Analyses
{And more...}
• Personas
• Messaging Frameworks
• Experience Maps
• Site Maps
• Sketches/Wireframes
• Storyboards
{And more...}
GUIDING SYNTHESIS DOCUMENTS
FOR DESIGN, SUCH AS:
The Outputs
*IA = Information Architecture

15. Tuning Your UX Ear
• We’re not sure what people want/need.
• All our content is a mess.
• We don’t know which content resonates most.
• It’s hard for people to find what they need.
• People have a hard time using [fill in the blank].
• Interviews/market research/surveys
• Content audit/restructured information architecture
• Analytics analysis
• Information architecture audit + restructuring
• Usability testing/re-design
These methods are good high-level starting points to further define
the problem. Using more than one discovery method in tandem will
reveal a deeper understanding of the meaning behind your findings.
The depth of these methods will vary depending on needs.
WHAT CLIENTS SAY: WHAT WE HEAR:

16. WHAT DO YOU WANT
TO MAKE?
WHAT DO YOU WANT
TO ACHIEVE?
UX requires reframing this question:

17. WHAT DO
YOU
WANT TO
ACHIEVE?
• Satisfied customers
• Engaged prospects
• Smarter, more relevant content
• Seamless usability
• Improved site engagement
• Social shares
• Word-of-mouth marketing
• Brand recognition
• Long-term customer relationships
built on mutual respect

18. THANK YOU!
Connect here:
Here:
Here:
And here, too:
centerline.net
@caitvsmith
@kateawilliamson
@centerline