Copyright © by Luca Panzarella

First edition February 2022

Summary
Part 1: UX design
Intro
What is UX?
Goal
Target & personas
Competition
Features
Metrics
The “messy middle” and the customer journey
Customer journey: an example
IA: Information Architecture
Sitemap
From sitemap to wireframe
Wireframe: how to get started

Part 2: UI design
What is UI design?
UI is not front-end development
Implementation model
Simplicity
Progressive disclosure
Dominance
Alignment
Error messages
Icons
Rhythm
Predictability
Affordance
Consistency
Proximity
Color
Contrast
Conclusions
Bibliography
 Part 1:
UX design
Intro
Hi dear designer! I want to start this book with some numbers.
→ 70% of online businesses fail due to bad usability.
→ 75% of users believe they know if the page they are on is what they are
looking for based only on the judgment they get from the first few seconds
of browsing.
→ 70% of small businesses that have a website don’t use any call to action
on their pages.
UX (user experience) and UI (user interface) worlds are among the fields of
study with a stronger impact to our customer’s business and yet at the same
time among the most mistreated.
After all, what does it take to make a web page: take Tripadvisor and
change the colors, right? So at least many customers think (sadly), ignoring
the huge design work behind every website or mobile app.
On the contrary, a correct design should start from the study of user
behavior; we should first know they characteristics, desires and problems.
Only after having studied them we will be able to go into detail, choosing
texts, colors, fonts and images.
Put this way, ours looks like a very creative work, and it certainly it is; but
creativity must be a tool, not a goal. We do not design to make “beautiful”
interfaces, but to convert the maximum number of users. It seems like a
small detail and instead it radically changes the way we do things.
This book splits in two. In the first part we answer the following questions:
→ What is UX?
→ How do we understand who is the target of the project we are working
on?
→ What are the aspects of the end user that we need to evaluate in a UX
study?
→ What do we need to watch about the competition?
→ How to prioritize the features to be designed?
→ How to do user research?
→ What is a customer journey?
→ How do you make a sitemap?
→ Where do we start when we need to make a wireframe?
The second part, on the other hand, concerns more closely web design and
we will answer the following questions:
→ What is UI?
→ what’s the difference with front end development?
→ How can we create layouts that are easy for the user to understand?
→ What are the general principles to follow for good (web or app) design?
This book is a concentrate of everything a novice web designer should
know. At the bottom of a few chapters you will find some practical
exercises to do at home: you can send them to me and thus receive feedback
on your web design project, so as to create your first designer portfolio.
In short, this is the deal: I won’t talk about development, html, css,
WordPress template, or design software, none of this: ours will be a
strategic approach for those who want to learn to think like a professional
designer.
“And who are you to teach all this?” you might ask yourself. Lawful doubt.
My name is Luca Panzarella and for the last 15 years I’ve been helping
companies of all sizes create positive experiences for the users of their
digital services by designing websites and mobile applications.
I did this working as a consultant, and this means that I learned what I know
down in the trenches, and I know exactly what it means to go into a meeting
with a client when you’re afraid of losing an opportunity for a paycheck.
And there will be the simulation of a project from start to finish, from the
meeting with the client to the realization of the website, which will help you
understand what you need to know and the questions to ask when you come
face to face with the client, whether you are a freelancer or part of a work
team, or whether you have to create your own personal web project.
In short, it will be a journey full of things to learn, and the only thing that
matters will be this: that you arrive at the end of this journey having learned
the fundamentals of user experience and web design.
Here we go.
What is UX?
Let’s start with the definition of UX. Yes, sure, it’s likely that you already
know what we’re talking about, but are you really sure you can give a
correct definition? Here’s a challenge, I’ll give you a few seconds to think
about it and give me your definition of ux. Are you ready? Go!
...
So? How did it go? User experience is the study of the relationship between
a “person” and a “product” or “service”. Relationship, person, product or
service: keep an eye on these words, because they will be central to
everything we say in the next chapters.

Product/service
Let’s focus on the word “product” or “service” for a moment. As you can
see, these are not words tied to software, and in fact user experience is
about any kind of product that exists, including in the physical world.
The chair we’re sitting in right now has its own UX: the way we feel
comfortable or uncomfortable, if it has wheels, if it moves, if it makes
noise, if we can rest our head: all this is user experience.
The windows of the room we’re in: the way they open. The noise they let
in.
The room itself: its size, the shape it has. All of this had a design, someone
who tried to ensure we had the best experience possible. Maybe it wasn’t
someone called a “UX designer”, but it was certainly someone who was an
expert on the product and on how to create a relationship with a user.
We take this design so much for granted in everyday objects that we only
notice it when we are faced with a glaring design problem.
 How difficult can it be to design a door? Well...

Sometimes user experience problems are more nuanced, more troublesome,

because there’s no real design problem, but when we’re faced with them,
we wonder: «What exactly am I supposed to do?»
 Help! I don’t understand if my room
is on the left or on the right!

Relationship
Now, let’s focus on the word “relationship”. Every time I read it, I’m
thinking: “Isn’t that too much?” I mean, do we really believe that we’re
handling the relationship between a human being and a thing, a product, a
service? And every time I ask myself this, I answer myself as follows: when
we are dealing with a product or service that has been badly designed, that
has a bad UX, we start to lose patience. We ask ourselves things like, “How
does this thing work? How do I get it to do what I want it to do? Why
doesn’t it work?».
In short, a product or service that is poorly designed or even just difficult to
understand wastes our time, makes us feel like we’ve made a mistake, that
we’re wrong. All this makes us angry, makes us move away from that
product: we would like to be anywhere else but there. In short, every time
we get into this state of frustration, we end up doing something that is the
exact opposite of having a relationship: we want to move away from it,
we’d prefer to use something else, at the cost of losing the benefits that this
product would give us. And all this leads us to the last word: user.

User
Now, up to here we have described a problem that would seem to be
confined only to them, to the user. It is they who waste their time. They are
the one who makes mistakes. They are the one who’s angry. And all in all,
we might be thinking, why should this be relevant to us who are designing
the site, or to our client? I mean, if they have a real reason, they’re going to
try to learn how to use that product, right? The reality – unfortunately – is
more nuanced than that.
Even if the user decides to continue to use our product or service, or visit
the website we designed despite a bad user experience, this will lead to an
attitude of closing off. Of distrust. No longer trusting us, they will start to
go down paths we didn’t anticipate. On our website, they’ll start clicking
the Continue button hundred times, because, now blinded by anger, they
can’t even see our error message anymore.
And for the same reason – and I say this from experience – if you can’t
follow the instructions for assembling the shelves, you’ll end up assembling
them anyway, making up your own instructions; finishing the assembly
process with two boards left in your hand which were “obviously” too
many.
The moment the user decides to go their own way, we have lost them. We
no longer have any control over their actions, we can’t predict them, and
certainly in those conditions we have no chance of convincing them to buy,
or to leave us their email or whatever other action we have predicted they
will take.
And now that we’ve taken a closer look at these three ingredients, “person”,
“product” and “service”, it’s time to dive into the real world, the world of
clients, endless meetings and hard work.
Let’s talk about the client briefing. In the next chapter.
Goal
So, you’ve just set up as a freelancer and your first client is waiting for you,
ready to explain to you the amazing ideas that came into their head. Or you
work in an agency and, since you’re the one who deals with UX, or design,
or you’re simply considered “the tech guy”, they’ve put you in this meeting
because you’re the only one who can ask sensible questions.
Whatever your situation, here are the five things you should get done every
time you have a client meeting.

Business goal
Let’s start with the goal: here we ask questions on a very broad and general
level.
→ Why did the client come to me today?
→ What is the result they want to achieve?
→ What is their problem?
→ What do they want to achieve at the end of this project?
→ Why does this project exist?
Maybe your client wants to sell shoes online, or tickets to an event, or
wants to get the word out about their craft business.
These are questions that define what we might call the business objective of
the project. It is essential that this objective is made explicit during the
meeting, and most importantly that both you and your client feel this is the
real reason you are meeting.
And here you might say, “Well, that’s obvious, isn’t it?” No, it’s not
obvious. Never assume that your client knows how to explain precisely
what their objective is. Instead, it’s much more likely that they know what
their problem is, or what’s bothering them or what they want to change.
Sometimes the need to make a new site comes from the fact that, “you
know, my competitor did it too, I want to do something nicer”. Once, a
client of mine asked me to make a mobile app because they wanted to be
number one on Google. There is really a lot of ignorance of the
technological world, and to tell the truth, this happens in any field in which
we are newbies. I’ll give an example: once I had a toothache, I went to the
doctor, I sat down and said: “Doctor, this tooth hurts, I want it out”. And he
put everything down, raised his hands and said, “Hold on, I’m the dentist
here, you tell me your problem. I’ll decide what the solution is”. I thought I
knew what I needed, but I went there with a problem, and it was up to the
professional to find the best solution.
So the very first thing a customer needs to talk to you about is explaining
what their goal or problem is. But let’s take a few examples right now.
A web agency might aim to receive phone calls from potential clients, or
collect emails.
Airbnb aims to get you to stay overnight in one of its millions of homes
scattered around the world.
The Fork would like you to eat at the restaurant five to six times a day,
since its customers are the restaurateurs.
Amazon wants that every time you think you want to buy something,
anything, you’ll end up on their site.
The Just Eat app wants you to order something to eat, since their customers
are restaurants.
Eventbrite wants you to attend some events, as their clients are the
organizers.

User goal

In short, every site, and indeed every page of a site, is designed with the
client’s business objective in mind. And this is because our work consists in
the delicate balance of combining not one, but two objectives that intersect
each other. The first is the business objective of our client. This has a
certain weight, since it is what we are paid for. The second is creating the
most comfortable environment possible for the end user.
Yes, it’s true, The Fork would like us to order always from a restaurant, but
what does the user want? Maybe they want to organise a romantic dinner
with a new girlfriend. Or maybe he would like to try a new Japanese recipe.
The user goal may intersect with the business goal, but it’s not the same
thing at all. Usually the business one it’s rational (earn from a money
transaction), whereas the end user has a more emotional goal (I want to
make a good impression on a girl, I want to try a new recipe).
During your first client meeting you should investigate in order to have a
clear idea about both goals: the business and the user one. And speaking of
the end user, it’s time to talk about them, the user.
In the next chapter.

Exercise: identify the business goal of your

favorite site
Look at the sites you visit most often. I tell you mine: Youtube, Google
drive, Slack, Asana, Mailchimp.
Ask yourself: what is their business goal? How do they make money?
Where are the buttons that lead the user to the business goal and where are
they positioned on the page?
Target & personas
Okay, now that we know your client’s business objective, the second piece
of information we need to know is the answer to the following questions:
→ Who is our user?
→ Who does this serve?
→ Who are the people who use it?
→ How important is it to them?
→ What kind of information are they looking for?
→ What value does this information have to them?
When we talk about the end user, we have to deal with two concepts that
are often confused: the target and the persona. Let’s look at them in detail.

Target
The target is that specific group of people we want to reach through our
communication. They are the people who will actually buy your client’s
product or service and who are united by having certain characteristics in
common, whether demographic or behavioral.
We’re talking about quantitative, numerical, statistical data: obviously, we
don’t invent all these characteristics, but we analyze the site statistics to see
what they are.

Google Analytics
A great tool that can give you a lot of information about the target is
certainly Google Analytics.
 A screenshot about Google Analytics.

Thanks to it, you can divide your users by gender or age. This is very useful
for us to check if those who actually visit the site correspond to the image
we had in mind of our end user. It’s easy to encounter surprises with this
data, especially when it comes to age.

Screen resolution
You can know the screen size of the end user and what percentage of them
come from mobile or desktop. This is useful to understand what the default
layout is, the one most popular among your users. The most common
mistake is to focus on the layout of the desktop version of the site,
calibrated to your exact screen resolution, only to discover that more than
60 or 70% of users visit the site from mobile, or on a completely different
screen from yours. Here, the lesson to take home is: find out the most
popular screen size among your users, and, every time you have to think
about the layout or the navigation flow, always look at it with that
resolution.

New VS returning users

You can tell if they are new or returning users. This data tells us how many
users come to the site for the first time and how many return for the second
or third time, and so on. This is data that expresses the loyalty of a user: if a
user returns to your site, it means that a certain relationship of trust has been
established.

Navigation flow and traffic sources

You can know what pages they go on and off, their navigation flow and
traffic sources. Different sources bring users with different characteristics:
those who come from social media advertising will tend to have a more
superficial attitude. After all, they were browsing social media and your site
is for them a kind of interruption of what they wanted to do. On the
contrary, if the user arrives after having clicked on a link in your newsletter
or after having typed the URL in the search bar, they are much more likely
to stay on your site for a long time.

Time of navigation
You can know the preferred time of day when the user is browsing the site:
a person who logs in at 4am, apart from having serious issues with
insomnia, will generally pay less attention to text and more to images or
buttons. They will be in a different environmental situation than someone
who logs in at lunchtime, and maybe would need a night version of the site:
it’s no coincidence that this is a feature that Facebook has recently released,
and if you’re wondering, no, it’s not out of the goodness of the hearts of the
Facebook people: but because they know that the more comfortable we are
while reading, the more time we spend on their platform and the more ads
we will potentially click.

