Tips for Designing Mobile forms and Inputs

preview_550

Discussions about mobile design are always attractive because of their various aspects and approaches. Mobile developers and designers are interested in sharing their views on mobile design trends, factors, and limitations, etc.

MobileFormDesignStrategies

At our turn, we keep contribute with an article discussing mobile forms and inputs designing: How to make users feel comfortable? Let’s check following tips to see if they are helpful.

Input’s Labels: Right Position and Shortened

No one denies that mobile screen is so small, and that’s a challenge for a mobile designer when the attempt to put all the elements on that little screen. Labels of inputs will be to be cut off if the designer makes a wrong decision on its places, such as on the left or right side of the screen.

Therefore, it is better for the whole screen layout to put the labels at the top or bottom. Another recommendation is to shorten labels, such as ‘Name’ rather than ‘Enter Your Name’. Don’t worry that the users may misunderstand what the input requires, as you can give explanation inside the input fields.

Elements: Kept As Simple As Possible

preview_550 Despite elements are important, it should be simplified as much as you can. For example, in the PC form, a full set of information includes street, city and zip code, but in a mobile version, only an input field named ‘Address’ is enough. Unnecessary inputs (which can be distinguished from required ones as they have no ‘*’ signal) should also be removed.

A further suggestion is to reduce descriptive tags and links. With a clear screen together with quick inputting process, your users will feel more comfortable and the form will be more likely to be submitted successfully.

Orientation: Tested Well in Both Vertical and Horizontal Direction

lk A valuable lesson on the failure of input design when changing orientation is the case of a LinkedIn mobile app. Things go well when the mobile screen is in a vertical direction, as users can input data normally. However, when the screen is horizontal, the keyboard spreads over the input fields, as shown below. Consequently, users are unable to see what they are entering, which is so unpleasant. lk1

In contrast, Google has a very smart design in the layout of Gmail. It shows clear input fields in both orientation. With this design, users can enjoy wider text box while the screen changes to portrait landscape. This is such a typical case study for mobile designers.

Tags:

Tips for Designing Mobile forms and Inputs at: December 15th, 2017 by Huy Do