SlideShare a Scribd company logo
1 of 59
Download to read offline
DESIGN FOR GOOD OR EVIL
brought to you by Limina
Agenda
Evil Design
Good Design
Problem Solving Design Sprint Workshop
“Good design is actually a lot harder to notice than poor design, in part because
good designs fit our needs so well that the design is invisible.”- Don Norman
What makes design good?
“Good design is one that fills the gap between business goals and user needs. In order to fill
this gap, a process must be followed. A process that takes into consideration best practices
of user experience (UX) and usability guidelines to produce the desired outcome. Good
design is one that is tailored for the human use, and not one that is only functional or usable.
A good designer knows how to get into the mindset of his users, and turns their needs into a
meaningful, desirable, and easy-to-use product or service.”
Quote from “Good Design vs. Bad Design: Examples from Everyday Experiences” on UX Collective
https://uxdesign.cc/good-design-vs-bad-design-examples-from-everyday-experiences-18a7d1ba002c
EVIL DESIGN
What makes design evil?
“Tricks used in websites and apps that make you buy or sign
up for things that you didn’t mean to.”
www.darkpatterns.org
Dark Pattern
Works… in its own way
Productive for one party
Exploits human weaknesses
Carefully crafted
Difficult to identify
Not always intentional
Doesn’t Work
Counter-productive
Plain bad design
Poorly executed
Easily identified metrics
Never intentional
Anti-Pattern
VS
12 Different Types of Dark Patterns
1. Bait and Switch
2. Confirmshaming
3. Disguised Ads
4. Forced Continuity
5. Friend Spam
6. Hidden Costs
7. Sneak into Basket
8. Misdirection
9. Price Comparison Convention
10. Privacy Zuckering
11. Roach Motel
12. Trick Questions
Bait and Switch
You set out to do one thing, but a
different, undesirable thing happens
instead.
Ex. Confusing buttons on a modal that
you have to interact with the move
forward. When a mobile ad appears a
few seconds after the page loads.
Confirmshaming
Confirmshaming is the act of guilting the
user into opting into something. The
option to decline is worded in such a
way as to shame the user into
compliance.
Ex. The most common use is to get a
user to sign up for a mailing list.
Disguised Ads
Adverts that are disguised as other
kinds of content or navigation, in order
to get you to click on them.
Ex. Huge download buttons on an ad
that have nothing to do with the rest of
the page.
Forced Continuity
When your free trial with a service
comes to an end and your credit card
silently starts getting charged without
any warning. In some cases this is
made even worse by making it difficult
to cancel the membership.
Ex. Many subscription based
companies do this like Netflix, Blue
Apron, The Honest Company.
Friend Spam
The product asks for your email or
social media permissions under the
pretence it will be used for a desirable
outcome (e.g. finding friends), but then
spams all your contacts in a message
that claims to be from you.
Ex. LinkedIn does this by trying to get
you to connect with all of your contacts
after confirming one connection. The
primary button is to add all connections.
Hidden Costs
You get to the last step of the checkout
process, only to discover some
unexpected charges have appeared,
e.g. delivery charges, tax, etc.
Ex. GoDaddy does this when buying
domains. The site offers the user one
price in the beginning but by the time
they check out, the price increases
exponentially.
Sneak into Basket
You attempt to purchase something, but
somewhere in the purchasing journey
the site sneaks an additional item into
your basket, often through the use of an
opt-out radio button or checkbox on a
prior page.
Ex. Sites will sneak this in at the last
second before the user hits “Place
Order”. User has to remove the item in
order to avoid the extra charge.
Misdirection
The design purposefully focuses your
attention on one thing in order to
distract you attention from another.
Ex. Hidden extra costs that are
preselected for you but you can avoid if
you hit “skip”.
Price Comparison Prevention
The retailer makes it hard for you to
compare the price of an item with
another item, so you cannot make an
informed decision.
Ex. Site doesn’t include how much of
something you’ll be getting, so you can’t
figure out comparing what the final cost
will be.
Privacy Zuckering
You are tricked into publicly sharing
more information about yourself than
you really intended to. Named after
Facebook CEO Mark Zuckerberg.
Ex. When you sign up for anything
using Facebook. Hidden private terms
and conditions.
Roach Motel
The design makes it very easy for you
to get into a certain situation, but then
makes it hard for you to get out of it
(e.g. a subscription).
Ex. When you sign up for a service
online then try to cancel your
subscription, only to find that you have
to phone the company to do so. Or if
you order something and have to jump
through hoops to return it.
Trick Questions
You respond to a question, which, when
glanced upon quickly appears to ask
one thing, but if read carefully, asks
another thing entirely.
Ex. This happens a lot when users are
agreeing to terms and conditions when
creating an account for a website
Evil UX Awards
Evil UX patterns can occur in real life too...
Real Life Examples
● Parking signs
● Service fees on tickets
● Speed traps
● Door handles
Real Life Examples
Real Life Examples
Bad UX + Art
An artist by the name Katerina Kamprani shows us with “The Uncomfortable”, examples of bad UX with a
series of familiar household objects rendered aggravatingly unusable with a few simple adjustments.
GOOD DESIGN
Jakob Nielsen’s ‘10 General Principles for
Interaction Design.’
1. Visibility of system status.
2. Match between system and the real world.
3. User control and freedom.
4. Consistency and standards.
5. Error prevention.
6. Recognition rather than recall.
7. Flexibility and efficiency of use.
8. Aesthetic and minimalist design.
9. Error recovery.
10. Help and documentation.
Predictable Consequences
The actions you take have predictable
and desired consequences.
Ex. Easily visible buttons with clear text
to set expectations, common and
consistent interaction patterns, an
understanding and reflection of the most
likely user path.
Meets the User’s Needs +
The interaction not only allows you, but
helps you achieve your goal as a user,
hopefully with a bit of delight.
“If we want users to like our software we should design it
to behave like a likeable person: respectful, generous
and helpful.” - Alan Cooper
littlebigdetails.com
Ex. If you leave a slack channel before
sending the text you wrote, the # turns
into a edit pencil icon. Google Forms
can tell if you will want checkbox by the
words in your question.
Clear Navigation & Organization -
No Cul de sacs
Clear nav. is fundamental to a good experience
and key in accessibility success. Good nav design
also keeps users from becoming stuck somewhere
which can lead to frustration & abandonment.
Ex. The U.S. Web Design System side nav.
component tells the user what page they are,
where that page lives in the hierarchy of the this
section of architecture and when labeled
prescriptively, it can tell the user what type of info
is to be found on each page
User Control and Freedom
There is a reason why “empowering the user” is
commonly heard when discussing UX best
practices. Even offboarding is a good chance to
improve users experience, empowering not only
the user, but your brand and reputation as well.
Ex. Clear and easy to use cancellation
flows, unsubscribes and customer
service links readily available, undo,
user customization
uxplanet.org
Error Prevention, Error Recovery & Help
“Users hate errors, and even more so hate the feeling
that they themselves have done something wrong. Either
eliminate error-prone conditions or check for them and
notify users about that before they commit to the action.”
https://uxplanet.org/golden-rules-of-user-interface-design-19282aeb06b
Ex. Testing to inform decisions
to help prevent interaction pain-
points that could cause errors,
error checking and user
feedback to help correct errors,
and no dead end error states.
Minimal Design Aesthetic
Minimalism isn’t the same as simplicity.
Minimal UI is about making screens as
simple as they need to be.
“Minimalism is a perfect marriage of form and function. It’s greatest strength is
clarity of form — clean lines, generous whitespace, and minimal graphical
elements brings simplicity to even the most confounding subject matter. That is,
of course, if it’s used effectively.” -Nick Babich
Ex. Use of whitespace, clear visual
hierarchy, large readable text, use of
color and icons to organize information.
Flexible, Efficient, Consistent System
Often including a symbol library or
component library combine the
concepts of consistency, predictability,
clarity through minimalism.
Ex. Standardized buttons, dropdowns,
models, list styles, etc (including all
states). Google’s Material Design is a
good example of such a library
Real Life Examples
User Trust
There is a reason why the UX industry is ripe
with practices like empathy mapping and
user journeys. There is a real person using
your service, product or app and they are
doing so because you are offering
something they want or need. Users are
smart, the moment we forget or worse try to
exploit their motivations is the moment we
lose them. Trust is hard-won, but rebuilding
user trust after hurting it is close to
impossible.
Comcast’s reputation as a huge internet provider
with horrible customer service (i.e. horrible
support UX) was so ingrained (they lost over
600,000 customers in 2009), they had to change
their entire brand in hopes of regaining customer
good will.
RESOURCES
Resources & Tools: WCAG Compliance
● WCAG 2.0 checklists and explanations
○ www.wuhcag.com/wcag-checklist/
● Plugins
○ Browser plugins like Chrome Color Contrast
Analyzer
○ Sketch plugins like Stark
● Online testing tools
○ DYNOMAPPER.COM
○ A11Y COMPLIANCE PLATFORM
○ Many more available
● User Testing
“[Testing tools alone] cannot tell you if your web
content is accessible. Only a human can determine
true accessibility ”
Resources: U.S. Digital Service & Web
Design System
The U.S. Web Design system of
UI components are designed to
set a new bar for simplicity and
consistency across government
services, while providing you with
plug-and-play design and code.
They also address many aspects
of accessibility and WCAG
requirements.
U.S. Web Design System V2 now in beta
https://v2.designsystem.digital.gov/components/
Striving to Go Beyond Good to Noble
Why focus on UX at all? Are you in it purely to win the business of
users, are you trying just “beat your competitors”?
Or… are you looking to truly improve and enhance the lives of your
users… maybe even go beyond that to become meaningful to the
lives of your users, and be a source of happiness in their lives?
There was a TEDx MidAtlantic talk by Joel Salatin who summed up
his talk with the following statement:
“When you strive for nobility in your given vocation, the world
will rise to meet you.”
no·bil·i·ty/nōˈbilədē/
noun. the quality of being noble in character or mind.
synonyms: virtue, goodness, honor, decency, integrity;
magnanimity, generosity, selflessness
"the nobility of his/her deed" Abraham Maslow
https://en.wikipedia.org/wiki/Abraham_Maslow
FUNCTIONAL
FUNCTIONAL
RELIABLE
USABLE
FUNCTIONAL
RELIABLE
USABLE
CONVENIENT
PLEASURABLE
MEANINGFUL
FUNCTIONAL
RELIABLE
USABLE
CONVENIENT
PLEASURABLE
MEANINGFUL
WORKSHOP
UX Design Sprint Workshop
Design Sprints: In a Nutshell
A design sprint is a time-bound, six-part process that uses design thinking with the
purpose of limiting risk when bringing a new product, service or feature to the
market.
It follows six phases:
1. Understand
2. Define
3. Sketch
4. Decide
5. Prototype
6. Validate
https://designsprintkit.withgoogle.com
Select a Problem (3 min)
Divide into teams of 2-3. Choose a one
of our example UX problems to tackle
for your design sprint, or, you can tackle
one of your own.
Mind Mapping (10 min)
Create a high-level overview of all the
user tasks and subtasks associated with
a product.
● Start high-level
● Expand your branches
● Focus on user needs
Crazy 8s (8 min)
Divide your paper into 8 sections, and
sketch 8 ideas.
● Rough sketches are ok!
● All 8 sketches can be towards 1
idea or individual ideas
Discussion & Voting (10 min)
After sketching, you have a few minutes
to discuss your ideas. Then, each
person can vote on the 3 best ideas.
● Keep discussion to 3 minutes or
less per person
● Each team member uses their dots
to denote what they think the top 3
compelling ideas are
● You can use your all your votes on
one idea
Solution Sketching (10 min)
Based on the top 3 ideas coming out of
Crazy 8s voting, create a more detailed
sketch of a single idea.
● Include a couple states of your
sketch to help illustrate functionality
or flows
Storyboarding (10 min)
Select which solution sketch your group
would like to storyboard. Then, visually
show the steps that a user would take to
interact with the product.
● Keep to 1 frame per user task
Present (20 min)
Give a quick overview of your problem
and your final outcomes from your
design sprint.
Please share your social media posts including
#locowudUP
Thank You
About Event Organizers
World Usability Day
LOCO | UX
Limina
World Usability Day is single day of events occurring around the world that brings together communities of
professional, industrial, educational, citizen, and government groups for our common objective: to ensure that the
services and products important to life are easier to access and simpler to use.
This group is for Longmont UX / UI professionals to get together to discuss tools, tips, techniques and
trends in user experience. This meetup will be used to organize happy hours, presentations, civic-tech UX
workshops, and more.
Technical & UX Leadership for Complex Systems
We work with startups, enterprise businesses, and government agencies to lead design and integrated UX for
complex user-centered systems

