Loading pattern


43
views
0
11 weeks ago by
Link to the loading pattern audit:
https://digital.westpacgroup.com.au/confluence/display/CPL/Loading

Have you ever integrated waiting time into your designs?
1. Upload examples of what you've used for your project (and what worked/didn't work)
2. Comment on the patterns that are posted below (and why you think it works, doesn't work)

Types of loading seen in the audit:
  • Inline loading
  • Page load
  • Forced load (we're processing/transforming info)

What it represents:
  • Loading
  • Processing
  • Thinking

What it does
  • Gives visual feedback to communicate that the request has been received
  • Fills the uncomfortable moments that users have to wait for content to load
  • Shortened perception of waiting time

4 Answers


1
11 weeks ago by
Lukas  
Skeleton loading

Based on last retrieval of QuickBalance accounts we can anticipate which account will be shown in what position and show skeleton placeholders while loading. 

This allows us to expand the tile to the correct size immediately after user taps "Show" (instant visual feedback), without having to resize it after we hear back from the server.

 

This is excellent. Exactly the kind of stuff we need to see. Thanks :-)
written 11 weeks ago by Amritah Pathak  
I love this loading pattern.
written 10 weeks ago by Bradley Cho-Smith  
0
11 weeks ago by
Inline loading
A section within a page loads

 

0
11 weeks ago by
Page load 
Entire page loads

Example 1

 

Example 2

 

Example 3

 

0
11 weeks ago by
Forced load
We're processing/transforming information 

 

Please login to add an answer/comment or follow this question.

Similar posts:
Search »
  • Progress stepper
    Link to the audit of existing stepper patterns: https://digital.westpacgroup.com.au/confluence/di...
  • Placeholder text
    Link to the audit of placeholder text patterns: https://digital.westpacgroup.com.au/confluence/di...
  • Personal details
    Link to the audit of existing personal details patterns: https://digital.westpacgroup.com.au/conf...
  • Validation - success
    Link to audit and desk research: https://digital.westpacgroup.com.au/confluence/display/CPL/Valid...
  • Mandatory & optional form fields
    Link to audit and desk research: https://digital.westpacgroup.com.au/confluence/pages/viewpage.ac...
  • CTA button group (group of call-to-action buttons)
    Link to audit and desk research: https://digital.westpacgroup.com.au/confluence/display/CPL/Forms...
  • Help text
    Link to audit and desk research: https://digital.westpacgroup.com.au/confluence/display/CPL/Help+...
  • Header pattern
    What factors do you take into consideration when designing headers? Upload examples of what you...
  • Search pattern
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...
  • Mobile Wallet (AKA Tap n' Pay)
    1. Upload examples of what you've used for your project (and what worked/didn't work) 2. Comment ...