– Jakob Nielsen recently
shared his updated list of the top 10 biggest design mistakes. Here's his keynote speech from our virtual conference in 2021. – Thank you everybody
for coming this morning. Well, good morning for
the Western North America and good afternoon to Latin America and Eastern North America. Of course in Europe and the
middle east, good evening folks, and we actually have a few
people coming in from Asia, it's the middle of the night. So I'm extra grateful for that dedication. So yeah, I wanna talk
about the top 10 mistakes of web design of 2021. But it's actually
something I've done before. And, so on our website we have articles about top 10 web mistakes
from these earlier years. And I recommend you can go
and read those articles. Luckily, many of the mistakes, particularly in these earlier
years, are no longer so bad. I mean, technology has progressed, users have become more advanced. But that said, many of the
mistakes from these old lists, are actually still mistakes and
still made by many websites. And you will recognize as
I go through today's list that some of these old mistakes are actually still in the top 10 list, even now, which is a disgrace, really.
What do I mean when I talk about, you know, "a mistake"? Actually, I think there are three reasons why websites are bad. It's evil, stupid, and lazy design. And so by evil design, I mean the site is
deliberately doing something that's bad for users. And it's because it's
deliberate, it's not a mistake. And so, those things are not on this list, even though they can be very unpleasant and bad for usability. A great example of this
is actually on amazon.com where it's very hard to
get out of subscribing, you know, being an
annual member of Amazon. And it's not because Amazon doesn't know how to design a smooth workflow because it's very easy to get in, it's just hard to get out because they want to keep
having you pay money every year.
So they make it hard to get out. That's what I call evil design. It's deliberately bad
and that's not a mistake. Then stupid design is they just don't know any better. They think that they have a good website, but they are doing something
that's bad for users, but they just don't know. And one of the reasons for
making this top 10 list is actually to increase awareness
of these design mistakes. And so therefore, hopefully
that excuse, "I didn't know", is not gonna apply so much
because of the added prominence. And then the last reason for
bad design is lazy design. So they actually know it's bad, they just can't get themselves
together and actually fix it. And of course we all know all projects have limited resources. You cannot make everything perfect, but at least one of the
benefits of having a list of the top design mistakes
might be to pop them a little bit higher up
on the priority list and maybe make it more likely
that they are actually fixed.
Furthermore, what do I mean by having something be a "top" mistake, as opposed to just any mistake? One of things is, that
it has to actually be particularly annoying or hurtful to users. But the second thing is it
also has to be prevalent. The mistake has to be
made by a lot of websites. If it's a mistake that's
just made by a few sites, even if it's a really, really bad, it's not really a top mistake, if most of the time
when you're on the web, you don't encounter that problem.
So that's what I mean
by the top 10 mistakes. So now let's go through that list and I'm gonna start from the bottom with mistake #10 and then #9, and we're gonna work our way up and end with the worst
mistake of current web design. Okay so, number 10. Number 10 is mobile design on big screens. And this is actually a specific example of a more general design mistake, which is not designing for the medium, but designing for a different
medium than what the user has. And maybe 10 years ago, the opposite mistake was
actually very prevalent, which was desktop design
on mobile devices. So you took a website that was fine if you were in a browser on a big monitor on a desktop computer, and then you squeezed it. And then of course, nobody
could touch anything and it was terrible. And that was bad 10 years ago. Now this is no longer a top mistake because it's not made so often anymore. But this opposite mistake
has now become a top mistake, which is that you make a design that actually may work
quite well on mobile, but then it doesn't work
on the big screen, right? Or it works poorly on the big screen, because you just take
something and just enlarge it, that doesn't make it good.
An example is actually the hamburger menu. So if you take the hamburger
menu on this mobile device, that makes sense because
you have a small screen, you cannot show the entire menu. And so what are you gonna do? You're gonna make a little
representation of the menu, and then you have that extra step of having to activate it to see the menu. Now, if you have a big screen, why have that extra step? First of all, that's just annoying, but more important actually,
is out of sight out of mind.
And a small icon on a small screen has relatively high prominence. A small icon on a big screen off in a remote corner,
has much less salience. And we actually have
done studies that show that people use menus much
less on desktop devices if they are hidden under
this hamburger icon. So, design for the medium
is the general guideline. And the more specific
design mistake right now is to have a mobile design
that works well on the phone and just blow it up and make it big. Okay, mistake #9 is only a
huge hero image above the fold. And you know, in the old
days we had to sort of other, but similar design mistake,
which was splash screens. You know, like, "Welcome to my site", here's some bouncing head or something, and they were terrible. They really got in the way of usability, and luckily, we killed them off by the end of the.com bubble, I believe.
That design idea must be like a zombie. It's like the Walking Dead. You know, it comes back just
in a slightly different way by having that one big picture and it's the only thing you
see when you go to the website. And then maybe you can scroll, but how are you gonna know you can scroll? I mean, because there's the
illusion of completeness, which is that you see the
entire screen filled up and you don't realize that you can scroll. Maybe there's one button that
says start here or something, but honestly, that's
not good communication. You wanna communicate to the
users what the site can do, show them multiple
choices, multiple options to enhance usability and also
enhance communication as well. So this notion of just one big picture, it's just a modern splash
screen and should be avoided. Number 8, layout shift and page load.
This is more of, I would
say a technical error because it's done by- pages these days can often
contain a lot of components that download from different
cloud services, right? And so, every time one new
thing has been downloaded, it plops into place and the
existing things on the screen move up on the page, move around to make room for this new thing. And this happens many times
as many things pop into place and after they download. First of all, this is an aesthetic problem because the page keeps jumping and moving and that's really annoying, but it's also a severe
usability problem in some cases because people, users are impatient. This is something we've known for all, you know, web usability studies since I started doing it in 1994. So we just really every have- every study shows the same thing. People wanna get moving, get done, get things done on the web. They don't want to sit there and wait for this page to be fully rendered.
So if users see an item on
the page that they want, "This is what I want." Okay, it's there. What are they gonna do? They're not gonna wait any longer. They're gonna click on it, and when they click, or as you say, as they're clicking, right? As they're clicking,
the new thing downloads, the page shifts around and the spot that they are clicking on used to have what they wanted, but now something else moved
into that place instead.
And so the click, as far as
the computer is concerned, remember computers are
very literal minded. So the computer thinks
that they're clicking on the new thing that's in that spot. and the user thought
they clicked on the thing that was in the spot when
they started to click, and so they get to the wrong part of it, go to some wrong site,
wrong part of the site, it initiated some wrong
action or whatever. So really, really bad
usability because of this. Okay, number 7 is icons without labels. Pictures are good, words are good, but the two together are really great.
Icons without labels cause
a lot of usability problems. And there are two kind
of main reasons for that. One is reuse of the same or similar icons to mean different things
on different sites. And that means that if you
only see that little icon, let's say, heart, you don't actually know what it does. Secondly, obscure icons. And often you have commands or features that are not necessarily
very easy to depict in a little icon picture. And so you draw something that- "ehh, what is this really?" And without the label, it
becomes hard to understand. And users become very
worried about what's going on if they don't understand
or know what's gonna happen when they click something, you know.
People are just really
weary of clicking on things and they don't know what's gonna happen. Does this mean that I'm gonna like, send a message out to 10,000 people or I'm gonna buy an expensive item that's gonna show up
tomorrow, or whatever. And so, you wanna like,
take it a little easy, and you don't click on things you don't understand what they do. And the one little word can
often make the entire difference in the usability of these icons. Number 6, cannot select and copy-paste. This is also a bit more
like a coding error, often caused by how
JavaScript is being used. And so, you cannot just
like sweep your cursor over some texts or images
and select it and copy it, and then take it outside the
site and put it someplace else.
And so, you're destroying- this is bad coding, I would say- you're destroying the
main integration mechanism people have to take information
across applications, which is to cut, copy and paste, which we've had to know forever and ever. It's one of the main generic commands, and yet it's being violated or disabled in a lot of websites. And people use this
copy-paste for many reasons. It could be to send some information to a friend, a colleague, it could be to make a short list of things to consider for purchase, maybe to send to your boss.
I'm recommending that
we spend our $100,000, you know, on B2B, on one
of these three things. But if people can't copy from your site, It's gonna be less likely
to be on that shortlist. So it could be a big loss actually. Many other reasons why
people wanna copy and paste, and if you disallow that, if you not make that
possible and easy to do, then you have broken
that kind of user-centered or user driven way of integrating and allowing different
applications to work together. Number 5 is inflexible input, and this is often an issue
for various types of codes. It could be credit card
numbers, social security, personal identification
numbers, postal codes, telephone numbers, right
of that type of information where the site wants
it in one specific way, quite often, without spaces, which breaks actually one of the main psychological
principles of chunking, which is if you have a
long string of information, like of letter or numbers. Credit cards are a classic example. Credit card number is typically 16 digits, and it's extremely error
prone to just enter 16 digits, but if you chunk them in
groups of four digits, it's much easier to see whether
you did it right or wrong.
Also of course, you get
in the way of copy-paste, as I was just talking about. Like, you may have your phone number or a credit card number or
something written down somewhere. You can just like, copy that,
paste it into the website, but no, the site will
not allow that formatting that you have. Well, users should be in
charge of these things. Computers can easily insert or
remove spaces and parenthesis and hyphens and whatever it doesn't like. It can feed it back to the
user in the preferred format and so forth and so forth. But inflexible input is a true, huge, first, a huge annoyance, a usability problem for copy-paste and vastly increases number
of errors and bad data, which in the backend, fulfillment
side and things like that can cause large expenses. Number 4, low-contrast or tiny text. You know, we really
want big text, you know.
And this is particularly
a problem for older users. I mean, when I say older, I mean like age 40 or and up, right? So it's not really that old even, but people's eyesight
starts going quite quickly. But even for young users now. We have done studies with teenagers and they sort of say the same thing. I don't wanna have to like
squint and lean in and forward just to read the text. Give me big text that's easy to read. I think this is the
biggest usability problem on the web today in terms
of accessibility anyway.
And it's also a problem that have been actually on
these lists many times before. So it's pretty pervasive, unfortunately. Number 3, misleading
links and expectations. You know, a link is a promise. A link says, "if you click
here, you're gonna get this." Then you gotta give people
the thing you promised them, and this often goes wrong, in many ways it can go wrong. I mean, the expectations can be set wrong, by you're not really
describing what it is, so it's misleading as I said. It also sometimes, people think they're gonna get an article, but they get a video or they think they're gonna get a video, but they get a slide show or they think they're
gonna get a slide show, but they get an article or they get a registration
screen instead of a white paper. I mean, there's endless examples of this, of links that don't give what
they say they're gonna give.
And that's something we really have to fix 'cause that's a basic- you know, hypertexts are the basic feature that makes a web, a web, you know, makes everything connected. So we gotta actually have good links and give people what we promised them. Design mistake #2 is slow response time, one more thing that's been on the list many, many times before, unfortunately. Now in the early days, slow response time was a problem because you know, big images
took a long time to download over the dial-up
connections that people had in the early days of the web. This is no longer so
much a problem, right? Because most people now have broadband. I do want to just like remind you that not everybody has broadband. There are people like out far out in the country, rural users. There are people on a mobile device with one bar connectivity and so forth. So, it's not always the case that people have fast connections, but usually they do. Pages instead, download slow
because of this phenomena of having components from
different cloud services that sometimes download slowly.
Sometimes you gotta wait
for the last one to download before the page can really be used. And that means that the
totality of the page takes a long time to download. And the usability
guideline has been the same ever since, you know, the start of the web for what causes, you
know, good response time. It is sub-second, one second or less. That is how fast the page should be. The time between I click
and I have the result is one second. If it's any slower than one second, people feel they're being
slowed down by the computer and they're sitting and
waiting for the computer and it's unpleasant and
it gets into their way of their freedom of navigation. And that means that
they will navigate less. And that means lower usability,
less use of your site and just lots of these types of problems.
Okay, now we made it to number 1, the top. So number 1, the number 1 mistake
of web design of 2021, number 1, is popups, popups, and overlays, one more thing that's been
on the list several times. Now in the early days, it was actually kind of literally popups in terms like an additional
window that would come up. Today, the implementation is more often more like something- an overlay, but they effect- again, we're talking user experience not implementation here. So the user experience is the same, which is they're obscuring
the thing I want, right. Getting in the way, getting in my way. And just the way I describe it, you can see how bad it's
getting in the user's way and obscuring what they want. But one pop-up is bad, but many pop-ups, whoa, that is terrible. Now honestly, that's what
you're getting these days. You're getting- POOM-POOM-POOM-POOM-POOM- so many things wen you go to a website, you're getting maybe, okay, "this is our current special", but you're also getting, "subscribe to our newsletter
so you can get more specials".
You're also getting, "here's like, the cookie consent DDPR", you know, required maybe,
but still very annoying. And to be honest, I think
it's completely useless and does not help privacy
at all to have those, but- and then there's like, "here's like our chat
feature because you know, we have people standing by
to help you and be nice". Yeah, nice, you know. "And because we care so
much about user experience, here's like, this survey as well". And you just add all these pop-ups and everyone's gonna close, close, close, close, close, before I can do anything or before I can see what I want. And the cumulative effect is a barrage! It's like I'm being hunted- POOM-POOM-POOM-POOM. And it's really bad for users, right? So, let's have peace and quiet on the web not so many pop-ups.
So here's like, a recap of
these 10 design mistakes. And I think all 10 are just, don't do it. That's the simple guideline. They are just all really
bad, really annoying, really get in users way. I think that's one thing
that sort of is in common and kind of explains in some ways why we have all these design mistakes and that is arrogance. It's arrogance, on the
side of the website, of saying, "I am important. I, the website am important. You, the users, the paying
customers, are just scum. You don't matter. You
know, you're unimportant. You're gonna take it
the way we wanna do it." And that arrogance really undermines or lowers the pleasantness, the usability and the value actually of the web.
So that's really bad. It actually reminds me
of a classic famous poem by the poet, Lord Tennyson. And he wrote a poem called, "The Charge of the Light Brigade". And just three of the lines go as follows. "Theirs not to make reply Theirs not to reason why Theirs but to do and die." Theirs not to make reply, users don't make reply. They don't tell you. They just go away if it's
unpleasant, if it's hard to use, they don't tell you, "do
this thing differently", they just leave. Theirs not to reason why, users don't care, they
should not have to care why you're doing your
website the way you are. They just care that they are
not getting what they want, and so they leave.
Theirs but to do and die. Luckily, this is not
literally true for users, but it is true for the website though. The website is not necessarily dying, but it's certainly being degraded or wounded by users leaving. Because that's what's happened, right, when you lower usability. So that was my top 10 list of this year. And as you could see, several of them were repeats
from a decade ago or more. And I really hope I'm not
gonna have to give another talk in 10 years from now and have many of these
things on the list again. So I really would say, let's get rid of these things. They are design mistakes. They hurt users. They hurt the business
value of your website, and no, just say no, okay? That's the message.
Thank you..