Jquery mobile form. Why you should never use text headings inside a field. Provide the ability to save data

UX designer from IBM Zoltan Collin.

To bookmarks

Zoltan Collin

Dropdown list forms seem obvious design solution: They're easy and cheap to create, they don't take up too much space, they automatically confirm the information you enter, they're supported by all browsers and platforms, and users are already used to them.

Designers most often use drop-down lists inappropriately, but in the opinion of the director of Google product Luke Wroblewski, this pattern should only be used as a last resort.

Let's look at some restrictions:

The dropdown options are invisible until the user clicks or taps the form. In addition, at first glance it is impossible to predict how many lines will be in the list - two or fifty.
Selecting an option from a drop-down list is a multi-step process, especially on mobile devices ah: first the user needs to touch the form and open the options, scroll down and find the one he needs, select it and close the list.
Dropdown lists make designers lazy because it's so easy to add all possible options to one list without any prioritization. Because of this, the dropdown list is very similar to another template - the "hamburger" menu.
Scrolling through long lists like selecting a country is a nightmare. Especially on mobile devices, where keyboard search is usually not available.
On some devices, the field to display options is very small, so swiping can be a nightmare.

Quantity visible options list on iOS may seem extremely insignificant

The good news is that there is a large number of alternative elements for data entry, which in many cases will work better than drop-down lists.

Estimate the number of options

You should not use drop-down lists for decisions where you need to choose one of two options. Try a checkbox or radio button instead.

For small amount For mutually exclusive options, a form in the form of radio buttons or Segmented Control buttons is suitable. The user will immediately see all available options, and will not have to expand the list.

Example of using Segmented Control buttons

The number of visible options depends on the screen width and text length. However, you should not use more than five options

Use an input form with a filtered dropdown list for a large number of exactly certain options, when the user knows exactly what he needs to find.

Instead of scrolling through the entire list, users can enter the first letters and select filtered options

For large and diverse lists, it is better to use existing user data to ensure that popular answer options are included in the list. In this case, 90% of users will be able to immediately select the required option, and the remaining 10% will click on the “Other” option, which will be clarified in the next question.

And although “Other” is not the most elegant solution,prioritization can improve the UX for most users.

Rate your preferred input form

One of the benefits of a dropdown list is that users don't have to type as much. However, if you need to type a little, and the data is requested quite often (for example, personal information), then it is more convenient to enter them rather than select from a list.

On mobile devices, the easiest way to enter your year of birth is by using numeric keypad, not a dropdown list

Generally speaking, the numeric keypad is the most effective method enter a numeric value.

Even if the list values are sorted in order, it may be easier for users to type them in by hand instead of scrolling through them.

If it is important for you to confirm the data that a person enters, use an input form with a filtered drop-down list.

For example, when the user needs to specify a state, filter the list available options maybe just one letter

This is especially important if the sorting order of the list elements is not completely clear.

For example, users do not understand by what principle currencies are sorted. Make it so they can search by both its name and abbreviation

The same applies to the list of countries.

For integer numbers - such as the number of passengers or items in a cart - it is best to use a stepper. It will allow users to increase or decrease the value with one click.

For fractional numbers or variables located on a scale, it is best to use a slider.

This article is an announcement of new functionality.
It is not recommended to use the contents of this article to learn new functionality.
Full description new functionality will be provided in the documentation for the corresponding version.
Full list changes in new version is provided in the v8Update.htm file.

Implemented in version 8.3.11.2867.

We continue to develop the mobile platform, adding functionality that is already available in the platform for personal computers. In addition, we are developing specific platform capabilities that are relevant only for mobile devices. We will now tell you about some of the most important improvements.

Scheduler

The object model of the “mobile” scheduler has not changed, but the way the user interacts with the scheduler has changed, since the methods for entering information on mobile devices differ from those used on desktop computers.

For example, quick editing element is performed by a single click on the element. Long press calls context menu, and to the appearance of markers that allow you to stretch the element. Dragging is done by long pressing and then moving your finger.

