Centerline Digital - UX vs UI - 050613
-
Upload
centerline-digital -
Category
Design
-
view
26.734 -
download
2
description
Transcript of Centerline Digital - UX vs UI - 050613
![Page 1: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/1.jpg)
What’s the difference?
@caitvsmith | @kateawilliamson
vsUX UI
![Page 2: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/2.jpg)
UX = USER EXPERIENCE
UI = USER INTERFACE
USER EXPERIENCE = USER INTERFACE
![Page 3: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/3.jpg)
UIA USER INTERFACE IS:• A TOOL
• A POINT OF INTERACTION
• A MEANS OF COMMUNICATION BETWEEN PERSON AND SYSTEM
![Page 4: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/4.jpg)
UXUSER EXPERIENCE:• IS THE INTERACTION ITSELF
• INCLUDES INTERFACES
• ADDRESSES ALL ASPECTS OF A THING AS PERCEIVED BY A PERSON
![Page 5: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/5.jpg)
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.
![Page 6: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/6.jpg)
Let’s apply this to a website.
![Page 7: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/7.jpg)
This is a button. It’s one element of an interface.
PRESS MEYou know you want to.
![Page 8: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/8.jpg)
All these elements together on a screen make up a UI.
American Express Open Forum Website
![Page 9: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/9.jpg)
Why is “My Account” located here? Why are these
specific topics highlighted?
Why is it important to highlight social sharing here?
Why are these therelated 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?
![Page 10: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/10.jpg)
Where do you find the answers to “why?”
![Page 11: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/11.jpg)
UXPeople. Good UX is the manifestation of deeply understanding people.
Aka: “Users”
![Page 12: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/12.jpg)
Adaptive Path Experience Map featured at http://adaptivepath.com/ideas/the-anatomy-of-an-experience-map
What understanding people looks like:
![Page 13: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/13.jpg)
What do UX people do?
![Page 14: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/14.jpg)
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 DOCUMENTS FOR DESIGN, SUCH AS:
The Outputs
*IA = Information Architecture
![Page 15: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/15.jpg)
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:
![Page 16: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/16.jpg)
WHAT DO YOU WANT TO MAKE?
WHAT DO YOU WANT TO ACHIEVE?
UX requires reframing this question:
![Page 17: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/17.jpg)
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
![Page 18: Centerline Digital - UX vs UI - 050613](https://reader033.fdocuments.in/reader033/viewer/2022052822/554d0d58b4c905805d8b4ccc/html5/thumbnails/18.jpg)
THANK YOU!
Connect here:
Here:
Here:
And here, too:
centerline.net
@caitvsmith
@kateawilliamson
@centerline