designing-loading-time-in-web Web Design

Web Design

Designing the 'Loading' Time in the Web

This question asks how to design the 'waiting time' while a web page loads, not as mere technical delay but as an integral part of the design. Through progress bars, skeleton screens, animations, and messages, we can shape the loading experience to reduce user frustration, convey brand personality, build trust, and more. It explores the idea that time itself is a design element, and the possibility of transforming waiting time from 'wasted time' into 'meaningful time'. It also touches on the philosophical aspects of 'time' in digital spaces.

01 Functional Minimalism

Focus on minimizing extra elements during loading and prioritizing actual load speed. Waiting time is seen as 'waste' that should be shortened by technology.

02 Expressive Waiting Design

Actively design loading time as an opportunity for brand expression and emotional engagement. Use animations and messages to add personality and turn waiting into 'enjoyable time'.

03 Transparency-First

Prioritize accurately communicating loading progress to manage user expectations realistically. Favor honest feedback over excessive embellishment.

04 Psychological Time Manipulation

Based on cognitive psychology, manipulate users' time perception to make actual time feel shorter. Achieved through visual feedback and task segmentation.

  1. When a page takes a long time to display, how do you feel? What kind of display would make you feel a bit more at ease?

  2. Why do you think seeing a moving progress bar makes you feel 'it's progressing'?

  3. How does your perception of waiting time differ when seeing a skeleton screen versus a completely blank white screen?

  4. If a brand logo or fun animation appears during loading, how does your impression change?

  5. Which makes you feel more at ease: just the text 'Loading...' or a specific 'estimated remaining time'?

  6. Do you tend to think of slow loading as 'design failure' or 'technical limitation'? Which is closer to you?

Actual Time vsPerceived Time
Ideally, make it technically fast, but even if actual time can't be changed, perception can be manipulated. Which should be prioritized?
Honesty vsStaging
The balance between honest communication of accurate progress and staging to entertain users. Excessive staging may damage trust.
Value of Waiting Time vsEfficiency
Dismiss waiting time as 'waste' or find value in it as 'part of the experience'. Is the latter acceptable in today's high-speed society?
Universality vsBrand Personality
Should all sites provide similar loading experiences, or differentiate with unique designs per brand?
Talk note

This theme is about considering the boundary between technology and design, and how to handle the invisible element of time. It can broaden the dialogue widely from practical UX discussions to the philosophical meaning of 'waiting'.

Loading Time
The time required for web page or app content to fully display. A technical metric that also significantly impacts user perception and experience.
Perceived Performance
Not the actual loading time, but how fast it feels to the user. Skeleton screens and progress indicators can make it feel faster than it actually is.
Skeleton Screen
A technique to preview the page layout with light gray placeholders before content loads. It visually fills the waiting time and sets expectations.
Progress Indicator
UI elements that visually indicate task progress. Circles, bars, steps, etc., informing users how long they need to wait.
Temporal Design
An approach that treats time itself as a subject of design. Actively designing loading times, transition times, waiting times to optimize the experience.
Ice breaker

Please tell me about a recent experience where you got frustrated with a web page loading. What was displayed on the screen at that time?

Deep dive

If you were a web designer and could freely decide how to design loading time, what kind of effects would you include? Why do you want to do that?

Bridge

While listening to the other person's loading experience, quietly imagine: 'If this waiting time had been a 'meaningful time', what kind of experience would it have been?'

  • Relationship with error messages on load failure
  • Experience design for offline scenarios
  • Time design for sites with heavy videos or images
  • Consideration for elderly users or low-speed connections
  • Storytelling that leverages loading time