Personas
Even if the target gives us numerical and quantitative data about our user,
this in itself may not be enough. In fact, we are missing qualitative data:
who they are, what their job is, what their goal is, what their problems are,
what they do in their free time, how they talk, whether they are engaged,
married, single, whether they are bored or depressed.
That’s why we need to introduce another concept: let’s talk about
“personas” or “buyer personas”, or “user personas”. Whatever you want to
call it, this is an invention of an engineer named Alan Cooper, who at one
point said: “We nerds, who spend 24 hours a day in a room writing code,
maybe we’re forgetting that our goal should be to design software for real
people, not numbers”. Alan understood that if he printed out a sheet of
paper with a sort of curriculum vitae of an invented but likely character, a
possible user of his software, this would never let him forget what the
problems and the goals of the intended user of that software were.
Why is it important to design personas? For two reasons:
→ Point number 1: because in this way we get to know the goals of the
user, the one who will actually use our product or service.
→ Point number 2: knowing these goals allows us to intuit which features
we need to give the highest priority to and which ones can wait or we
shouldn’t even bother with.
If, for example, we design chairs, well, it will be important to know if our
end user is an 18-year-old boy who spends 20 hours a day playing video
games, or a child who has to sit in primary school, or an old lady who is
enjoying her retirement, or a bank employee. These are different scenarios,
just as different as the people who will use the same product in every case,
that is, a chair, but who will have very different needs.
Now, let’s put aside the comparison with the real world and talk about the
virtual one, looking at an example with a piece of software. Let’s take one
that we can have fun with: online dating software. And one of the ways to
immediately understand the personas that this kind of software is targeting
is to watch the TV commercials. Tinder and Badoo are among the major
players in this market. And we use either app for one goal: to get to meet
people to date. The same goal should translate into the same advertising,
right? Well, no.
Tinder1 puts an emphasis on the beauty of going on vacation just the two of
you. Badoo’s2 touches on a deeper issue: that of being able to be yourself
even with a perfect stranger.
Yes, I know you’re thinking, “But what do we care about the user’s
existential problems?” Well, we should care, because beyond the layout,
clarity of information, colors and style choices, the success or failure of an
application depends on how many users feel comfortable while using the
software. And “feeling comfortable” is not just a matter of pure design, but
something more intangible that informs the entire communication process
within the software.
Let’s take a few practical examples right now:
Duolingo.com gives us a very clear message right from the start: learning a
language can be fun. This message is not put there by chance, but it is a
value on which the entire company is founded. Otherwise, you wouldn’t be
able to explain the choice of the mascot, the cartoon style, the buttons: in
short, everything is designed to create a playful, light, fun environment:
which is exactly what is promised to us on the site.

A language test on Duolingo app.

Upwork.com aims to put us in touch with a professional from anywhere in

the world to work with remotely. And the manner of the communication is
focused on a very precise value: finding talented collaborators. Not cheap
ones. Not just anyone. Talented ones. Indeed, look how much space is
dedicated to the reviews, to the skills, to the professionalism of the
candidates.
In short: the goals and problems of end users have an enormous impact on
the choice of content for a site: that’s why it’s so important to create the
profile of personas correctly. And if you’ve done a good job, at the end you
should have a result like this: a page that answers the following questions:
→ What is the average age of your user?
→ Are they male or female?
→ What’s their education level?
→ What is their professional background?
→ Do they have the technology skills needed to fully understand each area
of the site you’re designing?
→ Why did they show up on the site?
→ How important is the information you are looking for to them? What
happens if they don’t find it?
→ What are the other possible sources where they can get the same kind of
information? Why did they prefer to go to this site to get them?
→ What other software or applications do they use regularly?
→ How much time do they spend each day surfing the internet?
The more details we are able to add, the more our user will seem real to us.
And only by knowing them deeply will we be able to design software that
speaks to them and only to them.
All this great talk about communication style brings us to another element
to look at closely when approaching a UX project, and that is the
competition.
We’ll talk about that in the next chapter.

Exercise: Create a persona sheet

Go back to the sites you visit most often, choose one and create the
personas, a profile sheet of your typical user.
→ What is their age?
→ Is it a boy or a girl?
→ What is your educational qualification?
→ What is your professional background?
→ Do they have the necessary technological skills to manage every aspect
of the website?
→ Why did they come to the site?
→ How crucial for them is the information they are looking for?
→ What happens if they don’t find it?
→ What are the other possible sources (even offline) where they can find
the same information?
→ At what time and in what context do they access the site?
→ What are your favorite tech devices? PC, Mac, tablet, smartphone?
→ What other software or applications do they use regularly?
→ How much time do they spend browsing the internet every day?

1 Tinder ad

2 Badoo ad
Competition
Every time I’ve asked the client who their competitors were, I’ve always
received very defensive answers. And do you know why? Because clients
don’t like talking about competitors, and a classic response I get is this one:
“We don’t have any competitors”, but unfortunately that’s never true. A
client without a competitor means that they are also without a market, and it
is much more likely that they have at least one but simply don’t know it yet.
Remember that a competitor is not simply someone who offers a service or
product that is identical to your client’s. If your client sells scooters, they
are not just competing with someone who offers another brand of scooter.
Look for your customer’s competitor based on the need that product or
service is trying to solve. The scooter seeks to address the need to get
around the city comfortably: which I can also do by bus, bike, car, tricycle
and even on foot. Also, if you live in a big city, you can get all these
services by subscription instead of buying them. And finally, the competitor
par excellence for any new product or service is the status quo: that is, the
user could decide not to buy any solution at all and stay at home and watch
Netflix, which at this point also somehow falls into the sphere of
competitors: and yes, I know, it’s a giant mess to sort out.

A “nerd” example: Basecamp vs Jira

Let’s get out of everyday life for a moment and look at some software for
nerds: Asana is an online tool for keeping track of all the tasks a work team
is handling. But Basecamp does this too. And so does Monday. And so does
Jira. And so does Redmine. But I’ll go even further: even an Excel can do
this job; badly, but it does it. And even pen and paper can do the same task,
until you get to the essence of task management, which is: “Don’t worry,
I’ll keep track of everything in my head». Which, then, is how you start
messing up deadlines.
Anyway, once we’ve identified the competitors, what should we focus on?

Communication
→ What is the competitor’s way of communicating?
→ How is it different from the client’s? If it is different, why is it different?
And if it is not, why are they communicating the same way?
→ What are they taking for granted in the way they communicate?
→ And what are the features, qualities or functionalities that they’re
emphasizing?
→ Why are they doing this?
Let’s continue with the example from before with the task management
software, comparing Basecamp with Jira. Jira is telling us that it is the top
software in the world used by teams that employ the agile approach.
Observe how many times we find words in the description such as: we are
the one most used by teams. We are the best. We are built specifically for
development teams. For every team. And then: a list of features.

L’homepage del software di task management Jira.

The persona that the writer of this text has in mind is someone who works
in a company: a head of product, a product or project manager who is
looking for software of this type. Maybe he doesn’t want to make a bad
impression before his boss, that’s why he needs to be reassured during the
purchase: and in fact, Jira reassures him incessantly on its pages. Now let’s
see how Basecamp talks.
In theory, a product that does the same thing should talk the same way,
right? Well, no. Basecamp starts by saying that it is software for people who
want to organize work remotely. So not “every agile team in the world":
those who want to work remotely. And, usually, those who work remotely
are used to working in more informal environments. Maybe they are
startups, micro-teams, freelancers. And indeed, the communication seems
less formal than for Jira.
 Basecamp homepage.

With all these arrows, those that look like pen marks. Basecamp is no
longer talking to a product manager in a suit and tie, like Jira did. No, no,
Basecamp is talking directly to the boss, who may be 20 years old and has
just founded a startup. And it says: “Hey, bro: are you going crazy with
managing everything remotely? Don’t worry, we’ll take care of it”.
In short, two products with apparently the same target, but if you go and
look in-depth, they’re, very, very different from each other.

Target
Here we ask ourselves:
→ Who is their target?
→ Is it identical to mine?
→ How do they differ or what do they have in common?
→ What are the advantages of their target audience and those of mine?
Following the example from before, we could assume that Jira’s product is
bought by highly structured companies, while Basecamp’s by more
unstructured teams. Let’s be clear, this doesn’t mean that a large company
will never use a software like Basecamp. It’s simply that on a statistical
level, because of the type of communication they adopt, it will be less
likely. If the client is a highly structured company, I expect a longer buying
process, as the decision has to go through different stages and different
roles in the company. With Basecamp, on the other hand, I expect a lot
more impulsive buying, since the work teams are small and decisions are
made much faster. Thus, it’s easier for one of those customers to decide to
change software.
Business
Finally, we ask ourselves questions about the competitor’s business.
→ What is their business model?
→ Do they charge once or do they have a subscription model? → How
much do they charge each client per month?
→ Are their figures comparable to my client’s?
→ If yes or if no, is this good or bad?
→ How is my client positioned compared to the competitor: are they
considered cheaper or more expensive?
Let’s go look at the business models of the two services: as you can see,
they have quite different prices. Jira says, “Look, as long as you are less
than ten, we don’t charge you. After that, you pay $7 or $14 a month per
user, depending on the size of your team”.
Basecamp, on the other hand, has only one price. No plans depending on
the size of the teams, nothing.
Two practically identical pieces of software with completely different
pricing policies.

Choosing the features

Knowing the competition can also help you dictate the timing of the
project: if your client is entering a market that is rapidly saturating, then we
will need to build a product that is as mature as possible, with lots of
features or few but done very well, and we need it to enter the market
before it’s too late.
On the contrary, if there are few competitors, we can take it more slowly
and maybe test individual features before really deciding whether to
develop them or not.
Let’s take an example: support chat. This is a mature market, full of
competitors that compete to the last penny and to the most microscopic
functionality to get the extra customer. Today there are dozens of services
with really similar functionalities, and the competition is based on truly
infinitesimal details. And should your client decide to enter this market,
knowing this fact is critical to understanding the quality and quantity that
you’ll need to include within that project. And let’s talk about features in
the next chapter.
Features
Okay, let’s talk about features. And here, right away, I want to point
something out: usually my first client meetings would start here. However,
features are only the 4th item on our list of questions to ask in a briefing.
How times change, eh? Here we’re going to ask ourselves:
→ What features should be included in the project?
→ Of the ones the client would like, which ones are crucial to the success
of the project?
→ With the budget the client has available or the deadline we are given,
what can we realistically do?
This is the point, I can guarantee you, where a real tug-of-war happens. A
point where, if you don’t know how to handle an argument or if you don’t
know how to say no, you will later find yourself with big problems to solve,
because, for example, you promised to design or develop too many features
in too little time. Or because, in a moment of great optimism, you thought
you could do everything the client asked, without thinking that in every
self-respecting project there is always something unforeseen that lengthens
the delivery time.
That’s why it’s essential at this stage to divide the features by importance
and feasibility. And yes, you will need to do this even if there is the budget
or time to do them all. Do you know why it’s useful to make this
distinction? Because in a flight of perceived omnipotence, the customer will
tend to ask you for all possible features, all at the same level of priority, all
at the highest level of perfection. On the other hand, they don’t know the
complexity of what they’re asking, so whether they ask you to make a
picture with kittens or an e-commerce store or sway the Google algorithm,
well, for them it’s more or less the same thing.
Always emphasize the important features and distinguish them from the
less important ones, and the feasible ones from the less feasible ones. And
that’s because if due to an unforeseen event during the project you find
yourself strapped for time or budget, you can at least emphasize the fact
that you delivered the most important features anyway.
Importance
And the question is, “How do I decide if a feature is important?” Well,
that’s easy, just ask yourself:
→ How many users will use this feature? All of them? 100%? 50%? None?
Are we doing it only because the client likes it? Let’s take an easy example:
if the customer wants a site to sell something online, we must necessarily
provide a feature such as an e-commerce store. And if we make an e-
commerce store, we must also provide what will happen at the end of the
purchase process, if we have to issue an invoice, if we have to provide for
the display of the order list. Or if the user must receive an order
confirmation email. In short, such a request brings with it a series of micro
and macro features that we cannot forget, because if it were to lack even
one of these, the site will not work for the end user and this will break their
relationship with the site.
→ Another way to understand the importance of a feature is to ask, “Does
this feature align with the client’s business objective?” If the client wants to
be contacted by email, have we thought about putting a contact form that is
clearly highlighted? Because if we don’t highlight this functionality, then it
will be impossible to achieve that objective.
→ Another question you might ask yourself is, if we suddenly removed the
functionality, would the site still work? Would the user notice something
strange? Would any users abandon the navigation process?
Now, some of these observations may seem obvious to you, but I assure you
that this is not the case for your client, who will tend to want everything,
right away and at the highest priority.

Feasibility
The second variable you need to evaluate is that of feasibility. This is a
point about which your client is practically unaware, and which is often
underestimated, even by those of us who have to implement the project.
Usually, this happens: the client has a need, a budget and a timeline. They
come to you and would like that project to be done in that time and within
that budget. But that doesn’t mean we have to necessarily accommodate
their request. And so, what are the questions you need to ask yourself to
understand if the request you received is “doable"?
→ The first one: is there money to develop this feature? Is everyone aware
that the huge mobile application we’ve been asked to develop will need the
work of two mobile developers, one for iOS and one for Android, a project
manager and a designer, and that we’ll have to pay each of these people?
It’s our job to understand the complexity of what we’re being asked to do,
and possibly remove what we can’t do within that budget.
→ Another question: okay, the budget is there, but are all the people
involved in the implementation of this feature available or are they doing
something else? Maybe the client needs it in a month, but during this month
the developers are involved in something else, maybe on other tasks of the
same project.
→ One last question: does the customer have an idea of the cost of
maintaining this feature? And I’m not just talking about monetary costs, but
also time costs. If, for example, we need to create a blog section within the
site, does the client already have a person dedicated to content?
It’s very, very easy to get caught up in the brainstorming phase and list
dozens and dozens of features that don’t need to be included in the project
launch phase. Your client doesn’t know this, and it’s fine that they don’t. It’s
your job to help them to establish what is important and what is not, what is
feasible, and therefore urgent, and what is better to postpone. This and only
this is what distinguishes a good consultant from a poor one.

Give priority to quadrant n. 2 , deal on 1 and 4,

Reject any request that is related to quadrant n. 3.

