L3 Editor

A research and design project for a Responsive Graphical User Interface (GUI) editor to facilitate GUI designers with more flexible and robust design tools.

Team: 3 UX Designer+ 1 Developer

My Role: UX Researcher & Designer
September 2021 - Present

#Layout-Editor #GUI-Editor #Responsive-Design

Overview

In response to the challenge of designing resizable GUIs for diverse screen sizes, this case study introduces the L3 editor, a novel GUI editor to simplify the layout design process. The research team identified key user needs and requirements through a design thinking approach. L3 offers automatic inference of resize behaviour specifications from designer-provided examples, visualization of constraints, layout patterns, and animated previews, addressing the inefficiencies observed in conventional layout editors.

My Role: As a UX designer, I worked on all aspects of the design system, including user research, design, and evaluation while my developer colleague helped implement my designs.

L3 Editor Design Thinking Process

Understanding the Problem

Due to the large diversity of computing devices' screen sizes and the users’ personal viewing preferences, it is important for applications to support resizable GUI layouts.

Currently, the resize behaviour can’t be inferred from a single designed layout specification and the designers have to design layouts for each screen size separately which is cumbersome.

Many properties need to be specified by the designers (widget positions and resize behaviours or optional widgets) and there is no assistance in detecting mistakes in resize behaviours to mange the inconsistencies across layouts.

This highlights the need for layout editors to design resizable GUIs through user-friendly features.

I conducted research interviews with our primary users (expert GUI designers) to uncover any pain points that they were experiencing with current conventional GUI editors.

My research encompassed:

Understanding the user challenges and needs for designing responsive layouts
Uncovering pain points with the existing user journey for designing responsive layouts

User Groups

A GUI editor user is a graphical user interface designer. To investigate the responsive GUI design challenges, we considered Expert GUI designers as our target user group.

By including only expert designers in the study, we tried to measure the effects of the design variables more accurately.

Empathize and Gathering Insights

I started the empathize phase by conducting user interviews with 12 expert GUI designers followed by a comprehensive competitor analysis. Throughout the user interview I asked the designers about their design process for designing responsive GUIs using the current conventional GUI editors (Figma, Adobe XD, ProtoPie, Sketch), the challenges they face and theirs needs.

I researched our competitors' (conventional GUI editors) content design features, functionality, usability and user Flow in terms of designing responsive GUIs. This phase was followed by another competitor analysis about three state-of the art constraint-based GUI design approaches that are similar in automating parts of the layout generation. I showed the participants those three approaches and explained how they could offer more GUI design flexibility for different screen sizes and orientations.

After collecting the recordings from the user interviews, I conducted affinity mapping with my colleague researcher to synthesize the pains identified. We grouped these problems under four common themes.

P3: "I often find myself resorting to manual workarounds to achieve the responsive design I want in Adobe XD. It would be great if the software offered more advanced features for controlling how elements resize and behave across breakpoints."

P8: "While Auto Layout in Figma is powerful, I sometimes feel limited by its lack of flexibility. It's not always easy to achieve the exact layout I want, and I find myself having to work around the constraints of the Auto Layout system."

Affinity Map

Define

I categorized the emerged themes to the following four themes:

Control Over the Widgets

E.g, widgets grouping and layout hierarchy

Higher Legibility

E.g, visual indications and animations

Control over the (suggested) layouts

E.g., a customizable grid system

Input Modalities

Supporting different input modalities

Ideate

I developed design guidelines for designing a new editor, considering the emerged themes:

Enabling the designer to specify the grouping/hierarchy of the widgets
Reducing the designer’s effort to create a fully resizable GUI while giving them full control over widgets and their layout.
Adding visual indications and animations to the GUI editor to better illustrate the resize behaviour of the result.
Offering an intuitive way to detect potential GUI layout errors easier.

In this approach, users can design the GUI’s appearance by specifying their desired layout for one or (typically) more screen sizes. To minimize the design effort, the GUI editor then infers the layout model for the entire GUI, or at least for all well-defined parts of the GUI.

