Whilst designers (sorry, I don’t want to paint everyone with the same brush!) have been doing their darndest to create fancy feature panels, bold backgrounds and tricky transitions; there’s the runt of the litter that seems to always be neglected. The after-thought.

We all hate filling out forms on web pages but they are a necessary evil – conveying information from one party to another for a specific purpose. Therefore, why shouldn’t this part of a web page be given the same treatment, the same amount of time and resources, as any other? Unfortunately, it does seem to be the case that forms are often chucked together (I’m guilty of it too!) with minimal thought but a form is often the best way of communicating with your audience so that makes them pretty important right?

In this article I’m going to share a few tips that may make your web forms easier for your visitors to use.

Top-aligned labels

One of the biggest factors contributing towards ‘web form frustration’ is that the user is actually forced to THINK about what they are doing rather than just absorbing information. Looking at something on a web page usually ellicits a response – ‘that looks pretty’, ‘This product looks interesting’, ‘I wonder what this does’ – and the user then CHOOSES an appropriate action – ‘I’m going to click/touch this’, ‘I’m not going to click/touch this’. This is generally a smooth experience that the user feels comfortable with and them browse on their merry way.

With web forms, the user doesn’t have an option other than to fill in the fields laid out in front of them. Therefore, they have to look at something, absorb the information, process what the information is telling them and then figure out for themselves what to do. Obviously, over the years, forms have developed certain conventions which everyone is aware of but that doesn’t mean that there aren’t improvements and efficiencies to be made. The step at which these improvements can be made is during the ‘processing’ stage. The clearer and easier you make it for the user to determine what they need to do next, the better the form experience and the less ‘web form frustration’ is festered.

Here we can apply some basic human and typographical conventions. Look around you. Whether it’s a book, road sign, billboard or other assortment of text, it is always easier and quicker to read something that ‘long and thin’ than something ‘short and fat’ – where more words are stacked on top of each other than written side-by-side. This is why newspapers have columns. Humans are lazy and it is easier to read a little bit across and start a new line than it is to read a big long line before moving to the next one. This same logic can be applied to form elements.

A top-aligned label is easier for the user to process and recognise the associated input field. The focus of the eye naturally starts on the left and the user immediately groups the label and input together before reading and processing what the label actually says. Moving onto the next label and input group is also easier as the user just moves their gaze downwards rather than ‘returning’ from the previous line.

Compare this to layout where the label is aligned to the left (or even right) of the input field and the user has the extra step of recognising where the associated input is as they haven’t spotted it yet as well as encountering the ‘returning’ issue when they move on.

Try filling out a form with top-aligned labels and one with left-aligned labels – the top-aligned form just seems to flow better.

https://www.last.fm/join
https://www.evernote.com/Registration.action

Top-aligned labels are also a lot better suited to handheld devices. With limited horizontal screen space, top-aligned labels are an absolute must when using forms on a mobile device as making your users scroll horizonatally is a cardinal sin.

One slight cost of having top-aligned labels is that the length of the web page will, inevitably, be longer than if using left-aligned labels. However, as we’ve discussed, the user will find ‘long and thin’ easier to process anyway so this is a sacrifice worth making.

Use the same form for the password reminder

The thing that maxes out ‘web page frustration’ is not having the information required to complete an input. One such case is forgetting your password. We’ve all done it and sometimes it’s a very laborious process trying to recover it.

Commonly, the password reminder process is triggered by clicking a link near to the password box. This is simple enough and works well. Often, however, this link will take you, the user, to a different page entirely where you have to process some more information before finally getting to the point where you get your password back. Sometimes a modal window is used which is a better solution than sending the user off to another page but is still fairly intrusive. Why not switch a few things around, show a message and use the same form? The following example shows how the ‘forgot password?’ link fires a transition from the login form to the reminder form. It’s clear that this is a different form but it’s taken a tenth of the time it would (and looks a lot nicer!) than sending a user off to a different page.

Check out an example here…

The wonderful Codrops have also produced a good example of this technique.

‘Review and check’ email address inputs

