SlideShare a Scribd company logo
UX |= UI
Kelley Howell
ux @ DE
Erik Flowers @ http://www.uxisnotui.com/
ck Berry, IBM, in an article for developers to better understand UX design
The Elements of User Experience
UX is not UI
UX is not UI
UX/UI User Group: a history
Guerilla UX @ DE
Guerilla UX @ DE
• 2007: BC Wilson, Erin Walsh PMs with Trader
and FR; Andrew Jaswa and Kelley Walker with
FR and Trader
• User group: find other nerds into usability,
HCI, and UX
• Use guerilla tactics to win the war. 
UX timeline
(Leah Buley, UX Team of One)
UX: how people think and feel
User experience design is about
centering the user throughout the
product development process
UX @ DE Square
• UX technique to get people to brainstorm in
innovative ways
• Get people out of their element
• Let’s try this: What is the User Experience of
our building
• Hint: Architects create user experiences for
their buildings – inside and outside
The Building UX
UX = understanding people
• Architects understand people: what their
tasks, goals, desires, and dreams
• Architects understand social interaction:
norms, rituals, the unique problems involved
in social life
Buildings |= Software
• Buildings are different from software in an
important way
• Interactive relationship exists between people
and software
Don Norman and Steve Jobs
• Leveraged human tendency to apply rules of
social life to computer interaction. ( +
anthropomorphize)
• Emotional connection with computers
I don’t hate it
I like it
I love it
Examples
• Animation effects (emerged from research
insights from studying computer gaming in
70s and 80s)
• Genie effect (zoom)
• Rounded corners
• Dog ears
Gamification
• Love
• Addiction
• Deviance (habit / ritual )
• Twitter: To be predictable or not to be
UX = ignoring people
“Understand users,
then ignore them.”
-- Robert Hoekman in Designing the Obvious
Everything I know about UX, I learned
in English Class
Rhetoric
• Logos
• Ethos
• Pathos
The Elements of User Experience
UX is not UI
The Planes of User Experience
Step 1: Strategy - Who are users, what do they
need, what are their problems, hopes, desires?
Step 2: Scope - Given user needs, what content and
functionality is required to obtain needs? What are
the limits and constraints.
Step 3: Structure - How will content and
functionality interact and does it meet users’
needs?
Step 4: Skeleton - What are the foundational
elements of the interface? How do users navigate &
find information?
Step 5: Surface - The final visual and tactile
elements: visual style, brand identity, style, logo.
UX is not UI
UX is not UI
UX is not UI
UX is about designs that
• Understand how people think and feel
• Center users throughout the product lifecycle –
strategy >
• Are based on both listening to users, then
ignoring them
• centering users through:
research
advocacy
design patterns
rules/guidelines
Questions?

More Related Content

KEY
The UX Umbrella
PDF
User Experience (UX)
PPT
The UX Industry & You
PPTX
What is User Experience?
PDF
UX in a Nutshell
PDF
Fundamentals of new media
PPTX
GDG Dhaka - UX quick talk - Masrur Hannan
PDF
Brisbane Content Strategy Meetup Cct 2017
The UX Umbrella
User Experience (UX)
The UX Industry & You
What is User Experience?
UX in a Nutshell
Fundamentals of new media
GDG Dhaka - UX quick talk - Masrur Hannan
Brisbane Content Strategy Meetup Cct 2017

What's hot (18)

PDF
Module 03: UX Thinking
PDF
Module 01: Intro and Definitions of UX
PDF
Keeping your customers real
PPTX
5 principles of Interactive design
PDF
PDF
Guest Lecture - UX Design in Jakamo, Timo Rossi 14 February 2017
PDF
Intro Design Principles
PPTX
UX The Bruce Lee Way
PDF
If the User Can't Use It, It Doesn't Work.
PDF
Designer vs Developer - A Battle Royal v1.0
PDF
Principles of Interactive Design
PPTX
User experience artifacts soflux
PPSX
Introduction into User Experience
PDF
Recommendation Systems and Machine Learning: Mapping the User Experience
PPT
Interact London 2015: Amanda Neylon - Why UX is important for charities
PDF
Design Principles
PDF
Steps to Design Great Mobile Apps
PDF
Designing Interactions / Experiences: Lecture #04
Module 03: UX Thinking
Module 01: Intro and Definitions of UX
Keeping your customers real
5 principles of Interactive design
Guest Lecture - UX Design in Jakamo, Timo Rossi 14 February 2017
Intro Design Principles
UX The Bruce Lee Way
If the User Can't Use It, It Doesn't Work.
Designer vs Developer - A Battle Royal v1.0
Principles of Interactive Design
User experience artifacts soflux
Introduction into User Experience
Recommendation Systems and Machine Learning: Mapping the User Experience
Interact London 2015: Amanda Neylon - Why UX is important for charities
Design Principles
Steps to Design Great Mobile Apps
Designing Interactions / Experiences: Lecture #04
Ad

