Beyond the Interface

Typography for Interaction


One day kids will look at designs like iOS 6 and wonder what an interface is. That’s because they will have become so accustomed to consuming content and interacting directly with either images or typography that notions like containers, chevrons, drop-downs, and buttons will all be alien and tedious at best. In the past users were becoming accustomed to the WIMP paradigm, and learning the difference between text you read and buttons you click on. We had to design for that audience, with the technology of that day.

Today you can see “flat design” and the gradual removal of interface is not just a trend, but is marking the simplification of interactive media to focus on content instead of interactivity. Digital things are actually becoming easier to use, because the difference between “reading” a page and “using” a page is blurring. The end result of all this? The practice of interaction design is about to change, a lot. How should interaction designers of this new era practice design? It doesn’t make sense to start with drawing rectangles and chevrons in a wireframe when modern interfaces will be mostly typography and images.

The Yahoo! Weather app is a beautiful example of typography in interaction design

While the foundational elements of interaction design will stay the same, its practical application will look very different. At its core, designers should still know mental model vs. system model, affordance, and issues like cognitive load. These things, famously summarized in the 10 usability heuristics of Jakob Nielsen, will continue to guide us for some years because they indicate qualities of being human in our cultural context, and that changes a lot slower than technology does.

On the other hand, the way we practice designing for web, apps, and software will change. Traditionally we draw “boxes and arrows”, indicating things like page flows, buttons, drop-down menus, dividers and containers. These elements are all tedious and besides the point. The point of interfaces is to deliver content. And the design of content has been, for many more years than interaction design has been around, the design of typography. And Apple knows this.

Apple presents a design pattern that relies on typographic design to communicate interactivity.

What Apple has done with iOS 7 is not a radically original idea. While polished as we have come to expect from them, the movement towards using typographic design as indicators of interactivity has been at the core of web design since its foundation in the ‘90’s. Only now, we have the technology to use typography to a greater potential: as both content to be read, as well as interacted with. Since users will be savvy to looking for hints of interactivity in either gesture or other cues, we should find new ways of communicating to our smart users with the content itself.

That means the day to day way we have of designing interfaces should change. I suggest that instead of starting with drawing rectangles, boxes and arrows, we should start with drawing the way graphic designers draw. While we still need to consider task flows and mental models, I think much more can be accomplished on a single page than we have cared to explore so far. Apps like Yahoo Weather demonstrate this well; one can use layers and areas that can slide to reveal more content instead of navigating away. This way, a well-designed page need not be wasted in a few seconds when the user clicks away.

In the post-interface world, will wireframe sketches still be relevant?

So how will this new interaction design practice look? I imagine the practices of graphic designer and interaction designers in digital product environments will need to exchange notes. I don’t think the traditional workflow of handing wireframes to visual designers is creative or particularly effective, and as I am arguing it won’t even be relevant soon. Truly strong and modern design is both simple and usable, while being designed at its core with strong layout, typography, and imagery. These kinds of modern designs do not need an overly segregated workflow where different kinds of designers are given small pieces of the overall task. Elegant interfaces should communicate interactivity as well as legibility and meaning the way that graphic design has been cultivating in its practice for a much longer time.

Typographers like Emil Ruder were masters of their craft. If Ruder designed for interactivity, what would it look like?

While interaction design is taking a note from the old practice of typography, so will interaction design change typography. People will look at signs and books in the world and wonder if certain areas are meant to be interactive while other areas, of body text perhaps, are not. Maybe with augmented reality, this future where the lines between typographic design and interaction design will vanish altogether, as text in the world and text in screens both become interactive?

Email me when FileSquare publishes or recommends stories