In this video, learn why microinteractions are crucial to providing a smooth, yet effective user experience.
- [Instructor] If microinteractions are so small, by bother with them at all? This is a good question and the answer is very simple, details matter. If something is not intuitive, you have lost your user. Sweating the details is what makes your site or app exceptional. Angry Birds is a great example of this. A drag event, which is the trigger, pulls the slingshot back, there is an audible sound of the rubber pulling back, and a line shows you the path the bird will travel. This is the feedback. As well the arc of the path the bird travels is the rule. All of this combines to provide the delightful details of launching an angry bird. When done well, microinteractions are the key to improved navigation, text or graphic can indicate where to go next or what to do next. They provide ease of use and interaction with your app or website. Giggling icons in a closed graphic attached to them on your iPhone, show which apps can be deleted. They communicate information about the element that's been selected. Simply graying out an interface element tells you it isn't available. It communicates to the user it is not available. And microinteractions direct the users attention. A pulsing button will be noticed much more quickly than one that just sits there. Well designed microinteractions interactions follow a maxim I impress upon my students. Fall in love with the user, not the technology. If a user gets what to do without asking, then you are on the right path. When a user gets it, the microinteractions results in a positive result for your brand. For example, if a user is presented with model pointing at an error, and that model provides no solution to the problem, do you really think that user is going to come away thinking your site or app is amazing? The bottom line is this, any website or app is nothing more than a series of simple microinteractions which combined either make or break the user experience. Now here's the bad news. Each one of those microinteractions can also have the same result. Don't believe me? How many times have you left a full shopping cart sitting on an e-commerce site because there was no intuitive way to change your order, or your credit card info had an issue and you weren't told how to fix it? Prototyping these microinteractions gives you the opportunity to design and test them before a single line of code is written. They give you the opportunity to discover potential pain points and to simplify the interaction if it is too complex. They also give the designer the opportunity to play, to add those delightful details that will engage the user and provide a positive experience when launching an angry bird.
- Preparing your comps and your workspace
- Adding keyframes and easing
- Creating a cursor
- Creating a single or double click
- Creating drags and swipes
- Building content in other Adobe apps
- UI microinteractions
- Animating containers
- Zooming in a UI
- Building 3D effects