Interface design using fractals

A short time ago, I was challenged by a mobile development group to outline an interface that would eliminate their dependence on native apps, and allow for one web-based solution for their (not insignificant) SaaS. It needed to function in a similar fashion on any device, regardless of screen resolution or interface. My solution: recursive squares.

The problem of multi-platform interface

The problem in our new multiplatform hardware ecosystem is simple. For each new rectangularly-inclined computing device that launches – phone, tablet, desktop, television or projector – a new way of interacting with information arises. Simple scaling of interfaces does not work for obvious reasons; fonts, buttons and so forth become too small or too large depending on the device. The logical solution is to develop a native app designed particularly for the nuances of each device's screen size and input. Unfortunately, in a real world scenario where software updates, wave releases and general support take an enormous amount of money and man-hours, it is unlikely that any but the most wasteful development teams would support the projected software ecosystem required to maintain this type of compatibility. Beyond that, the fragmented UI that would develop from such a targeted approach would hinder users drifting from device to device smoothly. A workflow on a desktop computer would suddenly be different on a tablet and again on a phone.

In order to efficiently support a multi-platform environment, and to a lesser extent, maintain a consistent UI for a Webware SaaS, a single universal interface solution must be devised.

The natural solution

In order to find the simplest possible solution to this problem, we can overlay each anticipated interactive space in order to derive a fundamental UI element to build an architecture.

The result is a rough approximation of the Fibonacci sequence, ignoring DPI and exact scale and focusing only on aspect ratios (perceived scales are relative to the user-device distance anyway). Extrapolating one step further regressively provides a small square.

This square is the lowest common denominator among all three devices and will fit, in some combination, into all three. This is an information space that should form the fundamental building block of the interface and data display for a multiplatform SaaS.

In my next post, I will outline how this relates to interaction distance and points out how fractals can usefully layer data for many display types.