At the end of this fiery debate, you should have a little diagram like this: the
features you absolutely have to do are the ones in the top right quadrant.
The ones to definitely put off are the ones in the bottom left quadrant.
And those other two sections that remain will be up for negotiation.
So what can I say but: good luck, I already know you’ll need it.
Metrics
Metrics. But why, if we call ourselves designers, should we care about
metrics or numbers?
But the fact is that unlike design people, such as graphic or web designers,
the ux designer’s goal is to take the user from state A to state B, where in
between the two states there is an action: a click, a tap, a credit card
payment, a fingerprint, in short, any kind of action. That’s our goal: to
create an environment that can maximize the number of actions the user
takes while browsing. And only on this data can we be evaluated. Not on
the fact that the client woke up in a good mood today, not because we chose
their child’s favorite color, not because we gave an exciting job
presentation. We’re talking about numbers, hard facts that only call for one
kind of answer: yes or no?
→ After our intervention, did the site get more visits? Yes or no?
→ Do users spend more time on the site’s pages? Yes or no?
→ Are there more purchases? More contact requests? More newsletter sign-
ups? Or whatever other action the customer has requested of us? Yes or no?
Yes or no, black or white... In some ways our work is simpler than real life,
because there are no nuances; we can’t complete a project and ask
ourselves, “But did we do a good job? Well, it depends”. That’s it, in our
work there is no “it depends”, there is yes or no.
At the client meeting stage, before you leave, make sure you have a
measurable business objective written down in your notebook.
Making the website “so the client can get rich” is not measurable.
Receiving emails from many, many customers: not measurable.
Making competitors jealous: not measurable.
Being seen as cutting-edge: not measurable.
Okay, but then what is measurable? Let’s take some examples:
→ Get 10 more customers than last year. 20 more customers. 100,000 more
customers.
→ Increase the average browsing time.
→ The number of emails your client receives compared to the previous
year.
→ The number of shares on social media.
→ The number of mentions of the client’s site in forums.
→ How many fewer service tickets are opened.
→ If it’s an e-commerce store, how many products are returned.
→ And finally, the number of compliments that users send us, via email or
during a support call: yes, even this is measurable.
When you come out of your first meeting with the client, keep in mind that
you have established with them the measurable goal of the project you are
going to work on. This is the only way you will be able to determine if you
have done a good job.
Yes or no.
The “messy middle” and the
customer journey
In the real world, the user doesn’t magically wake up in the morning, put on
his slippers and say: Ok, today I’m getting a loan! Or: “Today I’m going to
buy a ticket to the Caribbean!” Or “Today I want to make the website for
my business!” Things are unfortunately much more complicated than that.

You try moving a cart

with this tangle of wires.

And this is even more true every time we have to make an important choice.
One thing is deciding whether to buy a packet of biscuits at the
supermarket, another thing is buying a house: the greater the importance of
that choice, the more time and information we will need to reflect, to
understand what the alternatives are, to evaluate, maybe seek advice from
friends or on forums, and, only at the end, make the purchase.
Google calls this process “the messy middle”, which is a nice way of
identifying two phases of a decision-making process. Let’s see them
together.

The exploration phase

At this stage, the user doesn’t yet have a clear idea of what their goal is or
what features it should have. So it’s a phase in which they need to take in as
much information as possible, to stretch the list of possibilities available to
them to the limit. For example, we have back pain but we don’t know which
professional to turn to, so we try in every way to get to a list of candidates
or facilities that may be right for us, asking friends and relatives or
searching on the internet.

The evaluation phase

The second phase is the evaluation phase: the user has decided that the
options found can be enough, and now has to make a choice. In contrast to
the previous phase, here the user needs to discard options, to arrive at one
possibility. And how do they do that? Well, by comparing the
characteristics of products or services. If I’m choosing the right orthopedist,
maybe I’m trying to figure out if he or she already has experience with back
pain. Thus, I try to understand if the solution that they’re offering me
coincides with my goal.
These two phases are consecutive, but they don’t happen in an orderly way:
the user can go back a thousand times, including other options that they
didn’t evaluate before, and then go back to discard some of them, until they
are satisfied with their choice. A study done by Google says that in this
phase, the previous experience the user has with a product or a brand is
fundamental for their final choice. In cases where the experience has been
excellent, they may even decide to skip this decision-making process,
arriving straight at the reconfirmation of the purchase.

Ladies and gentlemen: Google’s messy middle.

In short, this is Google’s messy middle, which helps us understand three

key elements.

1. The user experience starts before our website

The first: our user’s experience with the product or service we are making
the site for is formed in their head long before the user arrives on the page
we have created. This is because the user may have asked advice from
friends, or in a forum, or has used a price comparison tool, or has previous
experience with our product, or that of a competitor: all this has a huge
impact on the choice that they will make, and is not influenced by a simple
site, at least not in the short term and not directly.

2. The user doesn’t know all the alternatives

The second point is that the user does not know all the possible alternatives
on the market: that’s why our client’s product or service must be put on
their mind at all costs, even before they arrive on the site we are designing.
This means being present in the channels in which the user is looking for
possible solutions: for example, on social media, on Amazon, on Google:
any major traffic artery that the web makes available for us today.

3. The user is lookiing for objective data

The third point is that when the user is in the evaluation phase, it is essential
that we give them product characteristics that are comparable, and that
means they have to be numerical, objective. “Choose our service because
we’re the market leader": if everyone can say that, then it’s not an objective
characteristic. “Choose our service because we have 500,000 customers” is
an objective characteristic.

Free 14-day trial and trusted by 31.000 companies.

Now give me your email, otherwise that guy is going to beat you.

The customer journey

All this brings us to the so-called “customer journey”.
And what is that? In the customer journey, we go to identify the key steps
that happen between state A, the state where the user experiences a need,
and state B, the state where they buy something or otherwise take an action
on a site. What we’re asking is, what the hell is in between? Now, we’ve
already said that here in the middle is the “messy middle”, but through the
customer journey, we’ll go into much more detail and identify a step-by-
step path that the user makes from state A to state B. It will certainly be a
simplified version of reality, but useful for understanding how the user will
think on our site. So let’s make three columns for the three phases of the
action process: the exploration phase, the evaluation phase and the decision
phase.
And as rows, we’ll put four questions:
→ What is the user doing here? What are their actions, where are they?
→ What are their thoughts? What are they saying to themselves or someone
next to them?
→ What are their feelings?
→ What are the opportunities we have in this transition?
But since I can’t explain the customer journey using theory alone, it’s time
to give you a concrete example. In the next chapter.
Customer journey: an example
Ok, let’s start with the definition: the customer journey is the analysis of a
journey, in a figurative sense, of the path that the user takes, not only when
they are on the site that we are designing, but ever since the need that will
be satisfied with the purchase of a product or service arose in them.

The customer journey on my Google docs.

Let’s take a sheet of paper and divide it into three columns and four rows.
For the columns, let’s put the three phases of an action process: the
exploration phase, the evaluation phase and the decision-making phase. In
the rows, we’ll put four questions:
→ What are their actions, where are they?
→ What are their thoughts? Or what are they saying to themselves or
someone next to them?
→ What are their feelings?
→ What are the opportunities we have in this transition?
Let’s take a practical example, which I have experienced myself: in 2019 I
got married and planned my honeymoon. So let’s suppose we have to do the
customer journey of a user who visits Evaneos.com to book their
honeymoon.
Let’s get started.

The exploration phase

The first phase of the customer journey is that of exploration. In this phase,
I still have to decide everything and I’m ready to change my mind a
thousand times: I know that I would like to organize my honeymoon
myself, but I don’t directly know people who have done it. The first thing I
do is give the old method a chance: going to a travel agency. I get two
quotes for two destinations: Mexico and Madagascar. The guy tells me
about resorts with full board, including alcohol, and a holiday where you
just have to sit on the beach and the rest is taken care of by the organization,
which is the exact opposite of my idea of a vacation. The prices quoted are
expensive, very expensive, but that doesn’t mean they’re not useful: from
that moment, they become my point of reference. I come home and Google
something like “honeymoon exotic places”. My thoughts are: “I would like
to create a fantastic trip spending about half of these prices”.
My feelings: I know people who hate planning their own trip, but for me it’s
pure excitement. So: curiosity, happiness, excitement. What opportunities
does Evaneos have at this stage? The answer is “to be the first on Google
with the phrase I typed”. And that’s pretty much how I get to an article on
their blog. I get from the blog to the homepage right away, and there, I am
convinced by what I read: “Anywhere in the world, create your own tailor-
made trip”. The concept of “tailor-made travel” and the videos of solo
tourists traveling to adventurous places is the right mix that convinces me to
enter the decision phase.

The evaluation phase

Evaneos.com homepage.

The evaluation phase immediately shows its stripes: complicated, anxiety-

inducing, thrilling. It’s not easy to find the right destination among all those
that the world offers: luckily, the website helps me to discard some
possibilities, choosing the best ones for the month in which I’m thinking to
leave and the activities I would like to do. For example, I know that I would
like to go snorkeling: but it’s not that I had this desire at the beginning of
my search. It’s thanks to the exploration phase, after seeing some photos of
people in the water with tropical fish next to them, that I got the idea. Does
that remind you of something? It does to me: of the “messy middle”.
My feelings are mixed: I am still curious, but at the same time I have many
doubts. I don’t know the destinations that are proposed to me, but I still
have to make a choice, and not only that: it will be an expensive trip and my
future wife will have to like it too. In short: I feel a certain pressure,
because we’ll remember the trip we will take for the rest of our lives, for
better or for worse.
The opportunity that Evaneos has in this delicate phase is to offer me the
maximum possible support and try to prevent and counteract any doubt I
may have. Something that is certainly not easy to do, but that translates into
the following actions:
An easy-to-use site that helps one figure out the right destination based on
the month and the activities one likes;
The detailed description of the travel programs;
The ability to set up a program from scratch, thus becoming a co-creator of
the trip along with the local guide;
Show the photo of the guide, reviews from past travelers.
Depending on what type of person you are, you may need other types of
information, but this is what convinced me I was in the right place. That’s
how I was about to enter the next phase: decision-making.

The menu helps me to discard the less valid alternatives.

Decision-making phase
Okay, we’re down to the last round. I end up on the details page for the Bali
trip. I click on “Ask for a Quote” and am prompted with a short
questionnaire to get a better understanding of what kind of user I am. I’m
assigned a local travel agent with whom I start a conversation as if we were
two long-time explorers meeting up after years. We spend the next two
weeks talking about temples to see, lakes, waterfalls, beaches, hotels, put a
day here, take off a day there: in short, for guys like me, and certainly for
the target of Evaneos, planning the trip is as important as the trip itself.
Eventually, the program looks right to me, so I click buy.
What are my feelings: as in all decision-making phases, this is the most
heart-pounding moment, where you feel your palms sweating, your heart
beating faster, because you’re making a decision and you’re putting money
on the table.
As this is a stressful phase for the user, the opportunity the site has is to be
as reassuring as possible, but at the same time push me towards the
conclusion of the order. Evaneos knows this very well, and in fact, during
the two weeks in which I was chatting with the local agent, it sent me every
kind of email to convince me. After all, it already knew what kind of person
I was, since I had told it myself by filling out the questionnaire, so it could
set up a way of communication that would leverage my desires.

Post-decision making phase

If we want to go the extra mile, to this phase we can add the post-decision
phase. This is a phase that is often underestimated, because, after all, here
the user has already placed their order, so the business objective has already
been reached. Yet this is the phase where even a small effort can help
cement that relationship that has just been established between user and
brand.
So let’s get back into my shoes again: after the purchase, I was elated,
hugged my future wife and went to sleep peacefully.
Evaneos knew my state of mind well, which is why, as soon as the order
was confirmed, their tone was one of celebration and satisfaction at the
choice I had made. After all, I hadn’t bought batteries on Amazon, I’d
bought a trip. We must always remember to adapt our communication
according to the state of mind of the interlocutor; and if they feel they want
to celebrate, it’s a shame to waste the opportunity to do it with them.
The opportunity that we have is to reassure the user, to tell them that they
have done the right thing, that everything has gone well. That we haven’t
stolen any money from them and that maybe there is a phone number or an
email that they can contact if they have any issues.

Post-experiential phase
In some cases, we can even add a fifth phase, the “post-experiential” phase.
In this phase, I’m back from the trip. Milan welcomes me with an autumn
downpour that makes me regret being back. I feel happy for having lived an
incredible experience, but also bittersweet because I don’t know if I will
ever go back to see those fantastic places.
The opportunity for Evaneos is to take advantage of the bittersweet moment
to offer me a surprise: it offers me a free photo album with all my photos.
What do you think is the reason for this gesture? Does the boss at Evaneos
have a soft heart for couples returning to hard city life? Umm, no. The
answer is that Evaneos is already thinking about my next trip. And there’s
no better new customer than a satisfied old customer. So here’s the
marketing gimmick: a free photo album that I can put together with photos
from my trip and that will be sent to my home. It’s my honeymoon photos,
do you really think I’ll ever lose it over the years? That will never happen.
And what’s on the first page of the album? A dedication from the Evaneos
team.
A perfect marketing stunt to close our customer journey.
IA: Information Architecture
Okay, so we’ve established the path that the user takes from when the desire
arises in them until they actually perform the action. Now it’s time to focus
on the stages over which we have full control, and establish what’s called
the “information architecture”. Thus, the organization of the content of the
site and the flow of navigation that we expect the user to perform.
Designing a site is a bit like designing a bookstore: we have a huge space
full of empty shelves, which is equivalent to the structure of our site. And
we have something like hundreds and hundreds of books, and we have to
arrange them in such a way that users always have the best chance of
finding what they’re looking for.
What’s the first move we make? How do we go about distributing those
books? We could group them alphabetically, but are we really sure the
bookstores we go to are using such an order? Some do, some don’t, or only
partially. So the first suggestion I’ll give you is to physically go to a
bookstore: you’ll notice near the entrance a space for the books of the
moment, which is what we’re used to seeing on sites that have to catalog
very many items, like Eventbrite, Amazon or Ebay. This area is dedicated to
those who are still in an exploration phase, where they don’t have a clear
goal yet and are wandering around waiting for inspiration.

Everytime we are in an exploration phase

 we need a website that gives us something ispirational.

Continuing on an imaginary path inside the bookstore, once you have

passed the area of the books of the moment, you will find the highlighted
books, the ones they’re pushing because they may have commercial
agreements with the bookstore itself.
And on the web we find the same thing on sites like Justeat or Amazon,
where the sponsored products, those that are paying for more exposure, are
there on display.
Moving on, inside the bookstore we find the literary genres, which on the
web correspond to categories: those of products in the case of Amazon, or
of movies in the case of Netflix. Here it is important to use the right
terminology: if we use the term “noir books”, we have to make sure that the
average user knows what it means and that it is not confused with mystery
or fantasy books, for example.
And finally, within the individual literary genres, we find the alphabetical
sorting.
Information architecture is the skillful art of knowing how to present the
content of the site taking into account the two objectives: the client’s
business objective and the end user’s goal.
Basically, when we think about the information architecture of a site, we
ask ourselves 3 questions.

