SlideShare una empresa de Scribd logo
1 de 54
1© Creative IT, Inc. All rights reserved.© Creative IT, Inc. All rights reserved.
UX Basics
Kabir Malkani
October 2019
2© Creative IT, Inc. All rights reserved.
Interbrand – Best
Global Brands 2019
Across all sectors
3© Creative IT, Inc. All rights reserved.
Interbrand – Best Global Brands 2019
Technology and Business Services
4© Creative IT, Inc. All rights reserved.
Spot the difference!
Designing the product Designing the experience
5© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
6© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Utility – It meets my needs
7© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Usability – I am able to use the product easily
8© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Desirability – I like the way the product looks and feels
9© Creative IT, Inc. All rights reserved.
Relationship between Usability and UX
Brand Experience – My overall feeling about the brand/product is good!
A positive UX leads to advocacy
10© Creative IT, Inc. All rights reserved.
Relationship between UI, Usability and UX
11© Creative IT, Inc. All rights reserved.
Fundamental Design Principles
12© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
13© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#1 Provide context
Ensure people are contextually aware of
where they are within their journey.
Think ‘breadcrumbs’.
14© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
15© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#2 Be human
Eliminate confusion. Think human
interaction.
16© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
17© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#3 Make it discoverable
Score “delight” points by being intuitive
18© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
19© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#4 Make it easy
Familiarize yourself with common
widgets, patterns, metaphors and
gestures.
20© Creative IT, Inc. All rights reserved.
WTF!?
Fundamental Design
Principles
21© Creative IT, Inc. All rights reserved.
Fundamental Design
Principles
#5 Keep it simple!
Avoid clutter and confusion. Intuitiveness
leads to discovery.
22© Creative IT, Inc. All rights reserved.
What is UX?
23© Creative IT, Inc. All rights reserved.
UI UXUI can influence UX…
Layout
Visual Design
Branding
Colors
Typography
Interaction
Information
Wireframes / Prototypes
User Research
Scenarios
…but good UI does not necessarily mean good UX
24© Creative IT, Inc. All rights reserved.
Surface
Visual Design
Skeleton
Interface Design
Navigation Design
Information Design
Structure
Interaction Design
Information Architecture
Scope
Functional Specs
Content Requirements
Strategy
User Needs
Site Objectives
Jesse James Garrett’s Layers of User Experience Model
The sum of a person’s
emotions and behaviors
when interacting with a
product, system or service
25© Creative IT, Inc. All rights reserved.
The UX Process
26© Creative IT, Inc. All rights reserved.
The UX Process
27© Creative IT, Inc. All rights reserved.
The UX Process
Step #1 Product Definition
1. Stakeholder Interviews
2. Create Value Proposition
3. Concept Sketching / Rough Mockup
4. Project Kickoff Meeting / Metrics
28© Creative IT, Inc. All rights reserved.
The UX Process
Step #1 Product Definition >
Stakeholder Interviews
29© Creative IT, Inc. All rights reserved.
The UX Process
Step #2 Product Research
1. User Needs / Individual In-depth Interviews (IDI)
2. Competitive Research
30© Creative IT, Inc. All rights reserved.
The UX Process
Step #2 Product Research >
User Interviews
Topics covered:
1. Background (such as ethnographic data)
2. The use of technology in general
3. The use of the product
4. The user’s main objectives and motivations
5. The user’s pain points
Hint: Include a mix of qualitative and
quantitative questions
31© Creative IT, Inc. All rights reserved.
The UX Process
Step #3 Analysis
1. Create Hypothetical Personas
2. Create Experience Maps / Customer Journey
32© Creative IT, Inc. All rights reserved.
The UX Process
Step #3 Analysis > Personas
33© Creative IT, Inc. All rights reserved.
UX Process
Step #4 Design
1. Sketching
2. Wireframing
3. Prototyping
4. Design Specifications
34© Creative IT, Inc. All rights reserved.
Sketching
Wireframing
Prototyping
The UX Process
Step #2 Product Research >
Sketching, Wireframing,
Prototyping
35© Creative IT, Inc. All rights reserved.
UX Process
Step #5 Validation
1. Internal Checks
2. User Testing Sessions
3. Metrics Analysis
4. User Feedback (Post Launch)
36© Creative IT, Inc. All rights reserved.
User Testing
Step #5 Validation Methods
Usability Testing
a. Moderated
b. Unmoderated (URUT)
2. Focus Groups 3. Beta Testing 4. A/B Testing 5. Surveys
37© Creative IT, Inc. All rights reserved.
Best Practices
• Keep physical constraints in mind
• Put yourself in the place of a “visitor”. Focus on user goals
• Be consistent with colors and typography and actions
• Familiarize yourself with gestures and widgets
• Pay attention to feedback (from everyone) and strive to constantly
improve your product.
• Reduce loading time
• Provide sensory feedback for completed actions
• Use feedback from users to constantly improve your product
• Instill a “Wow” factor or an emotional connect with the users
38© Creative IT, Inc. All rights reserved.
Epic Fails
39© Creative IT, Inc. All rights reserved.
Killing two birds
with one stone
does not always
give desirable
results
40© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy
41© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy
42© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy
43© Creative IT, Inc. All rights reserved.
Think about layout
and content
hierarchy
44© Creative IT, Inc. All rights reserved.
Double-check
everything!
45© Creative IT, Inc. All rights reserved.
Double-check
everything!
46© Creative IT, Inc. All rights reserved.
Double-check
everything!
47© Creative IT, Inc. All rights reserved.
Provide easy
access to the most
important things!
48© Creative IT, Inc. All rights reserved.
Provide easy
access to the most
important things!
49© Creative IT, Inc. All rights reserved.
Don’t show more
than the user
desires to see.
50© Creative IT, Inc. All rights reserved.
Don’t show more
than the user
desires to see.
51© Creative IT, Inc. All rights reserved.
Think of social,
cultural and
linguistic
symbolism
52© Creative IT, Inc. All rights reserved.
Think about the
human factor
53© Creative IT, Inc. All rights reserved.
Think about the
human factor
54© Creative IT, Inc. All rights reserved.
“Design is not just what it
looks like and feels like.
Design is how it works.”
Steve Jobs
“A user interface is like a joke.
If you have to explain it, it’s
not that good”.
Martin Leblanc
“Any product that needs a
manual to work is broken.”
Elon Musk
Thank you!

