Subtle Progress

For our IDSE201 Rapid Ideation class, we’ve been tasked with really noticing digital user interface elements in fine-grained detail and discuss why it works—or doesn’t.

To the left is an icon in iTunes (if it’s not animated, click the image to open it in a new window). If you subscribe to iTunes Match, each time iTunes opens, it connects to Apple’s servers in order to synchronize your music collection. Naturally, when you start iTunes, you probably want to listen to music immediately rather than wait for this to complete, so iTunes connects in the background. But it’s still useful to know that the connection is being made. Normally, as an iTunes Match subscriber, you’ll see a white cloud just the right of the “Music” text. When the connection is being made and music is synchronized, the cloud changes from white to an animated set of diagonal lines to give you a visual indicator that something is occurring in the background. When synchronization completes, the icon restores to solid white (or may contain other icons inside the cloud to indicate error states).

To the right is a detailed blow up of the cloud icon when it’s in progress. One of the nice touches is that the diagonal progress lines appear in the background as if the cloud were a cutout revealing inner workings of a device. This reinforces the idea that the operation occurring is in the background and a maintenance operation. Again, it’s not important, but may be useful. It’s this level of attention to detail that gives a product polish. It’s unfortunate, though, that the icon jumps a few pixels to the left when restoring to the white cloud, and a few pixels to the right when it shows the in progress state.