How do we organize the content?

→ What priority do we give to each piece of information?
→ What information does the client think should be included on the site?
→ And what is the information that the end user is looking for when they
open the page?
The organization of the content must follow and at the same time anticipate
the same logic with which the user is doing their reasoning during the
navigation.
Let’s take some examples: if I’m looking for a restaurant where I can eat
and I arrive on The Fork’s site, the first thing I need to do is understand
whether I’m on the site that allows me to find a solution to my needs. That’s
why, at the risk of being banal or didactic, the very first thing thefork tells
me is: are you looking for a restaurant? If yes, then you’re in the right place.
And immediately below that is a field in which I should enter where I am,
which is what I need to take the first step in my exploration phase. It’s a
piece of information that we assume the user always knows, in every
possible situation: that’s why we require it as mandatory information. This
is certainly the most important area of this page.

Whatever the occasion, it’s always a good moment

to book a restaurant.

In the remaining part of the page, thefork.com offers particularly famous

restaurants, or those with which they have commercial agreements, but
since at this stage we do not yet know the location of the user, the content of
this portion of the page is really not relevant.
If we look at other search sites like Deliveroo or Justeat, the reasoning is the
same: as long as we don’t know precisely a certain characteristic of the
user, such as the city or the address where they are located, we can only
give generic information. Once the user has performed the first valuable
action, which is to tell us where they are, we can respond with an advanced
search page, where they can choose by category or browse the possibilities
one by one. Note how the first elements, those that have more visibility, are
precisely the sponsored ones, which have a greater relevance to the business
objectives of the client than the others.
 And the first result is... a promoted one.
What a coincidence!

What do we name our content?

Question number two: what do we name our content? What is the name we
use for menu items, what do we call titles, categories, tags? For the user
who arrives at the site, what terms do they expect to find?
Let’s take an example: on this home sale and rental site, when I go to the
property details page, we need to know perfectly what the customer is
asking themselves, so that we can choose to put the price first, then the
number of rooms, the surface area, the number of bathrooms and the floor.

The detail page of Immobiliare.it

Who decided that the number of bathrooms was such a relevant piece of
data, and why? When we go into the features of the ad, if we don’t know
what the user is asking themselves, how do we choose which features to
show and how to name them? Who said that “fiber optic internet” has to be
named that way, and why does it go here? Why insert the balcony tag and
not differentiate a small balcony from a habitable one? Why not insert the
elevator tag if there is one? Again, the answer to all these questions can be
found by analyzing the target of the site. Every question the average user
asks while browsing should be answered on this page.

santagostino.it homepage.

Let’s take a look at this medical center, where you can book a visit for
anything from psychotherapy to dentistry. Since these are very different
areas of medicine, the site chose to delegate the main exploration activity to
a search bar, where you can search for almost anything: either the name of
the doctor, or the type of visit. In this case, it is essential to perfectly label
the results, otherwise the user is at risk of not finding what they are looking
for.

Which navigation?
The third and final question is about how the user navigates the pages.
What menu items are relevant to the user? How do they navigate between
pages? Where is the menu? Is there a free search bar? If yes, why, and if no,
why not?
This last point, more than all the others, lends itself to a visual
representation. In fact, it allows us to draw what is called a “sitemap”.
We will talk about it in the next lesson.
Sitemap
So, we now know our client and this project like the back of our hand. We
know what the objective is, and the content we need to put inside all the
pages. We know how we want to organize the information. We know the
priorities of our ideal user, what are their problems, their desires. In short,
we are in the middle of creating the information architecture: we have
imagined how to arrange our content, in what order and on what pages. The
time has come to design them. And we do it by creating what is called a
sitemap.

And what is a sitemap? It is simply a block-based representation, where

each block represents a web page and where each arrow corresponds to the
user’s navigation.
It’s a website skeleton that shows us precisely which are the pages we’re
going to design.
We create a sitemap for the following reasons:
→ Truly understand the complexity of the project;
→ Having the certainty to know and control every section of the site;
→ Evaluate the amount of hours that the design and the development will
take;
→ Creating a visual idea of the job we’re going to do;
→ Showing to the client all the pages that has to be included into the
project.
 Octopus.do in action

Creating one is actually quite simple and can help you list all the pages on
your site.
And you can do it using lots of available tools: you can use Photoshop,
Illustrator, Sketch, Balsamiq, and yes, even pen and paper. I’m comfortable
with a software called Octopus, because it gives you the ability to draw not
just a sitemap, but something that’s halfway between a sitemap and a
wireframe, and I’ve found it very useful especially for drawing sites or apps
that have complex navigation.
And now that we’ve designed a map, we’re ready to design a wireframe. In
the next chapter.

Watch the video

From sitemap to wireframe
Okay, it’s time to draw a wireframe. And what is a wireframe? A wireframe
is basically the skeleton of a page, an elementary visual representation of
what the user will see on the screen.
A wireframe is NOT the final design of the site. And it’s not a little drawing
that we make on paper while we talk to the client either. Instead, it
represents in detail where the elements will be positioned within the page.

Three ways to design a wireframe,

(low-medium-high fidelity wireframe)

A wireframe does NOT have to be beautiful. That’s why in this phase you
shouldn’t use the graphical elements representative of the client’s brand: so
let’s forget for a moment about the colors, the photos, the images, the font,
the client’s logo: none of this should end up in our wireframe, it’s still too
early, otherwise we end up judging a wireframe by a choice of colors or by
the beauty or ugliness of the images used. On the contrary, in this phase
we’ll focus only on the structure of the page.
Like for the sitemap, a wireframe can also be drawn using pen and paper, or
by choosing one of the many software programs, among them Photoshop,
Sketch, Illustrator, Balsamiq: I use Figma, because it allows me to work
with several people simultaneously on the same project.
When you draw one, remember to draw only the bulky items: this is an
image, text, two columns, a title, a video.
There are three questions in particular that we try to answer with a
wireframe.
1. How does the user interact between and within pages?
→ What are the clickable areas in the page?
→ What if I click on the title of an item?
→ What does the user see when accessing from mobile? And from a tablet?

2. How do we want to group the information?

→ How many columns does the page have?
→ Is there a main column?
→ If I scroll down, what does the column on the right do, does it follow
me?
→ How do I differentiate the results from the main content? → How do I
differentiate the title from the subtitle?
→ How do I make it clear what the links are?

3. What is the priority with which we want to display the information?

→ What is the main content of this page?
→ How important is it that the user reads the title of the page?
→ When is the right moment when the user has to see the call to action?
→ What does he need to read before clicking on it?
As you can see, the most complicated part of a wireframe it’s not when we
design it, but when we decide what to design and where in the page. About
this topic, I have three suggestions for you.

It’s all about the customer journey

The first: it’s all about the customer journey, because that’s where you’ll
find most of the answers to your questions. In particular, ask yourself: the
user who arrives on the page I’m designing is in which phase of the
customer journey? Are they in an exploration phase or an evaluation phase?
Let’s take an example: Eventbrite, Tripadvisor, Airbnb, Amazon, YouTube:
when the user is on the homepage of these sites, it is very
likely that they don’t yet have a clear idea of what their goal is.
 Tripadvisor: in the first page we ask to the user what they are looking for.
In the second one, we show them the results.
In the third one, we help them to decide the experience to buy.

That is, they are in an exploration phase, a phase in which they need to get
more options rather than narrow them down. Think for example about when
you go on Tripadvisor: maybe you’re looking for a restaurant where to eat
in the next hours, maybe you want a hamburger, but you might change your
mind if you’re struck by some photos of a new fish restaurant that opened a
few steps from you. All this translates into a homepage that has as its only
goal to understand one of these two variables: either the type of business
you are looking for (a restaurant, an outdoor activity, a hotel) or the city
where you are. Starting from one of these two data points, Tripadvisor
sends us to a second page, where we are literally bombarded with content,
so much so that it’s very easy to end up getting confused.
And now let’s look at this other group of sites: Dropbox, Google Drive or
Spotify: here, the users who arrive at the homepage are in an evaluation
phase, they need to understand if the site they have in front of them
responds to their need, which is quite specific. That’s why they need
information, they need to evaluate the features of the product, anything that
will push them to take the next step, which is usually to try it out or register.
So, the first thing you should ask yourself when you have a nice empty
wireframe in front of you is: what stage is the user in? Exploratory or
evaluation? And, once you’ve asked yourself that, go into more detail, put
yourself in their shoes and try to ask yourself:
→ What is the user thinking right now?
→ How are they feeling?
→ What are they trying to do?
→ What kind of information do they already have and what are they
looking for?
Whenever you’re inserting a new element into the wireframe, whether it’s a
menu item, a category, a button, or whatever, ask yourself: does the user
need this element to take them to the next step? If the answer is no, then
that element should not be inserted.

Remember the client’s business goal

It’s true, if an element doesn’t bring the user to the next step, then it
shouldn’t be included. However, we must also consider the client’s business
objective.

Easyjet, Ryanair e many other low-cost flight websites

sacrifice a good user experience
so they can sell every type of service we might need before to make our order.

The questions to ask yourself here are:

→ What is the action that has economic value to the client?
→ What are they trying to do?
→ Do they want to sell a product?
→ Do they want to receive a phone call?
→ Do they want the user to fill out a questionnaire?
→ Do they want to have a trial version of the service downloaded?
Whatever this objective is, it must be materialized in an area, a section, a
button that must be on display on the page you are designing. Remember
that each page should have only one objective: when we add too many
competing ones, we can create confusion in the mind of the user, as often
happens, for example, on the pages where you buy flights: on Ryanair’s
site, I counted 32 buttons to buy something from the beginning to the end of
the purchase process.
This notion of uniqueness, between the page and business objective, is even
more true when we talk about mobile apps. And the reason is very simple:
we are on a device with a much, much smaller screen than a computer, and
the environmental conditions in which a mobile user may find themselves,
in addition to the physical ones dictated by having maybe only one hand to
do everything, force us to stick to the essentials. Some examples?
This one wants you to start a search, this one wants you to pick a room, this
one wants you to watch a movie, this one wants you to create or attend a
meeting. This one wants you to park, this one wants you to continue a
conversation or create one.
As you can see, the business objective almost always turns into a button, or
a notification, or a clickable area. Usually there’s unequivocal wording: the
button “Create new meeting”, well, it means just that: create a new meeting.
And usually the layout, the GUI of this area is in contrast, in size or color,
to what is around it. But we’ll talk about this in more detail in the section
dedicated to the graphical interface.

Validate your hypotheses

Finally: validate your hypotheses. None of us has a crystal ball, and even if
you’ve been doing this job for years, your assumptions could be wrong or
influenced by your personal taste. That’s why you should always validate
the navigation path and the way you want to arrange the information on the
pages by showing the wireframe to others: even before the client, you
should show it to the rest of the team, and, if you don’t have a team, you
can ask anyone who can somehow represent the ideal user. Show them the
wireframes you have produced and simulate navigation using printed sheets
or drawings instead of the computer. Ask your interlocutor to think out
loud, try to understand what they’re thinking at every moment of the
navigation, what are their problems, their thoughts, their concerns: all this
can also help you to validate once again the customer journey you have
designed.

The Trunk Test

A good test you can use is what Steve Crood in his book Don’t make me
think calls “The trunk test”. It works like this: you pick someone up, put a
blindfold on them, put them in the trunk of your car and drive them an hour
away from where you are. You stop, get out of the car and release them.
And you ask them: where are we? What can you do now? Where can you
go from here? How did we get here?
Now, before you go and commit a crime, stop, because I’m not asking you
to kidnap anyone, but to put your wireframe in the hands of anyone with a
modicum of familiarity with a web browser and ask them:
→ Where are we, what is this page?
→ What are the actions you can take?
→ Where can you go from here?
→ How did we get here?
If, despite the initial bewilderment, the test person can answer these
questions, well, what can I say: now you know how to make a wireframe.
Wireframe: how to get started
Go ahead and say it, we know you’ll ask me sooner or later. “All very nice,
eh, but if this is the very first time I have to do a wireframe, exactly where
do I start?” You start by copying.
Now, before anyone throws virtual rotten tomatoes at me, I should argue for
the truth of this sentence, with three considerations.

We’ve learnt to write by copying

Consideration number one: when we were little and had to learn to write,
we were taught by doing two things: dictation and copying. Apparently
these two ways have been lost with the last few generations, I don’t know,
but trust me, that’s how I learned to write. By copying. And it’s not like
anyone ever said, “Oh my gosh, but if that kid starts out like that, he’ll
never write on his own!”.
Consideration number two: when we learn to play the piano, you know
what we do: we learn to replicate the great pieces.
Consideration number three: we cannot innovate if we do not know how
things currently are, because innovation means precisely this, doing
something better, better than what is there now.
For all these reasons, if you’re just starting out, one thing you need in order
to both learn and break the ice is to browse professional sites and analyze
how they have structured their pages.
Let’s look at some examples and analyze the wireframes of three types of
sites: those where the exploration phase is more common, those tied to the
evaluation phase, and finally an e-commerce site, which has its own rules.
Let’s start.

Exploration websites
Exploration sites: we’re talking about sites where the user has to search for
something: restaurants, things to do, places, but also doctors, prices or
anything else: let’s look closely at them.
Homepage
We could say that all of them have a header, which is a bar where there is
the logo on the top left and a menu on the right. Usually, if there is user
registration, this is put at the end of this menu.
Let’s go one step below: many show a title that indicates what the site is for,
and we often find a search bar. Must the bar be included in this area? No, as
Glovo, Eventbrite, Festicket prove. But let’s say it’s certainly at the top of
the screen. Okay, let’s go further down. At this point, all sites do two things:
they either specify some features of the product or service, or they show
highlights.
 A probable homepage wireframe
for an exploration website

Some take advantage of it to show special features, others shows articles

about the site. And finally: the footer, with three, four, five columns of
menus. The end.
 In those sites where the exploration phase is predominant,
the search bar is the absolute protagonist of the homepage.

The detail page

