Case Study #2 : Optimizing forms and contextual help
--
Product: NetApp Cloud Volumes
Task description: In this case study, I’ll highlight the main stages of my design process when optimizing user experience of forms in NetApp Cloud Volumes.
Tools: Abstract, Sketch, Principle for Mac, inVision
Process
By having a task to optimize the forms I started by identifying and researching the main pain points, problems, and goals users have or might have when using forms in the platform.
Goals:
- Clear and transparent sense of forms elements, sections, and CTAs
- Fast and easy way to navigate across
- Reuse of already existing UI elements
- Simple and accessible way to edit parameters
- Simple, functional and familiar UI
- Form responsiveness
- Different options of contextual help
- Reduce the change to the smallest units possible.
- Give users control over when a change affects them
Users:
- intern, needs help or contextual assistance (possibly on-boarding) when using the platform
- SDE, priorities is to create data volumes in a quick and easy way in day-to-day tasks
- Dev/Ops Engineer, his priorities is to create and manage data resources on a big scale
Problems:
- uniformity and consistency of UI elements
- broken user flow
- bad dividing by semantic groups
- inconsistent layout
- missing context help
- loose distinction between infoboxes, inline help, etc.
- ability to handle possible more complex cases
Motives:
- Automize routine form filling
- Prevent inputting wrong data input
- Increase productivity and performance
After analyzing the main goals, problems, and key motives I started my process by breaking down the process into smaller parts:
- breaking data into sections
- grouping data by related fields
- grouping data by mandatory/additional sections
- using customized forms to simplify data (Expert mode)
- using layers (popovers/modals) to simplify the form
- writing more clear labels
- using new more input fields
- pre-filling forms, suggesting input data
- focusing on more distinctive and clear CTAs
- validating the form errors and prevention of it
- breaking down context help types
- seamless embed of context help (on hover, inline help, help box)
Having it broken down and keeping mind our main objectives I started by mocking up different types of layouts. I explored different versions of the layout (from one-column to multi-column forms) using new UI elements of the already existing design system for this task, picking the minimum viable option, building contextual help options around it and iterating different versions for the further user testing processes.
By looking at the one-column form options we can see that all of them fail in handling a bit more complex cases with more than 10 input elements. It makes the form not very accessible and will be hard to work with. Adding a layer of contextual help makes me to explore other variations of layouts.
The idea of the multi-column layout was explored and used before in our UI, but it was considered as a bad choice, making the form cluttered, not leaving the option for adding contextual help, and more importantly breaking the user flow when working with it.
Having the established size rules for layout components as shown in the image below will give us a chance to be more flexible with our layout choices and way more easier to implement and maintain the system. In this case, left section reserved for input components is 888px, right one — for expandable contextual help.
With floating labels input option (the border surrounds the field, label and input highlight altogether) added in the new design system allowed me to evolve our form layouts and eliminate its shortcomings as by its nature it was saving lots of real estate in a seamless manner and providing all the necessary functionality.
Using these design principles and new layout rules, it simplifies the form layouts and can easily make the user’s experience more seamless, engaging and aesthetically pleasing.
Forms as well as tables are highly-contextual design elements and depend on more than just these guidelines. Though these guidelines were based on experiments and statistical data, and shouldn’t be considered as the ultimate rule for everyone or to work in all scenarios.