More Related Content

What's hot

Just Make Me a Dashboard!
Just Make Me a Dashboard!Just Make Me a Dashboard!
Just Make Me a Dashboard!Theresa Neil
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For UseChristina Wodtke
 
Enterprise User Experience in Higher Education
Enterprise User Experience in Higher EducationEnterprise User Experience in Higher Education
Enterprise User Experience in Higher EducationTarik (Rick) Dzekman
 
Why UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software productsWhy UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software productsBoldare
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyJoan Lumanauw
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesThink 360 Studio
 
Putting the "User" back in User Experience
Putting the "User" back in User ExperiencePutting the "User" back in User Experience
Putting the "User" back in User ExperienceJeremy Johnson
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsJayan Narayanan
 
Jade Ng UX Portfolio - June 2015
Jade Ng UX Portfolio - June 2015Jade Ng UX Portfolio - June 2015
Jade Ng UX Portfolio - June 2015Luky (Jade) Ng
 
The 8 Principles of Design – How to Leverage the Power of Design and Turn Con...
The 8 Principles of Design – How to Leverage the Power of Design and Turn Con...The 8 Principles of Design – How to Leverage the Power of Design and Turn Con...
The 8 Principles of Design – How to Leverage the Power of Design and Turn Con...Josh Levine
 
Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Binary Studio
 
