Podcast 41: Building better forms
Posted in Podcast, Tech/Development on: Friday, June 30, 2006 by Paul Boag
This week on boagworld Paul and Marcus discuss how to create better forms and how to avoid damaging your search engine rankings when launching a site redesign.
Podcast: Play in new window | Download (20.9MB)
Forms are the primary method visitors use to interact with your site. They are used for everything from logging in to completing surveys. However, despite their importance, they are often not given the attention they deserve. In this week’s show we look at how to improve the usability and accessibility of your website’s forms as well as recommending some great resources on the subject.
The discussion about forms is based on a post I wrote a while back on getting forms right. If you want a blow by blow account of what was covered in this episode then that is the place to start:
I also go on to highlight three excellent resources for those interested in improving the forms on their site. The first is a site called simply accessible which provides some wonderful advice about ensuring your forms are as accessible as possible, especially for those using screen readers. The second site I recommend is an article from particle tree on 10 ways to make better forms. Although similar to my own post on the subject the content does differ so it is worth a look. Finally I also recommend you check out Form Assembly, that allows you to create and host forms while receiving responses via rss and email.
Can you help?
In this weeks show we also mentioned a couple of ways you might be able to help us out.
Headscape lead developer
The first was the fact that Headscape is looking for a new lead developer. Do you know somebody who might fit the bill? Is this a position you would be interested in applying for? For more information visit the Headscape website.
Boagworld survey
The second area we need help with is our online survey. Producing and hosting boagworld takes a lot of time and costs a lot of money. We are therefore looking at finding sponsors for the show. In order to do that we need to know more about you the listener. If you like the show and want to support it then take a few minutes to complete our online survey.
27 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Point 2: stay focussed… unlike your survey!
Interesting podcast, cheers.
Alastair.
Great advice on Forms guys – shame you acompanied the podcast with a pain-in-the-neck survey form which asks me amongst other things for my income in dollars etc. and then askes me what country Im in.
While I submitted my survey the podcast was playing and Paul was going off on one about asking for marketting information on forms!!
Oops, forgot to mention, Skype sounded just fine.
Hi David,
I did make it clear on the show that the survey sucked! Its not set by me. Its set by an independant group that compiles this kind of information. I appreciate you sticking with it.
Fair enough paul – just enjoying the sweet irony.
I found the questions about whether I would trust you to sell me insurance particularly enjoyable.
Podcast sounded fine, clarity wasn’t an issue.
Marcus, don’t forget your joke bit at the end of the podcast.
Thanks for the podcast boys, have listened to them all and find them very useful.
Keep up the good work
Skype has come along way. I hardly noticed Marcus was not all there ;)
I’ve just noticed you’re using microformats on boagworld. Was that @media’s influence?
Believe it or not no. I have been using Microformats for almost a year now.
The sound was fine. A little different to the recordings when you are in the same room, but it was good still. What are you using? Hot Recorder?
I hope you know I wasn’t too serious about the transcripts – I think the shownotes are more than enough for now. (But as you say yourself, if you get a disabled person saying they can’t access your content, will you start providing transcripts then?)
Looking at the issue another way: you don’t write a paragraph to describe every image on a web site – the alt text should do. In the same way, an appropreate ammount of description of a podcast can be given in the form of shownotes.
I found it rather humorous that the survey asked if I would trust your recommendations of alcohol. Knowing how stressful web design can be, I imagine you have some good suggestions.
Now the diggnation guys … I’d trust them to reccomend alcohol. Mind you I wouldnt trust them with much else :)
Ed, you said: “you don’t write a paragraph to describe every image on a web site – the alt text should do.”
That’s one of the big problems with ticking accessibility boxes, people think that if the alt tags are populated then the site is accessible. If understanding the image is crucial to the content of the site then there should be a paragraph to describe it or maybe a whole page. You still see sites with a graph or a diagram as an image and the alt tag just says “Diagram” or “Sales YTD”.
To be accessible there has to be a proper text description of the content of the image (unless it is just a logo or some sort of decoration).
David, I totally agree. Sorry that I didn’t expand my point to make that clear.
Totally agree with David, the survey put me off completing, sorry just couldn’t stomach those absurdly intrusive questions – especially when on page 4 the mandatory question was race!
Great podcast, just got into it in the last week, and am now up to date, so feel like I can comment! It’s really interesting to follow how you have changed over the last 9 months, both in terms of technical content, but also approach and content.
Really like the boagworld site but I’m still struggling to locate some of the show notes – like the A List Apart pdf article from podcast #1 and the list of other web-design podcasts from approx #6, but apart from that…
Also, the corporate proxy server in the local authority won’t allow access to the flickr group! Even though we teach new media and web-design, we cannot get access to so many important sites.
Rant over. Thanks again.
Thank you guys, for giving us the 41st show in a row. I listen every week & really appreciate it. It was a small effort to fill the form, although, some of the questions were a little annoying.
Keep up the good work.
Thanks
Thanks all for your encouragement and support. We really do appreciate. I know the survey sucks, but we need an independant third party to survey our listeners so the result is we dont get to control the content. We appreciate the effort.
The audio wasn’t bad… I could hear all of Marcus’ babbling for once! :) The only complaint I have is that he sounded like the mic was right in his mouth, and Paul sounded like he was 3 feet away. The Skype rig seems fine, but you should both try to get similar mic setups, and run the final audio through a compressor and a high-pass filter in Audacity or similar audio software to clean it up a bit.
Keep up the good work gents!
I think most folks are right about the sound quality. It isn’t an issue of either voice being difficult to hear or particularly muffled per se but the difference between the two voices is a little discombobulating. It’s a little like having a ventriloquist ‘casting or something. Please, don’t try that at home.
Question
7:02 HTML to CMS
Main Feature
15:13 Forms Introduction
16:00 Ways to improve forms
16:16 Make a form look like a form
17:32 Stay focused
18:41 Short as possible
23:22 Only show relevant fields
23:35 Manditory fields
25:20 Avoid re-entry
27:41 Submit button
28:20 Highlight current field
30:20 Logical tab order
31:40 Use field tab order
33:00 Place labels before fields
34:44 Offer incentives
36:48 Explain everything
37:17 Save form data
Web resource review
38:44 Form examples
Solid and easy-to-use guidelines, thanx!
Exept for one point… The one about putting check boxes to the right of labels, not left.
From an aesthetic point of view this will look absolutely terrible when you have a whole list of check boxes.
And in terms of accessibility there are at least two good reasons to place the check box in front of the label:
1. The rest of the GUI world does this.
2. If the label is rather long and you are using a speech browser, it will be nice to know up front that the following is a choice, not some other kind of sentence.
I meant in the code. It doesnt have to appear that way around visually.
Another nice podcast Paul and Marcus. Skype sounded fine (can you give tips on how to record that?) I don’t know why more “web programmers” don’t make accessible forms. It’s pretty simple.
thanks…
nice article thanks
I don’t know why more “web programmers” don’t make accessible forms. It’s pretty simple.
Hi. For some reason I had to look in the page source to find the download link. I am not sure if this is due to a rendering error or intentional? (FF Win 3.0.5)
(http://media.switchpod.com/users/boagworld/ftp/03-07-06-boagworld.mp3)
@Q – Thanks for spotting this. Has now been fixed.