Notes on web design: Auto sliders are obsolete. - Ziller Web Marketing Blog

The year is 2011, and for a while now, the team here at Ziller have been predicting change when it comes to the user of an automatic image rotator, or auto slider, on the home page of prominent eCommerce websites.

If you’re new to this concept, to give you a bit of a background, home page sliders are more or less banners that rotate through their images automatically. Sort of like the automatic commercial billboards you see inside of a train station or airport.

They’ve been around for a while now, and originally came to fruition with many major eCommerce websites with a large range of products. Automatic sliders are quite beneficial for businesses because they save space on valuable ‘real estate’ throughout the home page, meaning the business can cram as much marketing material, product sales and offers into the banner as they want without any imposition on home page space.

From a business point of view, you can see why most eCommerce websites would deploy and automatic slider above the fold of their web page. But are automatic sliders really that effective? The answer is no, and here’s why….

Despite the benefits from the business end of things, automatic rotating images banners are actually a usability nightmare when it comes to keeping the attention of the user.

As you’re well aware, the home page of a website is highly likely to be the first element of a web page seen by users. As a result, any element contained within a home page should be considered most important to the business.

In the case of home page sliders, there’s a bit of an underlying psychology. To cut to the chase, they’re distracting and they detract the user’s attention from other valuable elements on a web page. With an image constantly flashing to a new slide every 5-10 seconds, from a user’s point of view this can be extremely distracting when you’re trying to occupy yourself with another page element as you’ll find that your eyes are vectoring immediately towards the sparkly, pretty new image.

It’s like peripheral vision, if you’re driving a car and something flashes out of the corner of your eye, you’ll naturally react to it. Well, the same goes with automatic rotating image banners on a web page!

As of 2011, we’re beginning to see a lot of big eCommerce stores take their slide off ‘automatic’ and instead, program them to be in the complete control of the user. The end result of this is that the slider only activates when a user either clicks on, or hovers over it with their cursor. When they do this, it is at their control and it exactly where there eyes want to be.

We thought we’d take this opportunity to demonstrate some major eCommerce stores who have moved away from the automatic slider, instead opting for the user-controlled sliders.

eBay Australia’s website – A nice, user-friendly slider with hover controls. Exactly what you want to keep the user’s attention at all times.

37signals’ website – Same again. These guys have heaps of services to offer, but do you think that they’re auto-rotating them in your face? No way.

And of course, we wouldn’t finish our post without pointing out those with room for improvement…

Dick Smith’s website – Our suggestion to these guys is to remove the ‘pause and play’ functions completely. While the slider looks good, it’s still set to automatically rotate when you land on the home page. Kind of annoying when you have to press ‘pause’ to browse through the page undistracted!

Harvey Norman’s website – One of Australia’s biggest retailers. They’re slider is stuck on turbo, just try and read through the home page without being distracted!

So what are your thoughts on auto rotating sliders in eCommerce website design? Let us know, and feel free to share some of your own examples

One of the most celebrated sciences of web design is without a doubt, usability. User interface design can very well determine the success and lifespan of a website. Without a well-structured and organised website design, you may as well go back to the days of business cards and xerox to sell your business.

Information architecture and design forms the crux of any online business portal. Why? Because the design of your website will play a primary role in whether your customer came, saw, puked and left – or alternatively – stayed a while, browsed, engaged and perhaps bought something.

Good website design is everything.

On a myriad number of occasions, I’ve been trawling the world wide web searching for a product or service with an immense hunger for a website that is well structured towards meeting my requirements. It just so happens that my mind is ravenous for information of use to me, and all I seem to encounter is a cluttered mess of information, a calamity of keywords and links, a website that looks like a dog’s dinner.

It sounds harsh, right? Well, not in my opinion. The way I see it, it is the duty of every business owner to invest in good website design that not only sells the organisation well, but caters instantly to what the user is searching for without them having to sift through the ancient catacombs of lost static pages just to find anything of topical relevance.

Nothing annoys me more, and I’m sure you feel the same!

I thought that I’d take this opportunity to discuss 10 pitfalls of website design that never cease to have users scamper desperately for the ‘back’ button:

1. The website drawn in crayon and coded – for this one, you’re probably going to start laughing as soon as you see the screen shot. Sadly though, even in the futuristic year of 2010, many web masters still opt for the website design that causes a seizure upon opening. The following is a screenshot of a website for a prestigious educational institution in America, but the presentation is completely paradox. Without making any remarks regarding the navigation, the usability is null and void given the solar flare of colours.Nothing annoys me more than a website that makes me not only have to wear shades to look at my screen, but also makes me feel like my head is going to pop in the impending threat of a seizure. It’s like a scene out of Total Recall:

   

2. The 90s – good music, good TV, bad websites – I know that everyone needs to make an exception towards businesses who don’t have the time to update their web design with something a little more contemporary, but then again, what about governments? Nothing drives me crazy like an ‘informational’ website that’s still stuck in the 90s. I mean, look at North Korea, they can build nuclear weapons nowadays but can’t build a decent user interface? Come on guys…Don’t worry though, Iceland have got decent UI design covered…

   