Scrolling the entire planner is done by scrolling with one finger, zooming with two fingers, and so on.

A feature of the current implementation of the “mobile” scheduler is that it does not yet support printing.

Formatted document

Another “new” object that we have added to the mobile platform is FormattedDocument. From the user's point of view, a “mobile” formatted document differs only in that its editing panel is built into the control itself, and is a logical part virtual keyboard. You, as developers, are not required to separate addition to the configuration. The editing panel has a different appearance depending on the type of mobile device (phone or tablet).

Preview of the “mobile” form in the configurator

In the configurator, when developing a form, we added the ability to see how your form will look on a mobile device.

In the command panel you can select an interface option Mobile device, and see what the form will look like in standard orientation.

Here you can rotate your mobile device.

In addition, we have given you the opportunity to choose from large number common devices.

In addition, you can view mobile forms in three different scales:

Pixel to pixel- when a mobile device screen pixel corresponds to a window screen pixel preview;
Actual size - when the size of the mobile device on the screen corresponds to the geometric dimensions of the device;
By window size- when the display scale is selected in such a way that the “mobile” display area fits into the preview window without scrolling.

Batch processing of spreadsheet documents

We have added a number of new objects to the mobile platform that allow you to create packages of displayed documents. This functionality is similar to that found in the PC platform. Thus, you can now, for example, send several documents for printing at once.

Development of deliverable notifications

We have implemented support for the Windows push notification service (WNS, Windows Notification Services). Now you can use the functionality of delivered notifications when running a mobile application on platforms of the Windows family.

We have also reworked the error handling system for sending delivered notifications. In situations where an error was previously thrown as an exception, it is now thrown as a value that you can handle in the built-in language.

Hardware acceleration in the Android operating system

On operating versions Android systems 4.4.2 and higher the mobile platform now uses hardware acceleration. This allowed us to increase the interface rendering speed by 1.5 – 3 times.

People who use your mobile app or website, pursue a specific goal. Typically, what stands between the user and his goal is form. In fact, forms are considered the final step in the process of achieving user goals. This is why it is so important that the user fills out the form as quickly as possible and without any obstacles.

Follow these seven rules to create simple, clear forms:

Rule #1: Forms must be compatible with the way the user enters their data

Make sure that form fields are not obscured by interface elements (such as the keyboard). As the user fills out the form fields, automatically move the fields up.

Rule #2: Minimize the number of input fields and the user's need to type

The longer and more complex the form looks, the less likely it is that users will want to fill out empty seats, especially on small screens. Reducing the number of input fields will make your form less cluttered, especially when you're asking the user for a lot of information.

Make the form as simple and short as possible

But reducing the number of fields is not enough. You should also pay attention to the effort the user expends when entering data. Printing requires a high degree of interaction; there is a high probability of errors, even when entering from a full-size keyboard (especially on a touch screen).

Therefore, try to minimize the need for typing and user error.

Smart defaults

Smart defaults help users fill out all form fields faster and more accurately. For example, you can preselect a user's country of residence based on their geolocation data.

Automatic detection location will save the user time searching for a hotel room

Radio buttons for similar but mutually exclusive choices

When the user is faced with choosing from a list of options, consider using a horizontal list of tags. This allows for more efficient use available space screen.

Sliders for min/max price or budget range

Consider using sliders for fields that contain prices or budget. This way the user can move the slider to the minimum/maximum value. The slider is easy to move horizontally, and you can easily customize this action using visual cues. But remember that the numbers should not be hidden when interacting with the slider (especially when using your thumbs).

AirBnB slider to select price

Rule No. 3: Form headings must be either above the fields themselves or floating

Headings tell the user the main purpose of a field, and clear text is one of the main ways to make a UI more accessible.

Why you should never use text headings inside a field

In-field headers (or placeholders) are text that sits inside a form field that disappears as soon as the user starts entering their data.

Headings inside the field
While in-box headings look good from an aesthetic point of view, this benefit is often overrated. The main mistake is losing context. After the user clicks on the field, the inscription disappears. And, accordingly, he cannot verify that he wrote exactly what is needed.

