Forms for people

    Now we will talk about web forms. From the height of my own short flight, I managed to accumulate some experience and thirst will certainly share it. All that will be discussed below is not a turtle on which elephants stand. It's about tape on which the turtle is holding.

    So…

    First - Where are the legs from?


    Dear friend, for starters, I would advise you to put aside funds for drawing and typesetting forms. We will start with a white sheet. And the first thing that is best guided by is a series of questions for oneself, the project manager, developers and other people who take part in this epic creative action.
    • For whom is the form made?
    • What information is needed to understand and fill out the form?
    • What is the result of filling out the form?
    • What opportunities do we have?


    For whom?


    Any target audience requires and implies its own, specific nuances used in forms and this is a fact. Our task is to find a middle ground and not harm anyone.



    Consider the simplest example. The registration form of the software support forum from SuperMegaSoft LLC is against the registration form for placing a diamond order on the website of Biryulka jewelry electronic store. Forms are about the same thing. But, in one case, we are dealing with users who will intuitively recognize concepts such as "E-mail", "User Agreement", "Account", and in the other case with magical organisms that will probably hear these words for the first time.

    Thus, we postpone for a short time all this data, so that we would be included in the future.

    What information is needed?


    Perhaps this is the most important question that should be fully answered.

    Any form is: Elements of direct interaction (constrols) with the user and accompanying reference information. Let's find out the following rules for ourselves:
    • The form must be indicated. Title, description, explanation. The user, even out of the corner of his eye looking at the form, must immediately understand what he will have to face. This rule is.
    • Designations should be clear. Use concepts within the same language in which the entire site is written, or within the chosen localization.
    • Each input field, text field implies the input of some information. Initially, we think from the most pessimistic point of view - a dumbass sits in front of our form. So, he doesn’t understand what to write, even if there is a signature “Name” addressed to this field. Sign in which format, quantity and in which language should be entered in the fields. Show abstract examples.
    • Designate and separate the sequence of filling in the data on the form. Divide data by type into groups. Provide filling out the forms in a few steps if it is complicated (For example, when the form includes more than 10 fields to fill out).
    • Help users. Think of the easiest ways to fill out forms for users. Remember, saving time for visitors directly increases visitor loyalty in the future.
    • Do not overdo it. Do not forget that there is always the opportunity to get rid of any elements in favor of simplifying the form.


    We believe that we already have an invented list of information that we certainly need from the user for our server.

    Separate the grain from the chaff. We select the information that is mandatory and must be indicated. We separate from this mass the one that even our user does not need at all, but the server needs (ID, Sessions, referrers, etc., etc.).

    What is the result?


    The result of the form is the step that follows after sending the form data to the server. The saddest thing about him is that quite a lot of creators forget about him, or even worse, they forget about him. Can you imagine how much work a user spent hunching and filling out data in our epic form? He must be praised! Or, as a last resort, to notify that he tried not at all in vain, and he expects even more in the future.

    What are the features?


    You have it all! The current possibilities of the creators are unlimited. We have: Client and Server. The client is usually called the person who does not know you at all, but he sees the result of your work and certainly wants to use it. Although, to be honest, everything is much more boring, in our case we will use the concepts of “Form”, “Data”, “Server”.
    Technology. Since we're talking about Web forms, we have a whole tree of possible paths.
    • The usual form with the response information as it is checked on the server.
    • Using javascript to validate and submit information on a form.
    • Using Ajax technology.

    All this is very cool. To use or not to use this or that technology is up to you. Each of these technologies is created and works for you and the user to the benefit. At the moment, the percentage of users for whom these technologies will not work are negligible and continue to be systematically destroyed.

    Design and all that


    We compose the form so that it fits into your design and takes up space in proportion to the functions that it performs.
    Form is generally a moody thing. I will not tell you exactly how to draw, for reasons known to all. But, in order to avoid situations when "design is drawn by the best programmers" I will try to focus your attention on the following aspects:
    • The amount and correctness of the information submitted in the form directly depends on how correctly, how quickly and how often the user wants to fill it out altogether. To increase the "productivity" of users at times, sometimes you can just add one word.
    • The readability of forms has not been canceled.
      • Group
      • sign elements
      • Prioritize
      • Remember indentation. There is a distinction between how spaces between elements, signatures and tips can disrupt the correct perception or improve it to the maximum.
    • Beauty requires sacrifice. By betting on prettiness, you will definitely try to violate the general concept of perception. Do not forget to look back.

    Sectional shape


    We consider the elements of the form ideally.

    Lyrical : Designations raised in the <label> tag and tied to elements are doubly useful because they automatically focus on filling out a form element when they click on them.

    Entry field

    • designation (label)
    • description
    • data entry explanation example
    • explanatory text for erroneous data (error text)
    • Input Limit / Correction
      • Character and letter sets
      • Symbol Register
      • Minimum / maximum amount of data entered
      • Read-only mode



    Drop-down list.

    • List designation (label)
    • Description
    • List, and Groups
    • The item selected by default.

    Text field



    • Designation (label)
    • Description
    • Default text
    • Extension of data entry functionality (text formatting)

    Button

    • Identification
    • Press Lock Mode (disabled)

    Lists of radio buttons, switches (radio / checkbox)

    • Group designation
    • Description
    • The designation of each of the elements (label)
    • Selection Lock Mode (disabled)

    Date Indication / Selection Element



    A very wide range of opportunities to improve and simplify the choice for this element. From the usual input field with the requirement to fill in the specified format (for example DD.MM.YY) to the widget providing a convenient choice.

    And so on. You can continue in the same spirit almost endlessly, because there are no laws as such, and everything develops to variations and possibilities regarding current technologies and browser capabilities. Further, I propose to continue by ourselves, but before that ...

    Example



    Authorization form


    This kind of form is used most often. Making discoveries is too late. However.

    Fields and information:
    1. Explanatory text. This is a short story about what is happening in this form. Why is it and what will it lead to. It is believed that the majority knows about this. For those who do not know, we refer to the information, which sets out in detail what the user will get if he can use this form after registering first.
    2. Username / Email / ID / Login. Mandatory user authentication field. We definitely need to make it clear what exactly needs to be entered in this field. The most common mistake in this field is made by developers, designating it as Login, although there you must enter E-mail as an identification. Or ID. Or "Username", although at first glance it is the same as "Login".
    3. Password / Code. This field is the most mysterious field in the world. I can only say that it is best to make it so long that the average number of stars is in sight, and not disappear due to the short length beyond the borders. It prolongs life.
    4. The ability to save entered data for a certain period in cookies. Usually - a checkmark with the designation (Remember me / Save data / Remember). It is very important that not all users understand that they are not photographed here and do not remember the shape. Try to refer to reference material
    5. Button destroyed send data.
    6. Additional information, links.

    Authorization does not require anything complicated.

    Check the availability of data in two fields, and if something is wrong - remind about it. How we will check is up to you. Or after an authorization attempt to display data. Or, during the input, check the validity of the entered data ...
    At the end of authorization, redirect somewhere.

    Total


    I really hope that the prepared material has helped you, and the world will become noticeably kinder from this. Thanks for attention.

    Also popular now: