A current project in the studio will bring a large collection of museum artifacts and stories online. The challenge was to create a visually rich, scannable navigation system that not only visualizes content relationships, but also indicates their density. Easy, right? Well, not without some exploration, experimentation and finally, that which I loathe most: the user interface in motion. [Pause for dry heaves]
The solution, as it turns out, is similar to a common non-web-based user interface: the bookshelf. Scanning books on a bookshelf both informs the user of content relationships (by section) and density (thickness and size of the books). But the concept doesn’t fully take shape without a few moving parts.
Using quick, subtle motion to expand and contract content blocks, a site visitor is clearly shown where they are, where they have been, and even get a sense for what’s coming next. No disappearing content on reload, no wondering if you’re in the same section. This utilitarian animation provides a grounding for site visitors with a familiar interaction.
The resulting navigation system has a fluid, application-like feel that allows site visitors to quickly move through related content. No pointless blinking, spinning wheels or other moving parts. Just 100% pure utilitarian animation. Best of all, it’s plugin-free.