Centerline Digital - UX vs UI - 050613

  • 22,720 views
Uploaded on

Kate Williamson and Cait Vlastakis Smith — UX Designers at Centerline Digital — explore the differences between UX and UI. …

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

More in: Design , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
22,720
On Slideshare
0
From Embeds
0
Number of Embeds
25

Actions

Shares
Downloads
330
Comments
2
Likes
32

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. What’s the difference?@caitvsmith | @kateawilliamsonvsUX UI
  • 2. UX = USER EXPERIENCEUI = USER INTERFACEUSER EXPERIENCE = USER INTERFACE
  • 3. UIA USER INTERFACE IS:• A TOOL• A POINT OF INTERACTION• A MEANS OF COMMUNICATION BETWEEN PERSON AND SYSTEM
  • 4. UXUSER EXPERIENCE:• IS THE INTERACTION ITSELF• INCLUDES INTERFACES• ADDRESSES ALL ASPECTS OF A THING AS PERCEIVED BY A PERSON
  • 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. Let’s apply this to a website.
  • 7. This is a button.It’s one element of an interface.PRESS MEYou know you want to.
  • 8. All these elements together on ascreen make up a UI.American Express Open Forum Website
  • 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. Where do you find theanswers to “why?”
  • 11. UXPeople. Good UX is themanifestation of deeplyunderstanding people.Aka: “Users”
  • 12. Adaptive Path Experience Map featured athttp://adaptivepath.com/ideas/the-anatomy-of-an-experience-mapWhat understanding peoplelooks like:
  • 13. What do UX people do?
  • 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. 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. WHAT DO YOU WANTTO MAKE?WHAT DO YOU WANTTO ACHIEVE?UX requires reframing this question:
  • 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. THANK YOU!Connect here:Here:Here:And here, too:centerline.net@caitvsmith@kateawilliamson@centerline