designing digital forms

Designing Digital Forms

*Presentation Title

ana.risteska@netcetera.com

Ana Risteska,UI designer & front-end developer

a.risteska@gmail.com#6 Front-end meetup Skopje / 09. Feb. ‘16 / Hacklab KIKA

Designing Digital Forms - boring?

Digital forms...

are the medium for the most direct contact between the customers / users and a digital system.

may contribute in gaining or losing trust in our site and (not) push users go to our competition.

often are examples of bad UX and usage possibilities and can influence the image of the offeror of the service.

So, not that boring, but rather a big deal.

The fundamental problems

Media switch: paper forms vs. digital (web) forms

Lack of consistent visual guidance for the users

Not enough transparency of the filling form process (opposed to the paper forms).

Goals

Successfully and simple filling of the form(no one wants to fill forms)

Being transparent

Be failure and format tolerant

Suggest default values that make sense

Pay attention to the context (familiar vs. unfamiliar, often filled vs. rarely filled forms)

Consistent style (design and wording)

By the way forms look, they establish a relationship and a conversation. A form should represent a conversation,

not an interrogation

Where to put the label? Mind the visual relationships.

Increased vertical space

Label on top

Proximity to input

Simple forms which should be quickly scanned

Rapid processing

Increased vertical space

Proximity to input

Simple forms which should be quickly scanned

Rapid processing

Source: gmail.com

Label on top

Source: gmail.com

Visually more cohesive relationship between input and label.

Single-column perception

Proximity to input

Reduced readability

Less simple forms, but rather familiar forms

Reduced vertical space

Label on right

Source: yahoo.com

Proximity to input

Easy to scan labels

Complex forms, quick scannability of what is needed

Reduced vertical space

Label on left

Source: barnes and noble (older example)

Label on left

Source: barnes and noble (older example)

Visually less cohesive

2-column perception

Clearly distinguish which input fields cannot be left blank by the user.

Mandatory fields

This means the form doesn't get cluttered with asterisks. Good thinking as the label speaks for itself.

Mandatory fields - optional stuff in (brackets)

Source: UX Movement Why Users Fill Out Less If You Mark Required Fields

If you need to restrict the format of data inputted by users, then at least do so in a way that won’t irritate users.

For example, instead of displaying DD/MM/YYYY next to a text field for a date, consider using three drop-down fields or, better yet, a calendar control.

Being format tolerant

DD/MM/YYYY

D-M-YY

DD.MM.YYYY

Use smart defaults to make the user’s completion of the form faster and more accurate.

Suggest default values and visual cues that make sense.

Smart defaults

Source: twitter.comSource: twitter.com

Dismissible feedback

Animated status indicator

After completion

Source: directpoll.com

\o/

An Extensive Guide To Web Form Usability - Justin Mifsud(Smashing Magazine)

Web Form Design: Filling in the Blanks - Luke Wroblewski

References for the presentation and for further reading