UX & UI: The differences between two abbreviations
UX & UI: The differences between two abbreviationsUX & UI: The differences between two abbreviations
UX & UI: The differences between two abbreviationsJessica Kainu
 
The Web Design Summary.doc.doc
The Web Design Summary.doc.docThe Web Design Summary.doc.doc
The Web Design Summary.doc.docbutest
 
Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?AppClues Infotech
 
The 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTestingThe 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTestingInVision App
 

What's hot (19)

Just Make Me a Dashboard!
Just Make Me a Dashboard!Just Make Me a Dashboard!
Just Make Me a Dashboard!
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For Use
 
Enterprise User Experience in Higher Education
Enterprise User Experience in Higher EducationEnterprise User Experience in Higher Education
Enterprise User Experience in Higher Education
 
Why UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software productsWhy UI & UX Design Matters? For building digital and software products
Why UI & UX Design Matters? For building digital and software products
 
UX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual HierarchyUX Lesson 6: Visual Hierarchy
UX Lesson 6: Visual Hierarchy
 
UX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny QuotesUX Humor | Jokes and Funny Quotes
UX Humor | Jokes and Funny Quotes
 
Putting the "User" back in User Experience
Putting the "User" back in User ExperiencePutting the "User" back in User Experience
Putting the "User" back in User Experience
 
IxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital InteractionsIxD & UX Design - Personifying Digital Interactions
IxD & UX Design - Personifying Digital Interactions
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
Jade Ng UX Portfolio - June 2015
Jade Ng UX Portfolio - June 2015Jade Ng UX Portfolio - June 2015
Jade Ng UX Portfolio - June 2015
 
The 8 Principles of Design – How to Leverage the Power of Design and Turn Con...
The 8 Principles of Design – How to Leverage the Power of Design and Turn Con...The 8 Principles of Design – How to Leverage the Power of Design and Turn Con...
The 8 Principles of Design – How to Leverage the Power of Design and Turn Con...
 
BASIC UX PRESENTATION
BASIC UX PRESENTATIONBASIC UX PRESENTATION
BASIC UX PRESENTATION
 
Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.Academy PRO: UI\UX. Introduction.
Academy PRO: UI\UX. Introduction.
 
