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

5.
EVIL DESIGN

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

21.
Evil UX Awards

22.
Evil UX patterns can occur in real life too...

23.
Real Life Examples
● Parking signs
● Service fees on tickets
● Speed traps
● Door handles

24.
Real Life Examples

25.
Real Life Examples

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.

27.
GOOD DESIGN

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

36.
Real Life Examples

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.

38.
RESOURCES

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.
FUNCTIONAL

43.
FUNCTIONAL
RELIABLE
USABLE

44.
FUNCTIONAL
RELIABLE
USABLE
CONVENIENT
PLEASURABLE
MEANINGFUL

45.
FUNCTIONAL
RELIABLE
USABLE
CONVENIENT
PLEASURABLE
MEANINGFUL

46.
WORKSHOP

47.
UX Design Sprint Workshop

48.
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

49.
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.

50.
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

51.
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

52.
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

53.
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

54.
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

55.
Present (20 min)
Give a quick overview of your problem
and your final outcomes from your
design sprint.

56.
Please share your social media posts including
#locowudUP

57.
Thank You

58.
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