Delivering Services for Backend System Users with Progressive Thinking

Delivering Services for Backend System Users with Progressive Thinking

2018｜Typ: Original｜Tag: Experience

Progressive thinking emerged in design theory a very long time ago. Nielsen mentioned progressive disclosure in his article in 2006. With the growth of products and users, the stage of usability has changed. Progressive thinking helps designers reflect on the stage users are in throughout the whole journey, and provides step-by-step design for users.

Reminded me of the term progressive Progressive Web App (PWA) in Google I/O 2017. PWA was described as follows:

Reminded me of the term progressive was Progressive Web App (PWA) in Google I/O 2017. PWA was described as follow:

Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
Engaging - Feel like a natural app on the device, with an immersive user experience.

Progressive Web App is committed to providing a loading instantly, responding quickly with silky smooth animations under different network conditions and devices, which reminded me of the application of progressive thinking in backend system design patterns.

The increase in web features means that more and more user tasks lead to more and more information. A backend system is usually built with general features and product features.

General features are relatively stable, including account & permission, role & configuration, settings, visualization of kanban and report, message push, help center, and CRUDs based on features, education and learning of these modules gradually decrease as users become more practiced in use.

On the opposite, the keep-coming product features delivered by the backend system are figuratively increasing entropy. In this process, users will be constantly exposed to new product features, and the education for new users will gradually increase.

Delivering the whole features to your users with a package deal has raised not only the danger of overload but also the threshold for using your product, especially in industries where the terminology is frequently used. In a comprehensive professional backend system, complexity needs to be supervised. Here is a way, to standardize and minimize general features and design a scalable pattern to decrease entropy.

Learning Costs Over Time

Advanced journey, helps users at different stages to understand features, and optimizes user experience for progressive users.

During the initialization, the design can take into account simple linear processes such as the first new user task. When the user completes the new user task, the system could load more content by asynchronous loading, and the skeleton screen could be more user-friendly if used.

Preloaded

According to the change of the same user task over time and experience, users can be subdivided into three types, probationary users, new users, and experienced users. When users enter your system and use certain product features frequently, it means they exactly know where and how to use it. That’s the scenario in which we could build an advanced journey.

For probationary users, help them become familiar with core features.

For Probationary Users

For new users, help them go through the whole new user task.

For New Users

For experienced users, help them clearly use core features and understand subordinate features.

For Experienced Users

Retreat is as important as advance. As users become unfamiliar with features, take them backward into consideration and offer the necessary help when users need it.

At the same time, UI designers are easy to fall into the trap of an immutable design language, which is apparently designed for experienced users. It seems to be a thinking set. Of course, there is no need to teach experienced users, in this context, designers could pursue extreme simplicity. But it must be acknowledged that sometimes the product goes too far in simplicity, creating a huge service gap for new users. The problem here is not to design for which type of users to focus on, but to design without considering the variety of users over time. UI Interface needs to meet user growth.

Staged flow, provides smooth and quick responses to user actions.

Staged flow is a variant of staged disclosure. Rendering, pre-cache, and lazy-load are needed to be considered to optimize minimum time-to-interaction, especially on first use. Take three levels - page, modal, and component - into account when you design a flow. When a task is triggered, the user would enter the first step of flow under smooth animation as well as perform the remaining steps. Sub-step could be revealed if required. With a clear objective, every step in its container should follow the principle of progressive disclosure. While reducing visual distractions, guide and educate users with staged disclosure.

The page level: The flow of creating forms in the back-end system for instance. The complexity of contents with different types and levels in its vertical field, also the volume and variety of data drive users crazy to fill up. A single page with staged disclosure may help users to relieve this heavy burden. Preparing pre-cache for the core features helps to improve the efficiency of creating forms.

Staged Flow at the Page Level

The modal level: modal, such as dialog, popover action sheet, etc, is a strong communication between the interface and users, it requires that users subconsciously focus on a specific area to perform the tasks. Modals follow contents, design needs to set simple and consistent rules for different scenarios.

Staged Flow at the Modal Level

The component level: In atomic design, In the process of combining atoms into molecules and molecules into tissues, think about whether you will find interesting chemical reactions in the process of combining, It is possible that the two elements are not just a process of combining and splicing, but that the chemical bond is broken under certain conditions, forming a new molecule or tissue. Design can provide conditions for chemical bond break, the design thinking of staged disclosure, and how users perform the task when there are multiple elements combined.

Staged Flow at The Component Level

Providing a module for content in a container based on three levels could achieve interface decoupling and artifact separation. Also, app shell + content could reduce costs through the reusability of code components.

Progressive interface, helps users quickly focus on core information.

The progressive interface is also based on Progressive Disclosure. Task uniqueness inherits the idea of progressive disclosure, highlighting important elements.

With the stacking of website features, a common phenomenon that puts all the features in a visible area is on the stage. Similar concepts, fuzzy semantics, and scattered buttons drive the interface into a pseudo-efficient situation. Entropy increased by stacking features leads to the custom interface. It’s not a big trouble for experienced users, but probationary users and new users may fall into a trap. Users of complex back-end systems, need powerful performances and enough options to meet their requirements for general features and product features. At the same time, they also need to use the product simply and with less learning costs. Besides the advanced journey, it’s a good opportunity to provide progressive disclosure for interfaces such as pages, tissues, and molecules. Provide users with core functions, defer secondary functions to secondary areas or even hidden areas, and only expose higher-level task flows and information content when triggered by the user. This helps both probationary users and new users avoid mistakes and reduce the time spent on unnecessary features. Also, it sets two standards for design:

Appropriate splits for the initial, the common, the advanced, and the auxiliary. Show clear guidelines for the initial, provide everything that the common often needs, and provide a clear and visible entry for the advanced and the auxiliary. It is a basic requirement to set the division for the container, focus progressively, display hierarchically, and formulate the principle of combining and splitting elements in design.
Appropriate upgrades for the advanced and the auxiliary. Clarify the information you need to focus on for your next steps and focus on your current step. At the same time, each step must be easy for the user to understand and deepen. Association of context, key information as well and removal of redundant information are common strategies to optimize and provide an immersive experience.

Take the data report as an example, guide the user step by step to operate and understand the story of the data by following the way. Compare and contrast the design before and after:

Before & After Design Comparison

Progressive simplicity, iteration meets user growth.

As product features increase and back-end system users grow, the design value shifts to reducing the complexity that users can perceive. The idea of progressive simplicity is simple: usability is a constantly changing goal. The user's understanding of the product will gradually deepen over time, and the interface should be updated timely to grow with users.

A delicate balance between functionality and simplicity always plagued designers. The increased functionality has resulted in a busy interface. If users are very excited about the interface, they will spend more time exploring more features all by themselves. But in fact, especially in the back-end system, users usually just want to complete the task quickly and leave. This is called the paradox of active users. This question seems to have been answered by the Nielsen Norman Group: Minimize features and pursue simplicity at all costs. Content first strategy provides an environment for users to engage without any interference, that provides ideas for reducing complexity. Complexion Reduction has been a trend in the past four years. It has the following characteristics:

Remove Color.
Bigger, Bolder, Blacker Headlines.
Simple, Thin, Recognizable Icons.
Double, NO, Triple your White Space.
Make your App Icon Brighter.

Complexion Reduction, although the advantages of the content-first strategy are outstanding, its distinctive design language also directly obliterates the product personality, making the product experience no longer unique.

Complexion Reduction

In addition, the back-end system also lacks emotion due to the repeatability of user tasks. With the growth of the business, more and more users have become the users of back-end systems. Product features can fill the service gap through emotional design and communication with users. Compared with high-quality pictures and high-definition photos, the SVG format is unparalleled easy to cache, and fast to load on the website. Vector illustrations are often used for onboarding, feature descriptions, blank status, and more. Besides, it can also provide users with valuable vector illustrations from an emotional perspective:

Users feel confused and frustrated
Happy for users
Too many texts for users to interpret
Want to communicate with users in a more friendly way

The Vector Illustration

The vector illustration strategy not only easy to get close to the user but also conveys the brand value directly. Be careful of redundant information, if vector illustration is used frequently. Providing emotional support to users’ demands in appropriate scenarios is the reference basis for using vector illustrations.

Growing communication uses content strategy to produce effective content.

What’s content strategy? Brain Traffic content strategy as guiding the creation, delivery, and governance of useful, usable content. Content strategy can be analyzed from two topics and four dimensions. For the content design, the website needs to provide corresponding effective content based on the user's needs, preferences, and expectations. The system design provides the system architecture, interface, and. Data to meet specific needs. Create, deliver, and manage content from reusable structures, testable standards, and evaluable effects.

Content Strategy

In the article, CMS Build Project Path Cleve Gibbon mentioned the traditional method of website design in a decade ago. After delivery, the content of the website is dead for a long time and it is difficult to update. Here Cleve mentioned that designing a website requires a CMS to help keep the website alive. The back-end system seems not to be a product of content strategy, but using content strategy can improve the understandability of the interface and flows, strengthen the brand tone, and help the product manager to maintain and update content. Based on the content ecosystem map defined by Brain Traffic and adjusted with the characteristics of the middle and back-end interface design, it is possible to macroscopically understand the fit of the entire product business in terms of experience design and content strategy, and achieve cross-team co-creation.

The Ecosystem Map

From the content editing, based on the brand of the back-end system, establish a Style Guide and provide corresponding Voice and tone standards. Communication between the back-end system and users will follow this standard.
From the content experience, under the guidance of the user center journey, design elements, interface templates, and standard processes for the back-end system. And guide users from text such as H1, H2, alternate text, buttons, forms, hyperlinks, etc.
From the content structure, it provides an extensible form for App Shell. We could use user research tools to classify and name features.
From the content processing, CMS is used to perform the planning, delivery, and management. Content changes as features iterate and grow. It is no longer static, but dynamic, searchable, discoverable, customizable, personalized, localized, translatable, and so on. With the development of technology, the growth of content requires the support of AI technology.

The conclusion

In the end, here are the opportunities for progressive thinking:

Advanced journey

Optimize the initialization and loading experience in the user journey.
Optimize user experience for progressive users.

Staged flow

Think from the page, modal, and component levels.
Achieve interface decoupling and artifact separation through atomic design.

Progressive interface

Clarify the difference between the initial, the common, the advanced, and the auxiliary.
Appropriate upgrades.

Progressive simplicity

Simplify design language from color, font, layout, icon, and so on.
Connect users through emotional design.

Growing communication

Generate effective content through content strategy.