UX & UI: The differences between two abbreviations
UX & UI: The differences between two abbreviationsUX & UI: The differences between two abbreviations
UX & UI: The differences between two abbreviations
 
UI Design 101: Day 02 of 07
UI Design 101: Day 02 of 07UI Design 101: Day 02 of 07
UI Design 101: Day 02 of 07
 
UX Fundamentals for Startups
UX Fundamentals for StartupsUX Fundamentals for Startups
UX Fundamentals for Startups
 
The Web Design Summary.doc.doc
The Web Design Summary.doc.docThe Web Design Summary.doc.doc
The Web Design Summary.doc.doc
 
Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?Why Mobile App Should Upgrade to UX/UI Design?
Why Mobile App Should Upgrade to UX/UI Design?
 
The 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTestingThe 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTesting
 

Similar to Design for Good or Evil. World Usability Day & Limina

13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an ExorcismCrystal Beasley
 
Why Do User Research And Usability Testing
Why Do User Research And Usability TestingWhy Do User Research And Usability Testing
Why Do User Research And Usability TestingRobert Stackhouse
 
accessibility_101.pdf
accessibility_101.pdfaccessibility_101.pdf
accessibility_101.pdfdonna911404
 
9 worst practices in ux design
9 worst practices in ux design9 worst practices in ux design
9 worst practices in ux designSachin Khatiwoda
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to KnowPravin Mehta
 
Usability: whats the use? Presented by We are Sigma and PRWD
Usability: whats the use? Presented by We are Sigma and PRWDUsability: whats the use? Presented by We are Sigma and PRWD
Usability: whats the use? Presented by We are Sigma and PRWDNexer Digital
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Designsirferds
 
Why Design is Critical for Conversion
Why Design is Critical for ConversionWhy Design is Critical for Conversion
Why Design is Critical for ConversionNet Affinity
 
Usability
UsabilityUsability
Usabilityatrips
 
Usability--What is it?
Usability--What is it?Usability--What is it?
Usability--What is it?Ann Krause
 
How to Create Insanely Cool UX Designs Using Micro-interactions?
How to Create Insanely Cool UX Designs Using Micro-interactions?How to Create Insanely Cool UX Designs Using Micro-interactions?
How to Create Insanely Cool UX Designs Using Micro-interactions?Kaspar Lavik
 
30 Most Common Business Website Mistakes
30 Most Common Business Website Mistakes30 Most Common Business Website Mistakes
30 Most Common Business Website MistakesINCORE Digital Agency
 
User Experience Design for Non‐Designers
User Experience Designfor Non‐DesignersUser Experience Designfor Non‐Designers
User Experience Design for Non‐Designerskimberlythecat
 
Hit the ground running - Top tips to immediately improve your user experience 
Hit the ground running - Top tips to immediately improve your user experience Hit the ground running - Top tips to immediately improve your user experience 
Hit the ground running - Top tips to immediately improve your user experience Kudos
 
Acquire New Users with Better Activation
Acquire New Users with Better ActivationAcquire New Users with Better Activation
Acquire New Users with Better ActivationConrad Wadowski
 
The User Experience Brief
The User Experience BriefThe User Experience Brief
The User Experience BriefJohn Yesko
 

Similar to Design for Good or Evil. World Usability Day & Limina (20)

13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
 
Why Do User Research And Usability Testing
Why Do User Research And Usability TestingWhy Do User Research And Usability Testing
Why Do User Research And Usability Testing
 
accessibility_101.pdf
accessibility_101.pdfaccessibility_101.pdf
accessibility_101.pdf
 
9 worst practices in ux design
9 worst practices in ux design9 worst practices in ux design
9 worst practices in ux design
 
Usability Essentials to Know
Usability Essentials to KnowUsability Essentials to Know
Usability Essentials to Know
 
Usability: whats the use? Presented by We are Sigma and PRWD
Usability: whats the use? Presented by We are Sigma and PRWDUsability: whats the use? Presented by We are Sigma and PRWD
Usability: whats the use? Presented by We are Sigma and PRWD
 
10 Principles Of Effective Web Design
10 Principles Of Effective Web Design10 Principles Of Effective Web Design
10 Principles Of Effective Web Design
 
Why Design is Critical for Conversion
Why Design is Critical for ConversionWhy Design is Critical for Conversion
Why Design is Critical for Conversion
 
Usability
UsabilityUsability
Usability
 
Intro to UX with Huge
Intro to UX with HugeIntro to UX with Huge
Intro to UX with Huge
 
Usability--What is it?
Usability--What is it?Usability--What is it?
Usability--What is it?
 
The Odd Couple of UX Design
The Odd Couple of UX DesignThe Odd Couple of UX Design
The Odd Couple of UX Design
 
How to Create Insanely Cool UX Designs Using Micro-interactions?
How to Create Insanely Cool UX Designs Using Micro-interactions?How to Create Insanely Cool UX Designs Using Micro-interactions?
How to Create Insanely Cool UX Designs Using Micro-interactions?
 
30 Most Common Business Website Mistakes
30 Most Common Business Website Mistakes30 Most Common Business Website Mistakes
30 Most Common Business Website Mistakes
 
User Experience Design for Non‐Designers
User Experience Designfor Non‐DesignersUser Experience Designfor Non‐Designers
User Experience Design for Non‐Designers
 
Hit the ground running - Top tips to immediately improve your user experience 
Hit the ground running - Top tips to immediately improve your user experience Hit the ground running - Top tips to immediately improve your user experience 
Hit the ground running - Top tips to immediately improve your user experience 
 
