SlideShare a Scribd company logo
1 of 23
Download to read offline
UX ≠ UI
Based on the post UX is not UI by @Erik_UX
“UX is the intangible design of a strategy
that brings us to a solution.”
The interface is not the
solution.
That’s the true heart of the battle between UX and those who
only want UI – or don’t know the difference.
User Interface
what people use interact the product
User Experience
how they feel while they do.
UI
UX
UIUser Interface
what people use interact the product
User Experience
how they feel while they do.UX
Technical
Emotional
How UX people
see UX?
You could be a researcher and persona writer
in a senior UX role and never touch an
interface design (or even have the skills to)
"Many UX designers have started to re-label
themselves […] I think this is partially to help
keep them from being marginalized as only
interface designers"
UX Designers
UX Architects, UX Engineers,
or UX Strategists
Experience Architect/Engineer/
Strategist
equals
equals
So what does UX
actually mean?
What we want them to see
Field research
Face to face interviewing
Creation and administering of tests
Gathering, organizing, and presenting statistics
Documentation of personas and findings
Product design
Feature writing
Requirement writing
Graphic arts
Interaction design
Information Architecture
Usability
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Copy writing
Presentation and speaking
Working tightly with programmers
Brainstorm coordination
Company culture evangelism
Communication to stakeholders
What they typically see
Field research
Face to face interviewing
Creation and administering of tests
Gathering, organizing, and presenting statistics
Documentation of personas and findings
Product design
Feature writing
Requirement writing
Graphic arts
Interaction design
Information Architecture
Usability
Prototyping
Interface layout
Interface design
Visual design
Taxonomy creation
Terminology creation
Copy writing
Presentation and speaking
Working tightly with programmers
Brainstorm coordination
Company culture evangelism
Communication to stakeholders
UI design is a
huge part of UX.
Partially because its the
visible part of the process
UI
UX is what it does
and what it does is
solve problems
ID = Interaction design
(how the look and feel work, user behavior research)
VD = Visual Design
(look and feel, visual and graphic design research)
ID + VD = Interface
The interface is the result of the
“solution design” that came before it.
A skillful interface designer
understands the importance
of providing the user with a
solution to a defined
problem.
How you can get
to an effective UI
Hypothetical Process
1. Identify the problem
We presume the problem has been identified through the user/market/persona research.
2. User Stories
User flows and stories are made, then trashed, then made again, then iterated on until the problem
flow is clear.
3. Experiments with personas
With an idea of ways to solve the problem, some rapid experiments are carried out to validate the
assumptions with the personas.
4. Information Architecture
Some IA work is done to break out the product/site into the logical areas and hierarchies.
5. Wireframes
Various wireframes and sketches are drawn to start to organize where things could go on the screen.
6. Mockups
With all the preceding research material and UX work, now mockups with UI included can be made
with confidence.
7. Prototypes
With mockups and a UI designed, they are user tested and iterated on through some prototypes or
experiments.
8. UI Design
After the mockups have been vetted, it’s now time to code up the interface – UI Design!
9. Production
Once the usability of the UI has been honed, you can move it on to production – the place that people
usually think of as the singular UI.
Hypothetical Process Where fits the UI process
1. Identify the problem
We presume the problem has been identified through the user/market/persona research.
2. User Stories
User flows and stories are made, then trashed, then made again, then iterated on until the problem
flow is clear.
3. Experiments with personas
With an idea of ways to solve the problem, some rapid experiments are carried out to validate the
assumptions with the personas.
4. Information Architecture
Some IA work is done to break out the product/site into the logical areas and hierarchies.
5. Wireframes
Various wireframes and sketches are drawn to start to organize where things could go on the screen.
6. Mockups
With all the preceding research material and UX work, now mockups with UI included can be made
with confidence.
7. Prototypes
With mockups and a UI designed, they are user tested and iterated on through some prototypes or
experiments.
8. UI Design
After the mockups have been vetted, it’s now time to code up the interface – UI Design!
9. Production
Once the usability of the UI has been honed, you can move it on to production – the place that people
usually think of as the singular UI.
So now,
what is really UX?
"It’s a huge strategic process that
aims to create a product or website
that customers/users/visitors are
drawn to, find easy to use, and quickly
understand. Through the UX work we’ll
arrive at the right interface
conclusion."
Thank U
@bruno2ms
Feel free to Share if you like =D

