Using mood-driven UX methods for form processes with Jen Rovner - PowerPoint PPT Presentation

Using mood-driven UX methods for form processes with Jen Rovner and Daniel Zinkevich

Jen Rovner Daniel Zinkevich Lead UX/UI Designer Full Stack Developer

Forms we’ve recently improved

Before After

Before After

What are some common pain points we run into on forms?

Confusing field label placement

Completion button outside of expected area

Little to no size variation of fields

Fields not being chunked

Errors on submission clears all fields

What is the deeper issue we run into on forms?

We’re lazy.

Here to help at a base level: The Laws of UX by Jon Yablonski https://lawsofux.com/

Hick’s Law: The time it takes to make a decision increases with the number and complexity of choices.

Tesler's Law (The Law of Conservation of Complexity): For any system there is a certain amount of complexity which cannot be reduced

Zeigarnik Effect: People remember uncompleted or interrupted tasks better than completed tasks.

Serial Position Effect: Users have a propensity to best remember the first and last items in a series.

The Pareto Principle: For many events, roughly 80% of the effects come from 20% of the causes.

How do we add these laws and mood in the form design equation?

The initial assumption method Establish personality-based goals

Initial personality assumptions: Campers • Generally not in a rush (positive) • Mostly on the calm side (positive) • Appreciate a serene type of aesthetic (positive) • Can handle a challenge (positive) • May potentially be on the less tech-savvy side (negative)

Initial user type assumptions: Campers • Seasoned campers who know what they’re looking for , and confidently select it. (mostly positive, but high expectations) • Campers with moderate knowledge of what they need , but could use a little assistance and comparing. (most neutral, but biggest target audience to keep happy) • New campers who have no idea where to begin, and are overwhelmed by the options. (mostly negative)

Initial personality-based goals: Campers • Maintain calm excitement with layouts and processes driven by images and white space. • Provide an optional guide for purchasing to ease a potentially overwhelmed state. • Have clear outlines of the product details at each stage of the process for all user types. • Include bold, friendly messaging that can be slightly playful, yet concise.

The task analysis method Mood mapping to gather places of opportunity

Highlights of the core user persona: CPA Accountant • Manages many accounts mostly around the third week of the month • Is used to working with long forms • Has many processes to perform on the portal most days • Accesses the portal with moderately low stress • Has a more difficult time with government form portals than internal accounting portals

Personality & role-based goals: CPA Accountant • Make finding and creating accounts a simpler process • Combine form field groups for less pages to click through • Give quick access to return views per account • Add more outlets for exporting tax forms and data for clients • Provide statuses and date reminders per account

Highlights of our second core user persona: Small business owners • Paying monthly hurts their business • Has one account to manage • Logs on once a month on average • Requires visual clues (English knowledge may be low) • Is avoiding the need for help from an accountant

Personality & role-based goals: Small business owner • Decrease the length of form field labels • Give quicker access to current month payment • Make paying and amending returns available at multiple steps • Show what their payment helps in the city

What can we consistently add to forms to improve our users’ mood?

Make dropdowns searchable

Chunk long forms into sections Use the Serial Positioning Effect to make the first and last section the lowest level of effort

Add tooltips, descriptions under fields, or hover info to non-obvious field labels

Add real-time validation when applicable Keep the Zeigarnik Effect in mind. Make sure users are immediately aware of incomplete tasks.

Keep consistent eye patterns Image courtesy of Pinterest.com

On mobile, put submission buttons towards the bottom center (or full-width) of screen

Set your form fields to autocomplete

Add placeholder text when it adds context, not clutter

CHALLENGE TIME

Out of the box technologies used Bootstrap theme https://www.drupal.org/project/bootstrap ) ● Field_group module for vertical tabs ● https://www.drupal.org/project/field_group HTML5 form validation ● Drupal Core for field help description ● Select2 for filterable selects (https://select2.org/) ● Jquery/css for big radio buttons ● Address Module for address https://www.drupal.org/project/address ●

Gotchas Radio button labels were fieldset legends with different styles ● Text fields were full width by default ● Save button had unclear text (What does "Save" mean? What will ● happen when I click it?) Save button was small and in the wrong corner ● I needed to write an alter hook to set the US as the default country ● Address fieldsets bumped fields out of vertical alignment ● Labels were inline by default ● HTML5 form validation doesn't select on vertical tabs - patch ● forthcoming? Date field felt VERY clunky ●

Thank you! Questions?