3. Websites that go overboard with SEO – It has always been said, in order for SEO to be successful, at the end of the day you still need people to engage and interact with your website content once they’ve clicked onto one of your landing pages. Usability and SEO are difficult to balance, but there is a line you should never cross. Truth be told, nothing makes me abort from a web page faster than something like this:Ummm… Do you think that they sell flashlights? It’s almost so overwhelming that I actually forgot where I was for a moment there – easily one of the worst eCommerce web designs that I have ever seen. Want an Australian example? Without naming names, here’s the bottom half of the home page of one of the most popular digital camera stores in the market:

   

   The fact that the website design is so bad makes me never want to shop here. Very successful SEO, though!

4. Websites that seemingly scroll infinitely – Is it really necessary for me to scroll for eons and eons just to reach the end of a sentence? I know, I’ll just get in my car and drive my eyes to the other end of my 2.47km LCD computer screen… Or I’ll just leave instead. Make your content easy to skim over! Before you say anything, yes, this was Nintendo.com’s website once upon a time… The scrollbar = nearly as epic as the legend of Zelda!Want to know something ironic? Since updating in 2010, Google Images now deploys the infinite scroll function (vertically). They do it in a much more user-friendly fashion of course…

   

5. Blank palettes – These websites always seem like a) they’re too cool for information architecture b) don’t want to disclose anything to their users c) are just out to drive you mad with abysmal proportions of blank space or d) all above the above.You guessed it, they’re out to do all three. The below screen shot is one from the website of one of my favourite underground bands. They’re actually a pretty big band in Finland, but they’ve only got two links on the entire website. It doesn’t do much to promote them for the user, does it?

That’s about all I’ve got in me for the time being, but you get the picture, and hopefully you had a bit of a laugh too. I think that I have illustrated my point pretty well, without good website design, your online campaign will be dismal.

Good website design can work wonders for your company’s image, so why not make the most of your online asset and turn it into something alluring and captivating? After all, if you invest valuable time into website development, user interface design and information architecture, your customers will invest their time into engaging and interacting with your website.

What are your thoughts on the importance of good website design?

As web developers, one of the hardest parts of our job is ensuring that a site looks and acts the same across all the major web browsers. A web browser if your not already aware, is what you are most likely using to read this blog post – software that allows you to browse the web.

These days there is quite a range of different web browsers available, including Firefox, Safari, Internet Explorer, Chrome and more. While they all appear to do the same thing (allow you to browse web pages) how they interpret and display the code behind a website tend to differ. For example you can build a website that looks great in Internet Explorer, but does not even display to a user using Firefox. In this example what do you think a Firefox user is going to think of your website? Users don’t stop to think about cross-browser compatibility when they see a problem on your site – they just assume your site has a problem (which in the end it does).

While creating a Google Analytics account for a client last week using Internet Explorer 8, I noticed a pretty bad issue with the horizontal navigation. Take a look:

This problem only existed in Internet Explorer – if you were using any other browser the site would of looked perfect. Being Google you almost think that this type of thing would never happen however it does and goes to show just how difficult it is to always get these things right.

If you are in the process of engaging a web developer to build your website, I heavily suggest you double check they are testing the site to make sure it works on all the major browsers. I have had times when a client will call asking why their website is not doing what it is meant to – only to find out in some major browsers the menu is missing, or checkout button does not work.

In recent times, Facebook has been at the centre of criticism when introducing new changes which included changes to the user interface as well as general changes to the core functionality. The criticism came from a large majority of their users, who really felt the new changes were not in their best interests – a Facebook group was even set-up to argue against the changes which attracted hundreds of thousands of users. I myself have liked all the changes Facebook have made to date however it was obvious the large majority of users, including some of my friends did not.

If you are a Facebook user you would of noticed recently that a new layout with a bunch of changes has been introduced, however this time I feel that there will not be so much fuss made about them as in the past few updates. This time Facebook have done something very smart, they have kept their users informed. When logging into your account for the first time since the changes have been introduced, right at the top in the prime position is a banner which explains that there have been changes along with why those changes are helpful.

If you click on the link in the banner, you are then taken to page which fully explains each of the different changes.

In any area of your business, keeping customers informed / updated should be one of your top priorities. This is no different to running a website – if people or users are kept informed they are going to be happy or at least happier then if you didn’t. I guarantee you if Facebook had of taken the same approach when rolling out their last few updates there would not of been such anger from users.

I wrote a post earlier this year regarding the use of captcha forms – my opinion was that that the majority of them on the Internet are badly designed and are also badly hurting conversion rates – nothing has changed.

I just read a great post regarding the many ways to avoid using a captcha and thought it was worth a shout.

I thought that this question was a pretty good one to write about, as it seems many web designers out there know that these tags exist but couldn’t tell you the difference between them. Using the < b > tag or the < strong > tag will seem to do the same thing, it will bold any text wrapped around the tag, so why are there different tags to do the same thing?

People in the seo world started to talk about how the strong tag had a greater seo benefit, and it was good practice to use the strong tag around keywords instead of using the standard bold tag. Thankfully Matt Cutts cleared this up by stating that Google treats the tags exactly the same.

OK so what exactly is the difference? Basically it’s called semantic mark-up – actively describing the content you are presenting to the user. W3C prefer that you use semantic mark-up, and I have to agree with them.

Building websites is all about providing a good experience to the user, which includes users with visual impairments. Without the use of semantic mark-up visually impaired users will not get the same meaning from content that people who are reading it will, which is surprisingly a large number of Internet users.

Tip of the day – use semantic mark-up.