Let’s look at the details page: here we have much more variety, but in
general we can say that practically all these pages are divided into two: on
one side the main content, and on the other, the sidebar.
 A probable detail page
for an exploration website

The main column is used to place the title, usually one or more photos and
the description text. The sidebar is used as a space dedicated to the actions
that the user can perform: a reservation, a purchase, a request for contacts.
This is a convention: you decide whether to break it or not, keeping in mind
that most sites do this and that the user is now accustomed to expect the
main actions in that place.

The detail pages of the exploration websites

have a main column with the most important details
and a sidebar dedicated to the actions the user can take.

In mobile version, the sidebar usually goes above, right after the main
photo, or below and fixed as you scroll. To finish, there is a space dedicated
to reviews, other related products if there are any and finally the footer.

The evaluation websites

Now let’s see what happens on sites where the evaluation phase is
predominant. Here, as we know, the user already knows what they want and
is evaluating if the site they’re on is the best place to get it. These sites
don’t get away from the customary header either: logo on the left and menu
on the right.
After that, almost all of them have a space dedicated to an image and one to
text: this is the business card of that company, that’s why every single word
of this text must be carefully chosen.
Many, almost all, have an in-depth text accompanied by a button: that’s our
famous business objective. Every time someone clicks on this button, a UX
designer in the world cheers.
After that, scrolling down, we have a roundup of features: as we said, these
are those that the user is evaluating to understand if what they have in front
of them is the product or service for them. Then there are some further
insights, for those fussy users who want to know everything, but really
everything about that product before you buy it, and often there is another
appearance of the button that corresponds to the business objective.
Finally, the usual footer. If you have structured everything in one or two
columns, as all these sites do, the mobile version will be quite easy to
structure.
A lot of different things can happen the moment the user clicks this button,
and it’s hard to generalize here. What happens from this click is that the
user is taken into what is called the “acquisition funnel”, which is a one-
way path that has as its only exit the real action that we want the user to do,
for example the purchase of the product. For this purpose, the user is
presented with technical information such as price and how to purchase, or
is asked for their email so they can see the product in operation.
So, my dear designer, my dispassionate suggestion is: every time you have
to design the interface of anything, try to understand the category to which
that site or that app belongs: is it an e-commerce site? A Tripadvisor-type
site? A social network? Once you’ve figured out the category, before
drawing, do something that should be fairly simple: be a user. Look at as
many sites as possible belonging to that category and study yourself, ask
yourself on page after page: what am I looking for here? What am I
thinking? Why is this button there? This is the most efficient way I know to
become a master of wireframe creation.
Here ends the part related to user experience. It’s time to move on to an
even more exciting section: that of UI design. In the next chapter.

Exercise: create your first wireframe

Are you ready for an ambitious challenge? Create your first wireframe.
You can choose from one of these projects (in order of difficulty):
→ The landing page of your designer portfolio
→ The main and detail page of your blog (whether you have it or not!)
→ The purchase flow of an ecommerce of vacuum cleaners
You can use pen and paper, Photoshop, Illustrator, Figma ... whatever you
like! You can stop at a very abstract level or even design the interface in
detail, the choice is yours!
Draw the wireframe and post it
on https://www.facebook.com/groups/uxdesignfriends. I will give you a
detailed feedback!

Download the wireframes used in this chapter and use them on

Figma software.
 Part 2:
UI design
What is UI design?
It’s time to talk about user interface design, also known as UI or web
design. What is it all about? Think about everything that appears on the
screen of your computer or mobile phone during web browsing: every font
chosen, every color, every image, each of these elements constitutes a real
visual language that belongs exclusively to the software you are designing.
This visual language responds to the expectations that the user has once
they’ve arrived on the site. And they, the user, in the very moment they
access the page, in those few, very few seconds before reading the content,
they start asking themselves questions: “Will I be on the right site for me?
Will I be able to get what I want? Can I trust this site?”. And if you’re
wondering: yes, we will answer all these questions “simply” with UI
design.
So, UI design is NOT about drawing pictures, or at least it’s not ONLY that.
Yes, sure, we spend most of our time designing layouts, but every decision
we make is not based on how creative we feel that morning, nor on our
personal taste, but we ask ourselves how to maximize the number of
conversions.
Web design is a problem solving tool, not an expression of pure creativity.
If a design “works”, then it means that the user has managed to get what
they were looking for in the easiest way possible, with a pleasant browsing
experience. And that’s why it can happen that the roles of UX and UI are
covered by the same person, or at least they are two roles that work
together: because everything strategic that was decided in the first phase, in
the user experience, must be carried forward and emphasized through the
user interface.
So, no, web design is not decoration, it is not “making the graphics” of a
site; it is instead a tool with which we control, manipulate, direct the user’s
gaze, help them to understand the contents of the page and spur them to
take an action.
Put like that, it sounds hard, but that’s not right: it’s actually incredibly
hard.
That’s why whoever is in charge of making the user interface of any digital
project has a big responsibility, much bigger than what the client—and
maybe even you yourself until now—could have imagined.

Main differences between UX and UI

But ultimately, what are the questions we need to answer when we put on
our UI designer hats? Here they are:
→ What colors do we use?
→ Which font do we choose?
→ What are the images?
→ How do we visually define the clickable areas of the site?
→ How do we make sure the user reads the page in the order we have
defined?
→ How do we emphasize the business objective?
→ How do we characterize buttons, text, titles, and how do we differentiate
between them so that it’s clear what is a button, text and title?
→ How do we visually differentiate the main column from the sidebar? Or
one piece of content from another?
→ How are the elements aligned with each other?
→ What is the dominant element of the page?
→ How do we get a good reading pace for the page?
→ Where and how do we incorporate the visual elements that characterize
the client’s brand?
To answer these questions, in the next few chapters we will discuss the
design principles and conventions that every good web designer should
know before starting any project.
These principles and conventions are great allies whenever you have to
make a decision about the layout you’re going to create. Read them one by
one and have fun doing the exercises you’ll find in the chapters. You need
to practice a lot to be able to become a professional web designer.
UI is not front-end development
One misconception I often see is confusing UI design with front-end site
development. And my question to you is, what do you do when you create a
new site? Do you start by looking for a new theme or template online and
then modify it? Or do you start with the framework you’re using, and
wonder what themes are available to start from? It’s easy to note that there
is a market of this kind, and, when the budget or time is limited, it might
even make sense to have this kind of approach. The important thing,
though, is to be aware that this way of designing is NOT UI design. Come
on, let’s say it all together: taking a template, changing the logo and the
colors and selling it to a client is NOT UI design. Good job, that’s what I
want from you.
Are there any themes out there that you can buy for a few dozen dollars?
Absolutely. Are they being bought? Of course, and it’s a huge market too.
But people who buy such sites are NOT our clients, in the same way that
people who buy furniture from IKEA are not the ideal clients for an
architect.
But why is customizing a template not the right way to do design? Try to
open one of the thousands of themes on Themeforest, any of them, and
answer these questions:
→ Why do they use those colors, and how do they relate to those of our
client’s brand?
→ Why do they use that font? Or that size of headline? Or that paragraph
size?
→ Why do they use that giant image at the top of the homepage?
→ Why did they split up the page this way?
Whoever made the graphical decisions for that template didn’t know your
client’s problems or goals, and only had a vague idea of who your end user
is.
Working in such a way is certainly economical, practical, fast, easy. These
are adjectives that the client likes when they have to pay an invoice, and the
professional likes when they want to earn some money without too much
hassle.
There is nothing wrong with working this way, and I know dozens and
dozens of professionals who make a living this way. It’s not a problem to be
in this market, as long as we agree on the definition of our profession,
because this is NOT UI design, but the mass production of one of the
biggest mistakes a designer can make: creating a generic user interface.

The generic interface

What is a “generic” interface? It’s a web page that has a structure we’ve
seen a million times before, colors we’ve seen elsewhere, text that looks the
same as the rest. The result is a simple, linear, clean design, but also not a
memorable one.
And if we end up using these conventions all the time, if every time we
design a homepage we always put the logo in the top left corner, the menu
in the top right corner, the hero image in the middle, the title of the page in
the middle, if we always do that without making any exception—well, this
is not design, it’s laziness.

This layout is cool, but... lhave I already seen it somewhere else?

And if we end up using all the design conventions every time we make a
website, if we use the same structure every time and just change the logo
from time to time, well then it’s very likely that we’ve made a generic
layout.
The problem with a generic design is that it doesn’t create a unique, sincere,
honest, or even memorable relationship with the end user.
Honesty, sincerity and uniqueness are not easy to achieve, and sometimes
they are not even goals that are sought after by a certain type of clients.
Once again, I don’t want to judge this attitude, but I’ll just say that if we
don’t set ourselves these goals when we do design, then our work becomes
mere execution, an application of theoretical rules without much else. For
some people that might be fine, and that goes for clients and designers
alike. For others, however, it might not be enough: and if you’re taking this
course, you’re probably part of the latter group.
That’s why I want to talk to you right away about how important it is to
follow the mental model when creating software. We’ll talk about that in
the next chapter.
Implementation model
One of the reasons we often see unintuitive designs is because whoever
designed that website didn’t know the principles of good design.
When the design part is lacking (if not absent altogether), we see what Alan
Cooper in his book About Face calls the “implementation model”. When
we design following this model, we start from the way the technology
works and then we design the user interface. It’s certainly a linear and
rational implementation, but it doesn’t take into account the user’s way of
reasoning, which is usually much simpler, basic and limited compared to
the technology. In fact, the user has no interest in knowing how things
work, and simply wants to reach a goal in the simplest way possible. This is
why the keys on a calculator have different sizes. Does the choice of key
size depend on technology? Not at all. It depends on how many times a
symbol or number is used compared to others.
Similarly, we don’t need to know how a car works, and the center of our
focus is the dashboard: wherever something happens, that’s where our eyes
are. But of course, that’s not what a mechanic would say.
If all this may seem obvious to us in the real world, then why do we accept
layouts for sites, forums or apps that are full of unnecessary text and
buttons? Why do we accept to add a feature “because the system provides
it”, if it is not required by the end user? Would we put an extra pedal next to
the accelerator pedal in a car “since the system provides it"? Not unless we
had a very good reason to do so.

The size and the disposition of the buttons in a calculator

 have nothing to do with the technology but only with the user experience.

At the opposite extreme of this way of doing things we have the “mental
model”. It faithfully follows the end user’s way of reasoning. In this model,
there is no need to learn any instructions, because the object in front of us
works in a simple and instinctive way.
This is why even a child can use an iPad, and I doubt they’ve seen a video
presentation by Steve Jobs before using it.
In short, every object, service and software has these two parallel worlds:
on the one hand, the way things work, a complicated world, full of
functions that only experts can decipher. On the other hand, there is the way
the end user thinks, often more basic, more limited but more instinctive and
creative: this is the mental model.

The essence of our job in a drawing:

transform a difficult and edgy world
into a perfect, nice and useful shape.

What we do when we create software, Alan Cooper argues, is nothing more

than creating an intermediate level that we can call a “representative
model”, which serves as a bridge between the two worlds. The closer a
piece of software is able to approximate the mental model, the easier to use
it will be perceived to be.
Some example
That’s the theory, but – what do we do with it when we design a site? Let’s
look at some examples.
If we’re implementing an event search bar, it might be helpful to group the
data by the way we’re used to organizing our appointments.
 Timeout.com allows us to find events about todays, this week,
this weekend and this month. This order follows the user’s logic.

For example, we might look for something to do today, tomorrow or this

weekend. This is our way of reasoning. I’ll point out to you the way in
which, as we get closer to the user’s mental model, we have to simplify and
trivialize. We’re taking away what, in the eyes of an engineer or a
programmer, would be functionality. And so in this case, instead of adding a
calendar with infinite possibilities, we are instead creating a pre-selection
that is based on the logical reasoning of the user.
In some cases the mental model is more inclusive than the implementation
model: while at a functional level the name of an airport and that of a city
are two different things, at a logical level, for an average user, they are the
same thing. On a site like this one, when we are organizing a trip, we may
want to type the name of an airport, unconcerned, for example “John F.
Kennedy”, but we mean “New York”, and vice versa. This is how the user
reasons, and the technology must follow their way of reasoning, even if,
technically, it would not be correct to make the two results interchangeable.

“New York” and “John F Kennedy” are two very different concepts,
but not for the user who want to buy a flight ticket.

In other cases, knowing the mental model can help us predict user behavior
and help them in their choices: if we already know that most users choose
an airline ticket, both round-trip and economy class... why not select all
these fields from the start instead? Certainly, we might not do that, and
that’s not technically a mistake. But if we do, we are somehow taking care
of our relationship with the end user.
Kind of like the waiter who pours your wine when your glass is empty.
Could he not do that? He could. But the fact is, you’re so drunk it’s a
miracle you can hold on to your chair at all, so... Give that waiter a medal!
Wizards

Searching a place to stay on Airbnb.com

One of the most obvious representations of when we apply the mental

model are the so-called “wizards": pages of software that try to guide you,
step by step, through a more or less complicated process. And if you think
about it, wizards don’t make any sense if you look at them from a
functional point of view. They’re not there because the software forces us to
do it like that. On the contrary, they’re a complication from an
implementation point of view that aims to simplify life for the user. Look at
how the search process works in the Airbnb app for example. Is there a
technological reason to break the search into so many steps? No, but for an
average user, a user far from the technological world, the flow follows
exactly the way they think when they perform a search like that.
Following the mental model helps us understand how to use emotional
design: if we know that the user is living through a moment of stress or, on
the contrary, one of great euphoria, well, we can be stressed with them or
happy with them. And if you think about it, sharing emotion, even if with a
software, is the basis of every good relationship.
The implementation model and mental model. This was the first principle I
wanted to start this course with because it’s one of the most common
mistakes found on websites. So, the next time you have to implement
software, ask yourself, “How would my user think?” This – and always this,
my dear friend – is the question we are fated to ask ourselves every time.

Watch the examples in a video

Exercise: why is a site difficult to navigate?

