September 28th, 2012.
“Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters, it’s about organising information in a way that’s usable, accessible, and logical to the everyday site visitor.”
Brandon Jones on Sep 28th 2011 www.webdesign.tutsplus.com
The basis of design is communication – relaying a message or inducing a reaction, calls or click. With basic media advertising designers were fixated with the 3-second rule, whereby the advert has 3 seconds to get its message across above other adverts on the page.
The 3-second rule dictates that media adverts should incorporate bold, simple and clear messages and images. When implemented, this often led to aggressive layouts that were not pushing the envelope of design and could actually be classed as de-evolution of design. The finished result was an advert that was not necessarily aesthetically pleasing, but does bring into focus the importance of design hierarchy.
What does the user need to see in order?
- Sector / Product / Service – Industrial and Commercial Flooring (heading and image).
- Key information usually displayed as bullet points for ease of reading.
- Area(s) the company covers or is based in (Loughborough).
- Local Contact Number (01509 000000).
What do you want them to do?
- Recognise the sector, service or product being supplied by the company.
- Gain reassurance that the company is local and supplies what they are looking for.
- Call the telephone number
This hierarchy principle continues today and forms the basis of all media advertising.
Similar time frames have been mentioned when viewing websites but you very rarely get multiple websites shown side-by-side, advertising the same sector.
Website design has increasingly required multiple messages or multiple design prompts which navigate people around a site to a desired location or outcome, meaning hierarchy has become an even more vital part of design.
Once a website is opened it competes against itself, with its own messages and design prompts. A site will succeed or fail according to how well the design functions for the user. This is also dependent on what the user requires from the site. Getting relevant traffic to your site overrides all visual stimuli, but that’s a whole new subject that I won’t get into now.
Good hierarchy in web design should dictate what you want the user to read, in what order and where you want them to go. Destination or conclusion depends on the requirements and reasons of the user and most websites will contain information for multiple products or services including required action for each, such as call, click or renewed confidence with the company for example.
“The human brain has innate organizing tendencies that “structure individual elements, shapes or forms into a coherent, organized whole.”
Jackson, Ian. “Gestalt—A Learning Theory for Graphic Design Education.” International Journal of Art and Design Education. Volume 27. Issue 1 (2008): 63-69. Digital.
The human brain does not view individual items on their own merit and will instead organise them against the items around them. Items are instantly judged and ordered and size, shapes and colours inform us that the items may have more dominance than others. Understanding these principles allows us to form hierarchy within designs and use this to control the users pathway through the design.
Brad Jones explains 5 steps to analyse hierarchy in his post on www.webdesign.tutsplus.com:
Take a website you want to analyse and follow these 5 steps:
- List the key information points that visitors are likely seeking.
- Assign values (1-10) according to their importance to the average visitor.
- Now, look at the actual design again.
- Assign values (1-10) according to the actual visual importance as you see it in the live design.
- Consider: Does the expected importance match up with the actual designed importance?
In most cases, the answer will include shades of “no”. There are lots of reasons for this – client demands, inexperienced designers, design-by-committee – or a hundred other reasons that you’ve probably read.
Brandon Jones on Sep 28th 2011www.webdesign.tutsplus.com
The designer’s role is to take the required information and break it down into visually relevant and easily digestible portions. This has to be done while taking into account the goals and messages of the design. It is not enough to just layout the information, it has to work.
In general, service or product sites tend to work around USPs (unique selling points) and CTAs (call to actions). 2 or 3 USPs encourage the user to have confidence in the design and the 1 or 2 CTAs encourage goal conversions. These have to be displayed around a main message USP to allow the user to be reassured that the site they are using holds the information or product they are looking for.
Unfortunately, design input rarely comes from one direction. In an ideal world sites would be carved from pure creativity while using god-like functionality and subconscious triggers all based around the hierarchy mentioned earlier. In reality, the client will always want the logo bigger and will always ask “can you just make these 12 things all stand out more?”
The struggle continues…
“This post was written by James O’Flaherty on behalf of Adtrak”
Online trading is a fast paced world. Whether it be in stock and shares, grants for start-ups or otherwise, there aren’t many examples to date that show the benefits of waiting around.
Let’s look at some examples of once leading technologies, that have recently or notably had to resort to publicising selling shares, or changing hands to stay (or become) relevant; which of these companies/ventures/subsidiaries do you still associate with “cool“?:
Known originally for: Pioneering the discovery of new music online…
Now thought of as: A dated money leaking endeavour that has passed hands more than a hot potato.
Known originally for: The only key to dial up internet…
Now thought of as: American acronym that we see online from time to time, mostly trying to be spammed-in as the default homepage for your browser when downloading freeware.
Known originally for: Groundbreaking search engine and most famous Google competitor…
Now thought of as: Fairly annoyingly designed interface that we’re surprised is still around.
Known originally for: Quirky news discovery site…
Now thought of as: Recently sold to a company for $500, 000 (much less that it was once worth ($175, 000, 000)
Known originally for: The new zeitgeist and awesome brainchild of cool-techie Mark Zuckerburg…
Now thought of as: Slightly spammy/stalky connect-service offering the chance to re-establish relasionships with distant relatives & old “friends”
Known originally for: Newbie picture service that made Twitter pics look really cool…
Now thought of as: Lovely money-maker for start-up entrapeneur Kevin Systrom (he knew when to sell)
Known originally for: Having a great customizable email service that tied closely to MSN messeger and then windows live…
Now thought of as: Uber-spammy email service that looks outdated & unsure of its design.
Known originally for: Creating the Blackberry; a respectable device for business-people…
Now thought of as: Annoying pingy device taken over by tweens and teeny-boppers who got excited about its messaging service, which is essentially not far from a text message.
Known originally for: Competing with the big boys and girls (basically Google) and doing that respectably…
Now thought of as: A failed Microsoft endeavour, that was close – but no cigar…
Known originally for: Clever algorithms that tailored music choices to the listener based on entering a few personalised details…
Now thought of as: Recently hacked music service that was long out-thought by competitors (Pandora, Spotify and iTunes’ “Ping“)
Known originally for: Pioneering photo technology as we knew it and introducing a sense of class to both the disposable and polaroid camera…
Now thought of as: A once amazing company that failed to follow technology into the world of digital and subsequently faced insolvency.
Don’t get left behind…
I am yet to find many examples of ways in which companies have implemented their Cookie alerts on their website.
This is probably not surprising as it’s yet to come in but the day is drawing near.
Here are some examples. I will add more as I find them. Please feel free to suggest your own.
Virgin.com – Wow you’ve got to be keen to bother reading all that. And still the buttons are confusing.
Quite sneaky here. BT have popped the box at the bottom right hand side of the page. Be quick though as it disappears after 20 seconds. Also you need to have a lot of time on your hands to decide which cookies to accept and which not to.
These guys have had their policy in place for over a year which is quite surprising. It reminds me of the moment in Blackadder II where on a voyage of discovery with Captain Rum the water runs out aboard ship and they have to turn to drinking their own urine only to find out that Baldrick has been drinking his own for a year already – he prefers the taste!
Nice simple solution though.
Simple solution, which disappears after about 10 seconds. Presumably they think that not actively agreeing is presumed acceptance? Is this legal?
August 26th, 2011.
A/B testing can lead to impressive gains and surprising results. In this post I would like to talk about our recent home page A/B test on an ecommerce store, when our treatment page decreased the goal we were measuring in Google Website Optimizer (GWO) by -11.2%, but still we declared the page a winner. And what a successful winner that was!
How could this be possible?
First of all, when we set up our test on the client home page, in GWO we set up as a success goal ‘free samples requested’ confirmation page. This was done at our client’s request, who believed that this was the most important success metric on his site, forgetting another metric like sales conversion rate.
After running the test for 2 weeks and calculating statistical validity of other site metrics using a Chi-Square statistical validation methodology, we concluded that we collected enough data to establish the treatment page, as a winning page, even though we decreased conversion rate on the ‘free samples requests’ goal we measured in GWO.
How could this be possible? Firstly, ecommerce stores have several important metrics like page conversion rate, revenue, $ Index value, # of transactions and purchased products etc. So when we analysed these data points we discovered that our treatment page performed as follows:
- Decreased free samples requests by -11.2%
However, the data from our client Google Analytics tool showed us very interesting results for other important site metrics.
- Page bounce rate was down by 22.08%
- $ index value up by 65.83%
- Page conversion rate up by 95.45%
- Revenue up 46.05%
- Number of transactions up by 65%
- Number of purchased products up by 46.42%
Variation 1 (treatment)
One interesting improvement we also observed was that our treatment page sent by over 300% less visitors to the ‘free samples request’ page, but of those visitors who we sent there, instead of 5.92% we converted 25.11%, thus increasing conversion rate by 324.15%. To remind you, we didn’t make a single change on that ‘free samples request’ page. This was achieved by adding more clarity to the offer on the test page, where we clearly stated what you get after you click.
As you can see, if we simply measured just one goal, then our treatment version would be declared as a loser, even though the treatment page increased monthly gross revenue by over 46%.
When running any test, don’t forget that there are other important metrics which could be impacted by your test and that in some cases, the goal you might think is important isn’t necessarily always the best metric.
Always use your analytics tool, and look at other metrics too, as you don’t want to unknowingly declare a test as a losing one for failing in a certain metric when in fact that change brought extra £20k in revenue and improved another 5 site metrics – as happened in this example.
Interested to find out how Datadial can help you increase your conversion and site revenue? Call us on 0208 6000 500, or request free conversion rate optimisation consultation & site analysis.
…a wheelbarrow in an open field that you drag along every day filling it with this and that – each thing you add to it has some significance and some use.
Now imagine you never empty the wheelbarrow. Each day, not only do the things you found the week before now lie at the bottom covered by the newest additions, but the device also becomes increasingly heavy to pull until eventually, it becomes almost impossible.
Now think of the wheelbarrow as your website, and think of its contents as the factors affecting its speed – Let’s explore these factors…
- Empty spaces between code (This only adds to processing time)
- Missing tags (Causing internal errors & bugs in the site)
- Bulky HTML (such as using unnecessary tags where something more CSS compatible would work better e.g. using the tag “font-size” rather than just “small”)
- Background colour being the same as text colour (making all text unreadable)
- Hyperlinks that fail (Devaluing your site in terms of credibility, and possibly increasing bounce rates)
- Missing images
An overload of HTTP requests:
Whenever your web browser fetches a file from a web server, for example when it loads a picture, it does this by using HTTP which stands for “HyperText Transfer Protocol”.
HTTP is an action whereby you’re computer requests for a particular file. One example is a request for ‘home.html‘ (the homepage of a particular website). The web server then sends a response to the computer that says something like: “Here’s the file you asked for” which is followed by the actual file itself.
Understandably, if your server is receiving a very high volume of requests for a range of different things, such as pictures, graphics, photographs, music players and video rendering, it can take its toll and end up really slowing your website down.
Too many cookies:
HTTP Cookies are used mainly for personalization and authentication purposes. A series of saved information is exchanged between the web server and the browser in order to remember things about how you are using the internet. For example if you are shopping online and exit the website returning at a later date, a cookie will enable the site to remember what you had in your shopping cart so you don’t have to spend time finding the same items again.
Web hosting is the business of providing storage space and access for websites. Bad web hosting happens when said storage space is overloaded with many websites, yours is added to the list and so runs slow. Other issues caused by a bad web host include:
- Search engines being unable to crawl your site resulting in a fall in Search Rank
- Your website being “down” (not working, sending out 404-errors)
- Not being able to contact your web host to fix the issue (since the service is so bad the system has probably crashed)
Excess of external media:
Embedded YouTube videos, actually embedded anything that is coming from another website can potentially slow yours down. When you embed something from another site, you are relying on that sites web server, that sites speed, and that sites ability to ensure the embedded item is working properly there, so that it works properly on yours site. Often, even when it works just fine, it might add an extra few seconds to a certain page loading…a few seconds a potential customer may be unwilling to wait!
Spam is so much more than just a bunch of annoying emails. It slows down the Internet and it increases consumer fees.
The internet is a network where spamming effects everyone that uses it. To push spam around the internet relies on a process; it begins with global networks that pass the spam along to their destination, and ends with the message being received by the recipient.
Simultaneously, time, money and resources are used trying to catch and prevent spammers from infiltrating mail servers resulting in higher costs to the consumer because providers are forced to add more security to their servers and hire more staff to manage and prevent the problem.
Be sure to spam proof all web forms by adding “captchas” or similar.
A ‘favicon’ is an image (as shown above) that stays in the root of your server. It’s definitely needed because even if you don’t care about them, the browser still requests one. If there isn’t one, it will respond with a 404 error (meaning not found). Any error message, such as a 404 or 301, is an extra message sent that adds time to the processing of a site.
This image or lack thereof, interferes with the processing sequence by requesting extra components in the load, and since the favicon is the first thing that is downloaded before these extra components, if there isn’t one, the first thing downloaded will be an error.
Too many advertisements:
Any time a site uses advertisements, you are adding to other processes a site goes through in order to function correctly. Programmes like Google Adsense and Microsoft adcenter are external, and reputable, however it is logical to practice the same rules as with external media; everything in moderation – besides, sites with too many ads look un”site”ly!
If any of these apply to you, take active steps to protect your website against sloth! Speed be with you!
May 3rd, 2011.
Goal of the test – increase number of downloads
Technology used – Google Website Optimizer
Test duration – 5 weeks
Confidence level achieved – 98.6%
We conducted an A/B test on Dowce.com website to find out which version would increase number of downloads. Both versions were similar, but in the version B (treatment) we improved the following:
- removed the call to action from the header in order to focus visitors on our main call to action in the body
- improved the headline
- added bullets points with improved value proposition
- improved the call to action (bigger and more visible)
- improved the layout, by dividing the sections so it is easier to scan the page
A: Control B: Treatment – 24.8% improvement
This A/B test showed that conversion rate optimisation is very effective marketing method with measurable results, which allows you to increase your revenue and conversion from your current traffic.
To see, what difference a change in conversion rate by 20% or more can make to your business download our conversion improvement calculator.
If you are looking to improve your website conversion rate or would like to learn how we can help request your free consultation at email@example.com or call 0208 6000 500.
April 21st, 2011.
Having a good ‘About Us’ page allows you to show off who you are, what you do and it allows to make people more comfortable doing a business with your company. Unfortunately, this page is being sometimes overlooked, as the perception is that it’s not that important.
However, according to a Stanford Web Credibility Research, they derived 10 guidelines/factors which effects websites credibility, 3 of them relating to your ‘about us’ page (based on a 3 year, 5500 person study):
- Show that there is a real organization behind your site
- Highlight the expertise in your organization
- Show that honest and trustworthy people stand behind your site
Naturally, testing a different version of your ‘About us’ page should be on your to-do test list. Unfortunately, in most cases ‘About us’ pages get at most several hundred visitors per month, which is not enough to come with statistically valid results within your 6 weeks test period. In this case, here is the list of 3 must have things an ‘About us’ page for small and medium businesses should definitely have if you want to get more sales:
3 Must Haves
- Pictures of your office and your team
- A passionate story behind your company showing your values
- Peoples bio (credentials, certificates, training)
Here is the list of some ‘About us’ pages for your inspiration.
www.technologywithpassion.com (nice animation)
www.tribal.nl (nice animation)
Business (ecommerce + service + corporate) examples:
April 19th, 2011.
In the site search box test part 1, we discovered by analysing web analytics data that visitors using site search are 2-3 times more valuable than those that don’t use site search. Conversion rate difference was also by 168% higher when site search was used. Also, per visit value was 132% greater when site search was used.
In the second part I would like to talk about more advanced, more costly but probably more rewarding test – a site search result page test.
Who is this test for?
Any website where the site search result page doesn’t allow result filtering by category, price, brand etc… or simply looking to improve search functionality, stickiness, conversions and retention by using more robust, intelligent 3rd party site search.
Goal of the test
We would like to find out if using more sophisticated 3rd party ecommerce site search will help you to increase your conversion rate and whether the investment is worth the money.
Why should you test?
You read a case study that better search result pages convert more and that visitors who use site search convert 2 – 3 times better than those not using a site search. You get very excited and decide to approach a 3rd party search provider. However, you discover the investment into a new site search can be substantial (e.g. $25,000+ annually for Google ecommerce search) so you would like find out if you can justify the cost.
How should you test?
What you want to do is to test both site search engines at the same time, something like A/B test comparing 3rd party site search vs. yours. However, there is a caveat. A/B testing won’t work in this case, as the site search box, where it all starts, is on every single page on your site and you would like to capture any search query from any page on your site. So, for this reason we need to set up a site wide test using a multivariate test strategy, showing exactly the same site search box, but the results leading either to your current site search or to the 3rd party site search you are trying to evaluate.
How do you measure success?
By comparing number of sales and a conversion rate in your testing tool
How many visits with site search do I need?
At least 5,000-10,000 visits per month with site search. For fast and statistically valid result 20,000+.
Contact Jan to see how we can help you with your ecommerce site search testing, A/B or multivariate testing or to request your free consultation: firstname.lastname@example.org or call 0208 6000 500 ext. 231
April 18th, 2011.
Even with all the buzz about conversion rate optimisation, there are still businesses which haven’t tried it yet. To get you started, I came up with a very simple and inexpensive idea every ecommerce store should test. Your site search box position & size test.
OK, so what’s so special about the site search and why should you give it a go?
1. Generally the conversion rate of visitors who used a site search is 2-3 times higher than those without, as is the per visit value. In our example below conversion rate difference is 168% higher when site search has been used. Also per visit value is 132% greater.
2. On average, around 8-20% of sites’ visitors use a site search, but they bring between 17-33% of overall revenue.
3. The test itself isn’t that difficult to implement and could be up and running in less than 8 hours, however this type of test and implementation will require a knowledgeable person to set up the test.
A little something about the site search box test: this type of tests falls under so called “site wide” tests. With site wide test implementation, the tested variations are going to be the same on every page on your website.
Speak to Jan for more information on A/B or multivariate testing or to request your free consultation: email@example.com or call 0208 6000 500 ext. 231
February 17th, 2011.
We’re delighted to announce the launch of a new site for Taylor Herring PR consultancy.
We rebranded the company with a new logo and new identity. We redesigned the website and developed it using Datadial’s content management system
If you have never had the pleasure of watching how a website is put together then now’s your chance. Watch the video below.