Capstone · Dell Technologies
Improving waiting time using progress indicators
Researching spinners, progress bars and skeleton loading, testing them with users, and turning the findings into usage guidelines for Dell’s design systems.
Partner
Dell Technologies
Program
MS-HCI capstone, UT Austin
Methods
Research, interviews, usability testing
Participants
6
The dashboard used in usability testing
Overview
Goals
01
Assess deltas between these design components from DDSp and DEF
02
Create usage rules and accessibility guidelines for each component
03
Develop a new component for use within Dell products
04
Provide documentation for design and development standards for the new component
The components in scope
Spinner
Loading…
Progress bar
Label One
39%
Helper Text
Project plan
1
Overview
Started with planning out the project with the team: identifying expectations and potential concerns, and defining clear goals to guide the project’s direction.
2
Research
Studied articles and papers and interviewed employees at Dell to understand the use cases. Based on these findings, documented preliminary guidelines for the components.
3
User testing
Conducted test sessions with six participants, with a questionnaire to gather feedback. Analyzed the results and identified key findings that informed further development.
4
Results
Prepared comprehensive guidelines for the components, documenting findings along the way, and handed them over to the team.
Research
Initial research
What the literature says about giving feedback while people wait.
> 1.0 s
Provide feedback for any action that takes longer than 1.0 second.
Fast actions
Use looped animation only for fast actions.
> 10 s
Use percent-done progress animations for processes that take more than 10 seconds.
Long processes
Show the start time, stop time and total time elapsed.
During
Share what occurred during the process, such as new records created or steps skipped.
After loading
Indicate the status of the task once loading is done.
Sources included
Nielsen Norman Group
TED: How the progress bar keeps you sane
Interviews
From the interviews, I learned how loading components are used across use cases. Loading time is not the only factor that decides which component to use: task priority and UI complexity matter too, and both need to be considered when choosing a loading component.
When I think about the determinate progress indicators I always think it’s about informing users how much time is left.
There should be a difference between a best practice and the usage rules.
Sometimes users do not care about what is processing, they just want to know the end results.
It’s really hard to visualize the animations of progress indicators through a design system.
Design systems
Dell
DDSp and DEF
Spinners and progress indicators are commonly used to show loading status. The design systems specify use cases and break down each component’s anatomy and subtypes. Spinners are recommended for loading times between 1 and 5 seconds.
Benchmark
Other design systems
Studying other design systems revealed a third loading pattern, skeleton loading, which they prefer over spinners. Their guidelines for spinners and progress bars mostly align with DDSp and DEF.
IBM Carbon
Google Material
SAP Fiori
Salesforce Lightning
Adobe
Shopify
Zendesk
Goldman Sachs
What is skeleton loading?
A skeleton loader shows a blank version of a page, or a section of it, into which content is gradually loaded. It gives a visual estimate of the space needed.
Skeleton screens are perceived as shorter in duration when compared against a spinner.
They create the illusion of an instant transition. Studies suggest skeleton loading reads as a shorter loading time than spinners.
User testing
Skeleton vs. spinner, tested with real tasks
Hypothesis
Displaying a skeleton screen will cause people to perceive a loading period as shorter, and give them a better experience.
The test
Very short
< 1.0 s
Short
1.0 – 5.0 s
Long
> 5.0 s
Dashboard home screen · Cards
Infrastructure page · Tables
6 participants
Follow-up questions after each task
Try the prototype
This is the prototype participants used. Click through it right here on the page; there’s no need to leave for Figma.
Interactive prototype
Participants
Six participants: four Dell employees and two people working in the IT industry. All had experience across SaaS, B2B and B2C products. Tasks and timings were counterbalanced to eliminate bias.
6
participants
4
Dell employees
2
IT industry
Results
Which loading state participants preferred at each wait time.
Skeleton
Spinner / no spinner
Less than 1.0 s
2
4
Spinner preferred
4 of 6
1.0 – 5.0 s
5
1
Skeleton preferred
5 of 6
More than 5.0 s
4
2
Skeleton preferred
4 of 6
On perceived speed, 2 of 6 participants felt skeletons were faster than spinners; the other 4 felt both were the same speed.
How each one felt, in participants’ words
Skeleton
Informative
Patient
Interesting
Pulsating
Subtle
Entertaining
Appealing
Distressing
New
Curiosity
Monotonous
Spinner
Impatient
Continuous
Stressful
never-ending
Small
not-appealing
Fast-motion
Time-taking
Common
Revolving
Results
Guidelines
The skeleton loading guidelines I wrote and handed over to the team.
01
When to use it
When to use
Container-based components such as tiles and structured lists, or data-based components like data tables and cards.
When navigating from one page to another, or to progressively load different parts of a page.
When the system can predict the format of the loading content.
Do
When not to use
Overflow menus, toast notifications, dropdown items, modals and loaders. Elements inside a modal can use a skeleton.
When the system has no control over the content that’s loading; use a spinner instead.
Don’t
02
Colors
Use neutral or grey colors for skeletons.
Colors should be neither too dark nor too light.
Do
Neutral grey
Don’t
Too dark
03
Anatomy
Each element’s height should match the height of the component or the text it stands in for.
Components like buttons can have an explicitly set size.
Use different shapes according to the environment.
Do
The skeleton mirrors the loaded content
Lorem Ipsum
Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nulla aliquam, convallis enim eget, sodales enim. Maecenas quis pretium odio.
04
Interactions
Skeletons should always have a subtle pulse or wave; they should never be static.
They should be responsive across all viewports.
Motion shouldn’t be so fast that it draws attention to the skeleton.
The wave should move from left to right in a continuous motion.
Do
Subtle left-to-right wave
Don’t
Static, no motion
Reflection
Learnings
What I learned
Consistency in design systems comes from clearly explaining how to use each component, through best practices and use cases. Waiting can’t always be eliminated, but better feedback reduces anxiety and irrational impulses and improves the overall experience.
If I had more time…
I’d investigate how skeleton loading behaves across more use cases and how it performs against spinners in further usability testing. This project looked at macro-variables; next I’d study micro-variables, like the skeleton’s motion, and their effect on perception.