When designing anything, there is the common problem of how do we keep people moving through our design? The full experience is what every user needs. So many hours spent perfecting the smallest of details to create something elegant and beautiful, but no one sees it. In fact, they don’t even understand it. How could that be? You spent countless hours constructing the perfect work of art that would rival the works of Picasso. Cue microinteractions. These subtle hints in any design keep users moving forward and satisfied until the end. Not everyone has come here to simply view the beauty of your work. Most people for that matter. They came for a reason and we must respect that. Our goal with microinteractions is to show an incredible design paired with the practicality of time constraints.
The most advantageous aspect of using microinteractions is that they can help users discover the full worth of what you have created. This can be designs, great interactive features, content, or anything else for that matter. These small aids can help people dive further into the process, allowing them to discover something they might not have even known they needed before. Here’s a few suggestions:
Arrows
A simple idea, yet arrows can make all the difference. This gives someone a direction to where they should go if they came looking for something. Follow the yellow brick road and you will find what it is you seek.
“Click Here”
Putting the words can make all the difference. With a “click here” model you can expand it in any way you see fit. This could be in the form of word transformations, scrolling effects, or transitional guides. Whatever tickles your fancy really. Use this to your advantage to keep people moving.
Touch Transitions
Even the smallest details can enhance someone’s experience. This can be something as small as having a button that transforms in the event of someone hovering over it. Imagine on your site you give the option for a visitor to toggle music off and on, but when select to either turn it on or off, the button transitions into what is they have it set to, i.e. paused or playing. You can go as far as to make the different modes different colors as an added bonus for those who choose to interact.
Whitespace
Negative space or whitespace, whatever you would like to call it, is the use of space where nothing is. This could include a big chunk of your website that is feel with nothing more than color while your text and/or pictures sit off to the side. You’ll know what looks good as your designing and refining your design. This could also be seen with padding for text. The use of whitespace allows for you to control content and keep it neatly set out for viewers whether they be on a desktop, mobile device, or tablet.
Sticky Interactions
Website viewing is moving more and more towards mobile viewing every day and with that comes the mobile-first design concept. Designers are starting with mobile designs and moving upwards towards desktop views. With condensed space, what are you to do to include everything necessary while making it appealing? Utilizing micro-sticky interactions can be a great use of space that will only deploy when someone clicks on it, which can be stored in a header or maybe even a footer so as not to clutter someone’s view too much.