More Related Content

What's hot

What's hot (20)

UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
What is UX?
What is UX?What is UX?
What is UX?
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
UX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & designUX 101: A quick & dirty introduction to user experience strategy & design
UX 101: A quick & dirty introduction to user experience strategy & design
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
What is UX?
What is UX?What is UX?
What is UX?
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 
Ux & ui
Ux & uiUx & ui
Ux & ui
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 

Similar to Ux is not UI

584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx
hirenmkaklotar19
 

Similar to Ux is not UI (20)

What is UX v2
What is UX v2What is UX v2
What is UX v2
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
 
Ux design process
Ux design processUx design process
Ux design process
 
A primer on ux design
A primer on ux designA primer on ux design
A primer on ux design
 
Design process
Design processDesign process
Design process
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really Works
 
What is UX v1
What is UX v1What is UX v1
What is UX v1
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docx
 
UX design as a cross functional, agile collaboration
UX design as a cross functional, agile collaborationUX design as a cross functional, agile collaboration
UX design as a cross functional, agile collaboration
 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designers
 
UI / UX design services agency | UI UX design companies - ASIT Solutions
UI / UX design services agency | UI UX design companies - ASIT SolutionsUI / UX design services agency | UI UX design companies - ASIT Solutions
UI / UX design services agency | UI UX design companies - ASIT Solutions
 
584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx
 
Workflow diagramming and information architecture
Workflow diagramming and information architectureWorkflow diagramming and information architecture
Workflow diagramming and information architecture
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
 
Mobile Best Practices for UX
Mobile Best Practices for UXMobile Best Practices for UX
Mobile Best Practices for UX
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
UI_UX.pptx
UI_UX.pptxUI_UX.pptx
UI_UX.pptx
 

More from Bruno Mendes

Why SASS - in 10 minutos
Why SASS - in 10 minutosWhy SASS - in 10 minutos
Why SASS - in 10 minutos
Bruno Mendes
 

More from Bruno Mendes (16)

Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprint
 
Will js kill css
Will js kill cssWill js kill css
Will js kill css
 
Building a ux team
Building a ux team Building a ux team
Building a ux team
 
Ciência do conforto
Ciência do confortoCiência do conforto
Ciência do conforto
 
Jekyll - Liquid for noobs
Jekyll - Liquid for noobsJekyll - Liquid for noobs
Jekyll - Liquid for noobs
 
Jekyll
JekyllJekyll
Jekyll
 
Como falhar como líder
Como falhar como líderComo falhar como líder
Como falhar como líder
 
Pomodoro technique
Pomodoro techniquePomodoro technique
Pomodoro technique
 
Fisica da agilidade
Fisica da agilidadeFisica da agilidade
Fisica da agilidade
 
Personas: O que são? Onde vivem? Como funcionam?
Personas: O que são? Onde vivem? Como funcionam?Personas: O que são? Onde vivem? Como funcionam?
Personas: O que são? Onde vivem? Como funcionam?
 
Pense como dono
Pense como donoPense como dono
Pense como dono
 
Fatores Cesar no Atendimento Ao Cliente
Fatores Cesar no Atendimento Ao ClienteFatores Cesar no Atendimento Ao Cliente
Fatores Cesar no Atendimento Ao Cliente
 
Montes Claros - Cursar tecnologia no interior de Minas Gerais
Montes Claros - Cursar tecnologia no interior de Minas GeraisMontes Claros - Cursar tecnologia no interior de Minas Gerais
Montes Claros - Cursar tecnologia no interior de Minas Gerais
 
OOCSS
OOCSSOOCSS
OOCSS
 
Why SASS - in 10 minutos
Why SASS - in 10 minutosWhy SASS - in 10 minutos
Why SASS - in 10 minutos
 