Biz Product Learnings
Biz Product LearningsBiz Product Learnings
Biz Product Learnings
 
CH_Portfolio2016
CH_Portfolio2016CH_Portfolio2016
CH_Portfolio2016
 
Acquire New Users with Better Activation
Acquire New Users with Better ActivationAcquire New Users with Better Activation
Acquire New Users with Better Activation
 
The User Experience Brief
The User Experience BriefThe User Experience Brief
The User Experience Brief
 

Recently uploaded

simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersCre8iveskill
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...JIT KUMAR GUPTA
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinSamar Hossam ElDin Ahmed
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfswdukle
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfLewis John
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxYaminiDabbara
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVAAnastasiya Kudinova
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufisiyoufihoussam
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
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
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 

Recently uploaded (20)

simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Understanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's MattersUnderstanding Image Masking: What It Is and Why It's Matters
Understanding Image Masking: What It Is and Why It's Matters
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy..._Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
_Neighborhood Planning in Capital City of Chandigarh- An Appraisal (2) - Copy...
 
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDinGeneral Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
General Simple Guide About AI in Design By: A.L. Samar Hossam ElDin
 
eCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdfeCultify brand guidelines- Shamika Dukle.pdf
eCultify brand guidelines- Shamika Dukle.pdf
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdfUnlock Canva Pro for Free Today - Canva Pro for Free.pdf
Unlock Canva Pro for Free Today - Canva Pro for Free.pdf
 
City Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptxCity Hall London, Norman Foster building description with building details.pptx
City Hall London, Norman Foster building description with building details.pptx
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
PORTFOLIO 2024 ANASTASIYA KUDINOVA
PORTFOLIO 2024       ANASTASIYA KUDINOVAPORTFOLIO 2024       ANASTASIYA KUDINOVA
PORTFOLIO 2024 ANASTASIYA KUDINOVA
 
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam SiyoufiHighway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
Highway LOS - Freeway-- Multilane -- highway class 2 & 3 Housam Siyoufi
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
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 ...
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 

