Loading

Estimated reading: 3 minutes 145 views

Principles

Loading in DocuWare products should be:

Fast
Meaningful
Focused

Fast

Planning

Designers should plan navigation and content up front, determine what content users will need first, and make it available as soon as possible.

Cash

Caching data can help to optimize loading time during the session. Consideration of reusing caching data throughout the flows and showing essential content first while other content loads can improve the User Experience.

Preloading

Prefetching data relevant to the context and use cases can help to speed up loading time.

Viewport

Content visible in the viewport should take precedence and be loaded first. Loading this content should not be delayed by other content users won’t need until an interaction occurs, such as scrolling or clicking a popup.

Meaningful

Placeholders

Placeholders let users anticipate content type and location. Placeholders should be used to visually distinguish UI elements and content as well as provide visualization of the future page layout. Skeleton content can serve the purpose.
Designers should avoid using placeholders for content that couldn’t be rendered or giving too many details in the placeholder that may not appear. The User Interface should not draw attention to it and set false expectations.
The page layout during loading should allow users to scan and understand the page structure. Matching layouts set clear expectations and encourage users to be proactive. Mismatched layouts can confuse users.

Controls

Designers may consider rendering important controls earlier, even when the data behind it hasn’t finished loading. In this case, users can take action before the page is done loading.

Useful information

Load times can be used to show the user necessary, practical, and contextual information. Designers may plan different activities for the pages with significant loading or rendering times.

Focused

Loading progress

The user interface should inform users that the system is working by showing real progress. In addition, it draws people’s attention to the content and keeps people engaged in the task.

Spinners

Spinners should be used when it’s not clear that the system is working, but only when it improves the user experience. Excessive use of loading indicators is not informative. Instead, it can be overwhelming and make the system appear slow.

Avoid

Avoid using spinners as placeholders

Content should always be meaningful. If spinners are needed, they should be placed where it’s easy for users to understand what is loading, or they should be used alongside labels. It helps draw attention to the content about to appear rather than the spinner itself.

Avoid empty views with spinners

Empty views with spinners can confuse users, provide low value and cause them to become passive and withdraw.

Avoid false expectations about loading time

People will likely be frustrated and give up on their tasks if loading times exceed 10 seconds. Expectations should always be clear and allow users to make an informed decision to wait. Designers need to add value to the loading process or communicate upcoming value to increase the likelihood that users will continue to engage with the task.

DocuWare Design

Loading

Principles

Fast

Planning

Cash

Preloading

Viewport

Meaningful

Placeholders

Controls

Useful information

Focused

Loading progress

Spinners

Avoid

CONTENTS

Loading Patterns

Alerts

Banners

Bias-Free Language

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input