SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

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
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui designShweta Joshi
 
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: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designMoodLabs
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designDMI
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and PrinciplesPeeyush Sahu CAPM®
 
Intro to UX: Enterprise UX
Intro to UX: Enterprise UXIntro to UX: Enterprise UX
Intro to UX: Enterprise UXBart Van Hecke
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignJoan Lumanauw
 
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 & designMorgan McKeagney
 

Was ist angesagt? (20)

UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
UX and UI
UX and UIUX and UI
UX and UI
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
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 a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
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)
 
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
 
UX design
UX designUX design
UX design
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
Good UX Bad UX
Good UX Bad UXGood UX Bad UX
Good UX Bad UX
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
 
Intro to UX: Enterprise UX
Intro to UX: Enterprise UXIntro to UX: Enterprise UX
Intro to UX: Enterprise UX
 
UX Lesson 1: User Centered Design
UX Lesson 1: User Centered DesignUX Lesson 1: User Centered Design
UX Lesson 1: User Centered Design
 
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/UI design
UX/UI designUX/UI design
UX/UI design
 

Ähnlich wie Ux is not UI

Ux Overview
Ux OverviewUx Overview
Ux Overviewmbrosset
 
Proof That UI UX Really Works
Proof That UI UX Really WorksProof That UI UX Really Works
Proof That UI UX Really WorksSamer Tallauze
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docxRiniyaMary
 
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 collaborationEmi Kwon
 
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 SolutionsASIT 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.pptxhirenmkaklotar19
 
Workflow diagramming and information architecture
Workflow diagramming and information architectureWorkflow diagramming and information architecture
Workflow diagramming and information architectureDianna 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 AdvantageMichael Dubakov
 
Methodology, Metrics And Measures For Testing And...
Methodology, Metrics And Measures For Testing And...Methodology, Metrics And Measures For Testing And...
Methodology, Metrics And Measures For Testing And...Trina Jackson
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini CourseDigital Snack
 
Mobile Best Practices for UX
Mobile Best Practices for UXMobile Best Practices for UX
Mobile Best Practices for UXThe 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 1Lewis Lin 🦊
 

Ähnlich wie 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.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
 
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
 
Methodology, Metrics And Measures For Testing And...
Methodology, Metrics And Measures For Testing And...Methodology, Metrics And Measures For Testing And...
Methodology, Metrics And Measures For Testing And...
 
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
 
UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 

Mehr von Bruno Mendes

Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprintBruno 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 confortoBruno Mendes
 
Jekyll - Liquid for noobs
Jekyll - Liquid for noobsJekyll - Liquid for noobs
Jekyll - Liquid for noobsBruno Mendes
 
Como falhar como líder
Como falhar como líderComo falhar como líder
Como falhar como líderBruno Mendes
 
Pomodoro technique
Pomodoro techniquePomodoro technique
Pomodoro techniqueBruno Mendes
 
Fisica da agilidade
Fisica da agilidadeFisica da agilidade
Fisica da agilidadeBruno 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 ClienteBruno 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 GeraisBruno Mendes
 
Why SASS - in 10 minutos
Why SASS - in 10 minutosWhy SASS - in 10 minutos
Why SASS - in 10 minutosBruno Mendes
 

Mehr von 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
 

Kürzlich hochgeladen

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 

Kürzlich hochgeladen (20)

The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 

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