The Human Element
Scott Hurff
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.
-
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.
A good example of programming-thinking applied to design is the idea of refactoring, which designers are constantly doing while iterating on an interface. Just like in programming, your goal is to maintain functionality while rejigging the way you achieve that functionality. In programming, your public methods signatures stay the same, but their internals change. In visual design, the functionality of the product stays the same, but the visuals might change slightly to simplify the mental model for the user.
If you take a second to think about refactoring your own interfaces, I’ll bet a few optimizations spring to mind. The beautiful thing about thinking in terms of individual, reusable components while designing the visual parts of an interface is that it translates perfectly to the code you’ll be writing to build it. When you find the right abstraction everything will just fall into place.
-
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.
As motion and animations become more and more important in UI design, designers have started searching for the best tools to help them add a layer of interactivity to their work. You might have heard about After Effects, Quartz Composer or Xcode before in this context.
In this lesson, I want to introduce you to Framer, which is a new framework for making interactive prototypes for desktop and mobile. Framer hits a great spot balancing speed and flexibility, and has an easier learning curve than Quartz Compose or Xcode as it’s based on familiar tools and languages. Let’s dive in!
-
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.
When I started out learning QC, the articles and tutorials about using it for UI/Interaction design were non existent. The QC group on Facebook is by far the best collective of QC users and they provided me with some great advise in my hour of need.
Join the Facebook group and get to know the regulars on there. Don’t be afraid to ask questions and show off your work.
-
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?
It’s no secret that a lot of the early work on Facebook Home was done with Quartz Composer. The end result was a very interesting one for many reasons; namely that an idea in it’s infancy can be fleshed out very quickly with QC. This is very beneficial as it gives the designer a very clear view of what works and what doesn’t.
Skip to 20 min 50 secs and pay close attention to Joey Flynn’s section where he demos Home within QC.
-
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?
If you’ve never used Quartz Composer before, these 7 videos will show you everything you need to know to get started. They start out simple, then advance to more complex programs that demonstrate the practical uses of QC.
Watch the 7 videos and try to follow along in Quartz Composer. Some of the exercises are really cool!
If you don’t have Quartz Composer on your Mac yet, download Graphics Tools for Xcode from Apple Developer Center.