Mockup

I designed a mockup the L3 editor. A GUI layout editor that is capable of designing layouts for different screens from a single-size layout designed by the designer. L3 editor adapts the designed layout to different screen sizes automatically. I introduced five new features for the L3 editor regarding the design guidelines.

L3 Editor Features

Automatic Widget Grouping

Feature 1

Regarding the first design guideline:

When widgets of the same type are adjacent at different layout sizes and the designer keeps it as it is, the L3 groups them together and the grouped widgets will move together.

Test 1st Iteration

We recruited 10 professional GUI designers to conduct an initial formative assessment of the the L3 editor, understand the strengths and limitations of the features we introduced for it, and examine how usable such a layout editing tool is for designing responsive GUI layouts;

I started the test by explaining the basic ideas behind the L3 editor. Since the L3 editor prototype was not fully interactive at this stage, we, as the researcher, created an initial layout as a mockup. One of the researchers conducted the interview, and the other researcher manipulated the layout in the L3 editor. Based on the appearance of this layout, we exposed the designers to how the L3 editor works.

Results

Generally, the results of the evaluation were promising;

Initial Inference and widget grouping reduce design effort (n=5/10)
Intuitive preview of the adaptive results (n=8/10)
Visualization makes the resize behaviour easy to understand and predictable (n=6/10)
Helpful error detection (n=6/10)
FlowGrid extends the functionality (n=5/10)
Designers would use the L3 editor (n=7/10)

High-Fidelity Prototype

At the next step, we developed a high-fidelity prototype of the L3 editor. At this stage, the L3 editor was fully interactive and ready for usability testing. We also introduced a new feature for the L3 editor regarding the design guidelines and the feedback received from the previous test about providing more customization for layout design. We called this new feature "Power Tab Pane".

Power Tab Pane

Feature 6

Regarding the second design guideline:

A novel type of resizable tab pane that adapts to the screen size. This type of pane enables the user to customize complex tab pane windows to adapt to the available screen size efficiently.

Test 2nd Iteration

I conducted a usability test with 10 expert GUI designers. The test comprised of 2 tasks and an open exploration interview.

Task I: Involved creating a resizable GUI (∼15 mins). This task included using the layout inference process, dynamic preview, and layout visualization.

Task II: Was a free-form task (∼30 mins) in which participants could try out the tool in a natural layout design situation they might encounter in their regular work. In this task, participants created new responsive GUIs.

Subsequently, I asked all participants to verbally compare the L3 Editor with the design tools they currently use for resizable GUIs (∼15 mins).

Open Exploration Interview: We followed the evaluation by interviewing the participants. Interview questions focused on the L3 Editor’s potential fit into their workflow, perception of its functionalities, efficiency, ease of learning and use, and perceived strengths and weaknesses.

Results

Satisfactions

Improving Efficiency and Reducing Designers’ Effort.
Intuitive Visualization for resize behaviours was found very useful, particularly in terms of understanding and identifying design errors during the resizing process.
Enhanced Flexibility and Controllability.
Participants found both new patterns useful, highlighting the reduced design time afforded by FlowGrid.
Participants agreed that the ability of the L3 Editor to handle empty space is important.

Dissatisfactions

Limited Visual Feedback and Layout Suggestions.
Limited Grouping Accuracy.
Limited settings for dynamic preview .

The Take away

The iterative design thinking process in this project shows positive impact on reducing the design effort for GUI designers by allowing the designers to focus less on which layout models to use and focus more on the design problem instead of struggling with specific layout models and their parameters to reach their target.

Moreover, L3 also reduces design iterations by visualizing significant constraints and layout patterns and layout errors and encouraging the user to make a decision to address any given issue.

What is more, L3 increases the layout’s consistency across different screens and it can reduce the cognitive effort of the designers when designing layouts by providing an easy to learn and easy-to-use approach. Besides, this editor decreases the struggle with understanding how to specify layouts for different screens.

All of the aforementioned outcomes, influences the efficiency of designing responsive layouts by GUI designers.