One of the things I find most baffling about web forms is that the user is asked to repeat information they have already entered. There are two very common examples of this – email address and password fields. Firstly, the email address input. How many of you just copy and paste what you typed in the first box into the second box? Come on, hands up. Everyone does it including the person who built the form so what is the purpose of typing the same information twice? The answer is to ensure that the email address entered was indeed correct as this is obviously the best (and often only) way of communicating with the user. This is perfectly understandable and a hugely important check to make but why does the user have to repeat what they’ve already written? Why not ask them to review what they wrote previously and confirm it is correct?

This review can very easily be carried out with the use of a checkbox. The user checks the box next to the email address input to confirm they have written their email address correctly. Review and check.

Now, the user could, in theory, just check the box without reviewing what they wrote in the email address field and this could lead to mistakes. But with the duplicate field method, if the user is just copying and pasting anyway then these mistakes will still happen. It’s often argued that you should imagine your mother is using your web page (why is it always mums who are crap at using computers?!) and she should be able to understand and use it but why should all users be treated as the lowest common demoninator? The email field is probably the most important one on the form and the user knows it – it’s been hammered into them through years of repeatedly having to copy it to a second box! – so they WILL take care. The likely result of using the ‘review and check’ method is that there will be the same amount of mistakes made but the experience for the majority of users will be a lot smoother and less painful.

This leads us on nicely to the other repeat offender – the password field.

‘Show password’ button

The password field is a slightly different but equally as frustrating case. The user cannot copy and paste their entry from the first box so the ‘auto-pilot’ mistakes won’t happen but, unlike the email address field, the user cannot actually see what they’ve typed. Therefore, if a failure happens there is no choice open to the user but to completely start over and fill out BOTH boxes again. So by typing one character incorrectly, the user has to fill out, essentially, the same input field FOUR times! Madness.

Now, obviously, the password field has certain security considerations surrounding it so, whilst it isn’t quite as simple as having a checkbox for the user to tick, a similar solution can be implemented to streamline the user experience.

Through the use of Javascript, we can insert a hidden duplicate input field with an accompanying button or checkbox which, when clicked, will ‘swap’ the password input for a regular input showing the password text (it hides one and shows the other depending on the state of the button). This means that the user can check their password and make sure it is correct before they submit the form.

There are a couple of obvious pitfalls with this method however meaning some refining is needed. Showing your password on screen isn’t advisable but how often do you type in important passwords with someone looking over your shoulder? This is a minor issue but a much larger one is using this method on a sign-up form. If the user types in their password, doesn’t check it and then submits the form, there is no reason why the information wouldn’t be correct but if it is incorrect then there is no recourse for the user and this would obviously lead to problems. Potentially, you could force the user to click the check button at least once but then this method becomes as equally intrusive as the duplicate input method. Another solution may be to add a checkbox to accompany the form which acts as a confirmation much like the ‘review and check’ email address method discussed above.

Have the newsletter sign-up checkbox unticked by default

For me, this is an act of common courtesy. If a user WANTS to hear about your company’s latest and greatest product then they will tick that little box themselves. Or they might visit your Twitter or Facebook page. Spamming with weekly, monthly or in some cases daily(!) emails telling people information they don’t really want to know does not endear you to them – it downright pisses them off. People don’t like to feel as though they have been tricked but that is exactly what pre-ticked newsletter sign-ups do. Why do you want to send an email – which will cost your company money! – to someone who most probably doesn’t want to hear what you have got to say?
Advertise your newsletter on the sign-up screen. Make it loud and proud and maybe say what is regularly included – that way you are genuinely inticing users into hearing your message and they will appreciate it rather than feeling duped.

It’s amazing how a small gesture like this is appreciated and casts you in a more human light to a user. That is infinitely more successful in promoting your product than a spam newsletter can be.

Make use of HTML5 input properties today!

To round up, I’m going to get a little more technical on y’all.

HTML5. Many people shy away when that initialisation is muttered, usually for one of two reasons: either they are scared of having to learn the ‘new’ markup or they know browser support isn’t brilliant just yet so why bother.

But many HTML5 features CAN be used today quite safely and one area in which this is most relevant is with form elements. Several new input types and input attributes have been introduced into the HTML5 spec. They include the datepicker input, colour picker input, required attribute and few others and in many modern browsers these will work out-of-the-box. Unfortunately, their styling is native so it could be very detrimental to your UI should the browser chuck in an element or two. And on browsers that don’t support them it provides a really bad and potentially unusable experience for the user.