Más contenido relacionado

Similar a UX Basics

What makes a strong innovation culture?
What makes a strong innovation culture?What makes a strong innovation culture?
What makes a strong innovation culture?Michael Kalika
 
UX is Not Equal to UI Design
UX is Not Equal to UI Design UX is Not Equal to UI Design
UX is Not Equal to UI Design Rifat Talukder
 
User experience workshop
User experience workshopUser experience workshop
User experience workshopGYK Antler
 
Chapter 1 id2e_slides
Chapter 1 id2e_slidesChapter 1 id2e_slides
Chapter 1 id2e_slidesoopscrash1
 
Etm551 lecture09
Etm551 lecture09Etm551 lecture09
Etm551 lecture09Alex Chuê
 
Design Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris BernardDesign Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris BernardChris Bernard
 
Applying design thinking to IoT
Applying design thinking to IoTApplying design thinking to IoT
Applying design thinking to IoTEli Otniel Garcia
 
People-Centric Design Approach in Application Lifecycle
People-Centric Design Approach in Application LifecyclePeople-Centric Design Approach in Application Lifecycle
People-Centric Design Approach in Application LifecycleRofiqi Setiawan
 
Hci lec 1 & 2
Hci lec 1 & 2Hci lec 1 & 2
Hci lec 1 & 2Anwal Mirza
 
User Experience Design for Embedded Devices
User Experience Design for Embedded DevicesUser Experience Design for Embedded Devices
User Experience Design for Embedded DevicesICS
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic AdvantageMichael Dubakov
 
User Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesUser Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesIRJET Journal
 
Demystifying User Experience - General Assembly
Demystifying User Experience - General AssemblyDemystifying User Experience - General Assembly
Demystifying User Experience - General AssemblyMike Biggs GAICD
 
Data-Driven Design for User Experience
Data-Driven Design for User Experience Data-Driven Design for User Experience
Data-Driven Design for User Experience Emi Kwon
 
Explore BICT Presentation
Explore BICT PresentationExplore BICT Presentation
Explore BICT Presentationdavin scampton
 

Similar a UX Basics (20)

What makes a strong innovation culture?
What makes a strong innovation culture?What makes a strong innovation culture?
What makes a strong innovation culture?
 
UX is Not Equal to UI Design
UX is Not Equal to UI Design UX is Not Equal to UI Design
UX is Not Equal to UI Design
 
User experience workshop
User experience workshopUser experience workshop
User experience workshop
 
