It’s been said a million times, but gone are the days when a web designers sole job was to produce a beautiful, functional, intuitive website. Especially in smaller businesses, the role of designer is becoming that of ‘digital producer’ designing, writing, producing content, and making things happen for clients with their digital assets.
Design is problem solving, and we have to think about what it is that the website is truly for. If a site is beautiful, with a great interface and seamless UX, it’s still not doing it’s job if it can’t be found on the internet and/or it’s simply not converting.
This is a bone of contention in creative circles, as some may argue ‘why should a design be restricted by these dull marketing conventions’. Maybe it’s the designers responsibility to produce the best looking, most functional site possible. Then it’s the SEO guys problem to get it rank. That’s one approach, and if your working on a mega brand that has a URL that’s going to rank organically anyway because of all it’s links (or a vast PPC budget) – then you can almost be as creative as you like with the web design. But the reality of dealing with many start-ups and small business is that they are just entering the market place and they need their website to rank.
It’s true that keyword search engine optimisation is becoming less important than it used to be, with the move towards paid local ads on google (gasp!), and marketers focusing on social media to gather an audience, but organic ranking for many new businesses is still a key aspect.
Just as an architect’s design may be restricted by climate, substrate, available materials, and planning restrictions, a web designer is restricted by SEO and click-through conversion, and if we simply accept this restriction as any other problem to be solved in the design process, then we can still build beautiful sites that are also optimised for people to find them, and eventually convert – which after all is what the client wants.
We have to look at webpages through the eyes of a search engine, and for designers, this can be quite disturbing – it’s ugly. It doesn’t look like we so carefully designed it.
Basic SEO elements and how these can effect our design choices
Firstly, in terms of basic SEO, as Moz points out, for organic keyword ranking there are certain places that keywords should ideally appear, and this can affect the design decisions you make. These are: The title, url, meta description, h1, body, and image alt tags. Now the title, url, and meta description may not directly effect your design (these can all be edit without any impact on UI/UX), but the h1, body and image alt tags certainly can effect your design choices.
Maybe the design of the page looks great typographically with the h1 tag as a ‘cheese’ but in terms of SEO the client needs more. We have to figure out a way of making the design still look great with a longer h1 tag that gives more SEO options. Also, maybe the landing page looks great with just just a line of text and a great slider.
There are many industry studies that indicate sliders perform poorly when it comes to SEO and conversion. Yoast point to stats suggesting that only 1% of people actually ever click on an image included in a slider or carousel. Also, that one line of text may just not be enough to include keywords for SEO – and to include enough information to generate conversion.
• Only 1% of people actually ever click on an image included in a slider or carousel (usually the first one).
• Image sliders tend to slow down websites, which, in turn, results in negative SEO impacts, as well as reduced conversion and click-through rates. If your website is an e-commerce platform, this has the potential to impact your sales figures and the bottom-line of your business.
• Rarely do image sliders work as intended on mobile devices (and, with the ever rising tide of mobile usage rates, this is a huge problem).
• Naturally, due to their positioning, image sliders move the content on your web page down. Often there is no written content on a site till below the fold. According to the almighty Google, this is not smart.
• Image sliders can confuse your visitors, and dilute your key message, because there are multiple messages occupying the same space.
Taking all this into consideration there are certain things to consider when trying to create the best possible web design:
– Does the H1 tag contain enough information, both for visitors, and for search engines?
– Are you using fancy flash or java plugins that could be slowing the site down (increasing bounce rate and reducing conversion rate) Also, search engines often struggle to read the alt/title tag of images in sliders, which as mentioned above effects SEO. Could you make a great design just using standard images?
– Is there enough body copy for both visitors and search engines to get all the information they need. Can you come up with an elegant design or typographic solution that provides enough good quality copy that encourages and conversion whilst allowing enough space for important keywords?
– Is the site structure sound with easy navigation? This is very important in terms of UI/UX and SEO. Not only does the visitor need to be able to intuitively navigate around the site, but so do search engines. The requirements for visitors and search engines are pretty similar here. The site needs to be crawlable by search engines, which means no Orphan pages without obvious link pathways.
These are just a few of the main ways SEO considerations affect your design choices when thinking about digital strategy, and although it’s briefly been mentioned, it’s important to also look at how optimising pages for conversion can also affect our choices (and our precious design sensibilities).
Designing Landing Pages for Conversion
As designers, we also need to accept that sometimes, what seems most intuitive, aesthetically pleasing, or just correct according to well established principles of design, is not always the design choice that leads to most conversions. For example, a online music magazine has a blue, grey, tan brand colour scheme, which is utilised to great effect across all branding. As a result, the call to action button on the landing page is blue in keeping with the brand.
However, when A/B testing the site for conversion, a red call to action button sees improved results. It doesn’t look as a good, fact – but ultimately the job of the design is to convert. This is difficult territory, because where do we draw the line as designers? What if testing shows that a site converts best with a rainbow gradient button with the call to action in Comic Sans on a site selling fire doors?
Here are a few other key things to think about when designing a landing page for conversion:
– Lack of Balance between Images and Copy
– Optimising for Mobile
– Letting your Brand Control the Colour Scheme (as per the example above)
– Using Images that do Not Evoke an Emotional Response
– Using Navigation on the Page
– Use of white space. Giving Your Layout some Breathing Room
– Saying too Much at Once (Just as we’ve mentioned too little content can affect SEO, too much can negatively affect conversion rates)
There are a few fairly well established guidelines, based on vigorous testing, for optimising landing pages for conversion (such as putting your call to action in a container, and using bold colours), and often these can go against our aesthetic sensibilities as designers. The challenge is how can we take these proven elements, and create good designs for small businesses.