Design « Datadial Blog
0208 6000 500

On the subject of Design

flat-google-plus

Matt

December 19th, 2014.

Trends That Will Dominate eCommerce in 2015

Due to the increased use of technology, particularly mobile devices, such as smartphones, eCommerce is expanding and evolving at an exponential rate. eCommerce sites are having to adapt and evolve to meet the ever-changing needs of technology. From the emergence of responsiveness optimised web design to the increased use of video content, eCommerce has changed a great deal in the past decade. These changes are set to continue in 2015. Next, year here’s what trends we expect to dominate eCommerce in the coming year.

Mobile Payments will be in Demand

People are using their phones for everything from sending text messages, to making purchases online, and often, they don’t want to use a card, because they worry about security, and because it’s inconvenient to enter card details. Mobile payment systems make paying from your phone a simple process, and no card details are necessary.

13618923175698510597464_9bcd47278a_bPayments made using mobile phone payment systems are increasing. By 2017, it is predicated that mobile payments will account for 3% of the international eCommerce market. This means that websites that allow consumers to pay using a mobile payment system, like Zong, will have an edge over their competition. In 2015, mobile payment systems will likely become much more prevalent among eCommerce websites. Mobile payments systems will likely become more refined and easier to use in the coming year too.

Quality Content will be even more Important

According to statistics, content marketing methods are 62% less expensive than traditional marketing methods are. While content marketing is much less expensive, in gets three times as many leads as traditional marketing does. In 2015, creating high quality content will be even more important for eCommerce websites. Nowadays, consumers are exposed to more advertising than ever. From television adverts to pay per click adverts on Google, consumers see advertising everywhere. This means that consumers tend to tune out advertisements and other things that they don’t perceive to be useful, valuable or relevant to them. This is why content marketing is one of the most effective methods for engaging customers, establishing trust and building a loyal brand following.

Content marketing methods, like social media, articles, blog posts, newsletters, and videos are more effective than television advertisements, and other traditional marketing methods, according to marketing trends. In 2015, if eCommerce websites want to compete in the market, they need to produce valuable, relevant, and informative content that customers will find useful.

Mobile Optimisation will be Essential

According to statistics, 15% of physical goods purchases were made from a mobile device and 32% of all online purchases are made from a mobile device. Optimizing your website, advertisements, and emails for mobile devices will become even more important by 2015. Next year, eCommerce sites will need to make their stores mobile responsive. Stores need to be convenient and accessible for mobile users. If an eCommerce store isn’t mobile responsive, it will lose out on a large percent of the market, and it will struggle to compete with competitors.

Social Media Marketing will become more Diverse

Social Media Marketing will become even more important in 2015. As mentioned earlier, outbound marketing methods, like television adverts, are losing their effectiveness, whereas content marketing is maintaining its effectiveness. Social media is an important part of the content marketing process. Next year, however, it won’t just be Facebook or Twitter that the eCommerce sites will be utilizing. More well-rounded social media platforms, and image-based sites, like Pinterest, will also be utilised more predominantly. Ultimately, in 2015, eCommerce sites will have to diversify their social media marketing efforts to suit their audiences.

Flat-Design will Dominate

Flat-design for websites will dominate in 2015. It’s already becoming increasingly prevalent, with large corporations like Google and Microsoft implementing it. A flat web design is clean, features neat lines and crisp edges, and utilizes flat, two dimensional graphics. Unlike other web design trends, which feature, shadows, gradients, garish graphics and other bold design elements, flat-design is minimalist, and uses a less is more approach. A famous example of a flat design user interface is the Microsoft Windows 8 interface.  Flat-design is becoming popular because it looks clean and neat to the user, it’s easy to read and navigate and this type of design is easy to make responsive.

flat-google-plus

Retargeting Ads will become more Prevalent

Retargeting ads are incredibly effective, and will likely become more prevalent in 2015. According to statistics, retargeting can increase your ad response by up to 400% and three out of five consumers say that they notice adverts for products they have already viewed. Using browser cookies, an eCommerce site can track the sites, products and pages that their customers visit. After these customers have left the site, and are viewing other websites, the items they viewed will be advertised.

