Post Archive
› May 3, 2004
Something is Brewing
Arturo, myself, and others are working on a new online store for SDWindham, providers of fine tea, and we just posted a splash page announcement. I bring this up here for a specific reason: after reading the 37 Signals book Defensive Design for the Web, I became anxious to apply the useful techniques therein. The suggestions are very well thought out and presented in a handy-for-reference manner. Collectively these tips show how we can provide a more pleasant website interaction experience through a little attention to detail and and a lot of common sense.
Even though the SDWindham site is just a splash page at the moment, you'll see a little mailing list signup form on the left - and hence a good reason to start applying these principles. If you put a non-email address into the form (e.x. "blah"), you'll see what I came up with for a friendly, clear and specific error result. For the final site we will be expanding the error reporting with additional features such as field by field specificity, and a more global application that can be used with complex forms.
Yes the website is XHTML with CSS for layout, yes the website validates, but frankly there's something much more gratifying with paying attention to the details of contingency - namely, knowing that the "when things go wrong" instances are covered, and the experience of interacting with the website is better for everyone.
Getting all this stuff correct isn't easy though, there's quite a bit to keep track of. Even for just a splash page, for instance, I'll still need to make an informative 404 page for the site very soon. Thankfully I can refer to the 37 Signals book as a sort of crib sheet of good and bad practices.
Comments
1. May 3, 2004 05:02 PM
2. May 3, 2004 05:11 PM
Nate Posted…
Good question - I was wondering if anyone would notice. There's a subtle steam coming from the tea cup rendered in flash, although I might have made it too subliminal. I don't think it will cary through to the post-splash-page website, but it was fun to experiment with.
3. May 3, 2004 06:05 PM
George Posted…
Really good stuff. Makes me want to put the 37signals book to the top of my reading queue.
One very minor quibble: The form uses the label "Email Address" while the error message uses "E-mail address". I would make them consistent and go with "Email". I detest the hyphenated version. Feels so 1998.
4. May 3, 2004 06:25 PM
Nate Posted…
Thanks for catching that George - I've updated (hopefully) all instances of e-mail to Email. It might be a minor detail, but it these things that make a difference in the end.
Speaking of which, I forgot to mention that after reading the book, I quickly came to realize just how many loose ends need fixing here at web-graphics - there's a lot. Hopefully sometime this month I'll be able to carve out a chunk of time to work on 'em.
5. May 4, 2004 12:02 AM
George Posted…
Much better but at the risk of coming off as a jerk, I would expect them to be lowercase in the error message since they exist in a sentence structure and are just nouns at that point. I'd also kinda want to see the error come up in the existing page layout so that I don't lose context. So if the error acted as an overlay on the landing page, this would really make this whole thing sing I feel.
This whole discussion also makes me think of some other places I've noticed some interesting passive error correction or defensive design in 37signals terms. Firstly, if you attempt to add a printer via IP Printing in OS X, notice how it constantly checks that the IP address is in a valid format. Pretty slick. Also, try filling out a form on Macromedia's site or better yet explore the Flex Library. All of the relevant controls have nice defensive design baked in.
I've included something similar in some of Builder's contextual editors that include fields that only accept numbers. Essentially, a Javascript only accepts keypress of integers, etc when focused in such a field. It's a little out there for a web-based application, but it reduces the amount of needless errors. Although, I recently entered a web form that did something similar but didn't recognize the delete key which was very annoying. I have to check to see if we are accepting Delete and obvious editing keys such as these.
Very thought provoking though. Kinda puts UE design in a new light, regardless of web-based or not. This is where UE should be going, I feel.
6. May 4, 2004 10:21 AM
7. May 4, 2004 10:56 AM
Nate Posted…
George - good point, I just lowercased "email". I actually had a similar thought about the showing errors in context issue. For this splash page I'm not sure how it could be done easily because other major elements would still need to be replaced. The overlay is a supercool idea, but I'm not exactly sure how to accomplish something like that.
This is all a good heads-up for us as we finish the "real" website design, we can make sure there is visual and structural space for in-context error messages.
thinking aloud: it would be kinda neat if there was some sort of contingency design contest - most thoughtful error message and the like? Maybe not.
8. May 4, 2004 11:02 AM
baby bunny Posted…
Most thoughtful? Here is my shot at it... "Um, I don't mean to bother you, but I think there is something wrong. No! Not with you, it's me...your browser. I'm sorry, I just can't do what you ask of me. I will try harder next time, I promise. By the way, you look really great today. Did you lose weight?"
9. May 4, 2004 01:26 PM
Lon Posted…
I have a different opinion as to the friendliness, clarity and specificity of the error result.
Why do you write 'does not appear to be valid'? Something is valid or it isn't. Whether or not it appears to be valid is of no significance to the user. Just say it's invalid and get done with it.
The same goes for the next line: fewer words is better.
My suggestion: Your email address is not valid. A valid email address looks like: name@domain.com
10. May 4, 2004 01:42 PM
Nate Posted…
Lon, I definitely agree that shorter is better. I think "Your email address is not valid." is maybe a little to short, and also could be misconstrued. It's not their email address that isn't valid, it's whatever they entered that is not a valid email address. I also wonder if non-techy tea drinkers know what "domain" means (which I also used). So, to make the message shorter, perhaps this is a good way to word it:
The email you entered didn't work. A valid email address looks like: name@something.com
For the record, here are the other error messages:
- The name you entered is too long. Please enter no more than 50 characters for your first name.
- The email address you entered is too long. Please enter no more than 100 characters.
- This email address is already registered for our notification list.
11. May 4, 2004 03:06 PM
darrel Posted…
I agree completely with the statement (my paraphrasing) that seeing a site work well is more gratifying that making it look nice.
Minor issue: The site, like this one, suffers from a problem in FireFox. If your viewport is narrower than the page, the left side is cut off and there is no way to scroll to get to it. The solution is to give your BODY a min-width style equal to the width of the main container div in the body.
12. May 4, 2004 05:10 PM
Nate Posted…
Darrel - I never noticed that, and I looked at the sites in Firefox. In fact it took me a while to figure out what the problem was, but now I see - for those with limited resolutions this could be crippling problem. Thanks for the tip, I'll apply it.
13. May 4, 2004 07:44 PM
Lon Posted…
"The email address you entered is too long. Please enter no more than 100 characters"
And what if my email address actually is over 100 characters? Should I enter less? Would that fix the error? It might validate, but it wouldn't be my email address anymore.
As I see it there are two possibilities: either I mis-entered my email address, but there is no way you could really know. Or my email address is too long for your system.
In either case you should tell me you can't handle email addresses longer than 100 characters and ask me to enter another address please.
But I do agree this is nitpicking or whatever it's called in english. In Holland we call this 'miereneuken' (antfucking).
14. May 5, 2004 03:09 AM
radu Posted…
"This email address is already registered for our notification list."
if I submit my email twice, then I get this error message, but I don't get the option to go back to the main page.
great use of flash, Nate! I thought first, my screen is going mad!..
Ireney Berezniak Posted…
Is there a reason for using Flash for the header? Curious ...