The text inside the field is not the most best replacement visual header

Also, some users who see that something is already written in a field may think that the field is already pre-filled and they do not need to enter anything else and may ignore filling.

Why left-aligning field headers is bad for mobile devices

The main thing to consider when using left-aligned headings on a mobile device is the screen size and aspect ratio. If the title on the left is opposite the field, then with a vertical screen orientation, you will have very little space left for the field itself. This creates some difficulty in use because there is not enough space left to display what the user types. Not being able to see the text entered creates a problem for users because it prevents them from quickly noticing an input error before submitting the form.

It is very difficult to notice an error if the data is not completely visible

Top Header or Responsive Header

Form titles should be at the top of form fields so that users can see what they are filling out and how. The main advantage of placing form headers above the form is that you can stretch the form across the full width of the screen and make it large enough for data entry (for example, with a font size of 16 pixels). Additional benefit It will be possible to write clear and understandable headings (not limited to 1-2 words).

The main disadvantage of placing headers above the fields is that the entire form takes up more vertical space, which means the user needs to scroll the screen. However, this is not a very serious problem - today, everyone is used to scrolling.

Alternatively, you can use responsive headers to ensure that users have filled out the field correctly. The placeholder text is displayed by default, but after tapping on the field and entering text, the placeholder text moves to the top of the field, as shown below.

Rule #4: Form field validation must occur in real time

In an ideal world, users would fill out the form necessary information and will successfully complete this task. IN real world, users often make mistakes. At the same time, users do not like the fact that after the entire process of filling out the fields, they reach the “send” button and discover that they made a mistake. It is correct to inform the user about success/error in the field immediately after filling it. The validation message immediately informs the user that the information entered is correct. This approach allows users to fix mistakes faster and without having to wait for errors to be displayed after clicking the submit button.

If you expect specific answers to questions, you need to immediately show what needs to be entered and in what form.

String validation may also be a solution. In the example below, you can see good example, how you can correct a potential error.

Rule #5: Display the keyboard layout according to the input data

Users prefer the corresponding keyboard layout in the application. For example, when the user is asked to enter a credit card number, show only digit entry to encourage the user to enter numbers rather than symbols. This will increase the filling speed and reduce the amount possible errors input.

You need to make sure that this opportunity implemented on the entire application, and not on its individual parts.

Rule #6: Provide useful information in context

Sometimes, there is a need to provide relevant and useful information to simplify the process for the user to complete the form. But such accompanying text should only be used where it is really needed:

When planning dates, users appreciate context such as a built-in calendar for determining the days of the week. This reduces the need to exit the app to view the calendar, reducing the risk of the user being distracted from their primary task.

People may be concerned about the security of their data, so you need to show them that their data will not be shared with third parties.

As a rule of good manners, you should not stretch your explanation to 100 characters.

Rule #7: Use a flexible format

Some tasks require the user to accurate information. But, at the same time, requiring the user to provide information in a specific form may go against the principles of good usability. If you ask the user to enter digital information (such as a phone number) into a form, be flexible and create screens that can support different formats input and display information in the most user-friendly form to prevent errors.

Don't use a fixed data entry format

Conclusion

The user may have all sorts of doubts when filling out the form, so you should try to make the process as simple as possible. All the tips described in this article can significantly improve the usability of forms.

JQuery Mobile automatically adds styling to HTML forms, making them more attractive, more user-friendly to the touch.

JQuery Mobile Form Structure

JQuery Mobile to use CSS to style elements HTML form to make them more attractive and easier to use.

In jQuery Mobile, you can use the following elements forms:

text input field
Search for an input field
radio button
checkbox
Select Menu
slider
Flip toggle switch

When using jQuery Mobile Form, you should know:

<Форма>the element must have a method and an action attribute
Each form element must have a unique "ID" attribute. The ID must be unique on all pages throughout the site. This happens because Jquery Mobile the one-page navigation mechanism is presented in such a way that many various pages simultaneously
Each form element must have a label. Settings tab For properties to match the element id

