Beautiful, Yet Effective Examples of Mobile Form Design

Designing forms for mobile devices can prove to be something of a headache due to the screen size constraints and lack of a cursor.

As such, designers have to think through exactly how the forms can offer the best user experience by enabling excellent accessibility, ease-of-use, and making effective use of the limited height and width. One of the primary considerations in mobile form design is how a user can best interact with the form via touch.

Oddo

Oddo has given a lot of thought to the user experience of their mobile form. Due to height constraints and the use of large typography, the descriptive element of each list item has been designed to show only on selection.

This also serves to keep the visual noise and confusion down to a minimum – the options are short, legible and there are not too many to choose from.

The use of animation throughout the form design help assist the user experience in two main ways. The first is by staggering the load times of the options to give the user time to focus first on the question at hand, before being bombarded with options. The second is by disabling and hiding the primary button action until a selection has been made. This keeps the interface as clean and simple as possible, and lets the user know that that particular step is compulsory.

Overall, Oddo is a clean and highly perfected example of mobile form design, with great contrast, readability, and an overall great user experience.

PayPal

PayPal is another fantastic example of mobile form design. As a company which relies so heavily on the filling in of forms as the primary function of the app, it is especially important that they are easy and fast to fill in.

They have taken a number of steps to achieve this. The first is to implement large fields which are easy to tap on and fill in. The type is large and contrasting against the dark blue background. As well as this, PayPal has introduced a scroll effect which ensures the current form element is always in the primary viewing area.

As well as this, they have implemented a feature which reduces the opacity of neighboring fields to further cast the focus on the one they are currently filling in. This reduces unnecessary visual noise and makes the form feel a lot less overwhelming and generally easier to fill in.

The are also a number of other more standard considerations within the form design. There are clear field titles which are large and well spaced, and descriptions below each field which help provide extra assistance, should the user require any.

These are kept small and unobtrusive as not to lengthen the form height too much. The final element is the visual confirmation in the form of a tick icon. The user is informed by this that they have made a valid entry and can continue.

iGooods

iGooods is another simple, yet very effective design. This particular form is different in the fact that it has only two fields, allowing space for more creative input in the form of an animated illustration.

The inclusion of this educates the user on the purpose of the form while adding a sense of fun and a continuation of branding. The form title and description are kept short and are well positioned, right above the entry fields.

One particularly impressive element of this form design is the interactive design applied to the fields on tap. The form label – previously large and obtrusive – is moved upwards and made smaller, all in one smooth motion upon tapping. They could have chosen to hide this completely on tap, but instead opted for a unique solution which enables the user to still refer to the form labels if they so require.

These forms are excellent examples of mobile form design and highlight some key considerations and solutions you can use when working on your next mobile design.

Do you know of any other great examples of mobile form design? Share them below in the comments section!