How to create world class UX

and improve business

White Hat

UX Trine Falbe
Kim Andersen
Martin Michael Frederiksen

Preface by Aral Balkan

11 Preface by Aral Balkan
13 Introduction
14 Kim’s Cookbook

1. Discover
17 White hat, grey hat and black hat UX
20 A brief introduction to UX
24 Privacy Zuckering
33 Design patterns
35 Anti patterns
38 Dark patterns
42 UX gone wrong
 2. Evaluate
46 Competition is a single click away
49 Simple and efficient test methods
53 Test reporting and release notes

3. Benchmark
55 Quality assurance and quality control
60 Baseline

4. Build
62 Understanding application types
64 From dark pattern to white hat UX
74 How to engage your development team
76 UX and scrum

5. Grow
80 Shitstorms and candystorms
85 From dark pattern to white hat UX
88 Improve
90 It takes time to grow
95 Strategic white hat UX
 PRIVACY
ZUCKERING
Systems and
interfaces designed
to harvest your
personal data
B
usinesses are under pressure to act with more transparen-
cy. The consumers want openness, honesty, and there is
even a focus on sustainability in America nowadays.

At the same time it has never been easier for businesses to har-
vest, store and exploit their customers’ personal data and online
behaviour.

Internationalization, the Internet and especially social media

have made the world smaller. 50 years ago you only had the option
to choose between a handful local stores, but today you can shop
all over the world if the local range of goods is not to your liking.

All of this is supported by modern payment methods, delivery

methods and a very low price on transportation.

Forrester calls it the “Age of the Customer”.

Today the customers have much more power to share their

discontent with the world if they are not satisfied. A country
musician had his guitar broken on a flight with United Airlines.
No-one at United would accept his complaint, so he made a
movie. It was shown millions of times on YouTube, affected the
airline’s stock price profoundly, resulted in a book, and it even got
its own article on Wikipedia.

We will no longer put up with bad service and bad treatment.

And we don’t except or appreciate it when our personal data
is exploited.

That is why it is now normal for suppliers of digital services

to hide behind a wall of excuses, but many of them do not
mean much.

The EU introduced a cookie policy in Europe. Today websites

have an obligation to inform users that they are being registered.
To be a little cheeky about the whole thing, you could say that
it is the same as the staff saying “hello” when you enter a store.
It is not really of any protection because it is impossible to control
whether the website lives up to its own promises. It provides a
false feeling of security.

Companies can choose between a wide range of tools for

monitoring consumers across devices without any use of
cookies, like Tea Leaf from IBM. That is a product in the cate-
gory “digital customer experience management and customer
behaviour analysis solutions”, and with it you can learn pretty
much anything about a customer’s behaviour.

It is your choice to either use these types of tools to improve the

user experience or to sell more products. Normally it is a business
case to choose the latter.

At the same time most of us are being watched by the national

security service and also NSA. We think our email is a private
matter, but actually we are all writing a blog – we just don’t know
who is reading over our shoulder.

It is well-known that Google is listening in. If you have a gmail

account, the business model is obviously that Google mechani-
cally reads all emails and uses the data for targeted advertis-
ing. Google has never been a search engine. It is a platform for
advertisement that uses search and other business intelligence
to optimize their sales effort.

Could it be anymore grey hat?

We have become the product. But in fact, the situation is even

worse for us.

Privacy Zuckering is a phenomenon named after the founder of

Facebook, Mark Zuckerberg.
It is a term used to describe systems or interfaces designed to
harvest extensive user data. This is by no means said in a posi-
tive spirit.

When you participate in a game on Facebook, trying to show how

much you know about the 80’s, Facebook is lurking in the back-
ground. They track your answers in order to profile you. If you are
a huge Def Leppard fan it might be wise to show you the ad for
the next greatest hits album.

At Facebook they know that we are concerned about our own

privacy. A thick layer of spin has been glazed over reality when
Facebook announces that it is now easier than ever to control
what information is shared with others.

Facebook promotes the good stories of how much they want to

assist you in protecting your rights to have a private life. In reality,
the story is different:

• There have been so many changes to Facebook’s privacy policy

that nobody remembers them anymore. It is a marathon game,
and most users give up. Every time a new policy is published,
you have to read through the entire thing once again.

• For every privacy policy update, Facebook tells the media that
it is now better, easier and faster to control your own content.
The reality is that the settings you need to tweak are now
spread out over so many pages that it is hard to keep count
of them.

Privacy Zuckering is a dark pattern. It is the story that “we do

something good for the user”, but it is combined with a practice
that does the exact opposite.
There is nothing wrong in Facebook learning from their mistakes
as they go along and trying to improve the system for their users,
but it would be much simpler if they would put on the white hat.
Afterwards there would be a lot less need for change.

And it gets worse.

Facebook also managed to change their search and made it possi-

ble to find private information in public searches.

They also made changes to their terms of service to allow them

to exchange information with other services. WhatsApp has
taken advantage of this. After first having promised that infor-
mation would not be shared with any third party, the two servi-
ces now exchange user data and information.
Facebook has been selected as an example because of the ser-
vice’s widespread nature, and because of that they cannot keep
everything hidden from the public eye.

There are thousands of articles on the changes in Facebook’s

terms of service and plenty of critical publications – but it is still
the world’s largest social network and therefore many people find it
hard to do without. They can get away with a lot - and they know it.
The question is: What things does
Facebook do that we are unaware of?

It is even more interesting that we

meet dark patterns in many other
contexts often without realizing that
the interface is designed to deceive
us in ways we don’t imagine.

The question is:

