I launched a zine! Get Proof of Concept: The 000 Series today.

Creating interface studies

Issue 116: Focused explorations to solve specific problems

David Hoang

Oct 30

▷ Listen

Save

Pablo Picasso’s Guernica is one of the most famous works of art in the world. A tapestry of it hangs at the United Nations as a reminder of piece. Picasso painted Guernica at his home in Paris in response to the 26 April 1937 bombing of Guernica, a Basque Country town in northern Spain which was bombed by Nazi Germany and Fascist Italy at the request of the Spanish Nationalists.

In addition to the powerful commentary of Picasso’s work, the piece of artwork is legendary in its development. Picasso documented the process along the way and conducted many studies of core aspects of the painting. As chaotic as the final composition looks, everything is intentional.

Whether it's an art masterpiece or a personal art project, making art studies is a common workflow to develop understanding of the subject matter the artist conveying. As an art student, I would create a lot of studies for complex paintings I wanted to work on. Before creating an oil painting, I'd create sketches of the compositions for the final piece. In some cases, creating a smaller version of the painting was a way to prototype what the final production would look like.

An art study is any action done with the intention of learning about the subject you want to draw. You can study by drawing, sculpting, reading, or even just looking at something. It's important to distinguish that studies are a bit different than practicing. The act of practicing is a repeated task to build mastery in technique whereas

The software you create contains multiple subjects in the form of features, core interactions, and other functionality. Your product interface is the art canvas. Yes, software as a form of art with practical function. Similar to in making art, there is a cost in what you build and you don't want to just release a bunch of things willy nilly—at least I hope you would not!

You can create interface studies with the same inspiration. Whether physical, digital, or a blend of the two, products are dynamic and have kinetic movement to it. There is an anatomy, structure, and form to the experience. Conducting studies allows you to focus on specific areas to refine or invent core elements.

The purpose of interface studies

Studies are important to isolate the core problem you're trying to solve. When you're in the thick of the day-to-day, decisions will get additive to what exists. This isn't necessarily a bad thing as shipping on existing constraints is a good practice. However, there are times when you need to re-invent or re-imagine something drastically to come to a longer-term solution.

When the iPhone interface was first explored, the UI engineer who started working on it didn't disclose the final form factor. All they told her was, "design an interface for multi-touch." This type of focus allows you to go deep into the core aspect of the interaction. By removing the other mechanics of your product, you can focus on the problem.

Making a study

One of my beloved mentors is a brilliant designer and engineer—his most recognizable work was his early days at Apple and product experimentation at Facebook. When he was launching a new product in 2015 I had the opportunity to work with him on the designs. To this day, working with him was one of the most intensive, yet fulfilling, design work in my career. I remember we'd spend days, sometimes weeks, on creating interface studies to explore core functionality. For him, it was the crux of what would make the software great so wanted to make sure we got it right.

1. Identify a subject to explore

Explore a concept or problem space that merits a more abstract problem space. Avoid getting too specific at a feature level. For example, it's too specific if you say "Page navigator" and it's too high level if you try to explore "A blog builder app." The sweet spot to go for is something that is conceptual where you can explore an interaction for a concept, such as, "Exploring spatial viewing of pages".

2. Sketch the concept quickly

A quick and simple napkin sketch can provide a lot of clarity in the study and what you want to create. If I were to create a ceramic sculpture, I wouldn't start mashing clay together. I'd ensure I have a thumbnail to guide my rapid study.

3. Build it quickly

Without hesitation, build something that conveys the functionality. Don't make high fidelity mocks, put the pieces together and refine as you go. Remember to keep the primary subject the focus of your study. If you're creating an interface study on how a theme picker can be invoked, don't focus on the outer decorations.

Though my design skills are not as modern as the people on my team, my go-to simple tool is Principle—essentially a clone of Apple's internal tool Mica. Though Figma has much of the functionality in smart animations, Principle feels familiar to me and using gray boxes is a nice constraint to focus on the interaction itself. The software you use to create studies will vary based on what you're studying.

4. Repeat

Make. Show. Learn. Criqitue the study yourself and pick it a part—see how you can improve. Bring other people in to get feedback on your ideas. Like prototypes, the best interface studies are "just enough" fidelity to convey the idea.

Example of a study

This is a VERY old interface study I did about eight years ago. Of course it was created with Quartz Composer. I wanted to share a tangible example of how you can put a quick study together to test different interactions. This study took about 20m to throw together and the idea was to explore how cell expansion in a contact app can be more playful in how you send a message to them.

Find a project you can whip up a quick interface study! You need to step away from the intricacies of what exists and take a step back. In many ways, this is a form of first principles interface design where you can focus on the essence of it.

Weekly recap

The biggest topic in tech news is new Twitter ownership, which is making many people question their future use of the platform. I don’t think many alternatives will make a lot of traction, unfortunately. Scale and adoption is hard, and it’s probably the reason we haven’t seen any Instagram alternative. Some may remember app.net (RIP), and while Mastodon is still around, it’s not going to have the same network effect as Twitter. At that point, might as well go indie blog and share RSS feeds, which I would absolutely love!