SlideShare a Scribd company logo
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

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
GDGKuwaitGoogleDevel
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
Sooraj P R
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
Vibloo
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
Michał Aleksander
 
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
Morgan McKeagney
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
Joan Lumanauw
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
Peeyush Sahu CAPM®
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
Jasmine Phan
 
What is UX?
What is UX?What is UX?
What is UX?
David Carr
 
UX design
UX designUX design
UX design
Tanay Kumar
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
Maksym Babych
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
Dijup Tuladhar
 
Fundamentals and practices of UX research
Fundamentals and practices of UX research Fundamentals and practices of UX research
Fundamentals and practices of UX research
Lucia Trezova
 
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
Aciron Consulting
 
What is UX?
What is UX?What is UX?
What is UX?
Peter van Lanschot
 
What is UX design?
What is UX design? What is UX design?
What is UX design?
Kristen Hardy
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
DMI
 

What's hot (20)

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
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
 
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
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
What is UX?
What is UX?What is UX?
What is UX?
 
UX design
UX designUX design
UX design
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
Fundamentals and practices of UX research
Fundamentals and practices of UX research Fundamentals and practices of UX research
Fundamentals and practices of UX research
 
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
 
What is UX?
What is UX?What is UX?
What is UX?
 
What is UX design?
What is UX design? What is UX design?
What is UX design?
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 

Similar to Ux is not UI

What is UX v2
What is UX v2What is UX v2
What is UX v2
Mike Gallers
 
Ux Overview
Ux OverviewUx Overview
Ux Overview
mbrosset
 
Ux design process
Ux design processUx design process
Ux design process
Prateek Agrawal
 
A primer on ux design
A primer on ux designA primer on ux design
A primer on ux design
Tannistho Ghosh
 
Design process
Design processDesign process
Design process
Leandro Puca
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really Works
Samer Tallauze
 
What is UX v1
What is UX v1What is UX v1
What is UX v1
Mike Gallers
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
topseowebmaster
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docx
RiniyaMary
 
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
Emi Kwon
 
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
topseowebmaster
 
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
ASIT Solutions PVT Ltd
 
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
 
Workflow diagramming and information architecture
Workflow diagramming and information architectureWorkflow diagramming and information architecture
Workflow diagramming and information architecture
Dianna Miller
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
Jenica Welch
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
Michael Dubakov
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
Digital Snack
 
Mobile Best Practices for UX
Mobile Best Practices for UXMobile Best Practices for UX
Mobile Best Practices for UX
The Wisdom Daily
 
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
Lewis Lin 🦊
 
UI_UX.pptx
UI_UX.pptxUI_UX.pptx
UI_UX.pptx
DilipPoudel2
 

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

Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprint
Bruno Mendes
 
Will js kill css
Will js kill cssWill js kill css
Will js kill css
Bruno Mendes
 
Building a ux team
Building a ux team Building a ux team
Building a ux team
Bruno Mendes
 
Ciência do conforto
Ciência do confortoCiência do conforto
Ciência do conforto
Bruno Mendes
 
Jekyll - Liquid for noobs
Jekyll - Liquid for noobsJekyll - Liquid for noobs
Jekyll - Liquid for noobs
Bruno Mendes
 
Jekyll
JekyllJekyll
Jekyll
Bruno Mendes
 
Como falhar como líder
Como falhar como líderComo falhar como líder
Como falhar como líder
Bruno Mendes
 
Pomodoro technique
Pomodoro techniquePomodoro technique
Pomodoro technique
Bruno Mendes
 
Fisica da agilidade
Fisica da agilidadeFisica da agilidade
Fisica da agilidade
Bruno Mendes
 
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?
Bruno Mendes
 
Fatores Cesar no Atendimento Ao Cliente
Fatores Cesar no Atendimento Ao ClienteFatores Cesar no Atendimento Ao Cliente
Fatores Cesar no Atendimento Ao Cliente
Bruno Mendes
 
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
Bruno Mendes
 
Why SASS - in 10 minutos
Why SASS - in 10 minutosWhy SASS - in 10 minutos
Why SASS - in 10 minutosBruno Mendes
 
Lean ux
Lean uxLean ux
Lean ux
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

20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
n0tivyq
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
PlanitIsrael
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
madhavlakhanpal29
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
CA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfCA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdf
SudhanshuMandlik
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 

Recently uploaded (20)

20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
一比一原版(Glasgow毕业证书)格拉斯哥大学毕业证成绩单如何办理
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
Common Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid themCommon Designing Mistakes and How to avoid them
Common Designing Mistakes and How to avoid them
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
CA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdfCA OFFICE office office office _VIEWS.pdf
CA OFFICE office office office _VIEWS.pdf
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 

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