Review｜How to design a form
— Paddlecloud Deep Learning Platform v2.0 Iterative Review1 Foreword
1.1 Background
The company needs to establish a deep learning training platform based on the PaddlePaddle framework, which is a core AI technology direction in Baidu. It is a full chain of deep learning technology platform for resource scheduling, data processing, model evaluation, model prediction, model management, and model sharing, which can meet different levels of user needs. It is hoped that PaddleCloud will become a unified AI platform in the company, provide full-process services, and unify the entrance.2 New Version Goals
The goal is to provide full-process services for the use of Paddle by various business lines inside and outside the company, including the optimization of the process of user task training, and provide service in various technical directions to help users quickly start model training tasks and efficiently Complete user tasks, continuously accumulate the core value of the platform.2.1 Changes
- v1.0 internal > v2.0 external preparation
- Add official homepage and introduction page
- Redesign v1.0 editor, added the concept of an overview page to improve user experience
△old version: v1.0 Paddlecloud3 Understand Users and Their Needs
The main users of Paddlecloud are Baidu's internal developers. Most of these users are middle-level and advanced users. They have usage habits of the old version, and it is difficult to adapt to excessive changes.However, the platform plans to open to outside users, the new version is a bridge linking internal and external users, so that it can not only allow novice users can get started quickly but also undertake these old users and their operating habits.
Therefore, while iterating the new version (V.2), the home page and introduction page were added to introduce the product highlights and functions of Paddlecloud, as well as the new technological advantages.
3.1 Problems and Optimization
- Unified text: such as homework>task; resource group>group, and gradually realize the splitting of resources and groups
- Optimized navigation: The navigation structure is chaotic, and aims to highlight the core operations of building new tasks
3.2 Laying the Foundation for Responsive Design
Although there is no time to make the responsive design in this issue, according to the responsive standard, we output fluid grids for the next iterations.
4 Interface Layout
4.1 Research Layout
△Page layout: Home / Contents
4.2 Before > After
Reorganize the structure of the navigation bar, and provide a quick new entry on the home page.
In the previous version of the main navigation bar, all important operations are hidden, and the secondary navigation is closed by default. There will not be too many entries in the navigation bar in the later version, so the "New Build" button will be placed at the top of the first screen on the homepage (overview Page) in the new version. At the same time add a fixed "New Build" button at the bottom of the left navigation bar.
4.21 Navigation Bar Changes
Stand out the process of building new tasks
△before(left)/ after (right)
4.22 Diversity of the Left Navigation Bar
Both Notion and Teambition have made updated interpretations of the left navigation bar, which is displayed the "fold/unfold" button only when the mouse is hovering.
While hovering at Notion, the "fold/unfold" button appears in the top right corner. After clicking, the left nav bar will be folded, and only the buttons will be displayed on the left bar. When hovering over the "fold/unfold" button again, the floating menu will be displayed to save space on the left side.
The navigation bar on the left side of Teambition also displays the "fold/unfold" button while hovering, and while clicking it collapsed, only displays the "unfold" button in the bottom left corner. In contrast, Notion's approach can maximize the space, while providing a floating layer for quick viewing.
Compared with the navigation bar of this iteration of PaddleCloud, the advantage is that users can quickly create new tasks in both states. The disadvantage is that only icons are displayed in the collapsed state, which is not obvious enough.
4.3 Overview Page
While maintaining the existing functions, the modular design is clearer, and the module with the dimension of "user" is added, which allows users to quickly preview the total number of tasks and task status.
5 Possibilities of Responsive Design for Forms
Responsive design can make a website compatible with multiple terminals. Not every page is suitable for responsive design. It is difficult to achieve a perfect responsive design for tables and form pages. Although it is hard, the table page can be self-adapted under somecircumstances, check out the content below for an example.
5.1 Analysis of Responsive Design of Tables
There are many types of tables. Taking the most basic text table as an example, the table can be split into table head and table row, and each column is filled with content such as images or text (as shown below, the text in each column is generally aligned left.Consider the limit of the content of each column, so each column may reserve space (as shown below in orange), the preset spacing between each column (as shown in green), and the margins of columns and sides on the left and right (as shown in purple).
The responsive design of the table is usually achieved by shortening the column margins, and the left and right margins, the reserved space for each column remain fixed.
**Welcome to correct the discussion below*
First of all, we can use a meta tag, and at the same time, the width of paragraphs/images can be adapted by percentages (such as width: 100%), which is what we usually see when dragging the browser, the column spacing will be automatically shortened, the form will be adapted too.
Usually, basic tables can achieve such responsive design.
However, when the column spacing continues to shrink to the minimum value, that is, when the breakpoint of the table is reached, it is necessary to change the form of the table to achieve a better responsive design.
（Designers need to combine the aesthetics of the table to set the minimum value of the column spacing. In theory, this value can be any number based on your fluid grids. For example, the minimum value in the above picture is 6px
）We can change the table horizontally and vertically to adapt to extreme situations such as on mobile, which can usually be achieved by rewriting a set of CSS specifications through @media.
Attached is my self-study writing in Codepen responsive form code reference: link to Codepen>
There is also a solution, which is to directly display the horizontal scroll bar of the table. Although it is often used in the fields of finance and accounting, it is not recommended unless there is a lot of data, as it will affect the reading experience of the table. In this situation, it is better to consider fixing important columns.
In extreme cases, horizontal scroll bars (such as tables in Notion) will not appear in many complex tables. We do not recommend users to operate complex tables in such a narrow space.
So another question arises, do we really need tables in narrow spaces (such as on mobile)? If it exists, in what way will it exist? This is a topic that can be extended for further thinking.
In addition, when encountering too many columns, there is another common method of interactive design, which is to customize the table columns (Check out the image below).
Therefore, a suitable form of responsive design requires the designer to judge how much left and right spacing is appropriate. Not only the space of each column element and reserved space, line folding and other display issues, but also the handling method of extreme cases, which must be considered.
5.2 Notes on table content
The situations below are also important, although it does not involve this time.
For financial or accounting to B reports form, data type like currency is often involved, which is different from the general data display method. Currency generally needs to be right-aligned. In design, we need to consider the issue of typesetting consistency. Also consider using a decimal point (to keep the number of decimal places consistent) and thousands (100,000) to express currency, which is how occupations such as accountants are used to it. If the table lacks data, don't leave it empty, use a placeholder such as "-" to express "empty".
6 Build a New Task
Complex process and form designWhen creating a new task on the PaddlePaddle platform, you need to fill in a lot of forms. The old version simply divided functions into separate areas and stacked the form information on them. Therefore, the form design of building new tasks needs to be optimized.
When filling in a form, one way is to add a step bar. This method is common, but it is easy to cause information fragmentation. If there is a strong connection between the information, then the processing method of the next page of the step bar will make the form information Interruption can easily cause users to get lost. When filling in the form on the PaddlePaddle platform, the user needs to be able to compare the form information up and down. Therefore, in this iteration, I used the second method, grouping the form information on the same page and adding page anchors.
Through each area, users can judge the attributes of the information they fill in through the step-by-step area and the catalog anchor points on the right, quickly find the relationship and information location, predict their own operations, and reduce user frustration.
7 Optimize copywriting
Due to the previous problems of the Paddle platform, some copywriting ambiguities and inconsistencies appear, such as redefining the platform resource as a group, helping product manager to optimize the previous problems of platform copywriting in the new group dimension.8 Component
In order to respond to rapid development iterations, the interaction design uses the components of Baidu Cloud-Cloud Design. Because of the limitations of the platform, the components are also be optimized while iteration.For example, the cascader button/menu can be used when there has more than two levels. The advantage of this cascader button/menu is that it can hide the options, reduce the clutter of the interface compare with the tiling options, and display the selected options after selection.
这种组件常用于地域选择，在antdesign中有出现，将其定义为级联选择。
9 The Conclusion
Paddlecloud is a complicated to-B platform. The difficulty for designers is how to quickly understand the business and convert professional language into user language. The product manager defines platform users as mid-level and senior users, but in fact, according to the interview datas collected from the user group, even though the users are mid-level and senior experts in the deep learning industry, but they may not be experts in this deep learning (other code directions) direction, there are still many operation problems for them. So for to-B projects, an eternal problem is how to make them easy to use, because we usually assume that to-B users are experts, and they don't need a good experience, as long as the to-B platform can be used.Although the to-B platform is usually more complicated and the business is highly professional, it is important for interaction designer to simplify the complexity of to-B platform.
This project still has some problems and needs to be optimized. For example, there are many product managers and developers on the platform, and the opinions of different teams are not unified.
Later iterations require designers to promote event tracking and qualitative research on new version users. Quantitative and qualitative data can promote designers to look at the outputs more rationally and more reasonably.
Fin
No reprint