However, some inputs and attributes that be used in the knowledge that they will be safely implemented across all browsers. A quick summary below.

Email, URL and number input types
One trick tip regarding forms is that, if a browser doesn’t support the input type you have specified then it will revert to a standard text box input. For inputs such as a colour picker, this is not an acceptable solution but for fields like email address and URL, this is perfectly acceptable example of graceful degradation. For mobile users, where the keyboard layout can be particularly important in helping a user fill out an input, these inputs are of particular importance and should be used generously.

Placeholder and autofocus input attributes
Two HTML5 attributes of a particularly subtle nature are placeholder and autofocus. Placeholder puts your specified text into the input box until the user focuses on the input, at which point the text disappears to leave the user free to fill in the input. For years, we’ve been hacking this solution into our forms and now it’s in the spec by default – magic! You can even use CSS to style the text by using the attribute selector input['placeholder'].

The autofocus attribute simply puts the cursor into the selected input field enabling the user to start typing straight away – typically this would be the first input in your form. Again, this is a small but very useful feature with a particular nod to mobile users who it saves having to scroll and touch on the first input they wish to fill in.

So there you have it, six tips to improving your website forms. These techniques can be used in nearly all situations, in all browsers with no regard as to whether CSS and/or JS is turned on so why not give them a go!

I won’t bore you with the arduous process and will fast-forward to our final solution.

VideoJS is an open-source HTML5 video player which utilises Kroc Camen’s Video for Everyone. It works across most platforms and devices you could ever wish to encounter and it’s function is to overlay the basic browser controls with some HTML mark-up meaning it is fully skinnable using CSS – very neat indeed. The player comes packaged with a few skins based on Youtube and Vimeo among others but we opted to modify the base skin to fit our client’s site design. After combining with the jQuery Thickbox plugin (I know it’s old but it’s still good!), we had a large HTML5 video in a lightbox, no problems whatsoever – fantastic stuff!

And then came the difficult bit – encoding the videos. As you may know, a HTML5 video implementation generally requires at least two video formats for it to work cross-platform. H624 (.mp4) is an essential format which is very widely supported and then one or both of WebM (.webm) and Ogg Theora (.ogg, .ogv) which are the open formats supported (and required) by Firefox. We decided to support all three.

Previously, I’d used Handbrake to encode videos but after many trials and tribulations attempting to encode videos to the three formats, I came to the conclusion that we needed to use an external service to encode our videos. After trying out a few services like Encoding.com and vid.ly, we arrived back at VideoJS and it’s creators Zencoder. Their main business is as a video encoding service and boy is it impressive!

After providing the video input URLs or FTP details, you are presented with a multitude of options for encoding your videos. Ordinarily, this would be a daunting task but the documentation provided by the team is incredibly helpful and they also write blog posts outlining common settings to use. A batch processing option is also offered which can speed things up considerably.

Their pricing structure is more than reasonable and they offer different levels depending on your video usage.

I’d also like to give a big shout-out to their support team who were fantastic. We had a few niggling issues getting videos to work correctly on Android devices and the support team were very responsive to our queries and sorted them quickly.

Zencoder also has a extensible API for fully integrating Zencoder to your website should your usage be high enough to warrant it.

In conclusion, if you’re after an easy to implement but highly customisable and cost-effective HTML5 video solution then I don’t think you can go wrong with Zencoder and their VideoJS player.

Over and out.

On a separate note, Spotify have just released a major upgrade which includes a whole bunch of new social tools which is going to make sharing tracks a whole bunch easier. Watch out for a post coming your way soon. Enjoy the playlist and please feel free to comment!

Updated 12/10/2010

Best of 2010 (so far)
1. Odessa – Caribou
2. Time and Space – Groove Armada
3. Superfast Jellyfish – Gorillaz
4. Wide Eyes – Local Natives (borderline 09-10 I know)
5. Celestica – Crystal Castles
6. Compliments – Band of Horses
7. Thieves in the Night – Hot Chip
8. The High Road – Broken Bells
9. Stay Close – Delorean
10. Stay Too Long – Plan B
11. Peligo – Gotan Project
12. Paper Romance – Groove Armada
13. World News – Local Natives
14. Kiara – Bonobo
15. Plastic People – Four Tet
16. Voi Parlate, Io Gioco – JJ
17. We Want To – New Young Pony Club
18. White Sky – Vampire Weekend
19. Night Might – The Strange Boys
20. Drunk Girls – LCD Soundsystem
21. Acapella – Kelis
22. Tenderoni – Kele
23. Shutterbugg – Big Boi
24. XXXO – MIA
25. Boyfriend – Best Coast
26. 1000 Years – The Coral
27. You Are Not Stubborn – Two Door Cinema Club
28. The Good Girl – Grinny Grandad
29. Kickstarts – Example
30. It Takes A Muscle – MIA
31. Swoon – The Chemical Brothers