Design for Good or Evil. World Usability Day & Limina

  • 1. DESIGN FOR GOOD OR EVIL brought to you by Limina
  • 2. Agenda Evil Design Good Design Problem Solving Design Sprint Workshop
  • 3. “Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible.”- Don Norman
  • 4. What makes design good? “Good design is one that fills the gap between business goals and user needs. In order to fill this gap, a process must be followed. A process that takes into consideration best practices of user experience (UX) and usability guidelines to produce the desired outcome. Good design is one that is tailored for the human use, and not one that is only functional or usable. A good designer knows how to get into the mindset of his users, and turns their needs into a meaningful, desirable, and easy-to-use product or service.” Quote from “Good Design vs. Bad Design: Examples from Everyday Experiences” on UX Collective https://uxdesign.cc/good-design-vs-bad-design-examples-from-everyday-experiences-18a7d1ba002c
  • 6. What makes design evil? “Tricks used in websites and apps that make you buy or sign up for things that you didn’t mean to.” www.darkpatterns.org
  • 7. Dark Pattern Works… in its own way Productive for one party Exploits human weaknesses Carefully crafted Difficult to identify Not always intentional Doesn’t Work Counter-productive Plain bad design Poorly executed Easily identified metrics Never intentional Anti-Pattern VS
  • 8. 12 Different Types of Dark Patterns 1. Bait and Switch 2. Confirmshaming 3. Disguised Ads 4. Forced Continuity 5. Friend Spam 6. Hidden Costs 7. Sneak into Basket 8. Misdirection 9. Price Comparison Convention 10. Privacy Zuckering 11. Roach Motel 12. Trick Questions
  • 9. Bait and Switch You set out to do one thing, but a different, undesirable thing happens instead. Ex. Confusing buttons on a modal that you have to interact with the move forward. When a mobile ad appears a few seconds after the page loads.
  • 10. Confirmshaming Confirmshaming is the act of guilting the user into opting into something. The option to decline is worded in such a way as to shame the user into compliance. Ex. The most common use is to get a user to sign up for a mailing list.
  • 11. Disguised Ads Adverts that are disguised as other kinds of content or navigation, in order to get you to click on them. Ex. Huge download buttons on an ad that have nothing to do with the rest of the page.
  • 12. Forced Continuity When your free trial with a service comes to an end and your credit card silently starts getting charged without any warning. In some cases this is made even worse by making it difficult to cancel the membership. Ex. Many subscription based companies do this like Netflix, Blue Apron, The Honest Company.
  • 13. Friend Spam The product asks for your email or social media permissions under the pretence it will be used for a desirable outcome (e.g. finding friends), but then spams all your contacts in a message that claims to be from you. Ex. LinkedIn does this by trying to get you to connect with all of your contacts after confirming one connection. The primary button is to add all connections.
  • 14. Hidden Costs You get to the last step of the checkout process, only to discover some unexpected charges have appeared, e.g. delivery charges, tax, etc. Ex. GoDaddy does this when buying domains. The site offers the user one price in the beginning but by the time they check out, the price increases exponentially.
  • 15. Sneak into Basket You attempt to purchase something, but somewhere in the purchasing journey the site sneaks an additional item into your basket, often through the use of an opt-out radio button or checkbox on a prior page. Ex. Sites will sneak this in at the last second before the user hits “Place Order”. User has to remove the item in order to avoid the extra charge.
  • 16. Misdirection The design purposefully focuses your attention on one thing in order to distract you attention from another. Ex. Hidden extra costs that are preselected for you but you can avoid if you hit “skip”.
  • 17. Price Comparison Prevention The retailer makes it hard for you to compare the price of an item with another item, so you cannot make an informed decision. Ex. Site doesn’t include how much of something you’ll be getting, so you can’t figure out comparing what the final cost will be.
  • 18. Privacy Zuckering You are tricked into publicly sharing more information about yourself than you really intended to. Named after Facebook CEO Mark Zuckerberg. Ex. When you sign up for anything using Facebook. Hidden private terms and conditions.
  • 19. Roach Motel The design makes it very easy for you to get into a certain situation, but then makes it hard for you to get out of it (e.g. a subscription). Ex. When you sign up for a service online then try to cancel your subscription, only to find that you have to phone the company to do so. Or if you order something and have to jump through hoops to return it.
  • 20. Trick Questions You respond to a question, which, when glanced upon quickly appears to ask one thing, but if read carefully, asks another thing entirely. Ex. This happens a lot when users are agreeing to terms and conditions when creating an account for a website
  • 22. Evil UX patterns can occur in real life too...
  • 23. Real Life Examples ● Parking signs ● Service fees on tickets ● Speed traps ● Door handles
  • 26. Bad UX + Art An artist by the name Katerina Kamprani shows us with “The Uncomfortable”, examples of bad UX with a series of familiar household objects rendered aggravatingly unusable with a few simple adjustments.
  • 28. Jakob Nielsen’s ‘10 General Principles for Interaction Design.’ 1. Visibility of system status. 2. Match between system and the real world. 3. User control and freedom. 4. Consistency and standards. 5. Error prevention. 6. Recognition rather than recall. 7. Flexibility and efficiency of use. 8. Aesthetic and minimalist design. 9. Error recovery. 10. Help and documentation.
  • 29. Predictable Consequences The actions you take have predictable and desired consequences. Ex. Easily visible buttons with clear text to set expectations, common and consistent interaction patterns, an understanding and reflection of the most likely user path.
  • 30. Meets the User’s Needs + The interaction not only allows you, but helps you achieve your goal as a user, hopefully with a bit of delight. “If we want users to like our software we should design it to behave like a likeable person: respectful, generous and helpful.” - Alan Cooper littlebigdetails.com Ex. If you leave a slack channel before sending the text you wrote, the # turns into a edit pencil icon. Google Forms can tell if you will want checkbox by the words in your question.
  • 31. Clear Navigation & Organization - No Cul de sacs Clear nav. is fundamental to a good experience and key in accessibility success. Good nav design also keeps users from becoming stuck somewhere which can lead to frustration & abandonment. Ex. The U.S. Web Design System side nav. component tells the user what page they are, where that page lives in the hierarchy of the this section of architecture and when labeled prescriptively, it can tell the user what type of info is to be found on each page
  • 32. User Control and Freedom There is a reason why “empowering the user” is commonly heard when discussing UX best practices. Even offboarding is a good chance to improve users experience, empowering not only the user, but your brand and reputation as well. Ex. Clear and easy to use cancellation flows, unsubscribes and customer service links readily available, undo, user customization uxplanet.org
  • 33. Error Prevention, Error Recovery & Help “Users hate errors, and even more so hate the feeling that they themselves have done something wrong. Either eliminate error-prone conditions or check for them and notify users about that before they commit to the action.” https://uxplanet.org/golden-rules-of-user-interface-design-19282aeb06b Ex. Testing to inform decisions to help prevent interaction pain- points that could cause errors, error checking and user feedback to help correct errors, and no dead end error states.
  • 34. Minimal Design Aesthetic Minimalism isn’t the same as simplicity. Minimal UI is about making screens as simple as they need to be. “Minimalism is a perfect marriage of form and function. It’s greatest strength is clarity of form — clean lines, generous whitespace, and minimal graphical elements brings simplicity to even the most confounding subject matter. That is, of course, if it’s used effectively.” -Nick Babich Ex. Use of whitespace, clear visual hierarchy, large readable text, use of color and icons to organize information.
  • 35. Flexible, Efficient, Consistent System Often including a symbol library or component library combine the concepts of consistency, predictability, clarity through minimalism. Ex. Standardized buttons, dropdowns, models, list styles, etc (including all states). Google’s Material Design is a good example of such a library
  • 37. User Trust There is a reason why the UX industry is ripe with practices like empathy mapping and user journeys. There is a real person using your service, product or app and they are doing so because you are offering something they want or need. Users are smart, the moment we forget or worse try to exploit their motivations is the moment we lose them. Trust is hard-won, but rebuilding user trust after hurting it is close to impossible. Comcast’s reputation as a huge internet provider with horrible customer service (i.e. horrible support UX) was so ingrained (they lost over 600,000 customers in 2009), they had to change their entire brand in hopes of regaining customer good will.
  • 39. Resources & Tools: WCAG Compliance ● WCAG 2.0 checklists and explanations ○ www.wuhcag.com/wcag-checklist/ ● Plugins ○ Browser plugins like Chrome Color Contrast Analyzer ○ Sketch plugins like Stark ● Online testing tools ○ DYNOMAPPER.COM ○ A11Y COMPLIANCE PLATFORM ○ Many more available ● User Testing “[Testing tools alone] cannot tell you if your web content is accessible. Only a human can determine true accessibility ”
  • 40. Resources: U.S. Digital Service & Web Design System The U.S. Web Design system of UI components are designed to set a new bar for simplicity and consistency across government services, while providing you with plug-and-play design and code. They also address many aspects of accessibility and WCAG requirements. U.S. Web Design System V2 now in beta https://v2.designsystem.digital.gov/components/
  • 41. Striving to Go Beyond Good to Noble Why focus on UX at all? Are you in it purely to win the business of users, are you trying just “beat your competitors”? Or… are you looking to truly improve and enhance the lives of your users… maybe even go beyond that to become meaningful to the lives of your users, and be a source of happiness in their lives? There was a TEDx MidAtlantic talk by Joel Salatin who summed up his talk with the following statement: “When you strive for nobility in your given vocation, the world will rise to meet you.” no·bil·i·ty/nōˈbilədē/ noun. the quality of being noble in character or mind. synonyms: virtue, goodness, honor, decency, integrity; magnanimity, generosity, selflessness "the nobility of his/her deed" Abraham Maslow https://en.wikipedia.org/wiki/Abraham_Maslow
  • 42.
  • 48. UX Design Sprint Workshop
  • 49. Design Sprints: In a Nutshell A design sprint is a time-bound, six-part process that uses design thinking with the purpose of limiting risk when bringing a new product, service or feature to the market. It follows six phases: 1. Understand 2. Define 3. Sketch 4. Decide 5. Prototype 6. Validate https://designsprintkit.withgoogle.com
  • 50. Select a Problem (3 min) Divide into teams of 2-3. Choose a one of our example UX problems to tackle for your design sprint, or, you can tackle one of your own.
  • 51. Mind Mapping (10 min) Create a high-level overview of all the user tasks and subtasks associated with a product. ● Start high-level ● Expand your branches ● Focus on user needs
  • 52. Crazy 8s (8 min) Divide your paper into 8 sections, and sketch 8 ideas. ● Rough sketches are ok! ● All 8 sketches can be towards 1 idea or individual ideas
  • 53. Discussion & Voting (10 min) After sketching, you have a few minutes to discuss your ideas. Then, each person can vote on the 3 best ideas. ● Keep discussion to 3 minutes or less per person ● Each team member uses their dots to denote what they think the top 3 compelling ideas are ● You can use your all your votes on one idea
  • 54. Solution Sketching (10 min) Based on the top 3 ideas coming out of Crazy 8s voting, create a more detailed sketch of a single idea. ● Include a couple states of your sketch to help illustrate functionality or flows
  • 55. Storyboarding (10 min) Select which solution sketch your group would like to storyboard. Then, visually show the steps that a user would take to interact with the product. ● Keep to 1 frame per user task
  • 56. Present (20 min) Give a quick overview of your problem and your final outcomes from your design sprint.
  • 57. Please share your social media posts including #locowudUP
  • 59. About Event Organizers World Usability Day LOCO | UX Limina World Usability Day is single day of events occurring around the world that brings together communities of professional, industrial, educational, citizen, and government groups for our common objective: to ensure that the services and products important to life are easier to access and simpler to use. This group is for Longmont UX / UI professionals to get together to discuss tools, tips, techniques and trends in user experience. This meetup will be used to organize happy hours, presentations, civic-tech UX workshops, and more. Technical & UX Leadership for Complex Systems We work with startups, enterprise businesses, and government agencies to lead design and integrated UX for complex user-centered systems

