Creating a healthy design from cells

In the last post, I talked briefly on using fractals to define a fundamental space to built a multi-platform adaptable UI. As I established, this is the most efficient way to serve content or services via the web with the coming platform agnostic ecosystem. Now that we have this cell, we can begin designing a tissue structure to navigate.

Life is flexible, UI should be too

Design in the earliest stages was a function of inflexible definitions. In the print era, by its very nature, designs were a one-time fixed run. Design a page, print it, and you were done. Rather than point to the loud, muscular designs of modern magazines, I’d point to the designers behind some of the most famous naturalist authors. Wind in the Willows, Peter Rabbit, and Winnie the Pooh told rich tales with chunks of large text interspersed with gracefully painted images. And once they were printed, they became rules set in stone.

In the digital era design, we are forced to be more flexible. Unlike books, which were printed and then distributed, the ‘printing’ process of a UI or content exists on the user end. Control is not subject to a guaranteed set of rules (e.g. browser) nor even now, a device.

Adopting the metaphor of a fundamental design cell to fit into every possible form enables a complex UX to develop without worry that it will not adapt healthily to whatever environment it might be viewed in.

Scaling cell designs with layered data

A set of square cells will fit on a cell phone, tablet, laptop, desktop, television and projector. However, each of these palettes invites a user to interact with the cells differently. For example, when a scrolling column of cells is viewed on a phone, only two cells might be on a screen at any given time. This invites the user to interact closely with the cells on an individual level. On a tablet, two columns could fit, with as many as six or more cells. On a desktop, several more could appear as a function of the resolution. On a 1080p television, as many as a hundred cells would appear.

How a user would interact with these design cells on the phone would be dramatically different than how they would interact with a group of 50 or 100 cells together. One invites direct interaction, while the other invites an overview.

Cells that adapt to their environment

So lets create an example. Each cell has two elements that define it: text and color. On a phone, a user would interact with each cell, reading and manipulating the text (inputting data). On a television, the user would be unlikely to read the text, as it is very small and overly dense with so many cells on the screen. Rather, the user would look for symbolic interaction through a variable color on the cell. A red cell would alert the user to needed attention, while a green cell could inform the user that the unit is working, but not in need of attention. Grey could inform the user that the function of the cell is currently dormant. Gradients of green to red could also be established to show a varying degree of function. A cell could show these attributes on any device, scaling the usability of the cells. A high resolution television output would allow for a ‘strategic view’ or a heat map, and a cell phone would allow for detailed information analysis and manipulation. This way, the fundamental UI both scales and takes advantage of the native strengths of each palette.