examples

Try it »

To hide a label, use the UI-hidden-accessible class. This is often used when you attributes an element as a placeholder tag:

examples

Try it »

Advice: We can use the data-net-BTN="true" attribute to add a button to clear the contents of the input field (the X icon to the right of the input field):

examples

<Ярлык = "имя_файла">Name:
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">

Try it »

jQuery Mobile Forms icon

Button code form standard HTML <вход>element (button, reset, send). They will automatically render styles, automatically adapting mobile devices to the desktop:

examples

<Тип входного = "Сброс" значение = "кнопка сброса">

Try it »

If you need to add additional styles to<вход>button, you can use the following data-*attributes table:

Button to add an icon:

<Тип входного = "Сброс" значение = "кнопка сброса">

Try it »

Container field

To make labels and form elements look more suitable for wide screen please or

the element surrounding the label/form element is used with the "UI-fields contain" class

examples

Try it »

Advice: To prevent jQuery Mobile from automatically adding styling interactive elements, role data usage = "no" attribute.

Ask any adult what item they cannot leave home without, and they will answer you: keys, wallet, mobile. With the growth of mobile device manufacturers and the release of new and improved models, it is simply impossible not to succumb to this growing trend.

Data from 2014 shows that in the US alone, 90% of adults have a mobile phone, of which 58% are smartphone owners. 42% of Americans own tablets. In a report, eMarketer predicted that by the end of 2014, people will be using about 1.75 billion smartphones worldwide.

These figures only confirm that mobile devices today have turned from luxury items into our everyday necessity. If in the past, phones were only a communication tool, now we rely on them when we work, relax, or go shopping.

Optimizing forms for mobile devices

The rise of smartphones doesn't just make shopping easier for consumers. This is a welcome addition to the already growing online shopping industry. Over time, not only online, but also offline businesses began to understand the importance mobile phones, along with other promotion channels, in obtaining customers.

Forms feedback play a huge role in online shopping, they are also a core element in the mobile platform. We usually come across them when we make a purchase and the site asks us to provide specific information such as name, address, telephone number and information about credit card. However, many buyers find filling out forms a tedious task, which can ruin their interest. Additionally, online shoppers typically face challenges such as lack of time or poor internet connection, which can negatively impact your mobile site's conversion rate.

Listed below are 10 ways to speed up your customers' mobile transaction performance and also make their online shopping experience enjoyable.

1. Include only the most important details in your form.

If you don't have the patience to fill out tons of forms on a web page while you're shopping online, then your customers probably feel the same way. There is a difference between filling out a Full-On form and filling out a simple form to purchase something from an online store. Compared to the latter, the first version of the form can be quite annoying, and you risk losing the client when he gets tired of filling out the form, especially if he sees that he needs to provide three different phone numbers.

Make online mobile shopping convenient by providing your customers with a simple yet complete order form. Only ask users for valid important information, such as full name, address Email, phone number, shipping information and credit card information. You can also include a drop-down list of states or countries you ship to, or better yet, have your mobile app prompt for geolocation from customers. This way, you can get their address quickly and accurately.

2. Use height alignment for labels and input fields.

Smartphones have a limited viewing area compared to PCs, so it is important that you design a shape that maximizes this area. One way to do this is to use vertical alignment for your form fields. You see, when for a form it is used horizontal alignment, there is a possibility that not all the information will fit on the smartphone screen, and the label or input field may be lost. Such order forms can look cumbersome to buyers, which can reduce their interest.

On the other hand, if labels and input fields are positioned vertically, it will be easier for your customers to immediately see the information they are asking for, including what they need to fill out. This will help them be confident in the security of the transaction. This layout will also prevent shoppers from missing any input fields, or worse, filling out the form again.

Plus, it will minimize the visual clutter of your shapes. “What is this” and “More details” buttons can be placed on the mobile version of your website. If these buttons need to be placed on a form, then position them so that customers are not distracted from making a purchase.

3. Use pull-down menus and drop-down lists

