Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • 7 Steps To Useable Forms

    Încărcat de

    Irwan Supriatna
    28 vizualizări3 pagini
    Keith Reichley: don't force users to scroll down to the first input field. Use the BODY onLoad event to save your visitors a click of the mouse. Don't ask for too much information, especially if it seems irrelevant.

    Descriere originală:

    Titlu original

    7 Steps to Useable Forms

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Keith Reichley: don't force users to scroll down to the first input field. Use the BODY onLoad event to save your visitors a click of the mouse. Don't ask for too much information, especially if it seems irrelevant.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    28 vizualizări3 pagini

    7 Steps To Useable Forms

    Încărcat de

    Irwan Supriatna
    Keith Reichley: don't force users to scroll down to the first input field. Use the BODY onLoad event to save your visitors a click of the mouse. Don't ask for too much information, especially if it seems irrelevant.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 3

    7 Steps to Useable Forms

    By Keith Reichley | September 7, 2001 | Usability Ever the dutiful husband, I used to veg on the couch with my pregnant wife as we watched the most relaxing show in television history: "The Joy of Painting" hosted by the late Bob Ross on PBS. The ease with which he could knock off a landscape painting in twenty minutes made this the perfect Saturday morning fare for people not in a hurry to be anywhere. Every painting, if memory serves, had at least one happy little cloud in it. Each week Bob would say, "I feel a happy little cloud coming on, dont you?" We sure did. Now, shift to the harsher reality of the Internet. Think of your Website as one of Bobs landscape paintings. Youve got a great navigation scheme in the foreground, and a wealth of valuable and well-written content in the background. Pretty. But what about your sites forms? Are they "happy little forms", or are they obstacles that drive away potential customers because theyre confusing, obtrusive, lengthy and unresponsive? Follow these 7 steps to make your forms and your users happy:
    1) Get to the Point

    You may be asking for too much information. Users are reluctant to volunteer information, especially if what youre asking for seems irrelevant. For example, if you have a newsletter sign-up form, users will usually feel comfortable enough to provide their email address, but probably not their street address, age, and gender. If you do ask for extra information, clearly indicate why youre asking for it and what you intend to do with it. Dont force users to scroll down to the first input field. Ive seen forms whose input fields are buried under a scroll or two of introductory text. If you really need a short novel to help your visitor understand the form, consider placing it below all the input fields. An anchor link at the top of the form can take a visitor to the text as needed.
    2) Provide Field Focus

    This easy "nice-to-have" puts the cursor directly into the first input field ( first_name) when the form is displayed. Use the BODY onLoad event, you can save your visitors a click of the mouse: 1. <BODY onLoad="document.forms[0].first_name.focus();">

    3) Add Help Information

    Sure, fields labeled "First Name" and "Last Name" dont need much of an introduction, but less obvious and more obscure fields might. Also, it wouldnt hurt to provide some direction in situations where formatting is an issue. For example, for a date field you might prompt the user with the desired date format: 1. <INPUT ... <br>

    2. 3.

    onFocus="window.status='Enter date in MM/DD/YY format'" <br> onBlur="window.status=''">

    The onFocus and onBlur attributes in your <INPUT> tag will display and remove, respectively, your helpful hints in the browsers status bar. Another and probably more visible method of providing field-level help information is to "pre-fill" the value of the INPUT or TEXTAREA element: 1. 2. <INPUT ... value="- Help info goes here -" <br> onClick="document.forms[0].first_name.value='';">

    When the visitor clicks into the INPUT box, your default value disappears and the visitor is ready to type.
    4) Use Tables for Alignment

    Another way to increase the usability of a form is to align the forms elements in a twocolumn non-bordered table the labels in the first column with the input boxes, selects, and checkboxes etc. in the second column.
    5) Control Input Field Size

    Provide visual clues in terms of expected response from users by varying the width of the input fields. For example, for a "middle initial" field, you would replace the default wide input box with a much smaller one by adding the SIZE attribute: 1. <INPUT TYPE=TEXT NAME=middleinitial SIZE=1 MAXLENGTH=1>

    Add the MAXLENGTH attribute if you want some control over the amount of text that can be entered into the box. For textareas (larger multi-line input boxes) use the ROWS and COLS attributes to control the size of the display: 1. <TEXTAREA NAME=comments ROWS=3 COLS=40></TEXTAREA>

    Be sure to test these settings in various browsers. IE and Netscape render them differently.
    6) Provide a Clear Confirmation Message

    What does the visitor see after the form is submitted? At a minimum you should clearly confirm that the form has been received send them to a receipt message display on a Web page. You should also tell them what happens next "Your feedback will be answered within two business days", or "Your order will be processed within 72 hours". While youre at it, provide clear and prominent navigation to guide them to other logical destinations. Depending on the purpose of the form, sending an email confirmation can also be a real service to the submitter. In your email, restate your confirmation message along with the data

    that the visitor submitted. For example, for an order form, include in the email the product, price and shipping information that the customer has submitted.
    7) Beyond Happy Little Forms

    This is a bonus for all the work youve done in steps 1-6 to optimize your forms. Tired of the same old look for INPUT and TEXTAREAs? Add some color, change borders and get crazy by applying a style sheet to your form elements. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. <style> <br> input, textarea, select { <br> font-family: Arial, sans serif; <br> font-size: 20pt; <br> color: #ffffff; <br> background-color: #000000; <br> border-width: medium; <br> border-style: ridge; <br> border-color: #00FF00; <br> } <br> </style>

    As a Web professional, I dont generally recommend this kind of tomfoolery, but if your sites a fun thing where color and wackiness abound, go for it. Just dont tell self-appointed usability sheriff Jakob Nielsen that you got this from me. Ill never hear the end of it. and may happy little forms dot the skies of your Website!

    S-ar putea să vă placă și