Category Archives: interaction design


Functional Animation

Word: Functional Animation

Definition: Animations that serve a design concept by supporting and enhancing the solution.

Thoughts: Everyone loves Pixar movies but Woody and Buzz have no place in your product. A great deal of effort and thought goes into product design and layouts. A good designer will be able to tell you the reasoning behind every detail and choice on the page. However, even the best of us sometimes get caught up in the “cool” factor of flashy animation, simply for the sake of it. Why do we put so much thought into elements like color, navigation, and content hierarchy, yet flash and dazzle is sometimes added in the end “just because”?

Designers should be able to clearly articulate the animation’s purpose towards the larger goal.

Reference: In this great article from Smashing Magazine, they call attention to the details designers should focus on when implementing animations. Essentially, in order to check yourself and make sure you’re designing with a purpose, focus on orientation, location, zooms, visual hints, highlights, visual feedback, and system statuses.

Moral the story is, it might look cool but if you can’t defend your design choices, it’s better to leave the idea on the cutting room floor.


Interaction Cost

Word: Interaction Cost

Definition: An interaction cost is equal to the physical effort plus the mental effort exuded by the user per a given task.

In a perfect world, the interaction cost would be zero, in that the user would know exactly what she has to do and how she can accomplish her goals, all without any effort or strain. However, we know that this is an impossible standard to attain, so the point is to get close!

Reference: This term comes from the early days of Human Computer Interaction and is used to evaluate a product’s usability. Tools such as heuristic evaluations directly influence and ultimately minimize the interaction cost for the user.

Thoughts:  Examples of efforts that can be minimized and ultimately lower the interaction cost are:

  • Reading
  • Scrolling
  • Clicking/tapping
  • Typing
  • Page loading
  • Way-finding

Now let’s reduce the abstraction and look at a very basic example! Image you are filling out a form on a mobile app. You are exerting effort every time you read a form field label, click into the field, type a value into that field, and then finally submit the value. When broken down in this manner, that is a lot of effort!

Think about the small things that we can do as UX designers that will help lower this effort. We can automatically display the numerical keyboard on a phone number or zip code fields. We can allow the user to tab from one field to the next without exiting the keyboard display. We can display shortcuts to various form field sections for easy access. The possibilities are endless!

These may seem like small interactions and mundane examples but it is through such details that the larger interaction cost is reduced and the usability of a product ultimately increases.


Faceted Navigation

Word: Faceted Navigation

Definition: A faceted navigation is typically understood by users as a filter system. Faceted meta data is leveraged through its fields and values, which are visible to the user. The user can then manipulate the values to refine and clarify her search query in order to better understand the data.

Reference: Field-leading blog, A List Apart, calls faceted navigation, “arguably the most significant search innovation of the past decade” in reference to The Flamenco Search Interface Project conducted at UC Berkeley’s school of information.

Thoughts: Data is becoming more and more robust with every passing day and it is increasingly important to be able to make sense of it and sort through vast amounts in a meaningful way. While this is easily illustrated through the dynamic filter system of sites like Amazon, refining information is extremely important everywhere from large e-commerce sites to specified enterprise software. Users need and want more control over queries and it is up to UX designers to provide clear options and paths to this desired information.



Word: Microinteractions

Definition: Contained product moments or details that are only responsible for one small task.

Thoughts: One of the absolute best examples of a microinteraction is Facebook’s “Like” button but these small interactions can include anything from a progress bars, to navigation animations, or even a simple mute button. The beauty of a small interactions is that while from afar they seem less significant, it is the small details that elevate user experiences to new levels.

Microinteractions are not always the headline-making features, but at the end of the day separate good products from great ones. These small interactions are best utilized when they turn a difficult or dull moment into an enjoyable one. Basically, this small if you want big results.

Questions: Can too much attention to microinteractions ever take away from the larger product goals?