What things does
Facebook do that
we are unaware of?
3

BENCH
MARK
QUALITY
ASSURANCE
AND
QUALITY
CONTROL
Q
uality Assurance (QA) is essentially when you perform
quality testing on product or a service during the develop-
ment proces and before release.

Quality Control (QC) is the opposite: You test the quality of the fin-
ished product after it has been launched.

People who work with QA argue that quality must be built in to the
product contrary to having quality smeared over the product after
it has been made.
The same holds true when it comes to UX. Some say that UX must
never be the icing on a bad cake. Or put differently: “we don’t put
lipstick on a pig”.

A thing to wish for is that more UX experts were better at making

financial arguments for the value of good UX. It’s a rather
simple task really. If we agree (and we do) that the experience is
the product, it means that a UX error in a product is potentially
just as serious as a functional error.

A QA expert would without a doubt think that the costs of detect-

ing an error after a product has been delivered to the customers
can be 100 times higher (or more) than if the same mistakes had
been found during the first revision of a specification.

Therefore it makes sense to measure the number of UX mistakes

in each phase of the product development. It also makes sense
to practice your skills in systematically finding and correcting
errors at a much, much earlier stage in the process. A simple
spreadsheet can help explain the financials consequences:

Number of UX issues found and fixed

Specs Design Code Test Release Total

Sprint 1 22 11 0 32 12 77

Sprint 2 21 13 3 37 11 85

Sprint 3 57 21 1 3 3 85

Sprint 4 55 24 3 0 0 82

The spreadsheet shows the number of errors, but not their

value. So we have to estimate a unit price for each error type, which
will allow us to calculate the actual cost of identifying and
correcting an error. We have set some values that can vary
from project to project, but it is relatively manageable to estima-
te based on salary costs and time logs. So you can take your
existing data from your development process and use them to
set the correct values.

Here we have the same errors as before, but their value is set at
their monetary cost.

Number of UX issues found and fixed

Specs Design Code Test Release Total

Cost/issue $1 $5 $ 25 $ 100 $ 300

Sprint 1 22 11 0 32 12 77

$ 22 $ 55 $0 $ 3,200 $ 3,600 $ 6,877

Sprint 2 21 13 3 37 11 85

$ 21 $ 65 $ 75 $ 3,700 $ 3,300 $ 7,161

Sprint 3 57 21 1 3 3 85

$ 57 $ 105 $ 25 $ 300 $ 900 $ 1,387

Sprint 4 55 24 3 0 0 82

$ 55 $ 120 $ 75 $0 $0 $ 250

Pretty interesting, right?

With roughly the same amount of errors, the cost of correcting the
error drop as you move forward in development. This argument is
well known in every test department, and it also holds true in the
real world.

The financial argument is the best argument you have in a

discussion on whether or not to prioritise UX. Prototypes and
design layouts must be reviewed and tested before being ship-
ped off to development.

There are no excuses. UX must be prioritized. Not because it is

feel good (even though it is), but because it is too expensive if you
choose not to. Get started.

A good business case

In the concept phase you can start by making a low fidelity proto-
type or sketch. A review of a prototype can surface many issues
that are expensive to correct later on in the development process.

From there you can move on to a high fidelity prototype and do a

usability test. It can be clickable prototypes with high interactiv-
ity, and you can record test sessions and use them for iterative
improvements until the project is ready for implementation.

The method is much better described in other books and it func-

tions well with new features as well as completely new projects.

The key thing to understand is that you can save a lot of money
by prioritising UX work, which includes iterative usability testing,
and by identify and solving all problems as early in the develop-
ment process as possible.

At the same time we make sure that black or grey hat methods
that have been used in the project by mistake, can be caught in an
early UX test. Imagine the costs of overlooking a problem, deliv-
ering the project to the customers (via code, test and release) and
then being hit by a shitstorm from the customers.

The costs are high for handling a crisis, developing a new version,
doing subsequent tests and releasing the product again. On top of
that are the scratches that follow. A bad image does not disappear
by magic.
No excuses. UX must
be prioritized. Not
because it is feel good,
but because it is too
expensive if you choose
not to. Get started.
 FROM
DARK
PATTERN
TO
WHITE HAT

Every dark pattern has

a white hat counterpart
Conventional Labels instead of Bait and Switch
Make sure you communicate exactly what happens, before a user
carries out an action. You need to predict what happens before
you make something happens.

Don’t write “Book now” on a button in a search form, if the intend-

ed user action is just a preliminary search, a request or a link for
further information.

White Hat: Display the price and

the action. The user should be
able to correctly guess exactly
what the system will do when
pressing the button.
Black Hat: “Add to my collection”
is a sneaky way to add items to
the cart. What is a collection? Is
it a list of favourites? If you want
to know you have to try it out.

Chic&Choc packaging by Jovana Randjelovic

Always Provide an Exit instead of Roach Motel
The user always needs a safe way out. If you get lost, there sim-
ply must be an emergency exit close by. We know that large web-
sites can be very complex, and the good approach is of course to
remove all distracting elements in the checkout interface. Just
don’t remove the link to the previous page or to the front page.

This doesn’t only relate to navigation. When it comes to a sub-

scription you want to cancel or a newsletter you no longer want to
receive, the “cancel” option should always be close by.

Make it easy for the user to leave when they want to. Making it
easy to leave will make the motivation for them to return that
much greater.

White Hat: A simple method Black Hat: Remove

to provide an exit is a close all exits so the user
icon. Other methods can be a must select one of the
back button, a navigation or a payment options or
breadcrumb path. exit the app completely.