Good Form, Jack - Give Them a True GUI
(Page 5 of 5 )
Why is Windows so popular? Why do people love the quick-launch bar? Why are you more likely to click the little 'save' button on the toolbar than click File > Save? You may say speed is the reason, but the speed is attained through the GUI. The mind associates a graphic with the function you wish to perform, and the eyes can easily and quickly locate that graphic for your mouse to click on.
Use this knowledge to the benefit of the ergonomics of your application. Instead of providing a standard button that says “save”, provide the image of a disk. Instead of a button that says “delete”, use the standard 'X'; it's what people are accustomed to seeing. You can make these images come alive with a little JavaScript. Here's a self-explanatory example:
<form name="form1">
<input type="hidden" name="_action" />
<img src="/img/save.gif" onclick="document.form1._action.value=
'save';document.form1.submit()" />
</form>
Now this is already much prettier than a plain old button. However, people might not intuitively know to click on the image, because they're not used to just clicking on plain old images on the web. They're used to clicking buttons, and links. So really all we have to do is make them think they're looking at a link. The following class will change the cursor to a hand, and works in multiple browsers:
.flink {
cursor: pointer;
cursor: hand;
}
Just in case CSS2 isn't available to their browser, or just doesn't render properly, always explain in detail that they can click on the image and what will happen. You can do that with the 'title' attribute. So our polished image code will look like this:
<img src="/img/save.gif" class="flink" title="Click here to save!"
onclick="document.form1._action.value='save';document.
form1.submit()" />
I absolutely guarantee that users will enjoy a comfortable GUI interface to perform the tasks that they have to within their forms. If you know the operating system or office suite most commonly used by the user(s), try to imitate the look and feel somewhat, to ensure a smooth transition into the environment you've created.
Conclusion
The techniques I explained in this article are not hard and fast rules. They are the results of years of feedback, both positive and negative. No doubt as you receive criticism from people, you will find creative ways to make your forms more user-friendly. Feel free to fire me an email, or post your suggestion to the forum!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 18 