Most of the times we get frustrated while browsing a site, it’s because it
doesn’t follow the mental model. The next time you think “This site is
impossible to use!”, stop for a moment and try to figure out what exactly
the problem is.
After that, do your job as a designer: design a better interface, which makes
the user’s life easier.
Draw the layout using any design software and post it
on https://www.facebook.com/groups/uxdesignfriends.
I will give you a detailed feedback
Simplicity
Simplicity: I love talking about this topic, a source of joys and sorrows for
anyone who wants to create almost anything: an object, a service or, in our
case, a piece of software. There are a billion articles online about this topic,
and they all ask the same question: why don’t we make things simple?
There are three reasons why we fail to do it. Want to take a guess? I’ll give
you a few seconds for that.

Simplifying is hard
Simplifying is hard because things tend to get complicated. Our life is a
perfect example of this: we started out with our greatest effort being to stay
upright for a few seconds, and now here we are taking a web design class.
And the life cycle of software is similar: we start out full of hope and
convinced that we know exactly what will happen to our site in the next few
months, but the truth is that in a few years we’ll have added so many
features that we’ll have forgotten the original reason why we created it.
There is no software that is not part of this problem: think of how
complicated Mailchimp has become over the years, which from a simple
software for sending newsletters has been transformed into a CRM with
predictive marketing automations.
Think about Google Maps, which at the beginning simply showed us an
interactive map, and then the directions, the itineraries on foot, by bus, by
scooter, the simulation of the route at a different time from the current one,
the highlighting of some places of interest were all added.
Think of Ryanair, initially designed to sell airline tickets, but now look at
the amount of things they try to foist on you from the moment you select
your ticket to the moment you complete your purchase, and ask yourself:
are we really sure that Ryanair still earns its money mainly from tickets and
not from the thousands of other things it sells you in the meantime?
 In one page on Ryanair.com, I’ve counted more than 10 buy buttons.
This is not an order process. This is a minefield.

Our job is complicated

The second answer is that we’re doing things that are objectively difficult
for most people. And this doesn’t only apply to people who make software,
but to anyone in a profession that requires years or decades of study: think,
for example, of a doctor. You go to them, they examine you and they could
say anything: they could tell you that you have a leg that needs to be
amputated or an ingrown toenail, you can only take note of their diagnosis
and hope that they will give you some pills to swallow and solve the matter.
So, to get to our industry: one thing we must never forget is that the average
user is unaware of how most things related to the Internet work. They don’t
know what a browser is. What the difference is between Facebook and
Google. Between Facebook and the Internet. And in the middle of all this
mess, it’s us who sell highly professional sites.
The third answer is that we are so immersed in our work that we forget to
talk to people who know nothing about our software. This is the reason
why, for example, on a sales landing page where we sell an innovative
remote control software, we forget to explain what a remote control
software is. Because the user already knows, right? Well, no.
We must never fall into the mistake of thinking that our user, when they
arrive on our site, already knows everything about us and the only thing
they are waiting for is a ’Buy’ button. This can happen, but it should be
treated as an exception, not the rule.

The Supremo remote desktop landing page forgets to say

what the heck is a remote desktop software.

Even Stripe.com, one of the most popular online payment services in the
world, can find the humility to explain what it does: “payment
infrastructure for the Internet”. Can one be more explicit, banal and didactic
than that? No, one can’t.
We forget to say who we are, what we do, why we’re there.
We have the arrogance to believe that the user should be interested in
digging deep, in figuring out for themselves if what they have in front of
them is right for them, but the truth is that we are replaceable. We are all
replaceable. And if even a multi-million dollar company like Stripe thinks
that, well, then we’ll have to start thinking that too, as consultants and as
businesses. That’s why we have a moral duty to make their life easier, to be
explicit about why that web page exists and why they are there spending
their valuable time on our site.
 The Stripe homepage.

Exercise: a landing page restyling

Go to https://bit.ly/supremo-en-ui and download the file. Try to make a
restyling of Supremo Control software landing page. You can use Figma,
Photoshop, Sketch or whatever tool you prefer in order to design it.
Here some UX issues this page has.
→ It’s not very explicit about what this software is for.
→ It has a wrong position of the call to action button
→ It doens’t have any text to support the user final decision
Don’t create just “a simple better landing page": do your best! When ready,
post it on https://www.facebook.com/groups/uxdesignfriends. I’ll comment
it!
Progressive disclosure
Progressive disclosure: a very complicated concept that could be
summarized as follows: “Any information presented to a user who is not
interested or not yet ready to understand or evaluate it is irrelevant and
therefore must be eliminated”.
This means that whenever we create a layout, we must always ask
ourselves:
Is the element I’m adding of value to the user? If the answer is no, we
should seriously ask ourselves why we’re adding it and whether we should
remove it. And that’s because every new element on the page, if it’s not of
value, only provides noise.
This statement, which is already a tough one to swallow, must be
accompanied by another concept that goes in the opposite direction, which
is this: “Every piece of information that the average user looks for on a
page but can’t find is a UX problem.”
And yes, I know, it’s a complicated mess.
How do we take away what’s really important and how do we give
information without putting too much in their head? What’s the balance
point in all of this? Also, what does “relevant” mean? If my wife and I go
out to dinner and then you ask us to describe the evening, well, I’m sure
you’ll get very different stories, and that’s because the filters with which I
decide what may or may not be relevant in the story are different from hers.
But that’s not all: my story changes depending on who asked me to tell it: is
it my best friend, the one who’s obsessed with meat? Is it my brother, who’s
always looking for cheap restaurants? Is it my mum, who wants to know if
we’ve eaten healthy? In short: the interlocutor who receives the information
changes the concept of what is relevant in the speech we’re making.

Essential, important and less important

information
And so the question remains: how do you resolve this situation? Let’s start
with the theory. The ideal moment in which we should decide on the
content to be included in the page is that of information architecture, which
we discussed in the previous section.
During this phase, we should divide the information into three large groups:
the first one concerns the “essential information”, that without which the
user cannot proceed in any way. This information must be immediately
visible, and here there is no room for any interpretation or margin for error:
the user must always be able to see it.
Then we have the important information, the information that the user
needs to be able to evaluate whether to do an action or not: click a button or
leave an email address, for example. Although it is important to condition
the user’s action, its absence doesn’t block everything. It’s usually
information that explains why a user should do something: click this button
so you can make a reservation, or sign in so you can get lots of benefits, or
the title of a detail card that tells me unequivocally what I’m looking at. If I
removed this information, the page would be a bit sparse, but the user
would still be able to understand the context in which they find themselves
looking at the image of the product.
Finally, the unimportant information, which is usually the majority, that
needs to be less visible or even within a click or two away.
Let’s look at a few examples right now.
We start with an online banking from a virtual bank, it’s called N26, it’s a
German startup, and this is the first screen. I want to emphasize this: this is
the first screen that a registered user ever sees.
A user accessing online banking may have several needs, but mainly two: to
monitor cash movements, perhaps because they are waiting for a transfer,
and to make a payment. And both of these needs are fulfilled by a button
and a list. As you can see, on this page there is practically nothing else, and
this is because all other operations, which are less important, are hidden in
the “my account” menu, just a click away.
 The N26 homepage goes straight to the point.

Let’s take another example: a mobile weather app: mobile apps are a great
place to go to sift through examples of progressive disclosure, because the
screen space is very small and so we often have to make sacrifices in terms
of information to show. Let’s take this weather app. Notice how the app
doesn’t give me as much information as I could possibly have. On the
contrary, someone here had to give a very specific order to the information
to be conveyed, such as today’s temperature, the next day’s temperature,
wind speed and direction, humidity, minimum temperature, maximum
temperature, in short, we’re really talking about a lot of information. And as
you can see, what is the most important piece of information, the one that
takes up half the space I have available? It’s this one: what’s the weather
like right now? It’s raining now. It’s cold now.
A screenshot of 3bMeteo app.
Why is this information absolutely the most important? Because in the
customer journey that somebody must have put together designing this app,
they said: what is the user doing when they open this app? And I’ll tell you
what they’re doing, because I’m a perfect user of these kinds of apps: I’m at
the door, I’m late for a work appointment, and I have to decide in an instant
whether I should bring my umbrella or put on a heavier jacket. This is
absolutely the most important information in the world that I need at that
moment. After that, if I have time, if I want to, I can go deeper: I can read,
for example, what the weather will be like in the next few hours, or, with a
tap, analyze in detail what will happen hour after hour. How many users
will get to this level of information detail? Few, very few. But for those who
have come this far, this information is important and we have managed to
give it to them without disturbing the vast majority of people who just want
to know: should I bring an umbrella? Should I wear a jacket? Yes or no.

The Google 0 search result is a progressive disclosure great example.

Google search is an excellent example of progressive disclosure: if I search

the web for something for which there is a so-called 0 result, i.e. a result
created by Google itself, the system gives me a quick answer, trying to
guess on the fly the essential information about what I might be looking for.
 A screenshot of the Windows display settings.

Almost all windows in Windows work like this: there is a page title, which
is the essential information, and in fact it is the only one that is always
present, no matter in which way I am scrolling the page. This is followed by
the important information, that is, the information that most users need to
be able to read to enable or change some settings. And finally the less
important information and features, all a click away.
Asana, a task management software, divides the menu items related to the
single task into two: the important ones, on the left and clearly visible, and
the less important ones, visible only after a click. Notice how they could
have put other menu items next to the other visible ones, but they didn’t.
This is because it is never the available space that dictates which button or
information to make visible, but how important they are, how much they
are looked for, how much they are clicked by the end user.
 The Asana drop down menu shows the less important menu items.

Easypark, an app that is used to pay for parking. In the final screen, when
we are about to pay for parking, we have only two essential pieces of
information: one about the time when parking expires and a button that
makes us start the paid parking. That’s it. Is there anything else to show?
Certainly there is. For example, the license plate of the car, the street where
one is, the method of payment, but it’s all information that can be reached
with one tap.
 Easypark, a mobile app to pay the car parking.

In short, the user experience is a constant struggle between simplicity and

completeness of information. Usually, the customer tends to want to give
much more information than necessary. On the other hand, the user tends to
want to read only what is strictly necessary to make a decision. And we are
exactly in the middle between these two opposite focuses, a position that is
certainly not recommended.
We can only achieve this delicate balance through progressive disclosure:
→ We show only the most relevant information to the user
→ We prioritize it according to the user’s objective
→ We put all the rest of the information, the information not necessary to
make a decision, in a second or even third level of depth.
Good luck, I know you’ll need it.
Dominance
We’ll analyze a new principle, that of dominance. Which means to
command, to control, to predominate, to prevail over others. And a
dominant item is the one that is noticed first, one that catches our eye and is
saying to the user: before you look at anything else on this page, look at me,
choose me, take me.

What is the first thing you notice in this picture?

Well, this one was easy.

Look at this picture and tell me: what’s the dominant element? if you said
the tree, well, congratulations, you’re so right.
it is easy to recognize a dominant element because it is the first one we
notice within a composition. Often this result is linked to its size: the bigger
an element is, the more it is noticed. But it doesn’t have to be that way:
sometimes it’s not big at all, as for example in this photo, where what you
might notice first are these yellow taxis.
And how can we use dominance in the world of web design? Let’s take a
few examples.
When there’s no dominant item, we finish to ask...
 where am I supposed to start?

When we are faced with a layout where one dominant element is missing,
the user has no indication of the order in which to read it. Everything
appears to be important (or unimportant) in the same way. The elements
present compete with each other instead of providing a convenient path that
should take the user from an exploration phase to a decision-making phase.
So not only are we not setting a reading order, but we can’t even predict or
speculate on it: the navigation flow is left to chance and to the
resourcefulness of the end user, who is usually not at all resourceful, thus
ending up getting impatient and, in the worst case, shutting down our
software.
Instead, when we exploit dominance in our favor, we end up setting a
reading order. And how do we do that? A first way is to exploit the size of
the elements. We saw this earlier with photos: if one element is larger than
the others, then it grabs my attention. That’s why titles are larger than
paragraphs.

Big and bold title = assured attention.

The size of a page’s logo is one of those battles of time immemorial

between designer and client, and the reason for these battles lies in the
principle of dominance: for the client, the logo must be the most important
thing on the page. But the designer knows well that the user rarely goes to a
web page with the aim of admiring a logo of a completely unknown
company.
But luckily (or not, sometimes) size is not everything in life, even if the
client ignores this fact. And if there is a smaller element, but with strong
contrast, it becomes dominant over the others.

In this layout you’ll notice first the title, because of its size,
then the button, because of the contrast.

The final option we have to exploit dominance is to work with the negative
space around the image. If we surround any element with a lot of space, it’s
as if we’re putting it in center stage, regardless of its size or position.
In short, dominance helps you create a reading order within the page. To
take your user by the hand and accompany them towards their goal.
 Making a wise use of size, contrast and negative space
in order to maximize the dominance effects.

Every time you create a layout, ask yourself:

→ What are the elements the user needs to be able to make their choice?
→ And how do I make them dominant on this page?
I recommend that you do a great job here.

Watch the video

Exercise: The bloomberg.com chaos
I was perplexed to see one of the most clicked sites in the world,
bloomberg.com, with a homepage that is really full of information and that
doesn’t help to give a reading order.
Of course, designing the homepage of an online newspaper is difficult. But
how difficult is it? You’ll find out for yourself if you try this exercise: make
the bloomberg.com restyling. Once finished, post your job
on www.facebook.com/groups/uxdesignfriends. I’ll comment it!
Alignment
Alignment: probably one of the most basic but at the same time most
efficient design principles. When you’re short on time or budget, try
applying this principle and everything will look much more professional
than before.
And the principle is this: that which is aligned makes it easier and faster for
us to read and interpret the space in which we’re moving.

Left or centered alignment:

which is more convenient for you to read?

This is an almost trivial truth in everyday life. It’s why we insist on making
our beds every day, or arranging the books on the bookshelf by height or
color or author. What’s aligned makes us feel good, but it’s not just a matter
of feeling: in the world of typography, alignment is the only way we can
increase reading speed. Left-justified text is more readable than all-centered
text because of alignment. Every time we read centered text and we finish
the line and have to go back to the beginning, it’s as if our brain has to reset
for a few milliseconds and figure out, line by line, where it needs to start
reading again. None of this happens in left-justified texts.
How does this all translate into web design? Let’s take a look at some
examples.
 The space scan of the Medium.com homepage
