What’s the difference?@caitvsmith | @kateawilliamsonvsUX UI
UX = USER EXPERIENCEUI = USER INTERFACEUSER EXPERIENCE = USER INTERFACE
UIA USER INTERFACE IS:• A TOOL• A POINT OF INTERACTION• A MEANS OF COMMUNICATION BETWEEN PERSON AND SYSTEM
UXUSER EXPERIENCE:• IS THE INTERACTION ITSELF• INCLUDES INTERFACES• ADDRESSES ALL ASPECTS OF A THING AS PERCEIVED BY A PER...
CONTENTALL TOGETHER NOW...Images and concept modified from Ed Lea’s infographic at:http://design.org/blog/difference-betwee...
Let’s apply this to a website.
This is a button.It’s one element of an interface.PRESS MEYou know you want to.
All these elements together on ascreen make up a UI.American Express Open Forum Website
Why is “My Account”located here? Why are thesespecific topicshighlighted?Why is it important tohighlight social sharinghere...
Where do you find theanswers to “why?”
UXPeople. Good UX is themanifestation of deeplyunderstanding people.Aka: “Users”
Adaptive Path Experience Map featured athttp://adaptivepath.com/ideas/the-anatomy-of-an-experience-mapWhat understanding p...
What do UX people do?
EXPLORATORY DEEP DIVESTHROUGH:What UXers Do• Interviews• Content/IA* Audits• Analytics Analyses• Usability Testing• Compet...
Tuning Your UX Ear• We’re not sure what people want/need.• All our content is a mess.• We don’t know which content resonat...
WHAT DO YOU WANTTO MAKE?WHAT DO YOU WANTTO ACHIEVE?UX requires reframing this question:
WHAT DOYOUWANT TOACHIEVE?• Satisfied customers• Engaged prospects• Smarter, more relevant content• Seamless usability• Impr...
THANK YOU!Connect here:Here:Here:And here, too:centerline.net@caitvsmith@kateawilliamson@centerline
Upcoming SlideShare
Loading in...5
×

Centerline Digital - UX vs UI - 050613

31,063

Published on

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

Published in: Design, Technology, Education

Centerline Digital - UX vs UI - 050613

  1. 1. What’s the difference?@caitvsmith | @kateawilliamsonvsUX UI
  2. 2. UX = USER EXPERIENCEUI = USER INTERFACEUSER EXPERIENCE = USER INTERFACE
  3. 3. UIA USER INTERFACE IS:• A TOOL• A POINT OF INTERACTION• A MEANS OF COMMUNICATION BETWEEN PERSON AND SYSTEM
  4. 4. UXUSER EXPERIENCE:• IS THE INTERACTION ITSELF• INCLUDES INTERFACES• ADDRESSES ALL ASPECTS OF A THING AS PERCEIVED BY A PERSON
  5. 5. CONTENTALL TOGETHER NOW...Images and concept modified from Ed Lea’s infographic at:http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cerealUSER INTERFACE USER EXPERIENCEWhat people are looking for. The tool that serves it up. Consumption.
  6. 6. Let’s apply this to a website.
  7. 7. This is a button.It’s one element of an interface.PRESS MEYou know you want to.
  8. 8. All these elements together on ascreen make up a UI.American Express Open Forum Website
  9. 9. Why is “My Account”located here? Why are thesespecific topicshighlighted?Why is it important tohighlight social sharinghere?Why are these therelated key words?Why is somecontent hiddenbehind 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 assumereaders would alsolike this content?
  10. 10. Where do you find theanswers to “why?”
  11. 11. UXPeople. Good UX is themanifestation of deeplyunderstanding people.Aka: “Users”
  12. 12. Adaptive Path Experience Map featured athttp://adaptivepath.com/ideas/the-anatomy-of-an-experience-mapWhat understanding peoplelooks like:
  13. 13. What do UX people do?
  14. 14. EXPLORATORY DEEP DIVESTHROUGH: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 DOCUMENTSFOR DESIGN, SUCH AS:The Outputs*IA = Information Architecture
  15. 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-designThese methods are good high-level starting points to further definethe problem. Using more than one discovery method in tandem willreveal 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. 16. WHAT DO YOU WANTTO MAKE?WHAT DO YOU WANTTO ACHIEVE?UX requires reframing this question:
  17. 17. WHAT DOYOUWANT TOACHIEVE?• Satisfied customers• Engaged prospects• Smarter, more relevant content• Seamless usability• Improved site engagement• Social shares• Word-of-mouth marketing• Brand recognition• Long-term customer relationshipsbuilt on mutual respect
  18. 18. THANK YOU!Connect here:Here:Here:And here, too:centerline.net@caitvsmith@kateawilliamson@centerline
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×