Fashion retailer New Look is a prime example of a large company that utilises retargeting ads. For example, if you view a pair of shoes on New Look, when you leave the site to look at a news website, for example, you will see adverts for the shoes and anything else you may have viewed the New Look site. Statistics have shown that just 2% of first visits to a site result in a sale. Ad retargeting can significantly increase your conversion rate.

sofa

Matt

October 8th, 2014.

Great Content Used on eCommerce Product Pages

Creating a high quality product page requires a combination of many different elements. From the content to the layout, a good product page must combine functionality, optimisation and high quality copy.

Presenting your product pages in a way that is useful for both search engines and customers is incredibly important. Many different elements are involved in creating a website that prompts customer action and increases conversion rates.

Cross-Selling

newlookCross selling is a technique that involves suggesting or recommending products that are similar to the one that the customer is already viewing. For example, when a customer on a furniture website is looking at a sofa, the website may recommend an ottoman, by placing a link to that product somewhere on the same page.

Statistics show that cross-selling increases conversion rates by 3%. It also improves the overall ease-of-use of your site, increases the average value of each order, and provides more visibility to your website’s overall range of products.

Example: New Look

Click on any product on fashion retailer New Look’s website and you’ll not only be presented with great high quality imagery for that product, but also other complimentary items. New Look gets cross-selling right in their “You May Like” sidebar. The complimentary products are prominent, but small enough for the main product to still be the primary focus.

Effective Copy

Effective content is, arguably, one of the most important aspects of creating a high quality eCommerce site. In fact, 60% of consumers buy a product after they’ve read content about it.

panGood copy cannot only increase your conversion rate, but it can also help your site’s search engine ranking. If you want to increase conversion rates, you must have an engaging product description written for every product on your site.

It should not only include the dimensions and specifications of a product, but it should also tell the reader why they should make a purchase. It should let them know what makes this product unique.

Example: William Sonoma Steel Grill Fry Pan

When it comes to product descriptions, William Sonoma gets it right. The product description for their Steel Grill Fry Pan combines all the elements of a good product description. It uses adjectives carefully, and cleverly, and provides the reader with information about the product in an interesting and engaging way.

Subtle Use of Keywords

Search engine optimisation is as important as ever for online businesses. B2B statistics show that SEO leads have a close rate of 14.6%, while traditional leads, such as print advertising, only have a close rate of 1.7%

johnlewisImplementing effective SEO on-page elements can drive traffic to your website, and place it at the top of the search engine results. Search engine rankings are important for your site. According to statistics, 75% of consumers never scroll past the first page of search engine results. If you can get your site higher up in the search engine results, using SEO, it can have a massive effect on your conversion rates.

Example: John Lewis

Using both generic and brand phrases such as Adidas and football trainers, as well as longer tail descriptive keywords like black, white and mens in a way that reads naturally, and actually adds value to the copy and covers longer tail search phrases, John Lewis is a prime example of how SEO can be used effectively. There is also a good amount of descriptive text on the product page that will help the product rank for a wider range of long-tail phrases.

Customer Reviews

bootsProduct copy is one of the most important aspects of a good eCommerce website, but potential customers often want the opinions of “real” people. Allowing customers to leave reviews on your site can increase your conversion rate. Statistics show that 70% of consumers check with reviews before making a purchase.

Example: Boots

Pharmacy, and cosmetic company, Boots allow their customers to leave reviews on products. You can even sort products by customer rating, using the “Top Rated” search criteria.

High Quality Imagery

sofaPhotographs are a huge selling point for eCommerce sites. High quality imagery makes the shopping experience for your customers better overall. It gives the customer more information about the product, which words simply can’t convey.

To increase your conversion rate, offer controllable 360 degree views, photos with products on their own and in use, close-ups and views from multiple angles and perspectives. It’s also ideal to use images that are on the larger scale, rather than small images, as these can increase conversion rates by 9%, according to statistics.