2007′s Sound of Silver was an unbeatable album but ‘This Is Happening’ follows a similar sound and immediately listens well.

In other news, Glastonbury ticket is now booked for this year! Can’t wait to check out some of this years top-dollar line-up particularly the aforementioned MGMT, LCD as well as The xx, Editors and Faithless to go with (hopefully) massive new sets from Hot Chip and Groove Armada. Not forgetting England v Slovenia on the Pyramid – get in! Good times.

The expansion of social interaction and media on the internet – commonly refered to as ‘web 2.0′ – however, has caused the debate to shift into overdrive as music becomes exponentially more accessible to all. No longer is music on the internet as one-dimensional as downloading and listening to a track; users can now share music with like-minded people, debate the latest releases, collate their thoughts on a specific genre into a distibutable playlist and a whole host of other endeavours.

Of course, such activities can only be a good thing but we all know of the rather seedier side of the coin – illegal file sharing. Such stories as the $1.92m fine handed out to an American file sharer are becoming increasingly common and many artists have recently come out and voiced their concerns and anger over the illegal distibution of their music. Other artists have gone down a different route and openly embraced the idea of ‘free music’, most notably Radiohead and their album In Rainbows. They must be applauded for nothing else if not trying out a new idea.

And so it was announced yesterday, that MGMT are streaming their sophomore album ‘Congratulations’ in it’s entirety for free on their website a fortnight early, after it was leaked. Vampire Weekend also took similar steps in January, with their album ‘Contra’ being made available on MySpace.

It’s fairly rare nowadays for a mainstream album NOT to be leaked (at least to some scale) before release so the merits on which the bands belatedly offer up their music has to be questioned but one particular part of the announcement from MGMT struck me as refreshing.

“We wanted to offer it as a free download but that didn’t make sense to anyone but us.”

This got me thinking – why would a band, especially one the size of MGMT, want to give away their music for free?

First, there’s the simple fact that it makes them appear approachable and pleases the fans (see also, celebrity Twitter feeds). Everyone loves something for nothing and if it’s being handed out by your favourite musician, that’s like all your Christmases in one right?

From a commercial perspective, it’s a fairly commonly acknowledged principle that the split is 90/10 in favour of the record company when it comes to dishing out revenue generated from album sales. Therefore, the band themselves aren’t actually losing out on a great deal if someone decides to listen to their album online rather than purchase it from a shop. And who really cares about those nasty greedy fat cats at the record labels anyway?

Bands make their money predominantly from touring, playing sell-out shows. This ability to sell tickets simply CANNOT be negatively impacted by someone logging onto their website and having a listen to the latest track – it’s free advertising.

From a personal pespective (and I’m probably in the majority here), I’m unlikely to walk into a record store and buy an album from a band I have little to no knowledge of. If, however, I heard of the band on Pitchfork and then looked them up on Spotify (a nod to social internet) and found I liked them – well that’s a whole different ball game. The same concept applies to tickets for concerts.

So, under the surface, bands have a lot to gain from offering free streaming of their music, if only for a limited period of time before their album actually goes on sale. Now, the MGMT guys seem pretty sincere in their efforts to ‘give something back to the fans’ but their move also makes pretty damn good business and PR sense!

On the flip side, the recent accouncement by Warner Music that they are to remove their artists from free streaming sites smacks of a gross misunderstanding of their consumers. Statements such as “clearly not positive for the industry” and “not the kind of approach to business” will hold little water with fans who connect with music on a personal level and despise commercial interference.

Of course, artists spend far too long recording and record companies far too long time promoting music for it to be simply ‘stolen’ by file sharers but the steadfast refusal of record companies to step into the 21st century, engage with their customers and embrace the trends and listening habits of music lovers is a very sad fact indeed.

