Interface to Experience

April 30, 2019

Cover photo by Uriel Soberanes on Unsplash

Where I work today we use InVision to deliver our designs to the development teams. Since the platform is solid and we pay for a pro license, I've been playing with InVision Studio (their free UI design tool) to see how it stacks up in my toolset.

I could go on about the feature to feature comparison between Sketch and Studio, but what struck me the most was how using a different tool impacted me as a designer - and unlocked a way of thinking about my craft I hadn't seen before.

You see, Sketch (my current weapon of choice for slaying app designs) is hands down the BEST UI design tool on the market. The well organized symbols page, global governance of layer / text styles, external libraries (in which you can link to other libraries), and buttery smooth performance make drawing boxes and designing user interfaces blisteringly fast.

But where it falls short, and where I found myself reaching for Studio, was when I wanted to go beyond an interface and into an experience.

By definition an interface is simply a device or program enabling a user to communicate with a computer. It has state (empty, active, invalid, valid, waiting, etc). It has affordances for interaction (tappable buttons, inputs, links). It has content and a hierarchy. All ways for a human to talk to the box, and for the box to talk back.

For myself, and maybe some others in the UX field, I've spent a long time designing flat, static, data driven snapshots in time.

To illustrate this better; it's like writing a play line-by-line. I write the computers line. He waits for the user. I write her line. She waits for the computer. I write his next line. It goes on until I've checked all my state boxes. Computer / user / computer / user / computer / user... all the while you forget to see the big picture of what you're writing - the conversation.

Interfaces are like lines in a play. Experiences are how those lines work together to make a scene.

An experience is dynamic. Like a scene in a play or movie, there should be changes in the content. They're should be some tonality, progression, maybe even tension that leads to delight. A well written scene encourages the audience to engagage with empathy (delight, joy, fear, relief).

As a UI design tool, InVision Studio has a long way to go. The components are clunky and hard to scale. They lack some of the robust interdependency of Sketch's libraries. And why are there no text styles?

However, as an experience design tool InVision Studio crushes it. The prototyping and animation tooling is insane. Auto tweening keyframes, staggered animation timelines, smart layer linking, dynamic playback timing. It's like After Effects and Illustrator had a baby. Not only can you compose an excellent Dribbble shot, but you can link a demo app to your phone and let real people play with it, which is amazing for getting real feedback on your designs - and ultimately testing out how the experience of your app will play out.

InVision Studio's absolutely supreme animation tools have really challenged me to think more about the experience I'm designing, and less about the specific interfaces. I think about transitions, movement, where the content comes and goes. I worry less about what words my app needs to use and more about how the conversation with the user will play out.

So for this reason I encourage you to try InVision Studio. It's free, after all. But don't try to replace Sketch (or whatever tool you use now). It's not meant to replace it (yet). Instead, embrace what makes studio different - and in doing so you might embrace some new ideas about design as well.