Resolving complex forms with OOUX
Simplify complex forms by recognizing complex objects.
As UX designers, we often encounter the challenge of dealing with complex forms that can frustrate users and hinder overall user experience. In this post, we’ll look at how some complex forms are born, and explore a solution informed by OOUX.
Birth of a Complex Form
Let’s imagine we’re designing a simple reception hall management app that helps event managers manage events. A simple event’s object might look like this:
A form to create such an event might look like this:
It’s completely self-contained, like a single family. Things can operate efficiently and smoothly until the family needs to grow. And so too will the reception hall’s business, and its owner may want the app to do more. This may include:
- Assigning up to 10 guests for each table
- Assigning a meal option for each guest
- Inviting guests by email
One might be tempted to bolt this new functionality onto the original form, like this:
For some designers, their Spidey-Sense might already be tingling. But let’s go ahead and illustrate how things can get out of hand real quick by adding 39 guests, four tables, and three menu options.
Boy, that escalated quickly! Can you imagine trying to use this absurd form on a mobile device? That single family grew and its children now have their own single families. Yet they’re all still stuffed under the same roof!
Building Complex Content
What was complex wasn’t the form, but the content the form was intended to create. That simple event object used to be completely self-contained and free from dependencies. But now, that event object is bound to guests, tables, and menu options, as seen in this object map:
Rather than creating a complex event through a single complex form, consider building a complex event through multiple simple forms. You can do this by using the object model as a guide: Start with the parent object and then give each child object their own space.
Here, the parent object is the event. And an event can still be partially created with a simple form.
The result is a foundation upon which you can build the rest of the event, with affordances that give each child their own space, where complexity can be similarly managed.
In other words, give each family their own household where they have room to grow.
If the above image looks familiar, it’s because it mirrors the object map of events, guests, tables, and menu options.
Desirable Outcomes
I’ve heard complaints about this approach. From developers, sometimes I hear “it’s too many pages to build!”, as if the separation of concerns isn’t a good thing (it is). From product managers — and even designers!— I sometimes hear “it’s too many clicks”, as if the number of clicks is a meaningful metric (it isn’t).
In reality, there’s plenty of benefits to this OOUX-informed approach.
User-centric alignment: Aligning forms with users’ mental models reduces cognitive load, enhances user understanding, and improves user satisfaction.
Scalability and adaptability: This approach ensures the scalability and long-term flexibility of the application as its underlying data structure changes over time based on emerging user requirements.
Faster development and maintenance: Close alignment between form design and the database structure fosters efficient collaboration between developers and designers, thereby streamlining the development process.
Mobile-friendly design: Breaking large and complex forms into smaller and simpler forms is a fundamental principle in creating mobile-friendly designs. This process ensures that digital content and UI can adapt to different screen sizes and devices, including mobile devices.
Look beyond the form
Just as families may grow, split, or merge as circumstances change, a well-designed form can multiply into multiple simple forms, ensuring an efficient and user-friendly experience for various data needs and user interactions.
By looking at what content a complex form was expected to create, we can gain insight into effectively managing complexity. This is the key to achieving not only user-friendly forms but also mobile-friendly and adaptable ones.
By aligning our forms with users’ mental models and database structures, we can reduce cognitive load, enhance scalability, and foster efficient collaboration between developers and designers, ultimately delivering a superior user experience.
