On Saturday, inspired by Paul Annett’s Channel 4 logo, I decided to build a parallax illusion in the browser.

Here’s the end result: http://maban.co.uk/sandbox/parallax-illusion/

How it works

To build this you only need 2 images. One is the stripes (mine is a 14×8 gif where 6px are transparent, and 8 are black) and the main image which is actually 2 images in 1 layered on top of each other.

The main image is a bird in 2 states – 1 with its wings up, 1 down. You can have more states, but I wanted to keep this very simple.

The stripes are a transparent, repeating background which appear over the image.

The stripes of the image that are visible need to be the same width as the gap between the stripes that go on top of it. So that the wings on the down state aren’t visible while it’s on the up state, you’ll need to position the blank stripes slightly differently on the down state, in this case 6px to the right of the ones on the up state. Then simply layer the two images on top of each other and save them as one image.

The HTML:

<div class="image">
<div class="strips"></div>
</div>

The CSS:

.strips {
background-image:url("strips.gif");
background-repeat:repeat;
background-position:center center;
height:100%;
width:100%;
}
.image {
background-image:url("background.gif");
position:fixed;
background-repeat:repeat-x;
height:100%;
width:100%;
}

All this does is position the stripes over the image, and make both images the full height and width of the screen since there’s no content in them. The image stays in the same place while the stripes move with the width of the window because they are centred.

More parallax illusions

Paul Annett sent me a couple of links to parallax illusions he’d seen that other people have made: one of a horse running, and one of a 3D object.

Please note I dislike each party equally, so no bias intended.

You can click on the images to see them full size.

Labour

I had some great criticisms lined up for Labour’s website, but they redesigned it halfway through writing this post. It’s a vast improvement on the previous one, although the code is a disappointment.

Design:

I think the new design is ok (compared to the others). It’s consistent, clear and easy to read. Although the drop-down navigation doesn’t work when JavaScript is disabled, the pages still link to the subpages so it degrades nicely.

Most of the website responds well when the text size is increased, but there are a lot of elements with fixed heights, making it difficult or impossible to read. The links below from the policies section could have so easily be made to expand when the text gets bigger.

Code

The structure of the code is good, but the choice of id and class names very poor. Some of the div ids are prefixed by the word “div”. It’s completely unnecessary.  There are also lots of instances of div_a, div_b, li id="a", li id="b", id="small-column-left", so not very semantic code. There are far too many ids. On any site, especially this size or being maintained by other people, it is far better to use classes over ids. Ids are for addressable content and cannot be reused more than once on the same page. Classes are much more flexible and achieve the same result.

Overall impression

I spent half an hour on their site, and I still don’t know what they stand for. Protecting front line services? Who doesn’t have this as a policy… Also, longcat waffle like this isn’t helpful, I want bulletpoints. Although they have a lot written about general areas such as the economy and healthcare, I still don’t really know where they stand on each policy. Every party is pro education, pro healthcare and pro jobs, but it’s the little things that I want to know about. In their policies section they have a search box where you can search their policies. I think this is a really nice idea, but I want to know where Labour stand on things like abortion and euthanasia, both things I couldn’t find when I searched on their site.

Conservatives

Design

The design isn’t bad, it doesn’t look as outdated as most. However, this is just the homepage. The inner pages look very different. (How appropriate). The secondary navigation, and even some of the design is inconsistent throughout the site, making the website that much more difficult to use.

Code

Classes are reused nicely, and the navigation has access keys. Severe case of divitus though and a lot of JavaScript.

Overall impression

I’m disappointed by what initially looked to be a semi-decent website. My main frustration was that so many of their policies and manifestos were downloadable PDFs or fancy page-flip Flash rather than HTML pages. It’s just lazy.

Liberal Democrats

Design

When I first visited this site, I thought this was it. Oh right, it’s a splash page. Hello 1998.

You’ve got to have a little sympathy for the Lib dems for having the ugliest colour scheme – cyan and yellow. It’s very boxy and boring, and the photos are uninspiring. Mostly old men in suits wistfully pointing at things.

The big blue images with yellow text are repeated across the site, and often have really unhelpful alt text like alt="". There’s a lot of visual clutter and cliché stock images.

Code

Every div has an id prefixed by the word “div”. And if that isn’t enough, nested within #divTop, we’ve got #divTopLeft, #divTopCentre and #divTopRight. And within #divTopCentre we’ve got #divTopCentreTop and #divTopCentreBottom. Blimey.

Overall impression

A really average site. The “what we stand for” navigation menu is useful, but there really is too much to look at on one page.

Green

Design

