designing digital forms
TRANSCRIPT
Designing Digital Forms
*Presentation Title
Ana Risteska,UI designer & front-end developer
[email protected]#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