Similar to UX is not UI (20)

PDF
Introduction to UX Design
PPTX
An Introduction to User Experience (UX) Fundamentals
PPTX
Ux Overview
PDF
APznzaZ_Teqb7iCwf7ZfywxJ7hZT3kWK0oTN9mw0RM9G2IAWpVPLtKRI0XKmmHPOxy_SlHGc9fGe3...
PDF
Visual definitions of UX ( Restored )
PDF
User eXperience
PPTX
UX Design Overview
PDF
What is UX Design?
PDF
Elements of user experience presentation
PDF
Introduction to User Experience - Mike Biggs
PPTX
UX Methods - Startup Saturday
PDF
Demystifying User Experience - General Assembly
PPTX
User Experience ( UX )
PDF
What is this UX thing 11-24-15
PPTX
Myth & fact - Designing for UX
PPT
User Experience Design - Why & How to
PPTX
What is UX?
PPTX
Mobile Monday Dhaka Chapter (proposed) first session UX Aug 5 2013 MHannan FZ...
PDF
What is this UX thing?
PPTX
Fundamentals of UX Design
Introduction to UX Design
An Introduction to User Experience (UX) Fundamentals
Ux Overview
APznzaZ_Teqb7iCwf7ZfywxJ7hZT3kWK0oTN9mw0RM9G2IAWpVPLtKRI0XKmmHPOxy_SlHGc9fGe3...
Visual definitions of UX ( Restored )
User eXperience
UX Design Overview
What is UX Design?
Elements of user experience presentation
Introduction to User Experience - Mike Biggs
UX Methods - Startup Saturday
Demystifying User Experience - General Assembly
User Experience ( UX )
What is this UX thing 11-24-15
Myth & fact - Designing for UX
User Experience Design - Why & How to
What is UX?
Mobile Monday Dhaka Chapter (proposed) first session UX Aug 5 2013 MHannan FZ...
What is this UX thing?
Fundamentals of UX Design
Ad

More from Kelley Howell (20)

PPTX
Working Together: the UX role in a Scaled Agile Framework
PPT
User Story Mapping for Minimum Lovable Products
PPTX
UX Research Team @ Homes.com
PPTX
Coding qualitative data for non-researchers
PPTX
Why Net Promoter Scoring
PPTX
Building a UX Research Program
PPTX
Devcon 2013: Understanding Search Behavior
PPTX
You should test that: How to use A/B testing in product design
PPTX
Application Design - Part 1
PPTX
Lead conversions: It's all in the detail page
PPTX
Stop Creating Awesome UX (Make awesome users instead)
PPTX
Understanding Users: Using metrics and surveys to understand our consumers
PPTX
Product Personas: Getting to No
PPTX
Understanding the Search User Experience @
PPT
Mobile for Business: Opportunity is Knocking
PPT
Results from our survey of UI/UX needs
PPT
Microformats Workshop (2009)
PPT
An introduction to Object Oriented CSS
PPTX
Application Design - Part 2
PPT
Storymapping, personas, and scenarios
Working Together: the UX role in a Scaled Agile Framework
User Story Mapping for Minimum Lovable Products
UX Research Team @ Homes.com
Coding qualitative data for non-researchers
Why Net Promoter Scoring
Building a UX Research Program
Devcon 2013: Understanding Search Behavior
You should test that: How to use A/B testing in product design
Application Design - Part 1
Lead conversions: It's all in the detail page
Stop Creating Awesome UX (Make awesome users instead)
Understanding Users: Using metrics and surveys to understand our consumers
Product Personas: Getting to No
Understanding the Search User Experience @
Mobile for Business: Opportunity is Knocking
Results from our survey of UI/UX needs
Microformats Workshop (2009)
An introduction to Object Oriented CSS
Application Design - Part 2
Storymapping, personas, and scenarios

Recently uploaded (20)

