The Human Element
Scott Hurff
Lesson 39
User interfaces consist of so much more than a series of mockups, typography choices or error states. The interactions that happen beyond the static are those that introduce life into your interface — enabling you to reward your users’ proficiency, increase positive emotions, and introduce new methods of interactivity that have permeated app design for years.
This week’s lesson will take you through the power of animation, controls that morph as a user gains knowledge, and interfaces inspired by the future. These are important elements to consider as our world evolves away from the desktop and into mobile, introducing touch controls that are more intimate and personal — controls of which we as product designers have barely scratched the surface.
-
Transitional Interfaces
Think about the story you’re trying to tell to your users and how motion can aid in your narrative. Animation gives you power to help guide a user’s eye to what’s important — and can also provide visual cues for elements with which they can interact.
-
Futurist Mobile Interaction Design
What would happen if your interface didn’t rely on “standard one-size-fits-all” navigation metaphors? What if your app’s interface eliminated legacy structure and navigation? The Prismatic team does a great job of forcing one to think about how to reimagine core interactions without blindly relying on universal convention.
-
A Brief Rant on the Future of Interaction Design
Think bigger. Every day we’re lucky enough to be able to create little slices of the future. And that future doesn’t have to be driven by “sliding pictures under glass.” How can you create interfaces or interactions that break convention, but are immediately understandable? How can you make your dent in the universe? Bonus: watch this video on how we can learn from sci-fi interfaces.
-
The Illusion of Life: How vivid animation can uplift digital experiences
Now that you’ve seen the potential held by transitional interfaces, let’s dive a little deeper into how you can practically design animations that trigger positive emotions. You should take time to read the “12 principles of animation” and download Wagler’s custom JQuery plugin to create animations of your own. How can you apply some of these principles to your design challenges? Where could you install an animation you’ve created with this plugin right now?
-
Progressive Reduction
After exploring how animations can trigger positive emotions and increase a user’s proficiency with your interface, let’s look at how you can reward users for this increased proficiency. LayerVault creates a “proficiency profile” for every user. Over time, they’ll reduce the complexity of certain interface elements to reward power users. How can you use this framework to ensure your users are always educated about how to use your product? Where could you implement Progressive Reduction this week?
Scott Hurff
Head of Product, Chill
I'm an entrepreneur and product designer living in Los Angeles, California. I'm on the founding team of Chill, where I lead product. I'm writing a book called "Perfecting Product Design." It's an examination of product design and a step-by-step guide that teaches product designers how to think smarter, act faster, and simplify the process of turning ideas into usable products.