Lean ux
Lean uxLean ux
Lean ux
 

Recently uploaded

一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
cyebo
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
cyebo
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
ajroy0196
 

Recently uploaded (20)

Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
FW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers ParisFW25-26 Fashion Key Items Trend Book Peclers Paris
FW25-26 Fashion Key Items Trend Book Peclers Paris
 
一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 

Ux is not UI

  • 1. UX ≠ UI Based on the post UX is not UI by @Erik_UX
  • 2. “UX is the intangible design of a strategy that brings us to a solution.”
  • 3. The interface is not the solution. That’s the true heart of the battle between UX and those who only want UI – or don’t know the difference.
  • 4. User Interface what people use interact the product User Experience how they feel while they do. UI UX
  • 5. UIUser Interface what people use interact the product User Experience how they feel while they do.UX Technical Emotional
  • 7. You could be a researcher and persona writer in a senior UX role and never touch an interface design (or even have the skills to)
  • 8. "Many UX designers have started to re-label themselves […] I think this is partially to help keep them from being marginalized as only interface designers"
  • 9. UX Designers UX Architects, UX Engineers, or UX Strategists Experience Architect/Engineer/ Strategist equals equals
  • 10. So what does UX actually mean?
  • 11. What we want them to see Field research Face to face interviewing Creation and administering of tests Gathering, organizing, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders What they typically see Field research Face to face interviewing Creation and administering of tests Gathering, organizing, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders
  • 12. UI design is a huge part of UX. Partially because its the visible part of the process
  • 13. UI
  • 14. UX is what it does and what it does is solve problems
  • 15. ID = Interaction design (how the look and feel work, user behavior research) VD = Visual Design (look and feel, visual and graphic design research)
  • 16. ID + VD = Interface The interface is the result of the “solution design” that came before it.
  • 17. A skillful interface designer understands the importance of providing the user with a solution to a defined problem.
  • 18. How you can get to an effective UI
  • 19. Hypothetical Process 1. Identify the problem We presume the problem has been identified through the user/market/persona research. 2. User Stories User flows and stories are made, then trashed, then made again, then iterated on until the problem flow is clear. 3. Experiments with personas With an idea of ways to solve the problem, some rapid experiments are carried out to validate the assumptions with the personas. 4. Information Architecture Some IA work is done to break out the product/site into the logical areas and hierarchies. 5. Wireframes Various wireframes and sketches are drawn to start to organize where things could go on the screen. 6. Mockups With all the preceding research material and UX work, now mockups with UI included can be made with confidence. 7. Prototypes With mockups and a UI designed, they are user tested and iterated on through some prototypes or experiments. 8. UI Design After the mockups have been vetted, it’s now time to code up the interface – UI Design! 9. Production Once the usability of the UI has been honed, you can move it on to production – the place that people usually think of as the singular UI.
  • 20. Hypothetical Process Where fits the UI process 1. Identify the problem We presume the problem has been identified through the user/market/persona research. 2. User Stories User flows and stories are made, then trashed, then made again, then iterated on until the problem flow is clear. 3. Experiments with personas With an idea of ways to solve the problem, some rapid experiments are carried out to validate the assumptions with the personas. 4. Information Architecture Some IA work is done to break out the product/site into the logical areas and hierarchies. 5. Wireframes Various wireframes and sketches are drawn to start to organize where things could go on the screen. 6. Mockups With all the preceding research material and UX work, now mockups with UI included can be made with confidence. 7. Prototypes With mockups and a UI designed, they are user tested and iterated on through some prototypes or experiments. 8. UI Design After the mockups have been vetted, it’s now time to code up the interface – UI Design! 9. Production Once the usability of the UI has been honed, you can move it on to production – the place that people usually think of as the singular UI.
  • 21. So now, what is really UX?
  • 22. "It’s a huge strategic process that aims to create a product or website that customers/users/visitors are drawn to, find easy to use, and quickly understand. Through the UX work we’ll arrive at the right interface conclusion."
  • 23. Thank U @bruno2ms Feel free to Share if you like =D