PPTX
AD Bungalow Case studies Sem 2.pptxvwewev
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPTX
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PPTX
mahatma gandhi bus terminal in india Case Study.pptx
PPT
Machine printing techniques and plangi dyeing
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
PPTX
Implications Existing phase plan and its feasibility.pptx
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PPTX
rapid fire quiz in your house is your india.pptx
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PPTX
Entrepreneur intro, origin, process, method
PDF
Urban Design Final Project-Site Analysis
PPTX
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
PPTX
6- Architecture design complete (1).pptx
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
PDF
Quality Control Management for RMG, Level- 4, Certificate
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
AD Bungalow Case studies Sem 2.pptxvwewev
DOC-20250430-WA0014._20250714_235747_0000.pptx
AC-Unit1.pptx CRYPTOGRAPHIC NNNNFOR ALL
BRANDBOOK-Presidential Award Scheme-Kenya-2023
mahatma gandhi bus terminal in india Case Study.pptx
Machine printing techniques and plangi dyeing
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
Implications Existing phase plan and its feasibility.pptx
YV PROFILE PROJECTS PROFILE PRES. DESIGN
rapid fire quiz in your house is your india.pptx
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Entrepreneur intro, origin, process, method
Urban Design Final Project-Site Analysis
LITERATURE CASE STUDY DESIGN SEMESTER 5.pptx
6- Architecture design complete (1).pptx
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
Quality Control Management for RMG, Level- 4, Certificate
YOW2022-BNE-MinimalViableArchitecture.pdf
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt

UX is not UI

  • 1. UX |= UI Kelley Howell ux @ DE
  • 2. Erik Flowers @ http://www.uxisnotui.com/
  • 3. ck Berry, IBM, in an article for developers to better understand UX design
  • 4. The Elements of User Experience
  • 7. UX/UI User Group: a history
  • 9. Guerilla UX @ DE • 2007: BC Wilson, Erin Walsh PMs with Trader and FR; Andrew Jaswa and Kelley Walker with FR and Trader • User group: find other nerds into usability, HCI, and UX • Use guerilla tactics to win the war. 
  • 10. UX timeline (Leah Buley, UX Team of One)
  • 11. UX: how people think and feel User experience design is about centering the user throughout the product development process
  • 12. UX @ DE Square • UX technique to get people to brainstorm in innovative ways • Get people out of their element • Let’s try this: What is the User Experience of our building • Hint: Architects create user experiences for their buildings – inside and outside
  • 14. UX = understanding people • Architects understand people: what their tasks, goals, desires, and dreams • Architects understand social interaction: norms, rituals, the unique problems involved in social life
  • 15. Buildings |= Software • Buildings are different from software in an important way • Interactive relationship exists between people and software
  • 16. Don Norman and Steve Jobs • Leveraged human tendency to apply rules of social life to computer interaction. ( + anthropomorphize) • Emotional connection with computers I don’t hate it I like it I love it
  • 17. Examples • Animation effects (emerged from research insights from studying computer gaming in 70s and 80s) • Genie effect (zoom) • Rounded corners • Dog ears
  • 18. Gamification • Love • Addiction • Deviance (habit / ritual ) • Twitter: To be predictable or not to be
  • 19. UX = ignoring people “Understand users, then ignore them.” -- Robert Hoekman in Designing the Obvious
  • 20. Everything I know about UX, I learned in English Class
  • 22. The Elements of User Experience
  • 24. The Planes of User Experience Step 1: Strategy - Who are users, what do they need, what are their problems, hopes, desires? Step 2: Scope - Given user needs, what content and functionality is required to obtain needs? What are the limits and constraints. Step 3: Structure - How will content and functionality interact and does it meet users’ needs? Step 4: Skeleton - What are the foundational elements of the interface? How do users navigate & find information? Step 5: Surface - The final visual and tactile elements: visual style, brand identity, style, logo.
  • 28. UX is about designs that • Understand how people think and feel • Center users throughout the product lifecycle – strategy > • Are based on both listening to users, then ignoring them • centering users through: research advocacy design patterns rules/guidelines

Editor's Notes

  • #6: In addition to the UX is not UI poster, which spread like a prairie fire among UX professionals who tired of having to explain what they do, other attempts drew on the UX iceberg. The metaphor suggests that the surface – UI – is just the tip of the iceberg. What is beneath are four more levels that are crucial to the process. This poster, likewise, spread like prairie fire. It was based on the much earlier work of Jesse James Garret who, in 2000, struggled with a way to illustrate the complexity of the profession.
  • #7: The iceberg draws on the 5 S’s. Additionally, since UX professionals are obsessed by producing deliverables, there are corresponding deliverables to illustrate what should be produced at each level of the process.
  • #8: Recently, as UX has become recognized as crucial to product development, the free wheeling use of the phrase has prompted UX professional to come up with ways to educate people on what UX actually. Too often, UX was being used to vaguely refer to the visual design of sites and applications. Sometimes, it referred to having a general grasp of usability principles. But more often than not, the term is used in constant conjunction with UI: UI/UX. Problem is, UX isn’t reducible to UI.
  • #25: Maslow’s hierarchy of needs. So, to think through this, let’s take something that has nothing to do with what most of us build every day. Let’s talk about a human need we all share: eating.