is easy thanks to the great alignment of every item in the page.

This is Medium, a website for bloggers. It has a minimalist style and great
attention to the alignment of elements.
Let’s take another example: these are two product listing pages from two
competing sites: Amazon on one side and Alibaba on the other. Which of
the two is more persuasive, and why? Let’s look at them together. What is
different about these two layouts? Look at the perfect alignment of the
photos on Amazon. Look at the texts.
 Alibaba (above) vs Amazon (below).
We scan better (and so we read more willingly)
those layouts that have aligned items.

Let’s now look at a few where the alignment is lacking and ask ourselves
how we feel looking at this layout.
Sometimes you have to try different types of alignments, because what
should work in theory doesn’t actually work in practice.
This is why we must always remember that alignment is an optical effect,
not a mathematical result. What in theory should correspond to a perfect
alignment sometimes isn’t, because the visual weight of some elements is
not equal, and therefore it’s necessary to intervene manually to improve the
optical effect.
 Inside the grid icons (left) VS Outside the grid icons (right).
Which layout do you prefer?

Alignment. If things are aligned, the user is spurred to read on, to continue,
to move forward. To scan the page more easily, since they feel less fatigue.
They perceive that the elements of the page they’re reading are somehow
related to each other. In short, they feel they’re in a place where they
understand the rules, and this generates trust, optimism and calm, which is
the ideal environment for them to perform the action we want them to do.

Watch the examples in a video

Error messages
Dear designer, I have something to tell you and I don’t want to dance
around it. You made a mistake when you bought this course. What did you
think, that you’d become a real designer by osmosis? Just by reading my
words? Come on...
Okay, I was kidding. But now tell me, how did it feel? Were you annoyed?
You know the worst thing about getting something wrong? It’s someone
telling us we got something wrong.

Unfortunately most people don’t know what a “login” is.

If you add the word "error", we have secured a frustrated user.

The word “error” arouses in us a sense of estrangement, of disgust, of

anger. This happens for many reasons: the first is that we don’t make
mistakes, the second is “who are you to tell me I’m wrong”, and the third is
that, until proven otherwise, it’s your software that led me to the error and
not me. At least that’s what 99% of the users of our sites think: it’s always
the tech guys’ fault, you see them, these people who always work from
home... How can you ever trust them.
And this whole story is to make you understand how error messages are
absolutely the most delicate communication to manage on a website, and
for this reason they should never be left in the hands of heartless, hyper-
rational and not very empathic people: in short, programmers. I’m kidding.
Probably.
Texts and colors in error messages should be designed by the site’s
communication manager, or a copywriter should do it, or, why not, even a
designer. And what are the basic rules when we create an error message?
Let’s look at them together.

Yes, we can say to the user that they are wrong,

not writing the word “error”.

First of all, never use the word “mistake”. And that’s because we hate being
wrong and we hate being reminded by someone that we were wrong. So,
such a message might instead start with a nice “I’m sorry” and then explain
what went wrong. “I’m sorry, the password you entered is incorrect”.
“Sorry the email you entered is invalid”.
Try to be specific: if you say “there is a problem on this page” you are using
vague language. Don’t leave to the user the task of understanding what
went wrong, but explain it to them, possibly not only in words: for example,
you can underline the field where the problem occurred. But not only that:
go further and suggest the solution as well. “Maybe we can help you find
your username again?” direct link. “Maybe you forgot your password?”
direct link.
 Always include the possible solution within your error message.

In short, we help the user manage the most stressful moments while
browsing the site. Yes, it’s true, it’s all their fault, I don’t doubt it: they’ve
forgotten their password, their email, their username, maybe they’re even
writing on the wrong site: it doesn’t matter: it’s in the moments of difficulty
that the most lasting relationships are created.
Icons
Let’s talk about icons. They are an exceptional tool for us designers for
many reasons, the first one being: they are perfect elements to push the user
to action.
That’s why we find them practically everywhere, because they catch our
attention and because all by themselves, regardless of whether there is a
descriptive text or not, the user can already understand the use of that
button just by looking at the icon.
 Even if we don't read the text,
the icon helps us to understand the feature of the item.

And looking at an icon is certainly easier and faster than reading a sentence
and understanding its meaning. So we get to the action sooner than when
we read a text. Not to mention all the problems related to translations: an
icon remains an icon in all languages, while a text must be translated.
There are dozens and dozens of sites where you can download or buy icons,
personally I feel great with https://www.iconfinder.com but again, it’s just
one of dozens of sites that do this job.
Icons are a great space saver. All apps on our phone come with icon plus
app title. But I’m pretty sure that by now, when you look at your phone
screen, you’ve lost the habit of reading the title. Instead, what happens more
often is that we remember the predominant color of the icon and look for it
among the others.
In short, there would be a million reasons why an icon is preferable to a
text, yet they are not always used. This happens because the icon’s duty is
to unequivocally convey its meaning. And if it doesn’t reach this goal, if it
doesn’t reach even a small part of your target audience, well, then you have
a big user experience problem. Because people will look at that icon and
they won’t know exactly what will happen once they click on it.
So my advice is to analyze your target audience and whether you should use
a word instead of an icon, or accompany it with a text. More generally, the
combination of text + icon is always the best choice.
 Are you sure you still read
the name of the apps on your phone?

There are four tips I want to give you for the next time you’re choosing an
icon set for a site or app.
Pay attention to the size
First: try to keep their perceived size consistent. Pay attention to the word
“perceived": two icons may occupy the same space, but have a different
visual weight, perhaps due to a different balance between empty and full
space, or different thickness of the edges.

Three icons, same meaning, same size,

but different visual “weight”.

Each icon has subtle differences from the others, and this changes the way
they seem bigger or smaller to us. But why should these subtle differences
matter to us? Because if an icon is perceived to be different than the others,
then the user’s attention will be drawn by one of them, without us intending
that. And, as we’ve said many times, the moment we lose control of the
user’s gaze, we’re leaving our success to chance.

Pay attention to the detail level

Tip number two: be consistent in the complexity of the design as well. More
detailed icons, which have more density, attract more attention. Let’s take
an example right now: look at three icons. Same size, same line width, but
one of them has a much more complex design than the others, and
statistically this one will draw more attention.
 All of these three icons represent a document,
but our gaze goes to the most detailed one.

Don't mix styles

Tip number three: Don’t mix icon styles. Once you choose a certain style,
stick with it. Same style means using the same color saturation (only pastel
colors, for example), or the same border (rounded corners, squares), or only
illustrative icons.

Same concept, very different styles.

Take advantage of the conventions

Last point: don’t reinvent the wheel. There are very few truly universal
icons, the ones we’re all used to and for which we can afford not to add any
descriptive text. Think of the “print” or “save” button.
When you find yourself in these cases, don’t complicate your life by
choosing a style that is too innovative or unnecessarily complex: our aim is
always to make the user’s life as simple as possible. Never forget that.
Rhythm
The next principle I want to talk about might sound a bit strange to you, and
I use the term “sound” intentionally, since we’re talking about rhythm. But
what does rhythm have to do with web design? I’ll tell you right now: when
a page “has rhythm” this means that the interval between the elements that
compose it is always the same.

Facebook notifications (left),

the rhythm they produce (right).

Every time this happens, our mind learns the rule instinctively. We
understand without thinking too much about it that that space always
repeats itself in the same way, and our eye moves between the elements
predicting where one ends and the other begins.
All this generates a reading rhythm, a sort of invisible metronome that
carries us forward while reading, helps us to go ahead in a constant way,
drawn by this invisible music. And yes, I know how it sounds, don’t make
that face: if you don’t believe me, let’s look at some examples.
Do you see this screenshot? There are some elements that are repeated, that
have the same shape, the same font, the same size, in the same box, and
they are similar precisely because they all belong to the same logical group:
in this case we are talking about notifications. And to implement this
concept, since it’s always and only notifications, the designer here has
wisely decided to implement them all in the same way, with the same
spaces, and this has created a rhythm.
I’ll point out that there could be thousands of these notifications, but our
brains have been locked into this rhythm by now anyway, and they can go
on by themselves for hours.
Rhythm. Just like in a song, in a web page it helps us to pace the reading, to
go ahead because it leads us there, to read faster because we know exactly
where the eye should rest once the box or the text we are reading is
finished, because we have learned the distances that the elements have
between them.
In short, we designers, when we design a web page, we are actually creating
a musical score ourselves.

An Amazon category page (above),

the rhythm it produces (below).
Predictability
Predictability: on this subject I have a story to tell.
A while back, I lived in London for a couple of years.
I remember every time I took the tube there was almost always a wait to
catch the elevator back to the surface. Alternatively, you could take the
stairs, but those were steep and winding. And every time, I would notice
this sign that said something like, “There are 347 steps left to get to the
surface”. I have to confess, I thought that kind of precision was only for
obsessive-compulsive people. But eventually I had to change my mind.
A couple of years later, once I moved to Milan, I had the same experience. I
took the subway, I decided to take the stairs, I turned the corner, I saw the
stairs in front of me and the first thing that came to my mind was, “Oh my
God, I don’t know how many steps I have to take before I get out!”.
And I know, in that moment I became a crazy control freak too, but we all
somehow want to have at least the illusion of being able to manage the
things around us, to have them under control, especially if we are in a
territory, like the web, that can be difficult to understand for a newbie.
All this helps us understand why an average user spends more time on a site
where the directions are clear enough to make navigation predictable. But
what exactly does “predictable” mean? Let’s look at a few examples.
Predictability means not having the user ask what page they are on and
what will happen next. For example, in this case, what will happen at the
end of the song. Looking in this area on the right, we learn about the video
we are listening to and the whole playlist that will follow.
 On Youtube it’s easy to understand which is the song I’m listening to
and the other ones that will follow.

Predictability also means not asking if what I’m seeing is a link, or a button,
or a title. In short, it means differentiating clickable stuff from stuff that
isn’t, and making it clear, if possible, without having to hover the mouse
over the button to see if the cursor changes. This means that we have a
moral duty never to design text that looks like buttons and vice versa.

Red titles on this website are dangerously similar

to the clickable buttons: both are red with a similar shape.

Predictability also means using design conventions correctly, especially for

the most popular components on the web: if, for example, we are used to
interpreting this arrow as what is called a dropdown menu, then every time
we see it, no matter what site we are on, we tend to think we will be getting
the same effect.
Predictability means using the same navigation rules over and over again.
And if we break a rule that we have established ourselves even once, then
we are confusing the user. We’re making the user’s navigation less
predictable, because from that point on
Predictability also means using copy to alert the user as to why they should
take an action and what will happen once they do.
That’s what Facebook does, which, right below the "publish" button, tells
you what will happen after you click it. Or Ryanair, which explains why
you should log in. Or The fork, which explains the three key advantages on
clicking the order button.
 Facebook (above), tells us what will happen after we click the button.
Ryanair (below) explain us why we should register in three bullet points.

As you can see, you don’t need a lot of information, but sometimes you
really only need one or two words to make the user understand the context
they are in or what is going to happen.
Predictability. All of us human beings, in the midst of a hectic life where
everything seems to be getting out of hand, love it when we are in
environments where we feel welcomed, where everything works as we
expect, and this feeling of being welcome makes us open, calm, dare I say
happy, and this attitude is the precursor of something that will soon, very
soon, turn into an action on the web page I’m visiting. And this is, we must
never forget, the only real reason that justifies our work.
Affordance
Let’s bring this concept back to the internet world.
When the first graphical interfaces began to be used in the 90’s, we were
used to sites full of information, with a lot of wacky graphics where
probably no UX design principles were respected at all because nobody
thought about making useful sites: we were all there to say: look at what I
managed to do!
And one thing I still remember was this tendency to have to explain how
things worked: "Click here to see this". "Click to open the window". Which
is, in short, like writing on a door: “Put your hand here to open”.

"Click here now!”

"Why?”
"Well, who cares”.

Fortunately, decades have passed since that time, and if someone still insists
on using those techniques, I’ll say it once and for all: we no longer need to
explain to the user what they must do to perform an action. If we feel the
need to, it means that we have created a design that is difficult to
understand. And if you look at the sites or software that you’re browsing
every day, you’ll notice how they constantly use small details that make the
user understand how to use things, without explaining it. Let’s look at a few
examples.
Let’s start with a computer software and not a site: Acrobat Reader, a
software for reading and editing PDF files. And look what we find on the
sides: little arrows that in the real world might look like knobs on a drawer.

The Acrobat interface shows a menu on the left that we can open in three clicks:
first an arrow, then the icons and finally the pages.

When we move the mouse pointer closer, the column turns a darker gray, a
sign that we can do something with it. And when we click, just like when
we open our drawers, we see the first things, the first little boxes. We don’t
necessarily remember exactly what we put inside, and by clicking on them
we can open them, just as we would in the real world. Finally, we can take
our first actions, in this case deleting pages or changing their order.
Let’s now look at a mobile app, Easypark: I’ve found parking and I need to
pay for it. Here, an animation suggests that I should go for the dominant
element of the page, a kind of virtual time disk, well placed near my thumb.
 The animation and the size of the parking meter below
it's like it's screaming at us "turn me over!”

In Slack, a chat for development teams working remotely, when you move
within the chat or when there’s a message you haven’t read yet that you
need to reply to, a small message appears that overlaps the rest and is
impossible to miss. And in fact, if you click on it, it immediately takes you
to the conversation you haven’t yet read.
Take a look at this graphic on Momondo: you might be seeing it for the first
time in your life, but something tells me you immediately tried to interact
with it.

An interactive graph in Momondo.com.

And finally, not only is it important to invite the user to areas where they
can interact, but it’s just as useful to discourage them from clicking
unnecessarily on areas that aren’t active. So, for example, if a button is not
clickable, it’s important that it should appear as if it were turned off, just
like the LED on our television. And the same thing applies to all those
buttons, switches or toggles - call them what you like - where it must
always be obvious and unambiguous if they are on or off.

Watch the examples in a video

