Much has been written about using “real-world metaphors” in computer interface design, especially web design. People living in the real world – most of us, as I understand it – have an innate understanding of what a button, switch, or checkbox is for.
Developers have leveraged this to create visual metaphors which are easy for nearly everyone to use. When a person sees a button, they already know what they’re supposed to do: push it! When they see a switch, flip it! When they see a box, check it! Move sliders! Drag folders! No matter how complicated the action may be from a programming standpoint, nearly every interaction between a computer and its user can be reduced to some kind of real-world metaphor.
Over the years, a set of standards has grown up around computer interaction. For the most part they’ve appeared organically and become accepted as a kind of visual shorthand. Every so often, a standards authority like the World-Wide Web Coalition (W3C) will codify exactly what, say, a checkbox should look and act like. This is necessary to ensure a consistent baseline experience for different users on different systems. But for the most part, it’s given to the developer to create his or her own metaphors, depending on the needs of the project.
Recently, some designers have started playing with what have been very straightforward ways to display information. Essentially, they’re breaking down the old metaphors and reimagining them in creative new ways. Here are a few examples:
Scrolling: Scroll bars are normally used to indicate your vertical position on a long page. But Javascript libraries like ScrollMagic change the scroll bar metaphor from positioning to progress. Now web artists can create what are essentially animated narratives which advance as the user scrolls “down” the page, and rewind as they scroll “up.” It’s not just a storytelling gimmick, either; if you can actively scroll through a product’s different color selections easily in your ecommerce site, it may greatly increase your user’s engagement.
Selecting items from a menu: Put away your old select dropdowns. This most basic of interactions has become a cornucopia of fun options thanks to 3D transformations built into CSS3. From sliding-door animations to context-sensitive flyouts which change functionality for responsive sites to bending sidebars to elaborate zooming pages, dropdowns and navigation menus have become a fantastic way for designers to show off both the technical chops and their creative side.
Typing: Perhaps the most straightforward action of all, but it can be improved. One library entitled Long Press makes choosing international characters a snap by holding down a key longer than usual, while Typeahead.js and similar libraries examine what you’re in the middle of typing and creates a dropdown of suggestions on the fly.
This is just a tiny smattering of the raw creativity on display on the Internet. As designers and developers continue to deconstruct how things are “supposed” to work, there can only be more amazing changes lurking in the future. Perhaps in the future, interaction might evolve a whole new set of “web-world metaphors” – which will just give the next generation of designers the opportunity to smash those expectations, too.
We at Matcha Design take pride in building creative solutions for our clients, and all it takes is one email or phone call from you to get us started on building yours. Contact us today and discover what we can create for you and your business.