Example: Sofa.com

Sofa.com is a fantastic example of how high quality imagery can be used to enhance customer experience. Large, high quality photos, and 360 degree product views, make the viewing experience a delight for the consumer.

Utilise Extras Like Video

Video offers a number of benefits. It increases overall user experience, and provides a fresh insight into the product. Most, importantly, however, videos can increase your conversion rate. Statistics show that consumers that watch a video about a product are 64% more likely to make a purchase.

Clear CTA

While cross-selling, email capture forms, copy, high quality imagery, and videos are all important for increasing your conversion rates, you don’t want to overcrowd your product pages. You want the focus of each page to be on the product, and on purchasing the said product. So make sure that you have a clear call to action on your site.

Responsive Optimized Web Design

Nowadays, consumers not only shop for goods on a PC, but they also use laptops, smartphones, and tablets. Providing your consumers with a high quality experience on your sites, across multiple devices can improve conversion rates and ROI.

A consumer shopping from their phone doesn’t want to have to scroll across the page. A responsive web design makes a website viewable from multiple devices, without the consumer having to resize the page or scroll across.

Example: Cotswold Outdoor

Whether you are shopping from your laptop, or your phone, the Cotswold Outdoor looks great. A fantastic example of a responsive optimized site, you can view this website on any device, without having to scroll, scale or zoom.

Mario

Mike Sparkes Mike Sparkes

June 5th, 2014.

Parallax Design and SEO – Compatibility Problems

 

Are you currently designing a new website for your business? What are you looking to achieve? Are you confused with how to balance an amazing user experience with higher organic traffic?

Questions like the above are asked all the time and if you’ve been following design trends over the past couple of years, then you should be no stranger to Parallax scrolling.

Let’s be upfront, parallax design is beautiful, it give voice to brands and an experience that wow’s most users. However it would seem that SEO and Parallax are still no closer to a perfect romance and website owners often sacrifice one for another.

My job is to help get SEO and Parallax into the same bed with a mission to start a new breed of super sexy search savvy slick sites. (I’m a sucker for sibilance).

 

The parallax design list of compatibility problems 

Design – In many cases a designer using parallax will opt for a single page design which makes it difficult to optimise a site for a wide variety of search terms. Having a good spread of topical pages not only gives users access to deeper content and knowledge but also helps increase your over all search visibility. Given that, you should plan out your sitemap to allow for supporting pages to have deeper content around most of the keywords.

Analytics – Another challenge is in gaining valued and accurate analytics for your website. How accurately can you measure engagement on a single page website? The problem is parallax pages take a long time to load so users can often get frustrated and click elsewhere.

The second problem is identifying the stronger pieces of content on the page as the “time spent on page” metric will become more ambiguous. The only workaround I can see from this problem would be to use heat mapping software which might highlight the pieces of content that users were most drawn to.

Finally what to do about setting conversion goals? You would require another page if you want to measure users who were interested in a part of the content but didn’t follow through on their intent.

Page Speed – Another sacrifice of having a beautiful parallax design is the heavy load on the home page. This is generally caused by having very high quality images and videos all located on one file. Although some of these issues can be resolved using faster servers, tidy code and CDNs. Google still dislikes slow page speeds as this represents a poor user experience in their eyes. Use Google’s page speed insights to check your site doesn’t offend.

Mobile – There still isn’t a perfect solution for using Parallax scrolling on mobile devices. Webmasters will have to create separate versions of the site specifically for mobile devices. A popular example of this is Google’s “How search Works”.

 

How to make the two compatible

Yes it’s possible. The two can co-exist in a way that pleases the eyes of both users and Google.

Say Whaaaaaaaat!!!

 

Parallax scrolling & SEO

 

 

1) A “One page” design with parallax scrolling using jQuery.

This was first written about by Kevin Ellen of iProspect. The solution uses the help of jQuery’s “pushstate” functionality. This allows a parallax scrolling page to be cut into many various sections which can be identified by Google in the SERPS. The great thing about using this function is that each section will have its own unique URL and Meta data. This is great because one single page can be indexed multiple times for different content. This is handy because parallax designs that are implemented without any specialist SEO advice sometimes result in a severe lack of indexed pages meaning a poor search visibility.

 

