本文分享了Grubtech平台在产品设计中，通过引入抽屉式导航来改善数据输入体验的案例。原有的模态框设计在处理复杂表单时，导致用户体验割裂、难以追踪。经过用户访谈、可用性测试和迭代，最终采用右侧抽屉式导航，通过层叠抽屉的方式，保留上下文，提升了任务成功率、缩短了完成时间，并降低了错误率。这一改进方案特别适用于需要多层级输入和信息回溯的场景。

💡 **问题**：Grubtech平台最初使用模态框处理数据输入，随着工作流程的复杂化，尤其是多步骤或嵌套操作，导致用户感到迷失、难以追踪当前步骤，且关闭模态框会丢失上下文和未保存的数据。

✅ **解决方案**：通过用户访谈和可用性测试，作者团队选择了抽屉式导航替代模态框。当用户启动表单时，右侧滑入抽屉；需要嵌套输入时，新的抽屉叠加在当前抽屉之上，用户可以逐层返回，始终可见底层上下文。

📈 **结果**：抽屉式导航设计带来了显著改进，任务成功率提升27%，多步骤表单完成时间缩短19%，错误率降低36%。用户反馈更易于控制，内部团队也积极评价，认为新设计更易于指导用户操作。

Enhancing Data Input with Layered Drawer Navigation

When I was working as a senior product designer on Grubtech, a kitchen and restaurant management platform, we faced a recurring UX challenge with long and complex forms across the back-office interface. The existing modal-based structure made the experience disjointed and frustrating for users — especially when nested steps were required or when users needed to go back and forth between different levels of input.

The Problem

In our original design, user input was handled through modal dialogs. This approach became problematic as our workflows grew in complexity — especially when forms became multi-step, or when nested actions required opening a new modal on top of another.

Through user interviews and usability testing, we discovered the following pain points:

Users often felt lost, especially during nested actionsIt was unclear which step the user was currently onClosing a modal would result in loss of context or unsaved dataLong forms inside modals felt cramped and overwhelminThe back navigation experience was inconsistent and confusing

One user commented:

“I’m not sure how deep I’ve gone. I click something, a box opens… then another one… and I forget where I started.”

These usability issues clearly indicated that the modal-based approach wasn’t scalable for more advanced form workflows.

Research & Exploration

After identifying the key pain points, we ran multiple ideation sessions and evaluated several alternatives:

Keeping the modal approach but introducing breadcrumbs or headersSplitting forms into separate pages (step-based navigation)Switching to a drawer-based structure, allowing layered form input while preserving context

To validate our ideas, we built interactive prototypes for two major approaches — modals with enhancements, and stacked drawers — and conducted A/B usability tests with 12 participants.

Our Solution: Stacked Drawers for Form Interaction

We redesigned the user flow to replace modals with a right-aligned drawer navigation system:

When a user initiates a form (e.g., “Add Item” or “Edit Batch”), a drawer slides in from the rightIf additional nested input is required (e.g., adding a related item or extra step), a second drawer opens on top of the current one, without closing itThe user can go back one level at a time and always see the underlying context

This pattern makes the experience feel more linear and traceable, even when tasks are nested.

Key improvements in the drawer design:

Step indicators at the top for long forms (e.g., “Step 2 of 4”)Clear close/back controls for each drawer levelLayered shadows to visually reinforce the depth hierarchyPersistent field states, so returning to a previous drawer retains user inputProper keyboard navigation and ESC support

We also updated copywriting and CTA labeling inside the drawers to ensure clarity (e.g., “Continue to Step 3” instead of generic “Next”).

Results & Feedback

After implementing the drawer-based UI, we conducted follow-up usability tests and compared key metrics:

Task success rate increased by 27%Time to complete multi-step forms reduced by 19%Error rates (missed fields, abandoned flows) dropped by 36%9 out of 12 participants reported that they felt “more in control” during data entry

Internal teams also responded positively, particularly customer support staff, who found it easier to guide users through tasks over the phone using the new drawer-based flow.

What We Learned

This redesign highlighted the importance of context preservation, especially in complex data entry flows. While modals are useful for simple tasks, they don’t scale well when depth, flexibility, and memory are required.

The drawer-based solution gave us:

A more structured and scalable interaction modelBetter spatial orientation for users during nested actionsMore room for longer forms and step-by-step guidanc

This solution is now being applied across other areas of the product with similar success.

Thanks!

I want to thank you for reading this case study. You can read more case studies from my Portfolio Website and please stay connected with me on Linkedin.

---

Enhancing Data Input with Layered Drawer Form was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.