Another limitation caused by the limited viewing area on a mobile device is the endless scrolling we have to do to view an entire page or fill out a form. Although scrolling the screen is quite common, smartphone users would prefer to have by quick means shopping for goods online.

Using pull-down menus and drop-down lists can help you reduce the time your customers spend filling out forms. Instead of forcing buyers to choose from huge amount options, you can group individual products into categories. Pull-down menus are also useful for linking descriptions of your key products that you want to put on one page. Just remember not to start describing them while the menu is expanding.

4. Use adequate selection lists

When drop-down lists or pull-down menus don't fit your mobile site forms, you have two great options for mobile forms: predictive search input fields and private drop-down lists.

Predictive search input fields allow your customers to search for the product or service they need by keywords, and also displays a list of all similar results. This type of form is ideal in cases where the search is expected to take a long time, or when there are a number of products that do not fall into separate categories. Closed drop-down lists, on the other hand, work well for lists of specific menu items located in in a certain order, for example in alphabetical or chronological order.

5. Easy input data entry

You've probably come across input fields on forms on both web and mobile sites. Sometimes they are divided into 2-3 parts, such as name, address, telephone number. And although this works on sites, on their mobile versions This use of forms is not always appropriate.

Most often, splitting the input data requires mobile shoppers, fill out all three (or two) input fields in order to simply respond to one label. If you're going to overdo it in the same form, your customers may lose interest in the process. In addition, the separation of input data may be perceived ambiguously by clients, or even confuse them. When designing forms for mobile platforms, use more simple fields input instead of separating them. For example, instead of having two separate fields for first and last name, use one. This will help your customers complete the form faster.

6. Format your form buttons

The “Confirm” button is last step in online shopping, as well as the most important button on the form. If so, then you should arrange it in such a way that your customers remain involved in the process of filling out the form.

Make the “Confirm” button attractive by setting its width to 1/3 of your form, or by painting it a bright color. And instead of simply using the words “Confirm” or “Submit,” use more eloquent calls to action, such as “Register now” or “Submit your application.”

However, avoid using too much bright colors, or making buttons that move too much because it distracts your customers from clicking. You can barely use noticeable change colors or hovering when a button is pressed so your customers know they are done with the transaction.

7. Set zoom using the viewport meta tag

Browsing on a mobile device may either suit customers or they may have to keep zooming in on the page, but if they do this accidentally, they may get lost on the page. You will be able to control this using the viewport meta tag in your forms. This will allow your customers to avoid accidentally scaling the page, or worse, losing sight of the form altogether.

8. Provide the ability to save data

Shopping using mobile phones can be challenging task for some clients, because there is a risk of clicking the “Back” button or accidentally reloading the page, and if all the filled-in information disappears, then your buyer will most likely refuse the transaction. You can avoid this possibility by providing your clients with an “Open in new tab” option when they click on any link outside the form.

Additionally, in cases where users can no longer return to previous pages, make a window with a warning and buttons like “Agree”, “OK” or “Cancel”. By doing this, you can alert your customers whether their data has been saved on the site or in the browser, and thus help them decide to proceed to checkout.

9. Help clients track their progress

Not all buyers are interested in filling out feedback forms. In this case, it will be useful for you to come up with a way to show clients that they are almost at the very end of filling it out. You can do this by placing a loading bar at the top of the form, or by using a simple timeline and percentages to show what step they are at. Remember to limit the number of these steps to save your clients time.

10. Make the form load quickly

Another factor you shouldn't forget is the loading speed of your mobile form. If the page takes a while to load, your customer may be off the hook. The very fact that your users have reached the point of filling out the form shows that they are ready to place an order. Don't disappoint them with poorly loading pages. The loading speed of your forms also depends on the number of elements you put on the page, so be careful when using huge images.

And as always, test your forms on all systems and devices

Nowadays, the variety of mobile devices and their interfaces requires us to design forms for each of them. So, make sure you test your forms against different types mobile devices, taking into account the differences operating systems, sizes and browsers. With testing, you can not only improve your form, but also make sure that it works on all available devices.