Summary

– Pushstate is a great funtion for an existing one page parallax scrolling website that needs to be optimised for search.

-The function is perfect for smaller businesses or a branded mini site. Perhaps these are more interested in UX than SEO. This solution offers the best of both worlds on a very small scale but could never work on a bigger scale, such as an ecommerce site.

– It is a bit of an analytics fail. Scrolling through each of the sections will send signals to your analytics packages that users are bouncing or exiting content very quickly. Again, this might not be a huge issue for small businesses or mini sites that use the function for branding or simply referring traffic.

 

2) Adopt an SEO architecture allowing multipage parallax scrolling.

Put simply, you start with SEO page architecture pyramid and then place the parallax scrolling design effects on each URL. This is perhaps the perfect compromise between UX and SEO, neither outweighed by the other.

 

Summary 

– Beneficial for analytical software because each URL has its own content. Tracking can be placed across all the pages making setting up conversion goals and understanding user behaviour much easier.

– It doesn’t exactly follow the parallax scrolling trend and is therefore not as effective for telling potential of a brands story.

-The design might seem attractive however, having more pages also means that more maintenance is required which could lead to more expensive costs from your design team.

 

3) Parallax scrolling on homepage and regular SEO architecture.

This technique places parallax scrolling on the homepage and then includes other URL’s that are SEO-friendly, but do not have parallax scrolling. This is the method adopted by brands such as Spotify. It allows them to have an attractive home page which helps communicate the brands voice. Having other non parallax pages helps the users can then dig deeper into the websites content if they’d like to find out more about a particular service.

Another idea would be add a blog on the site. The addition of a blog to your parallax site can add tremendous value when trying to attract visitors. It’s also another way to showcase your industry knowledge and authority.

 

Summary

– Keeps the website light and flexible, making it easier to maintain and design whilst being more affordable than the previous two options.

– Creativity is kept in a box and fails to make the whole website UX and super interactive experience.

 

Can Parallax actually help your SEO?

Can a parallax design actually help your SEO? The answer is ‘yes it can’, but the best way forward would be to consult your search agency before you think of going gung ho on a funky new design. Seeing a mesmerising new design for your business can be exciting but don’t let it blind your judgement. A short consultation with your search agency should ensure that you can benefit from beautiful design without risking a huge drop in traffic because you dropped most of your web pages.

As SEO has started to become increasingly integrated into the normal marketing process and more specifically content marketing, using a parallax design is the perfect excuse to delve deep into the world of producing great content. Giving users an intuitive brand experience whilst delivering a compelling story can help attract more backlinks, repeat users and referrals. “No other recent web design technology has done more to impact the way we tell stories online than parallax”.

And if you are connecting more with your audience, then your content is likely being shared more widely, thus increasing your visibility in social media whilst hopefully grabbing the attention of industry influencers. All of which means you can create content for conversion.

 

 

bad-email

Martina Martina

August 23rd, 2013.

Putting an end to creepy emails!

bad-email

Spend enough time wading through spam emails and you’ll be amazed at what you find. From dodgy salutations to cringe-worthy formatting, on a very slow day this makes for a good few minutes of entertainment.

Here are some of the most ‘creepy’ elements of bad email-ship:

Over personalisation

Why it’s done & why it sucks:

This is usually an attempt at making a company look uber-friendly, since the emails they send you are formatted like a buddy would send them.

The downside is that sometimes we sign up with nick-names, tags or misspellings which can quickly turn a harmless greeting into a spammy annoyance. Seeing “Happy Birthday JaneDoe101!” or “JaneDoe101 we miss you!” littering up your mailbox is usually the first step on the way to an unsubscribe!

Archaic greetings

Why it’s done & why it sucks:

Dear Sir/Madam” or “To whom this may concern” are clear-cut indicators of cold calling (or cold mailing) – sure they’re gender neutral but boy are they impersonal. They scream “Someone, anyone – please read me!” rather than seeming relevant to the recipient. 