Without wishing to get into a different debate, this selfish attitude probably in some way stems from the Simon Cowell ‘huge-exposure-with-minimum-investment-to-exploit-and-make-a-quick-buck’ style of management and promotion. A sensible move may be to learn from MGMT’s refreshing approach rather than sapping every last penny from their customers. Speculate to accumulate and all that.

After much deliberation, I decided to go minimalist and here is the result! In the process of the build, I’ve learnt a lot of new WordPress skills and now have an even further (if that was possible) appreciation of the platform.

I’m planning on writing more frequently in the Journal so be sure to drop by now and again. Blog posts due to appear in the near future include: speeding up your website loading times, floats vs position and jQuery beginners guide!

If you have any comments about the new site then please feel free to leave a comment or get in touch. Otherwise…enjoy!

Chances are if you’re reading this you will already know something about IE6 but for those of you who don’t then here is a brief history and a list of reasons why us web developers hate it so much.

Way back when (around the turn of the millenium) Microsoft had seen off the challenge of Netscape Navigator and had a near 100% share of the internet browser market and, as such, did pretty much whatever they wanted in terms of adhering to web standards. This meant that a piece of perfectly written CSS would often render incorrectly and a hack would be required to rectify the error. This care-free attitude from MS continued for several years and culminated in the launch of IE6 in 2001. At this point in time, everything was fairly rosy in the world of web development as sites were built to IE6 specifications as it was the predominant browser.

For all these years, Microsoft ignored web development standards to the detriment of future web users everywhere. A rather crude example in Lehman’s terms would be a car manufacturer changing round the pedals on a car so the accelerator is the brake and the brake is the accelerator. The accepted pedal structure is not written in a rulebook (as far as I know) but would cause havoc for drivers were it not to be adhered to. Obviously car manufacturers have a lot of competition in their market, unlike IE6 at the time, but you get the general idea.

It isn’t just small display issues for IE6 either. Blind users who may be using a screen reader browser (which ‘speaks’ out content on a website instead of a visual display) will not be able to use a large amount of websites (because they were designed to the specification of IE6) so it could be argued that, by ignoring recognised web standards for so many years, Microsoft has discriminated against disabled users.

2004 saw the launch of Mozilla Firefox and, as it became increasingly popular amongst internet users for, as well as other things, tabbed browsing and useful add-ons, finally Microsoft’s domination was beginning to be challenged. The purists at Mozilla had paid attention to web standards and this meant that all of a sudden a web developer, as well as a regular user, would find that websites would look different in Firefox to IE6. This is where the issues with IE6 started to become obvious to the wider web development community.

Microsoft now had a problem. Firefox was eating into their market share at a rapid rate but they couldn’t completely re-write their web browser to adhere to web standards as most of the websites on the internet are designed to display in their abominable creation – IE6.

And so we fast-forward to the current day. Microsoft have released versions 7 and 8 of their flagship web browser which, although marked improvements on IE6, still have gremlins and have the ongoing problem of plastering over their predecessor’s mistakes.

Fortunately, the internet (and websites) are now getting to the stage where IE6 is no longer viewed as a primary browser but it still causes web developers untold problems with its querky bugs which can add large amounts of time to projects.

And this is where IE6 No More comes in to give the devil browser the final shove into the grave. Led by David from Weebly, the group has garnered a large amount of support from big industry firms such as Justin.tv and Reddit and has even started to get mainstream media attention which can only be good for the future of the internet. The idea is that web developers add a small piece of code to their webpage which, if a user visits using IE6, they will be shown a banner making them aware that they are using an outdated browser and recommending they upgrade. It is a simple idea but one that could, and hopefully will, prove to be immensely successful at encouraging users to consign IE6 to the tech-graveyard.

Another shot in the arm for the web browser community is the European Court ruling that Microsoft cannot bundle Internet Explorer with their upcoming operating system Windows 7. This means that, hopefully, more regular web users will gravitate away from IE.

In my view, this volunteer project is one of the most important groups for the short-term future of web development and, to show my support, I have added the IE6 No More banner on my website.

Do your bit too. If you are using IE6 then please please please upgrade to a web standards compliant browser like Firefox or Google Chrome. Hey, even if your using IE7 or IE8 move in with the good guys and ditch Microsoft.

Happy browsing.