State of UX in 2019

Thinking outside the artboard

Gone are the good old times when we could create a prototype by simply linking screenshots. Gone are the good old times when digital interfaces fit perfectly within a two dimensional, rectangular artboard. As interactions evolve, the artboard metaphor needs to evolve as well.

Caio Braga
UX Collective
Published in
4 min readJan 15, 2019

--

Photo by Bank Phrom

The artboard has been our digital, creative canvas for years. It is an extremely effective metaphor for print design that worked well for digital interfaces. It has since evolved to accommodate responsive design, prototyping, and component management.

But it still has limitations.

Artboards are not how people will experience your design

The user won’t always have your UI in full screen. They will have several other tabs open in their browser, notifications popping up, wellbeing apps modifying their screen brightness and saturation — and so on. While at the beginning of the project artboards are a great place to drop ideas and run visual explorations, using them as the only way to visualize your work can create the false illusion that people will experience your interface in a sacred and uninterrupted way.

Google Calendar living on the right side of Gmail: users expect to be able to transition across products seamlessly

Artboards can mislead your way of thinking

Artboards represent your product interface, not its experience. More and more products are seamlessly connected to a broad ecosystem of services and platforms, making it harder to design products in isolation. Google Calendar living on the right sidebar of Gmail is an excellent example of how users don’t expect to leave their email application to check their meetings. The tasks of each product are performed within a certain mindset and flow, rather than a rigid logic.

The same way a photograph captures a moment that never existed in isolation, artboards are only able to capture a single point in time of your product experience. Artboards are the script, but not the movie.

New technologies will require new metaphors

Voice, augmented reality, virtual reality, platform integrations, social channels. New technologies require us to abandon old mental models of what it’s like to design a web experience, for example.

Think about game UI for a moment: how do you perform so many tasks without moving to a different screen in the game? How do you navigate a complex game like Red Dead Redemption 2 with so few interface elements? Controls appear only when they become relevant, over the cinematic gameplay. Good luck trying to communicate those dynamics on static artboards.

Red Dead Redemption 2: the best interface is no interface at all

We can do a creative exercise that brings this same concept to an enterprise app. What would the user experience and interface be like if the app was just an overlay over the other tasks?

Creating a new artboard is the wrong first step in designing for connected experiences. Still, that’s how we start 99% of our projects.

A few design tools are starting to explore new ways forward. Adobe XD recently launched a voice prototyping feature that has a lot of potential, but is still modeled around artboards. Figma uses “frames” instead of artboards. While similar to artboards, frames have an interesting way of connecting and embedding.

Since artboards are not going away anytime soon, here are a few things we can do to avoid locking ourselves into the boundaries of static thinking:

  • Share a story, instead of a wireframe. Instead of focusing on single pages, think about how features will work around the user journey. What else are they going to be doing? Where are they coming from, and what will they do next? How does the interface adapt over time?
  • Work and present your designs in context. Instead of presenting a mobile prototype from Keynote or Principle on your laptop, show it in a device similar to the one your audience will use. While designing, make sure to go back and forth between your design tool and the user’s device as much as possible.
  • Think about components and states rather than pages. “Pages” impose a certain linear thinking that is often not how the user will experience the product. Breaking down a feature into a set of possible actions and further breaking that down into interface components allow us to see where these actions make sense and how they can be incorporated into the broader ecosystem.

In 2019, designers need to be focusing on journeys and mindsets more than a series of static screens that will never be how the user actually experiences their product. What if we questioned why we are doing what we’re doing more times throughout our day?

--

--