Steve Marshall from Yahoo! draws on his many years of experience to share with us best practice in form design.
Paul: Joining me today is Steve Marshall who is here to talk about form design. Hello Steve.
Steve: Hey Paul.
Paul: Good to have you on the show, thanks for agreeing to do this. I think a good place for us to start is a little bit of an introduction about who you are and I guess why form design? Why we’re discussing that with you? So a little bit about those two things would be great.
Steve: OK, so I guess I’ve been working on the web for about ten years or so now, for the last three of them working at Yahoo. And a lot of what I’ve been doing at Yahoo has been on fairly high-profile sites that no-one would really think of, if that makes sense. You know the kind of unsung heroes of the web, that serve hundreds of thousands of page requests a day that no-one really thinks of as interesting websites in our community. Things like Yahoo TV, Yahoo Music, Games, video games – these sorts of things. And I guess really the reason I wanted to talk to you guys about this was it’s kind of a subject that’s very close to my heart because a lot of basic interactions on the web that can be made brilliant for everyone, if only people put a little thought into it – things like: search forms. A classic example for me is on google.com and even on Yahoo Search you have a search box and then you have channels, if you like, for that search so you can say “I would like to search the entire web,” “I would like to search for images,” “I would like to search for video,” these sorts of things. Typically they’re done with links. Now, if a screen reader user, for example, say goes to use that form they can fill out their search keywords, but they will never ever get to those links because in forms mode they don’t get presented with the links in the form. And so you know a little bit of thought about what actually the use case for this form is means you can maybe think about using the right elements for the right purpose.
Paul: OK, fair enough. That makes a lot of sense. Well, you could come back with the question: “Why does that matter? Why is form design particularly important? Why is it worth us discussing?” How would you respond to that?
Paul: Yeah. I think as well there’s the aspect to it that forms are a fundamental user interaction on the web.
Paul: I mean, the thing is that so often forms are used, you know on an eCommerce site a form is used to make the purchase, you know it’s the call to action. On another site it’s used to signup to a newsletter, it’s kind of really fundamental stuff and don’t often get enough attention really.
Paul: So let’s talk about some potential ways to make your forms more user-friendly. What kind of advice would you have in regards to that?
Steve: It’s not elegant; you do get a really, really big form, but it makes sense and it provides the same level of information and the same flow that you would get with the progressive drop-downs. It’s things like that, just putting that little bit of extra thought in, thinking about how this might work with HTML. To go back to the search example I used earlier I have to – you know full disclosure here, this is something that I did myself about two or three years ago when I first started working for Yahoo and it’s something that various people trumpet as brilliant and I’m very proud of it.
Paul: Very modestly so.
Paul: It’s interesting that you mention that search example. What other kind of accessibility problems are you seeing coming up when people are creating forms?
Steve: I guess most of the problems are around people not thinking about the way that their form would be interacted with in alternative browsers, and the classic example is the screen reader. But things like screen magnification: people may not necessarily group the form fields together or may put the errors away from the form fields to which they’re related and so if you’ve got someone with screen magnification or tunnel vision who doesn’t get quite such a broad view of the page – they only get maybe the couple-hundred pixels that they’ve got magnified – they don’t necessarily have the context of the error message right next to the form and so they don’t get to see that error message and will get frustrated by that.
Paul: To be honest I think that even applies with normal-vision users as well, that if you have an error message at the top of the form and you’ve scrolled down to the bottom, you need to put the error messages where you’re interacting; where the error’s occurring really.
Steve: Yeah exactly. And almost all of this stuff, with a couple of exceptions, it makes life easier for your regular users as well. It just… if it doesn’t improve life for everyone, it improves life generally for a significant enough portion of your user-base that it’s worth paying attention to, I think.
Paul: Heh, “crazy nonsense,” is that a technical term?
Steve: Yes, that’s a very technical term.
Paul: OK, for some of the people out there that maybe are not the Yahoo’s of this world, they’re not the Google’s of this world, that are just basically creating fairly basic sites, what’s the fundamental advice that you would want to give people about form design? What are the things that they should be considering at the most basic level?
Paul: You mentioned earlier ‘form mode’ for screen reader users. Can you explain that a little bit more? Because I don’t think… I confess I only relatively recently found out about this ‘form mode’ and I don’t think a lot of users realise the consequences of that. Can you explain how that works?
Steve: OK, so – full disclosure, I’m not an accessibility guru, this is all information I’ve picked up from having conversations with our accessibility gurus here. Essentially, screen readers are modal. Because the users of screen readers can’t see the web page, the screen reader presents them with various different interfaces onto the page and you can read through the page as a normal user would in HTML, reading through element by element, paragraph by paragraph. And that’s fine. But when you want to interact, you obviously need different types of controls and so screen readers provide what’s known as ‘forms mode’ and this is a special mode for editing input and working with forms where the screen reader will only present, as I understand it, form fields, labels and titles of fieldsets. So links, paragraphs of text, these sorts of things won’t be presented when you’re in ‘forms mode’.
Paul: That has real serious consequences doesn’t it?
Steve: Exactly, that has massive implications. So quite often people will provide explanatory text after a form field that’s not entirely clear or whose label is not entirely clear, saying ‘You need to fill out this field in this format’. Date fields are a classic example. They will put a paragraph underneath saying ‘Must be in the format ddmmyyyy’ and the screen reader user will never get that because it’s being presented to them in a paragraph (<p>). If the person building that form just took a couple of minutes to rethink the way they were putting the label together and put the label with ‘Date’ and then a <span> around ‘Must be in form whatever’ inside of the label and then styled it however they wanted, the screen reader user would get that and they would get all the advantages of knowing what format it should be in.
Paul: It strikes me it’s all about actually using the form tags that are available to us to the full degree. So many of us don’t use things like groups and legends and all of those kinds of things.
Steve: Yeah precisely. The interesting thing is that these things that aren’t really used are actually really, really beneficial. So for example fieldsets – again, as I understand it, I may be slightly misquoting here – fieldsets allow screen reader users to more easily jump between sections of a form. So if for example you have optional pieces of your form and they’re grouped in a fieldset which says ‘Further Details (optional)’ as the legend of that fieldset and they don’t want to fill out those further details, they can just jump over it to the next fieldset.
Paul: Which, yeah, is amazingly valuable. I mean as soon as you listen to a screen reader and hear how laborious it is, being able to skip over content is really important.
Steve: For those of us who are lucky enough to be fully visually capable and fully able to use motor skills – because of course this, whilst I think about it, this doesn’t just apply to screen reader users, this applies to people who have potentially fine motor skill issues so they have to navigate with a keyboard.
Paul: Which then you get into things like ‘tabindex’ and stuff like that.
Steve: Exactly, exactly. Which you know is a whole other holy war that I dread to get into for fear of upsetting someone. Yeah, these sorts of things again can help with that, and thinking about those sorts of things just makes everyones life easier. Because I mean, for example, I don’t always use the mouse, I will quite often use the keyboard. And I’m perfectly able with my hands and perfectly able to see, but I will quite often ‘tab’ through a form simply because my fingers are already on the keyboard and it saves me moving my fingers a couple of inches… because I’m lazy.
Paul: (CHUCKLES) So you’ve kind of mentioned a couple of people in this that you’ve learned various things from. If people want to learn more about form accessibility and form design and that kind of thing, where would you refer them to? Who do you really respect in this kind of field and you know that they should be following?
Steve: Oh, wow. I guess the people who, in terms of pure accessibility, I would say definitely Mike Davies who goes by Isafarro or Isolani exchangedly, Ben Hawkes-Lewis who I don’t think has a blog, or if he does, doesn’t blog enough. Dirk Ginader who is weboutput.de. Those three guys particularly, Ann McMeekin who guys by the name of pixeldiva. All of those guys are absolutely invaluable resources in terms of HTML, CSS, accessibility type stuff. Other than that I have to admit I don’t really know because this stuff is stuff that people don’t talk about enough.
Paul: Yeah, yeah totally.
Steve: So it’s very much a case of scratch what you can find from what’s left on the web, if you like.
Paul: Yeah. OK Steve thank you for that, that was very helpful. It’s good to kind of dig under the surface a bit. So thanks for coming on the show and hopefully we have you on again soon.
Steve: My pleasure. No problem. Yeah, hope so. Thanks a lot Paul.
Paul: Bye bye.
Thanks goes to Simon Hamp for transcribing this interview.
- Why performance is the best way to improve the user experience
- How to squeeze the most from your images
- Minimum viable product (MVP). What is it and why should you care?