Engaging UX in engineering
Engaging UX in engineeringEngaging UX in engineering
Engaging UX in engineering
 
Chapter 1 id2e_slides
Chapter 1 id2e_slidesChapter 1 id2e_slides
Chapter 1 id2e_slides
 
Etm551 lecture09
Etm551 lecture09Etm551 lecture09
Etm551 lecture09
 
Layout
LayoutLayout
Layout
 
Design Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris BernardDesign Thinking Dallas by Chris Bernard
Design Thinking Dallas by Chris Bernard
 
Applying design thinking to IoT
Applying design thinking to IoTApplying design thinking to IoT
Applying design thinking to IoT
 
UX directly affects your bottom line
UX directly affects your bottom lineUX directly affects your bottom line
UX directly affects your bottom line
 
UX directly affects your bottom line
UX directly affects your bottom lineUX directly affects your bottom line
UX directly affects your bottom line
 
People-Centric Design Approach in Application Lifecycle
People-Centric Design Approach in Application LifecyclePeople-Centric Design Approach in Application Lifecycle
People-Centric Design Approach in Application Lifecycle
 
Hci lec 1 & 2
Hci lec 1 & 2Hci lec 1 & 2
Hci lec 1 & 2
 
User Experience Design for Embedded Devices
User Experience Design for Embedded DevicesUser Experience Design for Embedded Devices
User Experience Design for Embedded Devices
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
 
User Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile DevicesUser Interface Design for Web and Mobile Devices
User Interface Design for Web and Mobile Devices
 
Demystifying User Experience - General Assembly
Demystifying User Experience - General AssemblyDemystifying User Experience - General Assembly
Demystifying User Experience - General Assembly
 
Data-Driven Design for User Experience
Data-Driven Design for User Experience Data-Driven Design for User Experience
Data-Driven Design for User Experience
 
Data, Devices and Design
Data, Devices and DesignData, Devices and Design
Data, Devices and Design
 
Explore BICT Presentation
Explore BICT PresentationExplore BICT Presentation
Explore BICT Presentation
 

Último

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 

