Don't make users think
Simplify the manipulation of BUILD UI controls
The BUILD prototyping tool helps users to create refined prototypes and bring them to life by dragging and dropping SAP Fiori UI controls. BUILD always has the goal to be the go-to tool for our end users when they design and develop SAP Fiori applications. However, it was tough for users to manipulate some basic controls in BUILD like table, form, list, radio button, and so on, so people stopped using BUILD.
The goal for this project is to redesign the manipulation of tables and lists and develop a design pattern that can be applied to other controls, which could simplify the prototyping process, reduce the time that users wasted, and also improve the first time user experience.
My role
My co-worker Suhaib and I were leading the design work to simplify the controls. We were responsible for the overall design guidance. We planned, designed and oversaw the project while in charge of the related researches. I was also the hands-on designer for some of the controls, like table, list, tree table, and so on.
+ Learn more about BUILD
BACKGROUND
What is BUILD
SAP BUILD is a complete set of cloud-based tools for business experts to build SAP Fiori apps. https://www.build.me/
BUILD has turned design-thinking from an idea or a way of thinking, into a productized solution to help businesses practice design-led product development and create delightful, useful apps for their users.
Collapse
BACKGROUND
What is SAP Fiori UI Control
SAP Fiori consists of modern UX design principles that SAP defined in order to personalize and simplify the user experience for SAP applications.
SAP Fiori provides a variety of UI controls, ranging from basic elements to complex UX patterns, ready to be used to style SAP applications.
THE PROBLEM
Why were users thinking hard?
Previously, BUILD didn’t support canvas editing successfully due to the lack of design support initially.
Participants wanted to add a date picker (children control) to the row, but he didn't know how to do it.
For hi-fidelity prototyping and control manipulation, users expected WYSIWYG (what you see is what you get), aka on-canvas editing. However, BUILD didn’t fully support that for even basic controls.
Based on our research, we found that:
Problem 1. Much manipulation hid inside the side panel which didn’t match users’ expectations.
Problem 2. Users could not get direct access to the children controls (the controls in the cell of the table or in the rows of the list). As the critical content of the prototype, users had to use multiple clicks or a side children panel to select and manipulate the children controls.
Problem 3. Participants constantly tried to right click when they became stuck, but BUILD didn’t support the action.
During the usability testing, the most common scene we observed was users clicking around, with nothing happening. Then they started to think hard and asked: “How should this thing work?”
DESIGN PRINCIPLES
Align with stakeholders around what matters
We wanted to have a shared point of view in order to evaluate the proposals. For any designers who may work on the simplification of future controls, we need a foundation to deliver a consistent experience. Therefore, we wrote some principles down.
Canvas first: The new proposal should focus on the canvas editing experience. If one manipulation can be finished on the canvas, we should not hide it in the side panel or somewhere else.
Content first: The new proposal should allow users to modify their children controls as comfortable as possible..
Context first: We agreed that we should not aim solely for consistency. The context of the control should be considered when applying the design patterns.
DEFINE MODULES
What are the common issues for the controls?
We thought we could rely on the principles and explore the design for each control separately. But we were wrong. After we had some sketches for each control, none of our ideas could work together and apply to all others.
Then we realized that we should not design for each control, but we need to find common modules and start ideating from there.
We listed out all four controls (table, form, list and radio button) that we needed to work on and wrote down all the problems we had found in previous usability testing. After we had grouped together similar issues, we got five categories:
-
Add
-
Delete
-
Move
-
Copy&Paste
-
Edit content
NEW DESIGN
Enhance the canvas editing experience
Now that we knew what we need to focus on, it was time to think through the how.
After several iterations, we settled down to the proposal.
1. Use the handler to interact with rows/columns.
Users can use the handler to select, drag and move the rows/columns. Therefore, we set the children controls free from the traditional “group” concept. Users can interact with the children controls (in the cell) with just one click.
2. Quickly add rows/columns using the +/- button
To help users quickly define the number of rows/columns they want, we provided a +/- button at the end of line items for them to easily add or delete the whole line.
The + button can also be used in the context to support more actions.
3. Support dynamic right-click contextual menus
We provided more contextual selections like “Add a row above” through the right-click menu.
It matched users’ expectations and provided more possibilities for on-canvas editing.
USABILITY TESTING
Users feedback was positive!
We had usability testing with six users to test the new design. Here are their insights:
Finding 1.
The needed for handlers was verified.
-
It was clear for users that they can use the handler to control the rows or columns.
-
They liked the fact that they could get access to the children controls directly.
Finding 2.
The results proved the importance of canvas editing again.
-
Users preferred to manipulate the controls on canvas directly.
-
If they didn’t find any options on canvas, most of the users tried to right click.
-
Users liked the +/- button. It was easy to use and matched their expectations.
I can select the text in the cell directly, that's nice!
- Product Manager, 38
VISUAL DESIGN
Worked with visual designers
Visual designers in the team were involved in the design process in the early stages. Therefore, our visual designers were familiar with the design through multiple review sessions and understood the thinking process behind each design decision.
As an interaction designer, I also worked closely with them when the design moved into the visual stage.
With the proper visual design, the table stood out even on a super-busy canvas.
SCALE THE DESIGN
Apply the design to other controls
My colleagues and I later applied the design to the form and radio button controls, and a new control: tree table.
We followed the “context first” principle defined above. We didn’t just apply the same pattern to every control, but made flexible tweaks based on the context of each specific control. For example, for the radio button, the rows and the children controls are basically the same things. Therefore, we got rid of the handle from the radio button redesign.
The Impact
Made canvas manipulation more convenient
With the release of these simplified controls, the manipulation of the UI controls now matches user expectations.
Built the base for further simplification of controls
BUILD received complaints about the delicate manipulation of UI5 controls. Table and list were the first two controls that we tackled in the simplification works. The success of the simplification of those two controls provided examples and design patterns for the other controls.
Improved the first time user experience
As I mentioned in How to Get Users at Hello — Redesign BUILD First Time User Experience, one problem we had with the first-time user experience was the complicated manipulation of controls. Even basic UI controls were difficult to select, arrange, and edit. The new design improved the control modification so that first-time users would more likely appreciate the value of BUILD.
My reflections
Don’t design just for now
When we were assigned a project, it was important to take a look at what had been done before and what may come later. Even when we focus on a new project, as designers, we should prepare for other related projects that we expect to be introduced in order to make sure our work now will not be wasted.