The explosion of native mobile apps this decade put a spotlight on human centered design. Apple's iPhone and iOS were breakthroughs in part because of the way they used design to mimic humans and appeal to emotion. How good a design looks now plays second fiddle to the way it feels. New terms like 'microinteractions' and 'reactive animations' have been thrust into the designer's vernacular. It's a new era of design, the 'Experience Era.'
While mobile has been killin' it in this area, desktop experiences have still felt clunky, artificial and unintuitive' until now. With advances in desktop browsers, JavaScript, and CSS variables, we're now able to add those human focused interactions that elevate the experience of using a website, app or service. They aren't just for looks either, they can help your app or website feel more intuitive and at the risk of sound cheesy, be more delightful to use.
We're exploring microinteractions and reactive animations in our own products, looking for unique ways they could add real value for users and enhance the experience. It was with one of these explorations that our latest Playground Piece was born, Reactive Listener.
Most of the interactions on the web are causal. We click a button, a window loads. We push 'submit,' an email is sent. But what if we didn't want to be so binary. What if we want to humanize our website (on desktops) by subtly making our users aware of something before they've actually interacted with it. That's where Reactive Listener comes in.
Reactive Listener allows us to affect change over an element from a distance that otherwise would not be possible. This has all kinds of potential uses. Highlighting a clickable region of the page as one gets close to it, showing and hiding extra information as one navigates related content, and even simply subtle changes in position to make page elements feel as if they are 'alive' and reacting to you.
Our minds are exploding at the possibilities of these types of interactions, and we'd love to hear any ideas you have in the comments!