Too many imperatives

Why it’s done & why it sucks:

It’s true that the call-to action is a huge part of the science behind a smooth conversion, so putting in punchy phrases like “click here!” and “buy now!” seem standard procedure, but there is such a thing of over-doing it.

Ultimately, I don’t want bossy emails, and legally anything being sold is an ‘invitation to treat’ so in your next sales email, try the passive approach with an A/B test to see what gains a better reaction.

Too long

Why it’s done & why it sucks:

It’s been a while and there’s a lot to say, but how long do you think I’ve got? People are time conscious, say less!

If you need to explain something a nifty way of doing so is by linking back to a blog post published on your website. Not only is this considerate of your customers, it’s also potential for indirect conversions; they may just browse other parts of your website…


And in taking my own advice, I’ll keep this short and sweet – but feel free to add any other examples you can think of in our vowel to make electronic mail, sustainable! ;-)

pjoene

Joe Joe

June 25th, 2013.

The 3 Options for Making Your Website Mobile and a 4th.

All of the briefs we’ve received this year have included a request for a ‘mobile version’ of the proposed new site.

But what does this mean? And do I hear the creak of an overloaded bandwagon?

Just as 2011-12 was the year of the Social Strategy [with no specification as to what that actually means], 2013 is fast becoming the year of the Mobile Site. 

Yes, it’s true that mobile use is increasing:

chart

Source Monetate E-Commerce Quarterly.

But how should you respond?

