The Human Element

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.

  1. 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.

  2. 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.

  3. 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.

  4. 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?

  5. 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?

Finally, an easy to follow design course

Receive a design lesson in your inbox each week, hand crafted by a design pro. Learn at your own pace, and apply it to your real life work – no fake projects here.

No spam ever. We promise.