Your friends at Viget present Inspire, a Design & Interaction Blog

Experiments in Loading - How Long Will You Wait?

Intro

Entering Viget’s summer internship program, I was asked to devise a solo user experience project. Once I came across past Viget UX experiments I knew I wanted to add to this body of research. I quickly honed in on studying the ubiquitous digital experience of the loading animation.

 

Background

Waiting for something to load can be boring, especially on the web. By making a loading screen less generic and more novel, we might be able to make time seem to pass more quickly or even make the wait more pleasant. I set out to see if a novel branded loading experience would in fact make users more willing to wait longer for a page to load than an unbranded generic loader.

The first step I took in devising my test was to create several Viget branded loading animations (pictured below). I wanted to create animations that were comparable to the common generic animation you see populate the web, like the spinning pinwheel or loading bar.

 

 After several iterations and a few critiques I narrowed my test animations down to three branded and three unbranded animations (pictured below).

 

Experiment Design

The experiment (which is still active) was created in Optimal Workshop’s screenshot click test, Chalkmark. Over the course of a week, 106 participants took the test.

The entire test was, in effect, a deception. After agreeing to begin the test, participants were presented with a loading screen ahead of the first task. What users didn't know was that this loading screen was never-ending, and that they were already being tested. The test recorded how long participants would wait before deciding to abort the test or click the link that said "Click here if the test does not load.”

Of course, that usability test never appeared. Participants who clicked anywhere on the screen were routed to a screen that thanked them and informed them that they had just participated in an experiment to test users’ willingness to wait during loading experiences.

During the loading screen, each participant was randomly shown one of six different loading animations.

 

Experiment Results

 

Analysis 

Despite some individual variation, novel loaders as a whole had a higher wait time and lower abandon rate than generic ones. Individually there were no clear ‘winners’, the ‘Branded Orbit’ animation kept users on the page for the longest time, but also had the highest abandon rate among the novel branded experiences. The ‘Loading…’ animation, while having the second highest average wait time, had a significantly higher number of participants abandon the page compared to all the other animations.

Overall, the branded loading experiences as a group held participants' on the loading page for longer, and had lower abandon rates than the non-branded, generic experiences. I’d surmise that this could be due to participants...

  • assessing the experience they are waiting for to be of more value because time was put into crafting a unique loading experience.
  • becoming fixated on the colorful and novel aspects of the branded animations.
  • readily perceiving the generic loaders as being fundamental errors within the site.

 

Conclusion

Of course more data needs to be collected to have a concrete conclusion. If I could expand the experiment I would love to test how long a user would interact with interactive loading experiences like the mockup below.

I hadn't expected to spend my summer testing interaction design patterns, but I'm grateful for the experience. This whole project taught me a lot about the processes involved in testing, and gathering UX data. I entered the project feeling like a designer, but I left feeling more like a scientist.


5 Things I Learned from the Viget Design Team

Beginning mid-June, I started my time as a bright-eyed, bushy-tailed design intern at Viget. Over the course of 10 weeks, I picked the brains of the talented design team here and have learned a few things - very evident through my now brimming Evernote notebook ­titled, “MY VIGET SUMMER”

Though it’s nearly impossible to record everything, I’ve picked out 5 relevant points, summarized here: 


Introducing Fare: E-Z Pass for the Metro

In January, I moved to Paris for a semester abroad. I adored the art, the café filtres, and even the metro. One thing I didn’t love, however, was trying to make the train for morning classes. I always seemed to get stuck rummaging through my bag for my NaviGo pass as the Gare d’Austerlitz-bound train wooshed past below my feet.

When I started my UX internship at Viget, I needed a topic for my 10-week long solo project. My advisor, Samara, urged me to find a problem and ‘UX’ it. The options were endless: I could solve boredom while jogging, pretension in coffee shops, and even waiting at the DMV. But I remembered the countless last-minute searches for my train pass (inevitably at the height of rush hour) — be it my NaviGo, my Charlie Card, or my St. Louis MetroLink pass. Why wasn’t there a multi-city payment app for public transportation?

Well now there is. Meet Fare*, an app that solves the problem of the tiny-yet-cumbersome subway card — like E-Z Pass for trains and buses. (View a clickable prototype on InVision).  

Fare is lightweight, and opts for simplicity above all else. It replaces subway cards, so users just add a credit card to their accounts and scan through the turnstile using Fare’s QR code. The app works city to city, so it’s the same experience, say, on the bus in Boston as it is on the train in Chicago.

Fare was not only a chance to work on my user research, sketching, and animation skills but it was also a valuable learning experience. Here are some lessons I learned along the way.


How to Hold a Remote Design Studio

A design studio is a group brainstorming session where participants sketch, share, and iterate in order to explore various design directions and come up with new ideas.

Usually, design studios are held at the start of a project. In my case, however, my mentor suggested that I hold one during a transitional phase in my summer project. I was shifting mediums from a somewhat static text document to an interactive web app, and wanted to get some fresh perspectives and energy.

My Viget colleagues were eager to help out, and I managed to put together a diverse team spanning design, development, business development, and user experience across our different offices. This added a challenge—running a design studio remotely—but the result was well worth it. I couldn't have asked for a better group.

Today I want to share five things that helped our remote design studio run as well as it would have in-person.


From Professional Development to Product Development

There are many things to love about working at Viget, but one thing has stuck out to me as especially valuable and unique: professional development.

Professional development is a category that every Viget is required to put some time into. We talk about it in our one-on-ones with our directors and in our discussions within our respective labs. We also hear about our talented co-workers’ side projects via slack or at Free Lunch Friday. There’s no strict definition of what counts as “professional development” but it can include anything from writing blog posts, reading up on our industry, learning a new skill, and attending events. I’d like to talk about why that’s been valuable for me — and how it led to an attempt at launching a product!

The Project

Over a year ago, I decided I wanted to embark on a design challenge — to illustrate and design a deck of cards. This was an important goal for me in a few ways:

  1. I’m an avid card collector.
  2. I wanted to get better at illustration.
  3. I wanted to try launching a product on my own.

Now — this was a traditional ‘art’ project, one that I hoped to get printed. That’s not really in line with the digital focus we maintain at Viget. Not surprisingly, though, my director and team encouraged me to pursue my project. I found this directive and support to be incredibly helpful for me in a variety of ways.

Stronger Technique

Learn by doing right? I picked up so many handy tips and tools along the way due to the restrictions of working in an Illustrator-only environment. (The cards are offset printed, so colors needed to be divided, artwork should ideally be vector, etc.) It’s really surprising to me how much I learned about Illustrator on this project, and how many of the techniques and tools I wasn’t familiar with at the outset.

By the end, I was zipping around with all kinds of new shortcuts. Two huge time savers for me:

  1. Quickly selecting specific pieces based on artwork attributes via Select > Same > Fill & Stroke (I have this mapped to Command + F)
  2. Pathfinder’s Divide functionality - the holy grail to getting artwork print ready, and separating your colors.

Illustrating More Often

When and where it’s appropriate, illustration can elevate a product and set it apart from every other experience. Illustration has been a topic for many of our designers here over the past few months, and we’ve been working it more and more into our projects with great success. (Just look at Blair’s amazing work for the Lupus Foundation!) The playing card project solidified my love for illustration and has unlocked a part of my skillset I was afraid to use in the past.

Professional Development Is Personal Development

By the end of the project, I had a great portfolio piece, a new set of skills, and renewed energy as a designer. Taking the time to dedicate myself to a specific design goal brought new life to my work, to my job, and to myself as an individual.

Other aspects outside the traditional design role included marketing, financial planning, and strategy. I’ve chosen to launch Bloodlines on Kickstarter — and with that comes a lot of work to understand how to market, sell, and ship a product (all while balancing the cost of the endeavour!) These are not traditional parts of my day-to-day job, and it’s been exciting to gain exposure to these new fields.

In Conclusion

I think it goes without saying that professional development is a positive thing that all companies should embrace. By making it a part of my overall evaluation at the company, it pushed me to explore pieces of my skillset that I had not previously tapped into, taught me valuable lessons, and helped me grow as both a designer and a person. Most exciting—the idea of this project actually becoming a real, tangible thing!

To see more...
Check out the Kickstarter!