People could be accessing your website from any number of devices (such as phones (of all shapes and sizes), tablets (of all shapes and sizes) and even smart TVs (of all shapes and sizes). So, as a website owner, you shouldn’t be asking whether you should be considering mobile options, you should be asking which mobile options to consider – or shock-horror, opting to do nothing.

So  there are 4 main options available to you. Each has its pros and cons, so let’s get the run-down:

 

#1 Responsive Web Design

What is it?

In a nutshell, this is designing your site so that its layout responds to the device on which it is being displayed..

Advantages

–          Streamlined: The site is hosted on the same domain and uses the same URL so there are no SEO issues or redirecting issues.

–          Consistent with Desktop Content: The same content is just presented in a different layout.

–          Low Maintenance Cost: Although initial build costs may be slightly higher, the cost of maintenance and updating should be lower (as you are only maintaining one site).

Disadvantages

–          Slower Loading Times – If you are adapting an old site to a responsive site you may find that it is not fully optimised for mobile and is slow to load. However, if you are building a new site and taking a ‘Mobile First’ approach, this shouldn’t be a problem. But 3G and 4G coverage remains sporadic and unstable – so some content may take time to download.

–          General Usability – Mobile users will generally have a goal in mind when accessing a website. Whether it’s buying, reading or checking-in, they may not want to go through the same process as a desktop user. They may expect a stripped down version of the site similar to an App.

–          Lack of Mobile Features You won’t be able to get the same level of integration from a responsive site – features such as camera, photos or calendars.

–          Lack of Zoom - if you are used to pinching and zooming into websites on mobile in order to be able to read the tiny text then you will not be able to on a responsive website.

Whether or not to go responsive divides opinion. We’ve been experimenting on our own site with responsive design and generally prefer the regular layout, when viewing on an Iphone.  But all sites and companies are different and user needs should be a chief consideration.

 

#2 Dedicated Mobile Site

What is it?

Dedicated mobile sites are purpose built versions of the original website which are hosted at a new domain address (usually by adding ‘m’ before or after the original address: m.tesco.com or www.argos.co.uk/m/.

The web server normally recognises which device is being used and serves (delivers) the appropriate site to display.

Advantages

–          Different Content – A site purpose-built for mobile will usually have features which can load more quickly on mobile platforms, and you can dispense with some of the superfluous elements found on the desktop version.

–          Speedy Development – Compared with alternatives, a mobile site can be built relatively easily. This is less labour-intensive and subsequently less costly than other mobile options.

–          Mobile-Focussed – Development for the mobile platform means that navigation and usability are friendlier for mobile users.

Disadvantages

–          Slower Service – Redirection from main sites to mobile sites takes time. It may only be seconds, but it still damages the overall user experience.

–          Double Maintenance – Essentially two sites need to be managed; adding new functionality would need to be done twice.

–          SEO Issues – Since the content (and therefore the traffic) is split across two URLs, there’s the chance that your overall SEO will suffer. However, there are ways around this which I’ll outline later in this article.

We built a mobile shop-page for an automotive client. The desktop site’s main focus is selling car parts, so we stripped it down to the essentials to make it easy for mobile users.


 #3 Mobile Apps

What are they?

Apps are programs that are saved to the device. They’re relatively small (compared with full websites) and they tend to serve one function (reading articles, shopping, checking-in). They can be a useful way to allow mobile users to access one of your site’s main utilities, or to promote your brand (with a game or similar App).

Advantages:

–          Completely Mobile Friendly - Apps have the distinction of being native to the device, so they can access and utilize any of the phone’s capabilities (Camera, Calendar, Maps etc).

–          Offline Options – While some Apps require the internet to function fully (social platforms), many others can operate offline, or cache data when an internet connection is available ready for when one isn’t.

–          Quicker Loading Times – Since the App is self-contained, loading times should be quicker. Of course this depends on (and is limited by) the device’s memory and processor power.

–          Push Notifications - Apps have the ability to update you with the things you need to know. Such as when you receive a new friend request on Facebook, or when you’re near a public toilet.

Disadvantages:

–          No Cross-Functionality – Apps are made for specific platforms. iOS Apps will work on iphone or ipad, but will not be usable by Windows devices – or any non-Apple devices for that matter. This means Apps must be developed for each platform, which is expensive.

–          Updates – Apps need to be constantly updated and tweaked. This is in terms of both user-feedback and changes to the device. This can be time-consuming and costly.

–          Downloading – Apps have to be downloaded for use. Success in the App world may require considerable marketing and promotion.

We’ve applied appropriate aptitude to developing an App for a company that focusses on standardised testing. The App allows mobile users to practice the tests wherever they are.

The 4th Option

So those are your three options regarding adapting to mobile.  There is of course a fourth option and that is that of doing nothing.  Most website operate perfectly satisfactorily on mobile and indeed users who know your site will welcome the fact they do not need to relearn where everything is on the page and the new navigation options.  This is a strong argument for keeping the status-quo which is not receiving enough credence now that the dash for “mobile first” has been triggered in marketing departments.

So in conclusion beware of the bandwagon, think about the implications before you jump.  If someone says “Mobile first” to you ask them what they actually mean and what they want to achieve.

If you would like any more information, please get in touch.

And as a special thank you for reading this far, I’ll now present a guide on how to optimise mobile sites for SEO in the form of a Shakespearean sonnet:

You’ve built two sites; one desktop, one mobile,

But now you’re concerned that your traffic’s split,

And now you’ve come to visit Datadial,

To fix your SEO a little bit.

There are two points that must be mentioned here,

Two tags to put in your HTML,

(On each version of the page – let’s be clear)

They are two tags, and they both start with ‘Rel’.

Rel=”alternate” on the desktop

Make sure it points to the mobile and all…

And pointing back, just so it doesn’t flop

On mobile: Rel=”canonical”

But other things cannot be avoided.

Like linking to mobile, just like I did:

 

So basically add some links in the HTML of each page that look like this:

Desktop: <link rel=”alternate” href=”http://m.example.com/page-example”>

Mobile: <link rel=”canonical” href=http://example.com/page-example>

 

design-is-a-behaviour

Matt

September 28th, 2012.

Hierarchy – What do you want people to see? Where do you want them to go?

“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?

  1. Sector / Product / Service – Industrial and Commercial Flooring (heading and image).
  2. Key information usually displayed as bullet points for ease of reading.
  3. Area(s) the company covers or is based in (Loughborough).
  4. Local Contact Number (01509 000000).

What do you want them to do?

  1. Recognise the sector, service or product being supplied by the company.
  2. Gain reassurance that the company is local and supplies what they are looking for.
  3. 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:

  1. List the key information points that visitors are likely seeking.
  2. Assign values (1-10) according to their importance to the average visitor.
  3. Now, look at the actual design again.
  4. Assign values (1-10) according to the actual visual importance as you see it in the live design.
  5. 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

Missed boat

Martina Martina

July 13th, 2012.

When missing the boat leads to being forgotten…

Missed boat
Image Source

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“?:


MySpace

MySpace

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.

AOL

AOL

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.

Yahoo!

Yahoo!

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.

Digg

Digg

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)

Facebook

Facebook

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

Instagram

Instagram

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)