Editor's Notes

  1. Welcome to WUD. Topic this year is Good vs Evil design. Today we will be going over evil design (dark patterns), good design (what you should be doing) and as well as a problem solving sprint workshop to get everyone involved.
  2. When you’re on your phone, you probably only notice when things aren’t working well. How many times have you tweeted or called out when something has been bad vs good? I guess the moral is, your design should be so good that people don’t even notice it.
  3. Eventually Ellie is going to go over in depth what Good Design looks like what I wanted to give you a definition so we have something to compare it to. Good design fills in the gap between business goals and user needs. We all have clients where we’re trying to fulfill their business goals but we also have to remember that there are humans on the other end, with needs that we have to address. We can do this with a good process of discovery in order to figure out how to provide a meaningful experience for the users.
  4. Switch gears, to Evil Design
  5. This definition comes from DarkPatterns.org In general this means being dishonest and using trickery to get users to go down a desired path for the company and not the user
  6. Before I explain the 12 different patterns, I want to acknowledge that there are Dark Patterns and just bad design in general, known as anti-patterns. Dark patterns are on purpose... anti-patterns usually come from lack of knowledge, poor discovery, bad design, etc. If you think you might have some of these anti-patterns, the best way to find out is to turn to your web metrics. Look for users dropping off of pages, random clicking, repeatedly scrolling up and down. For example, a hover-over menu that closes before you can click a menu item, clickable elements that don’t appear clickable, erasing information in a form when there’s an error...
  7. Evil UX is currently categorized into 12 different categories that we’ll go over in depth on the next few slides called Dark Patterns
  8. Windows became famous for creating this modal. The upgrade now, ok and X all automatically started the upgrade. There was no getting out of it.
  9. One of my favorites because it uses passive aggressive statements to guilt users into either signing up for an email subscription, coupon, etc by writing a statement that means you’re choosing a negative choice by opting out of whatever the site is proposing.
  10. Sites that usually have a download CTA will have these targeted ads with a huge download button in them, trying to trick users into clicking on them since the main action of the page is to download something.
  11. Blue Apron, The Honest Company does this Continuity = like CONtinent Many of these sites won’t give your money back once they start charging you
  12. Opt-out instead of an opt-in The primary button is to add every one of your contacts, including all of your ex girlfriends and ex boyfriends.
  13. This one is done by sites that will quote you at one price in the beginning so it sounds like such a deal but by the time you go through the process and get to your shopping cart to check out, the price has increased exponentially.n
  14. You have to remove it and if you don’t, you’re automatically charged for a random item that the site has added to your cart. I’ve seen this happen a lot with a site adding product insurance.
  15. This airline website automatically selects a seat for you that is extra money. The user can avoid the charge by selecting a free seat but most users would assume their only choice is a preselected seat for more money.
  16. Units aren’t consistent
  17. 3rd party sign-up, hard to back out of
  18. Email, ask for shipping label, Seen this with subscription services where it’s easy to sign up online but to cancel the subscription you have to call someone and they try to convince you out of it.
  19. Not sure whether clicking is opting in or opting out here
  20. Almost like it incentivises it Kind of like Razzie
  21. Not sure where this should fit in https://www.wired.com/2014/04/perfect-terrible-redesigns/
  22. As we mentioned, this year’s World Usability Day theme is Design for Good or Evil. Clearly Dark Patterns are the Evil side They exploit UX knowledge to trick and manipulate users to ends that are detrimental to them Transversely, and obviously UX practices can be used for and overwhelming are used for good. Many of us are familiar with good UX patterns either as UX practitioners or just as users. Let’s look at some examples of Good design principles in-action
  23. Jakob Nielsen, one of the founders of the Nielsen Norman group 10 General Principles for Interaction Design These are general guidelines for designers to ensure the usability of their creations are both good and consistent
  24. In response to “Bait and Switch” Predictable Consequences: Understanding the most likely user path and making it easy to find an begin Clearly visible buttons Text on buttons that gives users a pretty clear idea what will happen when clicked Not including a lot of other info not useful to the task the user is trying to do at that moment
  25. In response to “Confirmshaming” Help users with what they are trying to do beyond path obvious, make sure the interaction is helpful, confirm and give indication of “status” Users are interacting with a product, site or application because they need or want to do something. Good UX doesn’t just allow that, it’s a helper with the task One way is Contextual guidance and reminders (careful, can get annoying if not implemented correctly - ie clippy) These are Great opportunities for moments of delight
  26. Response to Disguised Ads : clarity in navigation (where you are, where you want to go next) Don’t want your users to get stuck Good nav tells the user where they are Where they are or can go And what they will find when they get there It also helps the user understand the hierarchy and organization of the information
  27. In response to misdirection, and “sneak into the basket”, and “friendspam”, “zuckering” Users expect to be empowered Think of all the major market disruptors from the last decade or so AirBnB Uber and Lyft Netflix They all offered more individual empowerment to the users in industries previously dictated greatly by the companies that led in those markets Even offboarding is an opportunity to give users the control and freedom they want. Sure they are leaving, but they could still become a brand evangelist if their experience is good OR they could decide to stay
  28. Users are likely to blame themselves for errors And then abandon the technology thinking they just can’t figure out how to use Good UX Helps the user Give feedback as they input a new password to let them know if it meets the requirements and how secure their choice is before they hit enter Give them context Remind them when they are about to do something that cannot be undone or impacts other aspects of the interaction that they may not be thinking of Speed-bumps can be a good thing when applied correctly
  29. Maine.gov, Shazam, Airbnb calendar Misdirection? Disguised Ads? Bait n Switch? Minimal UI Design is about only giving the user what they need at that moment to accomplish what they are trying to do Google is a big proponent of this philosophy Not only is it clean and pleasing, it’s clearer Hierarchy Scannability especially important for mobile when screen space is less
  30. Consistent stop signs/street signs Accessibility signs = wheelchair symbol Consistent Systems provide Consistency Predictability Clarity Clear expectations Google’s Material Design one of many available free It also helps with branding, speeds up the design process and implementation
  31. Consistent stop signs/street signs Accessibility signs = wheelchair symbol Just like Dark UX patterns aren’t just in the digital space, same goes for Positive UX patterns Paved Desire paths Picture frames allowing for portrait or landscape images to be hung Visual cues for escalator Labeled Dressing Room hooks Universal Icons and signage Moments to delight - Disneyland Make life not just better but safer Communicate and solves problems
  32. What happens when a company doesn’t make Good UX a priority? They lose User Trust It could definitely be argued that Comcast’s customer service model was a dark pattern It purposely blocked users from accomplishing the task they were trying to do That broke user’s trust In 2009, as users shared stories of their interactions with Comcast support across social media They lost 600,000 customers Their reputation with users was so damaged that they chose to change their entire brand in hopes of regaining customer goodwill And in the end it all boils down to User Trust Dark Patterns exploit this trust and good luck getting it back There is a reason why UX industry is ripe with terms like Empathy Mapping and User Journey. There are people on the other side of every product, digital service or application. There is a person on the other side of that interaction Comcast’s reputation as a huge internet provider with horrible customer service (i.e. horrible support UX) was so ingrained (they lost over 600,000 customers in 2009), they had to change their entire brand in hopes of regaining customer good will. Ex Roach Motel
  33. 19% of user , aging population
  34. World Usability Day is single day of events occurring around the world that brings together communities of professional, industrial, educational, citizen, and government groups for our common objective: to ensure that the services and products important to life are easier to access and simpler to use. It’s about inclusion through user experience and I will hand it off to Jon to finish up the presentation and start us in on the workshop
  35. Add benefits to all steps
  36. Add benefits to all steps
  37. Physical things we need: Paper Markers Dots