I’m personally not keen on the Green party’s website design. To me it feels like a hippy local newspaper site. It’s very blocky, things don’t align, and the link styles are too close to the normal text style.

Code

The code is along the same lines as the Lib dem website. Lots of unsemantic ids and classes like “left” and “right”. I don’t understand why they’ve bothered putting a “Validate XHTML” link on the site since it doesn’t actually validate.

Overall impression

I expected a little more from the Green party as they seem to be quite ahead with technology and are very popular with students. Saying that, their candidate MP Caroline Lucas’s site is really quite nice. I just wish they used that same style on the main site.

British National Party

I was going to avoid the BNP since I don’t consider them to be a proper political party, but their website is so ridiculous I thought I’d put them in here to win the wooden spoon award. If you haven’t heard of them, their policies are far-right, anti-immigration, anti foreign aid and pro capital punishment. Some public sector workforces such as the police ban membership from the party.

Design

It seems ironic that the BNP’s website is so similar *coughplagiarisedcough* to the Obama website.

The image on the left is the BNP website. The image on the right is Obama’s website. Hmmm…

Have a closer look at the buttons. Drop shadows, reflections, bevels, stripes, gradients. Yep, these buttons have it all.

I found this on their immigration policy website. Note the guy at the front with the RPG. Just a wild guess that this is photoshopped.

Code

The site is a hybrid of divs, more divs, break tags and tables. The only heading level is an h2.

Overall impression

The design is completely ripped off and has a bad case of photoshop vomit. The code is average and needs more heading levels to be semantic. The navigation wraps onto 2 lines, and the site generally looks like it was designed in Microsoft Publisher.

Summary

Too many of the party sites only had a vague list of their policies. A shopping list style of policies with links to more information on each one would be very useful. And it’s not just education and healthcare that people care about. They want to know the things like whether their party is pro euthanasia, pro abortion or pro same sex marriage, but too many parties shy away from doing this in case it turns voters off. Vague lists are meaningless and only serve to confuse potential voters.

Considering the success of Obama’s political campaign which had such a strong online emphasis, I expected the UK politcal parties to respond by improving their online experiences, but they’re disappointingly behind. They may not have as big budgets, but it’s a very effective form of marketing when it’s done right.

It’s frustrating when you try and interact with products that are beautiful to look at in the showroom, but difficult to use in their native environment. Take television sets. If you’re watching a film in the dark and want to turn the volume up, or change the channel without the remote, most of the time it’s impossible to tell which button does what because the corresponding symbol is such a low contrast to the background. Give it a different colour or texture, and immediately it’s more usable.

With so much choice over what products we buy (that all do pretty much the same thing), the products that do things differently really stand out. Take the Joseph utensil range. It’s a spatula. It doesn’t do anything that other spatulas can’t do, except it has a bit of plastic on the bottom that stops it touching the worksurface. And that tiny bit of plastic makes it new, more human and desirable. Also note the lime greens on the handles – the bits that you hold and interact with.

Next time you’re faced with a hideous colour scheme, ration those colours and use them as visual tools.

I worked for almost 2 years in the fast food industry, albeit making and serving fruit smoothies.  Although this could be described as a huge contrast to the hotel industry, I think there are still a lot of similarities because they both rely on good User Experience. The main difference between the User Experience in a hotel and in a fast food restaurant is customer expectations. In a fast food place, customers don’t expect to be served a gourmet meal in less than 5 minutes. They understand that they may have to queue for a short while, that the tables won’t have tablecloths, will probably be a bit sticky and the cutlery will be made of plastic because they don’t have to pay as much. But customers are usually willing to pay more for exactly the same thing, but where they’ll get better customer service.

Here are a few tips I’ve learned from my experience of the fast food industry that can be applied to the web.

1. Greet the customer in a friendly manner, because first impressions count

One of the problems with fast food restaurants is their poor reputation. I can think of many occasions when I’ve been served by someone who clearly hates their job, and this has given me a negative representation of the company. Then the food takes a long time to make, and you’re left assuming they’re slow because they’re being lazy (or are busy spitting in your food).

But imagine being served by someone who pleasantly greets you with a smile, is helpful in taking your order, and clearly loves their job. You’d feel a little more understanding if it took a little longer to make. You may even think it’s because they’re putting extra effort into making your food better.

It’s the little things that help improve the overall experience. The environment is pleasant and clean, the atmosphere is friendly, the food has been prepared nicely. All these things are easy to implement, and work together to enhance the customer experience, but they’re not enough on their own.

Going somewhere new can feel a bit scary, so reassuring the customer that they are in a safe place as soon as they walk through the door is the first step. You might feel this reassurance on sites where the language used is friendly and appropriate. Or on a site where there are lots of places to look for help if you get stuck, such as video tutorials, troubleshooting and frequently asked questions.

