ifoh designs: Information Foragers Of Hyperlinks & Designs

Have you ever actually asked yourself “how could this be easier for the user?”, well hopefully the answer is YES. If not, you need to take a serious step back and figure out what the hell you are doing in this profession. Anyway, as designers we are constantly bombarded and sometimes perplexed at just how you can make things better.

You mean I have to use my hands? That’s like a babies toy!

Thank you “Back To The Future: Part 2″ for that lovely quote, but I think it really applies here, and in almost everything we do. Anytime we give our users a call-to-action we are possibly setting ourselves up for disappointment. Don’t you wish you could tell your users “Noo! start here, and read everything, then go here…” That will never happen, as we have probably all seen to be true. Our job is to give users exactly what they might expect when they click, or input something.

Which is exactly why web forms are awful

Ok, so I think I have it all figured out, and this is just a minor fix that we should be able to wrap up and put a close on fairly quick, ready? The real problem with web forms, is that you have to put stuff in them.

Think about it. If users did not have to put any of their information into forms over and over again, you wouldn’t have any trouble at all!

Take for example, when registering or filling out a form users are faced with many different complications right away. We as designers have the freedom and ability to call our form labels what we want, not use labels at all, make them different colors, sizes, shapes, you know…all that stuff that confuses people. That is all part of our artistic freedom, and the beauty of CSS, which coincidently can also lead to pain and discomfort for some.

Microformats has done a nice job with creating a standard for lots of common and repetitive markup. The focus here is to get designers using a consistent or standardized approach to building their forms, or what have you.

Common Mistakes

• * margin:0; padding: 0;
  • You might have seen this approach used for resets, but often times it can cause an unsightly after effect on forms as the universal selector grabs everything, including inputs, and the like. There are much better resets available to you out there that keep this in mind.
• Font Size
  • Having a good solid style sheet to work from is key, and a good base font size. This is especially true when it comes to forms, as you do not want to confuse users anymore than you have to.
• Colors
  • Some overlook this, but I think it is important to at least be aware of if nothing else. Certain colors are pre-programmed within our heads as to what is associated with them. Red is usually a clear indication that something should have attention paid to it, or is wrong. Think back to elementary school when the teacher would use a nice huge red “F” on your tests. The same goes for green, as it is a more “in the clear” color or “go” (stop lights). Use them appropriately.
• Too many questions
  • As I mentioned before in a previous post, you do not need to ask so many questions right off the bat. This type of approach will drive potential customers away from your service.
• Forcing users to do your job
  • Just this morning I saw on a new CSS Gallery site a submission form asking me to upload an image with certain specific dimensions. Now I had already begun to fill out the form, but when I got to this section, BYE BYE. There were actually three separate upload forms with tiny little font for the specs. Please do not be lazy. PHP or equivalent languages will allow resizing to be done on the server. Do not punish your guests.
• Repeat email addresses
  • This is almost the same deal as the one above, yet we still see this going on. If this is an attempt at spam filtering, it is an awful one at best. You should be doing the error checking within your scripts, not the other way around. The only one I can possibly see having a need for double entry would be the password portion, as this can be frustrating upon a return if you cannot login due to a spelling mistake.
• Poorly marked up
  • We have all the tools for the job, so make sure to use them!
• AJAX killed the radio star
  • So another biggie wold have to be when forms are not intuitive without the use of AJAX. Actually, if there client does not have JS enabled, and your form breaks…you just lost a customer. You can use both JS and a server-side technology to quality check the input, and this is the recommended method. If nothing else, lose the JavaScript.
• I lost my focus
  • If you are using JS on your form properly, then sending the focus to fields with errors in them can be quite nice, or at least some type of jump-link to the problem(s).
• Lost Input
  • This is a bad one. When you get an error it hurts real bad to go back and have to re-do if portions of the form again, if not everything. Users will become frustrated and leave.

I am guilty of some of these myself, and need to correct them as soon as I can, so don’t feel so bad if you match up on some as well. The important thing is, is that we are at least aware of these, and are proactive in not continuing to practice poor habits.

Also, this is not a complete list in any sense of the word, so feel free to add to it!

• Posted at 9:28 am in resources
• Leave a comment