Hotmail

Hotmail

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.

RIM/Blackberry

Blackberry

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.

Bing

Bing

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…

Last.FM

Lastfm

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“)

Kodak

Kodak

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…

cookie-law

Rob

April 27th, 2012.

Cookie Law implementation ideas

 

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.

What about “Yes please, use cookies.”  “No thanks I don’t want cookies”

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BT.com

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.

 

Zebedee Creations

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.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

www.eu-cookie-law.com

Simple solution, which disappears after about 10 seconds.  Presumably they think that not actively agreeing is presumed acceptance? Is this legal?

Jan

August 26th, 2011.

How a losing variation produced 95.45% increase in conversion rate

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%

 

Original (control)

 

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%.

 

Conclusion

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.

 

Martina Martina

August 24th, 2011.

Why your website isn’t as fast as it should be…

Heavy wheelbarrow

400 Error!

Image source

Imagine…

…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…

Bad HTML:

Bad HTML example

Erm...does "b" stand for "big" or "bold"?

 

  • 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:

An example of too many HTTP requests

Kabooooom!

Image source

 

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.

JavaScript/Flash overuse:

Glowing computer

Dude, too much flash!

Image source

 

JavaScript helps make things look nice. Lines of code enable things such as widgets, adverts, and analytics services to work successfully. The issue is that both kinds of software can be “heavyweight”. JavaScript performs ‘sequentially’ rather than ‘concurrently’ – this means that nothing else loads before JavaScript loads. Of course, this becomes an issue when you have tonnes of JavaScript code, each one longer than the last, preventing anything else from happening.

Too many cookies:

The Cookie Monster

Nom Nom Nom!

Image source

 

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.

However, because saved information is being kept on the server, a build up of this can add to the process time on a website. In some cases, hackers even use cookies as an opportunity to track browsing activity; this is called spyware…so beware!

Bad hosting:

 Image of Robert-Kilroy-Silk

Erm...

Image source

 

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:

Multiple Satellite Dishes

No signal...

Image source

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:

A Can of Spam

Ew, gross!

Image source

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.

Favicon neglect:

Image Illustrating a Favicon

You need one of these!

 

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:

Too many Ads

Hmm...where to start?

Image source

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! :-P

 

If any of these apply to you, take active steps to protect your website against sloth! Speed be with you!

Jan

May 3rd, 2011.

Home page A/B Test – conversion rate increased by 24.8%

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

Conclusion:
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 info@datadial.net or call 0208 6000 500.

Jan

April 21st, 2011.

Establishing online business credibility with ‘About Us’ page

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

  1. Pictures of your office and your team
  2. A passionate story behind your company showing your values
  3. Peoples bio (credentials, certificates, training)

Here is the list of some ‘About us’ pages for your inspiration.

Creative examples:

www.dropbox.com

www.hunch.com

www.technologywithpassion.com (nice animation)

www.tribal.nl (nice animation)

www.6wunderkinder.com

 

Business (ecommerce + service + corporate) examples:

www.gupuds.com

www.crutchfield.com

www.brooksgroup.com

www.fridaysmove.com

www.bigcommerce.com

 

« Older Posts

Recent Posts »

Our work »

What we do »

Who we work with »

Got Questions? Lets Talk »