The Good, the Bad and the Ugly
Designing UX: Forms – Jessica Enders Web Form Design
Luke WroblewskiForms That WorkCaroline Jarrett
Our users, constituents, prospects, customers, clients, friends, family and ourselves, will be increasingly engaging , y , g y g g gwith organizations and businesses on smartphones (including filling in forms)…and it will be critical that we deliver a positive user experience.positive user experience.
Smaller screens Touch based entryouc based e t y Users are *mobile* Short attention span, less effort
Less is More Fit for purposet o pu pose Responsive Design Properly designed fields
th t i t iti dthat are intuitive and easy to interact with
Unique visits Conversions Rate Improvement624 3 0.48413 39 9.44 +1864%Statistical significant >99%
Every additional question on a form reduces the completion rate and data quality while alsocompletion rate and data quality, while also increasing the rate of errors. Jessica Enders, Designing UX-Forms
Source: www.Conversionfanatics.com
The point of an effective interface, whether a form, mobile webpage or doorknob, must begin with an analysis of what p g , g ythe user is trying to accomplish.
Eliminate everything which does not fulfill a definite and Eliminate everything which does not fulfill a definite and necessary function. -Charles Holden
Vertical, vertical, vertical In a really long form, break into several sections of logically a ea y o g o , b ea to se e a sect o s o og ca y
grouped information See Ryan Levesque book “Ask”
Make them big enough Apple default is 44 px x 44 px
Slow to load and respond Non-responsive designo espo s e des g Pdf forms Long answers
Mi h b Mirrors the web page Unnecessary pop-ups
Darkpatterns.org
Summary
https://www2.deloitte.com/content/dam/Deloitte/us/Documents/technology-media-telecommunications/us-global-mobile-consumer-survey-2016-executive-summary.pdfhtt // l t / bil f bilit 2279f672917 https://uxplanet.org/mobile-form-usability-2279f672917
https://www.formstack.com/blog/2015/5-reasons-mobile-users-abandon-form/ https://blog.conversionfanatics.com/how-many-web-form-fields-is-too-many/ https://developers.google.com/webmasters/mobile-sites/mobile-seo/common-
mistakesmistakes https://www.nngroup.com/articles/form-design-placeholders/?lm=web-form-
design&pt=article https://mono.company/journal/design-practice/the-10-commandments-of-good-
form-design-on-the-web/g / https://uxplanet.org/checkbox-and-toggle-in-forms-f0de6086ac41 https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc