After taking a look at InVisions highly bombastic article in The 8 most important UI animations of all time, I realized that while some of these make a lot of sense (the cursor, the spinning beach ball, and iMessage dots), others (like the Sega and AOL logos) didn’t seem to fit in with the theme. They certainly don’t warrant the “of all time” moniker in my mind.
This got me thinking about UI’s and what objects had lasted the test of time and what objects hadn’t. When I think about affordance, I go back to the definition from James Gibson’s book The Senses Considered as Perceptual Systems which he describes as “what the environment offers the individual.” We’ve all seen this before. It’s the handle on the door that indicates that it’s something to be pulled or the bar on an emergency exit that you push down on to exit. Some doors (especially glass ones) are so confusing that people resort to putting signs on them.
While not ideal, this type of ill-suited design is everywhere. Think about a UI where there is no obvious way to proceed to the next screen in a shopping cart or confusing roads to nowhere with no immediate call to action on what to do next. These are all frustrations born out of a lack of perceived affordance.
Don Norman in his book The Design of Everyday Things and subsequent writings introduces us to Perceived Affordance, which is the idea that the user should be able to understand what the next action is without actually having to know anything upfront. A great example of this is buttons and scrollbars. Those are two instances in which the user intuits what is going on and can take action accordingly.
While not as obvious as the Sega Genesis animation or even (for the time) the AOL loading screen, these feel closer in trying to attain the lofty goal of “most important” and fit a little better within the realm of the blinking cursor and the loading menu. If I where picking my 8, it may look something like this:
- Blinking Cursor
- Rollover & Hover States
- Focus Element
- Button States
- Scrollbars
- Typing Bubbles
- Tap, Swipe, Pinch & Zoom Gestures
- Loaders (Skeleton & others)
While simple, these represent things that have lasted the test of time. Granted, you could weigh whether or not they rise to the level of “important” but I think you could also say that loaders (whether they’re from Twitter, Uber, or AOL) are essentially all the same. What do you think? Is this something missing? Let me know in the comments area.