Why some websites look awesome and show high conversion while others don’t?
Is it about eye-catching design? Or is it more about “selling copy”? Well, if I knew the exact answer to this question I would probably be next to Jeff Bezos in the Forbes ranking. Still, I have some ideas that might help you figure out the secret sauce ingredients on your own.
Good vs bad design
Ok, let’s begin with the eye-catching part. Designers in general are aware of multiple physical laws that regulate human vision (like, how our retina processes light), as well as most influential theories of objects perception (like, Feature Integration Theory or Recognition by Components Approach). However, when one designer is able to create something impressive with all that knowledge, another one struggles to put two and two together. Why does it happen?
Aren’t there some “golden ratios” that can be used in web design just like artists freely use Leonardo’s heritage for better results?
When me and my team, located in different countries across the globe, started our digital studio several years ago, we catered mostly to people we know personally. Here was a friend of mine who was building an edTech startup and needed really great UI design. There was our designer Napoleon who was bootstrapping his crowdfunding platform and he was desperate for valuable insights. What we did — we studied dozens of good and bad websites in order to find this magic formula we could use to help out our close ones (as I’m sure plenty of agencies have done before). What we came up with was pretty disappointing, on one hand, but still promising, on the other. That’s what we learned:
- There’s no (surprise-surprise) such thing as a “magic formula”. Some web resources are perceived as good while having some obvious flaws. Some are visited quite frequently, despite of horrific design. Some are ignored or not as popular as they might be, though their layout might be breath-taking. The best example are governmental websites, that at least here, in Europe, don’t care too much about usability, design trends or anything actually. However, they are visited by thousands, if not millions daily.
2. There is, however, a clearer movement from over-populated with images and texts design that we saw 10 years ago to clear lines, less images and more illustrations, and very elaborate icon design. Details that are considered to be cool and very hype — like flat design in 2018, obsession with geometry in 2019, mixed font in titles in 2020, or layered “glassy” outlay this year —
— they come and go, while some important elements remain the same.
What my team and I have put in our list of important elements and what we check our websites against, no matter what:
Elements break grid alignment only for a reason
I know all designers are obsessed with grids. They follow you everywhere, and it makes perfect sense as grid is the most efficient tool to make design responsive. Do I offer here to break this grid? No. And yes. What I mean is that it actually could be done but only to emphasize some really important information. And I don’t mean you have to actually break the grid. I mean variability in alignment, mostly. That is, if you choose to align your page grid to center, elements that go beyond this grid on the left or on the right will be more highlighted and attract more attention.
Actually, anything that stands out and break consistency of the web site system (it’s white spaces, font styles, typography in general) are the most valuable pieces of information.
The more Gestalt principles are used in UI — the merrier
The main manifestations of the principles here are grouping of elements (for proximity law), consistency in margins, padding, alignment (for similarity and pragnanz), contrast in colors and shadows (for figure/ground), and wise use of white space for closure. If at least any of these elements is missing, the design can’t be considered good.
Hierarchy of content and design system is a must
Headings, body text, tags, design elements should be all systemized and visible on the first glance. It might sound like a broken record to someone but you’d surprised how many people know nothing about it. “Beautiful website” is something that stands out in their view, and it too much too often it actually mean breaking all existing rules and systems instead of following them.
That is actually mostly it. Hierarchy, basic gestalt and wise conscious grid breaking — that’s what makes a difference in my opinion. Everything else is about trends, your desire to follow them and the actual nature of your business. Perhaps, it sounds reasonable to use lots of CSS text animation, plenty of glassy layers and font break if you’re a digital agency.
But if you’re a more conservative business perhaps you should go more minimalistic and humble.
The point, if the basic principles are missing your web site will suck.
Good vs bad copy
If you managed to grab user’s attention with beautiful (=structured) design, the next obvious step is to convert a user into a customer or a lead. That’s where copy jumps in. Good copy will prompt a user to register/leave email/reach out, bad copy will make them leave your website. And never look back.
So, have me and my team come up with some general advice on this one as well? Actually, yes. In this article I’m going to discuss only landing pages copy, as for obvious reasons we can’t go through all the workflows. The basics you most certainly know: heading + subheading + illustration = instant impression. It all happens in a quarter of a second and if you’ve lost this battle, you probably have lost if forever with this particular user. Let’s set aside the illustration part.
Though, it’s equally important as research show that illustration that doesn’t add value to the text is more harmful than useful
Let’s see what can we do with the heading and subheading (or H1 and H2). In our we’ve noticed that:
Verbs, adverbs and any action/process oriented expressions in the heading work better than nouns
See how Robinhood offers “investing” (not investment), and though “7” states “changes” as a noun, still it’s more actionable and active form than, for instance “improvement”. Especially, if your service is subscription based — it’s super important to emphasize the process, the continuation, to plant this little seed in user’s perception that as long as they stay with you, their positive experience will last.
Subheading works better if it offers some very precise details or numbers
“7” refers to its 30 mil users and results that might be achieved in 7 minutes a day. What can be more precise? Webflow says “professional, custom and no code”. That’s pretty much what Webflow is about.
Targeted copy works better than generalized
The best way to make sure a user stays on your landing page is to address directly to them. Not “hey, users of the world, we’ve got something awesome for you”. But “hey, developers, we’re going to make your codes bug free”. Stripe, for instance addresses “internet businesses” + specifies the size — startups as well as Fortune 500s (and doesn’t forget to offer some numbers in the subheading). If you belong to one of these categories you’ll instantly know that you’ve landed on the right page.
Value should be emphasized instantly — within the very first lines
Look at Atlassian Jira web site. The value is specified straight away and addressed the main developers’ pain (being constantly behind schedule) — “ship early and often”. They also target very specific audience — agile teams. And add #1 software development tool for more persuasion.
That’s probably the most important and general observations regarding copy that we’ve come up with discovering good websites. There are obviously some details when it comes down to industry specifics, but in our opinion they can all be distilled down to these use cases.
Have we figured out what makes good websites look and function good? Probably, no. There always will be ingredients to this secret sauce that are tiny but make a lot of difference (like, share cart feature in Zoom). However, it’s always better to have at least some guidelines than none at all. And that’s exactly what I hope to achieve with this article. Remind myself of important things and share them with you.