Never Trust the Mockup (or the Demo)
You know this, y’all: modern design is no longer describable by purely static mockups. Touchscreens have fundamentally changed the expectations and interactions of software. Motion, gestures, & modalities are now commonplace in design. Mockups — as useful as they are for defining visual design and establishing patterns — are unable to describe moving, manipulative elements.*
My recent experience with iOS 11’s Control Center reminded me of this truth. Sometime in June, I saw an image of the new Control Center from a WWDC demo. My gut reaction was similar to others’: What is going on here? There are fat tiles and skinny tall tiles, and they all look kind of randomly placed. What is happening?!
You have got to be kidding me. pic.twitter.com/Bnr3Vd5qDL
— Jared Christensen (@jaredigital) June 6, 2017
And, yeah; all of that is kind of true. Based on a static image alone, it does looks a bit haphazard.
So I watched the WWDC demo. Craig Federighi got a whole 50 seconds for Control Center. That’s not a lot of time, but it was enough. He was able to show how Control Center works, and how many of the tiles interact with Force Touch. That added whole new dimension to the design that the static image could not describe.
It still seemed kind of wonky to me, but I began to come around to the convenience gains. After all, my personal experience with iOS 10’s multi-screen Control Center model of swiping over to get to the audio controls was pretty poor. I could see the utility of the new design.
But nothing beats using the product. After getting iOS 11 installed on my phone, I found myself going from reluctant skeptic to complete fan in no time at all. The convenience and utility of Control Center overrides any visual weirdness I felt about the differently-shaped and oddly-arranged tiles (which I truly don’t even care about anymore). I had seen Craig demo many of the same interactions, but the act of gesturing my own way through the experience really brought it all home in a way the image and the demo could not.
And in this tale is a prudent reminder for all of us who design for screens: you really can’t be sure you’ve made something great until you get it on a device, use it yourself, and validate it with users. Make mockups? Yeah, if that’s what gets you clear on visual design. Sit in on demos? Yeah! There’s a lot to be learned from seeing a developer or product owner show off what they’ve built. Stop there? NOOOOO. Touch, click, swipe, drag, and in every way interact with the design that is necessary for you to determine if it works as desired. This is your last and final step. Use it.
Good talk, everyone.
*(And yes, there are steps you can take between mockups and demos — animation tools like Principle are great for visualizing motion. You could even build out a prototype. Point is, you’ve got to get to a high level of visual and interactive fidelity to truly judge the success of design.)