Food is a personal thing, and customers generally like being able to see it being made. It’s unlikely they’d want to see the back-end of your website, but again, reassuring them that something is happening while they’re waiting is a good idea. Perhaps when submitting an order, there’s a little loading bar explaining that the order is being processed (rather than a blank page where you’re left wondering what to do next).

2. Educate the customer, as it may be the first time they’ve been here

Most fast-food restaurants expect that the customer has been to the place before and knows the ordering process. You know to queue up at the counter, select a meal from the menu board, read it out to the person on till who will punch it into his screen. You then pay them, stand to one side and assume that your food is being cooked. Once the food is ready, the food order will be called out, and you step forward and collect it. On your way to your table, you might take some napkins, plastic forks, ketchup and straws. You then eat your meal, and when finished, you empty your rubbish into the bin, stack your tray and leave.

Every step in this process requires the customer’s previous knowledge of what to do. However, this process can vary depending on the company. Some expect you to clear your own table. Other will clear your table for you. Some will expect you to stand to one side while they get your food ready, others will give it to you while you’re still standing there. The customer knows that each chain is different, so the first time they go into a new fast-food restaurant, they need reassurance. If they have a bad experience the first time, they’ll probably assume it will be like that every time and will go elsewhere because there is plenty of choice. (Sound familiar?)

Giving the customer clear signals of what to do at each step is essential to reduce confusion. Never assume that they’ll know what to do. They may be scared to make a mistake, or if they do make a mistake (such as trying to order the breakfast menu in the evening), they’ll feel foolish. You don’t want customers to feel foolish, you want them to feel in control.

When designing a site, make it clear to the user what the process is. You might do this by listing the navigation in the order of the process. You want to make it clear what the purpose of the site is, what the page they are on will tell them (without them having to read all the way through it), and guide the user through the process along the way. If they make a mistake, don’t punish them or make them feel bad. Just tell them exactly what they should do in a friendly manner.

3. The customer is always right, even when they’re not

It is often the case in a fast food restaurant that you must say your order exactly as it says on the menu board. For example, you may order a cheeseburger, but instead call it “a meat patty with a slice of cheese and some gherkins between two pieces of bread”. This will undoubtedly baffle the person serving you, who is used to hearing the ridiculous company names given to each burger, even for just a moment.

If we were to compare the fast food order process to a web form, the same is true. When inputting a postcode, card number or telephone number into a form, some don’t accept the field if the customer puts a space between the characters. When searching for something on the site, the search term the visitor uses may be different to what you’d expect. In such a culturally diverse environment, it’s important to take into account that users don’t always ask for or do things in the way you’d expect.

4. Listen to the customer’s feedback, and be sympathetic

Even experienced fast food customers can get it wrong if the restaurant does things slightly differently to the way they’re used to. For example where I worked, sometimes customers would ask for ingredients not in the menu that they’d seen in other smoothie bars. They were sometimes upset that I couldn’t give them what they wanted.

In cases such as these, it is not always possible to satisfy the customer’s expectations every time. But by showing the customer that you understand their wishes, and making them understand that you value their feedback and will take it into account, they are often more appreciative of the situation. It may be the case that you’re missing out on a gap in the market that customers’ suggestions help you find.

A feedback form on a website is a good way to say to the customer that you care about what they think. However, make sure there is someone who can reply to this to let the visitor know that their comments have been acknowledged. Maybe a customer searches for something on your site but the results say nothing could be found. Make sure you have a message explaining that you’re sorry that the term could not be found on the site, and give them someone to contact who may be able to find the information they’re looking for.

5. Make the most of a bad situation, it’s an opportunity in disguise

One of the most surprising things I’ve learnt is that if you come across a situation that is out of your control, what you do to overcome the situation affects the customer’s perception of your brand more than the actual event.

One day at work, we had a powercut halfway through making a customer’s drink. We could not carry on making the drink because the machines wouldn’t work, and we couldn’t refund them because the till wouldn’t open. So we asked for where they’d be that morning (luckily they worked in an office nearby) and promised we’d bring them their drink as soon as the power came back on. When it did, we made their drink and I ran it to their office to give it to them personally. The customer was genuinely touched by our efforts, and his colleagues seemed impressed too.

A fast food restaurant may not be the most glamorous place to eat, but with with just a little effort, it is possible to get the customer to leave very happy and come back regularly. I wish I could make glamorous hotel style Andy Budd websites with clever code ticking away in the background, but I’m not at this level yet. I may only be able to make simple sites at the moment, but I can aim to create good User Experiences for the people that use them.