Web • Prototyping Tool
SAP BUILD Simplification of Controls
User Research, Interaction Design, UI Design
Due to a non-disclosure agreement, some parts of my work cannot be shown yet. I'm happy to talk about my experiences in person.
Forms are used to display information, input fields, and other data on pages, but they are difficult to edit and manipulate, given its complex, multiple-layer hierarchy. Quick, simple tasks from adding rows to adding individuals controls to a row were unintuitive and time-consuming to complete. The usability issues were deeply rooted in the mindset mismatch of how users expected to manipulate a Form vs. the unintuitive structure of Forms.
→ Learn more about the Form research findings.
Radio Buttons previously existed as an unusable, individual radio button control. They lacked the functionality of selecting a radio button out of a group of radio buttons. Along with the dire need to fix the functionality also came the opportunity to enhance radio buttons’ usability within a Form.
→ See how I made radio buttons usable as a group.
- Led end-to-end design efforts from user research to design implementation while collaborating with Product Managers and frontend developers
- Achieved greater usability with key stakeholders
- Introduced direct manipulation on Canvas
- Improved properties panel settings and more intuitive layout formatting
Reformation of Forms
I first tested the current implementation of Forms to gain a deeper understanding of the usability issues. I discovered from usability testing that users’ mindset of creating a Form did not match what was in place. Their expectations of adding rows and elements to rows were based on their experiences of using software like Microsoft Excel and Powerpoint.
I got frustrated when I was trying to add an extra row, and dragging was not being consistent
We explored many ideas to improve manipulation and structure of Forms while working within the technical constraints of UI5 Controls and the limitations of dragging and dropping controls on the Canvas.
I first developed the following concepts that were most valuable and quickest to implement:One Form
I simplified from two Form Controls (Simple Form and Advanced Form) to one Form Control. Users didn’t understand the differences between the two types of Forms, so we consolidated to one.
I introduced the concept of a Form Row (comprises of a Label and another Form Control element on the right side), so that users could easily select, rearrange, duplicate, and delete rows in a Form. Show Form-specific Controls
After observing users struggling to quickly find the appropriate control to add to a Form Row, I added the capability to surface controls that can be added to Forms whenever a Form or any element within a Form is clicked. This simpler method of viewing controls specific to a selected control will be applied to other controls that contain children elements. Contextual Right Click Menu
I incorporated an intuitive alternative to adding, duplicating, and deleting a row. It has the enhanced usability of adding a row above or below a selected row.
Unexpected Challenge: Form Groups
As we were ready to finalize designs, a new requirement was introduced for us to include Form Groups into the Forms. We revisited the drawing board to see how the extra layer of hierarchy would change the structure of our designs. In the meantime, our foundational changes were being built in the production site and the developers decided to add the Form Groups to stick with the requirements of including Form Groups in a Form. Even after coming up with some new concepts of Forms including the manipulations of Form Groups, we decided to test participants’ ability to build a form with the up-to-date version of Forms in the production site to identify usability roadblocks and narrow down design concepts. For the usability test, we provided screenshots of a Purchase Order form (a common customer use case) for participants to recreate - from a simple form to a form with additional groups.
It shouldn't have taken 30 minutes to assemble this form
Users still struggled to create a form because the process still required too many clicks to reach the lowest level of the Form hierarchy, the most edited level. Users failed to reformat and rearrange Form Groups for more elaborate forms.
Final Solution: Abstracting Layers
Due to my non-disclosure agreement, I cannot display final designs. If you're interested in learning more, reach out and I would be happy to explain in more detail.
- Changes Beyond One Control: In the process of redesigning controls, I had to be mindful of any changes made to Form or Radio Buttons and how they could affect the usability of other controls. Simplifying a control means finding opportunities to simplify other structurally similar controls.
- Get unstuck by testing early with incremental changes. Finding the right fidelity to test can save time and eliminate technical debt in the long run. For Radio Buttons, paper prototyping the multiple choice concept proved to be the best way to quickly disprove my hypothesis and determine which path to choose for my design.
- Document Your Progress: Organizing ideas from brainstorming sessions, design reviews, and meeting notes allowed me to revisit ideas that were conceived from earlier parts of the process but tossed away. They may prove to be viable solutions later down the road (highly recommend Dropbox Paper to keep track!)
I’m grateful for the unique challenge of designing UI controls with such a supportive, talented team. Shoutout to Suhaib Syed (Designer), Wenjing Yang (Designer), and Hong Wang (Product Manager) for leading the stride on simplifying controls and improving the overall usability of the Prototyping Tool in BUILD!