Our experience and insights define our perspectives
on the evolving digital world.

Context-specific form factors and gestural interfaces have rapidly one-upped static, two-dimensional interfaces and UIs are departing from page and menu based architectures and are attempting to better convey a sense of space. As these digital environments rise in sophistication, so must the tools for conceiving and communicating them. Fundamental processes such as wireframing establish key foundations, but additional motion exercises go a long way toward breathing life into a new generation of interactions.

These five insights share ways Punchcut uses motion design to enhance our mobile UI design practice.

1. Capture the imagination.

Wireframes are lean and low-fidelity snapshots that focus in on the functional elements of an experience, allowing designers to iterate and evaluate experiences effectively and rapidly. As the blueprints of interaction design, wireframes are crucial to forming individual components, user journeys, and the infrastructure behind a designed system. Just as importantly, they provide a bird’s-eye view while allowing for enough detail to build and imagine the experience.

Motion, in conjunction with wireframes, gives designers the opportunity to record that imagination. Behind wireframes lies important thinking about the emotional experience of being “in the space.” User's seek experiences that are personal, sentimental, seamless and immersive. Motion represents a key opportunity to explicitly describe and capture the feeling of being in a digital environment.

2. Actions speak louder than ideas.

There is power in turning ideas into actions. Showing strategic moments of an experience in real-time validates concepts through a captured story. In this way, motion studies facilitate broader exploration, challenge conceptual/spatial models, inform level of engagement, and depict the overall fluidity of a device user experience. Putting wireframes into motion clearly articulates the facets of an experience too often left to the imagination. Hence, ideas are framed through a more tangible lens, and can be discussed in more constructive and more sophisticated ways.

3. Prove the experience will move.

Sometimes, interaction models can look great on paper but be problematic in use or in implementation. Our experience has proven that animating core interactions illuminates strengths and exposes gaps. The ability to witness the mechanics of an interaction model through animation surfaces unanticipated nuances that provide insights moving forward.

4. Map experiences to real-world dynamics.

Metaphors are powerful ways to introduce new behaviors because they help users create a mental map of an interaction. Borrowed spatial models (desktops) and conceptual models (folders) set the stage for what is possible in the experience, and lower learning curves. Motion can help reinforce these metaphors by staying true to the physics of the tangible world. This only becomes more important as increasingly abstracted metaphors guide users through digital environments.

As an aside, it's not always necessary to get completely skeumorphic in your metaphors with motion design. For example, a dial can rotate on a center axis without having to be rendered in chrome with drop shadows and glints of light.

5. Show, don’t just tell.

Motion tells a story — and sometimes the story behind a design is just as important as the design itself. Stories create higher levels of buy-in and deeper associations with a design. Motion transforms snapshots established by wireframes into a clear and captivating presentation of the scenario. The following video showcases how, with relatively low levels of effort, animated wireframes can be an extremely instructive tool in communicating concepts to both clients and internal teams.

The dramatic increase in complexity of digital experiences calls for complementary tools to communicate them. Punchcut sees motion design as a practice in exercising a creative perspective and a tool for strengthening how we present our work. We use motion both as a part of our strategic process and as a value offering for our clients. Married with the frameworks and foundational tools we emphasize, motion helps us move our clients more quickly from concept to reality.

78

Responses / Topics: Development, Mobile, Touch