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