Último (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 

UX Basics

  • 1. 1© Creative IT, Inc. All rights reserved.© Creative IT, Inc. All rights reserved. UX Basics Kabir Malkani October 2019
  • 2. 2© Creative IT, Inc. All rights reserved. Interbrand – Best Global Brands 2019 Across all sectors
  • 3. 3© Creative IT, Inc. All rights reserved. Interbrand – Best Global Brands 2019 Technology and Business Services
  • 4. 4© Creative IT, Inc. All rights reserved. Spot the difference! Designing the product Designing the experience
  • 5. 5© Creative IT, Inc. All rights reserved. Relationship between Usability and UX
  • 6. 6© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Utility – It meets my needs
  • 7. 7© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Usability – I am able to use the product easily
  • 8. 8© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Desirability – I like the way the product looks and feels
  • 9. 9© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Brand Experience – My overall feeling about the brand/product is good! A positive UX leads to advocacy
  • 10. 10© Creative IT, Inc. All rights reserved. Relationship between UI, Usability and UX
  • 11. 11© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  • 12. 12© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  • 13. 13© Creative IT, Inc. All rights reserved. Fundamental Design Principles #1 Provide context Ensure people are contextually aware of where they are within their journey. Think ‘breadcrumbs’.
  • 14. 14© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  • 15. 15© Creative IT, Inc. All rights reserved. Fundamental Design Principles #2 Be human Eliminate confusion. Think human interaction.
  • 16. 16© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  • 17. 17© Creative IT, Inc. All rights reserved. Fundamental Design Principles #3 Make it discoverable Score “delight” points by being intuitive
  • 18. 18© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  • 19. 19© Creative IT, Inc. All rights reserved. Fundamental Design Principles #4 Make it easy Familiarize yourself with common widgets, patterns, metaphors and gestures.
  • 20. 20© Creative IT, Inc. All rights reserved. WTF!? Fundamental Design Principles
  • 21. 21© Creative IT, Inc. All rights reserved. Fundamental Design Principles #5 Keep it simple! Avoid clutter and confusion. Intuitiveness leads to discovery.
  • 22. 22© Creative IT, Inc. All rights reserved. What is UX?
  • 23. 23© Creative IT, Inc. All rights reserved. UI UXUI can influence UX… Layout Visual Design Branding Colors Typography Interaction Information Wireframes / Prototypes User Research Scenarios …but good UI does not necessarily mean good UX
  • 24. 24© Creative IT, Inc. All rights reserved. Surface Visual Design Skeleton Interface Design Navigation Design Information Design Structure Interaction Design Information Architecture Scope Functional Specs Content Requirements Strategy User Needs Site Objectives Jesse James Garrett’s Layers of User Experience Model The sum of a person’s emotions and behaviors when interacting with a product, system or service
  • 25. 25© Creative IT, Inc. All rights reserved. The UX Process
  • 26. 26© Creative IT, Inc. All rights reserved. The UX Process
  • 27. 27© Creative IT, Inc. All rights reserved. The UX Process Step #1 Product Definition 1. Stakeholder Interviews 2. Create Value Proposition 3. Concept Sketching / Rough Mockup 4. Project Kickoff Meeting / Metrics
  • 28. 28© Creative IT, Inc. All rights reserved. The UX Process Step #1 Product Definition > Stakeholder Interviews
  • 29. 29© Creative IT, Inc. All rights reserved. The UX Process Step #2 Product Research 1. User Needs / Individual In-depth Interviews (IDI) 2. Competitive Research
  • 30. 30© Creative IT, Inc. All rights reserved. The UX Process Step #2 Product Research > User Interviews Topics covered: 1. Background (such as ethnographic data) 2. The use of technology in general 3. The use of the product 4. The user’s main objectives and motivations 5. The user’s pain points Hint: Include a mix of qualitative and quantitative questions
  • 31. 31© Creative IT, Inc. All rights reserved. The UX Process Step #3 Analysis 1. Create Hypothetical Personas 2. Create Experience Maps / Customer Journey
  • 32. 32© Creative IT, Inc. All rights reserved. The UX Process Step #3 Analysis > Personas
  • 33. 33© Creative IT, Inc. All rights reserved. UX Process Step #4 Design 1. Sketching 2. Wireframing 3. Prototyping 4. Design Specifications
  • 34. 34© Creative IT, Inc. All rights reserved. Sketching Wireframing Prototyping The UX Process Step #2 Product Research > Sketching, Wireframing, Prototyping
  • 35. 35© Creative IT, Inc. All rights reserved. UX Process Step #5 Validation 1. Internal Checks 2. User Testing Sessions 3. Metrics Analysis 4. User Feedback (Post Launch)
  • 36. 36© Creative IT, Inc. All rights reserved. User Testing Step #5 Validation Methods Usability Testing a. Moderated b. Unmoderated (URUT) 2. Focus Groups 3. Beta Testing 4. A/B Testing 5. Surveys
  • 37. 37© Creative IT, Inc. All rights reserved. Best Practices • Keep physical constraints in mind • Put yourself in the place of a “visitor”. Focus on user goals • Be consistent with colors and typography and actions • Familiarize yourself with gestures and widgets • Pay attention to feedback (from everyone) and strive to constantly improve your product. • Reduce loading time • Provide sensory feedback for completed actions • Use feedback from users to constantly improve your product • Instill a “Wow” factor or an emotional connect with the users
  • 38. 38© Creative IT, Inc. All rights reserved. Epic Fails
  • 39. 39© Creative IT, Inc. All rights reserved. Killing two birds with one stone does not always give desirable results
  • 40. 40© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
  • 41. 41© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
  • 42. 42© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
  • 43. 43© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
  • 44. 44© Creative IT, Inc. All rights reserved. Double-check everything!
  • 45. 45© Creative IT, Inc. All rights reserved. Double-check everything!
  • 46. 46© Creative IT, Inc. All rights reserved. Double-check everything!
  • 47. 47© Creative IT, Inc. All rights reserved. Provide easy access to the most important things!
  • 48. 48© Creative IT, Inc. All rights reserved. Provide easy access to the most important things!
  • 49. 49© Creative IT, Inc. All rights reserved. Don’t show more than the user desires to see.
  • 50. 50© Creative IT, Inc. All rights reserved. Don’t show more than the user desires to see.
  • 51. 51© Creative IT, Inc. All rights reserved. Think of social, cultural and linguistic symbolism
  • 52. 52© Creative IT, Inc. All rights reserved. Think about the human factor
  • 53. 53© Creative IT, Inc. All rights reserved. Think about the human factor
  • 54. 54© Creative IT, Inc. All rights reserved. “Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs “A user interface is like a joke. If you have to explain it, it’s not that good”. Martin Leblanc “Any product that needs a manual to work is broken.” Elon Musk Thank you!