Consistency
In life, we love what is consistent, which is synonymous with solidity,
seriousness, reliability. And this perhaps comes from the fear of change in
each of us, or from the laziness we experience when we are forced to adapt
to something new: whether you are someone who needs certainty or
someone who enjoys changing cities every year, you will agree in any case
that something that remains the same conveys a sense of security.
So let’s start from this value and put it in the world of the web: here, it is the
visual language that must be consistent. This happens because when we
open a site, we need to learn the rules that govern the page we are visiting,
and we need to do it quickly, because we are not visiting that site to get a
crash course in computer science, but usually we have a goal or a need in
our head and we want to understand if what we have in front of us is the
solution to our problems.
When the visual language of the website changes from page to page, or
even worse, within the page itself, this forces the user to unlearn one rule
and try to decode the new one.
That’s why the sites that seem reassuring to us are those that always use the
same font or the same colors, where the titles are always the same size and
therefore appear immediately recognizable. A set of three or four buttons
that are all the same size. A set of icons that have a similar style.
Consistency means choosing in advance the size and colors of titles,
subtitles, buttons and links. Making sure that they are all well differentiated
and, once chosen, sticking to our guns, without ever making any exception.
 A WordPress template page where you can read
the size and the style of each title and paragraph.

Look at this train booking app: look at how many times - in just three
consecutive screens - the font size is changed, the color is changed -
sometimes light gray, sometimes dark gray, the font style - sometimes bold
and sometimes not – and look on the third screen at how gigantic the “plus”
and “minus” seem compared to the “add” button, for example, and how the
text “1 adult” is not aligned with anything. All of these imperfections make
navigation difficult, inconsistent, unpredictable and, in the long run,
frustrating.
 See how many different size and style of the fonts
are used on this app.

Repetition takes on an extra effect when it becomes common to different

sites or platforms, ending up becoming a real visual language that is called
a “pattern”. I’ll give you an example right now so you understand what I
mean:
See how Duolingo, a software to easily learn a new language, achieves a
consistent visual language between the site and app. And how it does it: a
big role is played by this mascot, which we find almost everywhere. But
also the use of the same font, of this bright green that we find in all the
buttons. In short, if you look first at the app and then at the site or vice
versa, you can’t help but say: ah, yes, I always find myself in the same
place.

Duolingo software does a great costinstency job

on all the platforms.

Consistency. We notice its importance every time there is a rule, a rule that
is set by us when we design the site and that must never be disregarded.
And what for some might seem like almost a weakness, that is, repeating
the same elements over and over again, actually does nothing but strengthen
the communication. Making it unambiguous, cohesive, clear, and therefore
effective.
Exercise: redesign a train app
Italo treno app navigation is lack of costistency (download the layout
here https://bit.ly/italo-en-app). Are you able to design a better navigation?
Show me what you can do! When you are ready, post your design work
on www.facebook.com/groups/uxdesignfriends. I'll comment it!
Proximity
Let’s talk about proximity. And what is proximity? It’s the distance between
elements on a page. And we use it to signal the relationship that exists
between those elements.
And what does the theory tell us about this principle? Well it’s very simple:
elements that are close to each other are perceived as being part of the same
group. If they are close together, then we perceive their relationship. Their
interdependence. It’s as if we say to the user: “Hey, see this block here?
These circles all belong to the same family”. And all we have to do is copy
this group but change the space, even slightly, and we immediately create
another meaning. For example, we could think that these two groups are
very different: after all, they are very far from each other. And these circles
somehow belong to a similar group, or maybe they are two subgroups
belonging to the same family.

In this image we see three families:

one on the left, two on the right.

The interesting thing is that proximity is such a powerful tool that even if
we add another variable, such as color, we still perceive those elements as a
whole. And we continue to think so even if we put a dividing line between
them.
 We can add a new color, a line, it doesn't matter:
our brain still sees three different families.

That’s the theory. But how does theory really help us when we design a
page? I’m not even going to get into that, but I will say it: let’s see some
examples.
Whenever we bring some elements closer together, we are telling the user
that those elements are to be considered as one logical block. This means
that the content I find within the same block is somehow related to each
other. If, on the other hand, a block is far away, it means that it will be about
something else.
Let’s take another example: here we have six distinct blocks, but even the
proximity within them is not left up to chance. In fact, the title is located far
from both the top and bottom lines. And this distance, together with the size
of the font, guides our eye while reading. This means that if we read the
headline and we understand that it deals with a subject that doesn’t interest
us, we won’t waste time reading the other two pieces of information, and
we will go on, until we reach the news that really interests us.
 When we share the information in different, distant blocks,
we help the user to scan the page and find out what they are looking for.

Look at what Samsung does: these two elements are ultimately one thing,
which is a menu, but the fact that they are spaced out adds a new level of
reading. The menu that’s further to the right is less important than the one
on the left, and that’s because we know that in reading, our gaze moves
from left to right. But that’s not all: the one on the left is mainly about
products or product categories on sale. The one on the right instead contains
menu items that refer to more generic sections, or are for the users who
have very specific needs, such as support.

Il menù di Samsung presenta due diversi livelli di lettura.

Amazon. The right distance among items

can substitute a box border or outline.

Proximity can help us place blocks of text, or cards, even if they are not
defined by a border.
And since I’m at this point, I want to point out that on all sites where there
is an advanced search with filters, the elements of the search are always
very close to each other, precisely because they all belong to the same
logical operation.
Proximity works especially on sites with complex layouts, because it is the
main tool with which we create order: here we see four columns, even if
they are not separated by any line
And if we go to a similar site, like for example Alibaba, here, the designer,
as he had to insert many more elements in the same line, was forced to use
boxes and not proximity to create a gap between the elements.
Or let’s look at Walmart: look at the enormous space between the photos of
the PC and the description.
And now look at the three layouts in comparison. Which of the three
layouts looks neater to you? Which of the three layouts do you feel more
welcome in? Which would you rather spend more time in?

The more the layout gets complicated.

the more proximity won't be enough to distinguish the items on the page.

The proximity principle is among the most powerful ones you can apply on
a page to create blocks of elements that have a different reading priority or
correspond to different logical blocks.
Whenever you are placing an element on a page ask yourself: how does this
element relate to everything around it? The answer will guide you to the
most right placement.

Watch the examples in a video

Color
Color: we’re talking about one of the variables present in practically all
design projects, and precisely because it’s so easy to choose one, we very
often underestimate its power.
So we end up choosing one just because we like it, or because our boss
likes it, or our customer, or because it’s fashionable this year; in short, it
doesn’t matter why, the point is that this is not the way we should choose a
color.

The delete button is red. Why?

Because the user shouldn't click it by mistake.
And the first thing that comes to my mind is that color attracts our attention:
for example, the color of the notifications happens to be red, a color that
conveys urgency or emergency.
The error messages in a form are red. And often all the buttons that require
special attention from the user are red too. And these examples tell us
something else: that the color not only captures our attention, but also
suggests a mood. The red color of a notification is like telling us, “Hey, I’m
telling you: you need to click me, start worrying, in short, do something!"
This is why green is used on many “thank you pages”. In this case, a
soothing color is used, which is like telling the user, “We’re past the most
stressful part, which was the payment part. And now we can relax”.
We see these two colors, red and green, so often on the websites we surf
that they are now inextricably linked with these two emotions, one with
urgency and the other with tranquility. So much so that they have now
become such ingrained conventions that it will be practically impossible to
make the user accept the choice of a red color to convey tranquility.
Apart from these two, every other color conveys a specific feeling, and
therefore each of them has intrinsic characteristics that go far beyond our
web project. And this is why we need to know them. Let’s take a few
examples.
In the common imagination, black conveys authority and power. White
conveys innocence and purity, and peace. Pink is often associated with the
female world, and expresses romanticism, passion, compassion. Blue
expresses tranquility. It is often used in the world of business or technology.
Yellow conveys optimism, positivity, joy. Purple conveys change,
sophistication, creativity, and this color is often associated with the
feminine world. And finally, brown: this color also recalls nature, but
especially the earth, something stable, solid, unshakable.
So when you are looking for a new color, always remember what concepts
colors are related to.
Another function of color is to be an indicator of where the user can
perform actions. This means that through color scanning we can understand
which areas of the site are clickable, obviously improving the readability of
the page itself.
If, in the main Twitter page, we try for a moment to remove everything that
has a neutral color (meaning white or black), what it’s colored correspond
to the main actions that the user can do on this page.
Color not only points us to interactive elements, and not only is it used to
suggest a mood, but sometimes it can be used to convey a logical meaning.
So we see that color and automatically think “Ah, that’s what happened”.
Whatsapp is a perfect example: we have three colors: green, which
indicates the interactive areas of the window. Grey, which indicates the
interactive areas that I’m not viewing. And finally, blue, which does not
point to anything to do here, but gives us a clear indication: “someone has
read your message”.

Whatsapp colors: green, gray, blue.

Each of them has a logic meaning.

Slack is a multichannel chat widely used by people who work remotely. It

uses the color blue to indicate who the user I’m talking to is. And it uses
green to indicate who among my contacts is online at that moment. Notice
how the two colors, green and blue, are not at all similar. Not only in the
intensity of the color, but also the elements that are colored do not resemble
each other. And this ensures that the two colors can never be confused.
Google Drive uses the light blue color to indicate the state we are in. And
the grey color every time we go with the mouse on one of the clickable
areas. This coloring, which is intentionally not very invasive, helps us
understand that if we clicked right there, something would happen.
And finally, color serves to characterize a brand in an unequivocal way: the
yellow of Mailchimp; the orange of Soundcloud; the red of Coca-Cola; the
red and orange of Mastercard.
 Google drive uses two colors to highlight
the page where I am and the clickable area.

Finally, remember that about 10% of the population has some problem
seeing colors correctly. And what does this mean? That we can never rely
only on color to convey a certain meaning. That’s why an error in a form
cannot be signaled only by coloring the fields red, but we must insert some
graphical element such as an icon or some text.

Don't rely only on color when you want to communicate a message,

but use also a text or an icon.

To summarize, when you’ve chosen colors for a project, ask yourself the
following four questions:
→ Am I using colors sparingly? It is said that the perfect number of colors
on a page should be three; others say five. What we can say for sure is that
every time we introduce a new color on the page, we should ask ourselves
what its meaning is and if it is well distinguished from the others.
→ Does the chosen color interfere with the message I want to convey or
does it reinforce it? So let’s look at the intrinsic meaning of that color,
because maybe it doesn’t correspond to what we want to communicate.
→ Am I using the chosen color palette consistently? Meaning, every time
I’m using that color, am I indicating the same function, or the same mood?
Does the functionality depend on that color? If yes, then you should add
more form or text elements to help the user understand what that color
means.

Watch the examples in a video

Contrast
Talking about color, we can’t avoid mentioning contrast, and, despite the
fact that it is close to the use we make of color, contrast brings with it a
series of very particular characteristics that justify a separate lesson.
In general, we can say that color and contrast work hand in hand. But once
you’ve chosen the color palette to use for your site, deciding on the contrast
can make a lot of difference.
In the real world, the eyes and the brain are programmed to notice first the
high-contrast things, those elements that are more vibrant than others. This
is how we look at the world around us: we observe the reality around us and
our gaze starts from the most high-contrast shapes and ends up in the least-
contrasting corners.
When we read a text, contrast is the principle we use to make it easier to
read. This is why most online newspapers have black text on a white
background: because this combination, besides reminding us of the paper of
the newspaper, is also the one that guarantees the highest possible contrast
and therefore easier, smoother reading.
If, on the other hand, we have a lack of contrast between the text and the
background, this forces us to put more effort. But I would like to point out
that, even when there is a strong contrast, the text is not necessarily
readable, as in the case of choosing complementary colors.
 One color, three gradations, three different areas.

Strong contrast, as we said, grabs our attention. So in a web page, even

we’re using a single color, but we’re using it with different gradations of
saturation, that alone can help us set an order of reading. Let’s take an
example. We have a black background. Right now, there is no contrast
whatsoever, also because we only have one element on the page. Let’s add
what’s called the site header, which is the top part, where we usually put the
logo and menu. Just the fact that this element is a lighter color makes it
immediately recognizable and obvious. And in this way, it gives a reading
order: first, second.
Now let’s add the background of the site, with a color that’s even more
contrasting than the header. And so, magically, without having written
anything yet, using just one color of different shades, we’ve created three
orders of priority on the page: your eye will fall initially on this space, then
on this light gray, then on black. If we then insert some text, we can predict
that you’ll read this text first, and then this other one.
 Even if the text on white background is below
it's the first one we read, because of its contrast.

This is why the most important buttons to click within a page are also the
ones with the highest contrast. Don’t believe me? Let’s play a game: look at
the following sites but do it while positioning yourself two/three meters
away from your computer. And the question is, what’s the one thing you
can see?

Every website page uses contrast

in order to convey the main message and highlight the main action to take.

The next time you need to choose the color tone for a text or button, ask
yourself: how important is it that the user should read this text or button,
compared to all the other elements on the page?
Watch the video
Conclusions
Well, yes, my dear designer, this book has come to an end.
I hope you enjoyed it and that it helped you become a better designer.
Now you know what user experience and user interface are.
You know why these disciplines are so important not only for the end user,
but for you client too.
It's not that easy to communicate the value of them to those who are not
expert, but always remember that the language of data and numbers is
universal. Anyone is able to understand if a website "works", which means:
more sellings, more convertions, more calls received. All this is m: tutto
questo è measurable and it's also the only language that every client in the
world can understand. This is why we have to learn it, making it our
lifestyle, learning to ignore the unrelevant data
for the client business.
This is, in its essence, the challenge of every designer: create value for the
client, thanks to the visual communication.
I want to remind you to complete all the assignments you will find among
the lessons of this course. Only in this way will you be able to get the most
out of it and build your design portfolio.
I invite you to write me for any doubts you may have, and to submit your
design works to the Facebook group “Ux design &
friends” www.facebook.com/groups/uxdesignfriends.
Good luck for your career,

Luca Panzarella
Bibliography
Designing ecommerce websites - Matt Isherwood
Don’t make me think - Steve Krug
Manuale di sopravvivenza per UX designer - Matteo di Pascale - Hoepli
Mobile Usability - Jakob Nielsen Raluca Budiu
Neuromarketing e scienze cognitive per vendere di più sul web - Andrea
Saletti - Dario Flaccovio editore
Tapworthy, Designing Great iPhone apps - Josh Clark - Ed. OReilly