Parametricism and User Interface Design

November 17, 2015

To finish my undergraduate study of computer science and graphic design I chose a thesis project which would explore a combination of these two fields. I wanted to create something using my experience in iOS development in conjunction with my work in user interface design.

My app prototype for this undergraduate thesis project

Early in my design studies I discovered the work of Iraqi-British architect Zaha Hadid. Her worked captivated me with its beauty and stunning computer-generated forms. Hadid’s style has been codified by one of her colleagues under the term “parametricism”, a name which alludes to the computerized design process of which the style relies.  In elaborating this style, proponents have argued its power in enabling design to respond to a world increasing in complexity and spacial constraints. Respecting the longstanding pattern of graphic design following architectural movements, I sought to envision what parametricism would look like when applied to user interface design. This post includes my written thesis and video demonstrating the app prototype that I designed and built.

Abstract

With the increasing complexity of technology, and the information that this technology affords, new design practices and styles must be developed to make this information consumable and navigable. In the past, user interface designers have primarily employed modernist techniques to simplify and display information. While temporally sufficient, this approach is becoming less effective as the complexity of computer software increases.

For my creative project I used a postmodern design style called parametricism to prototype a user interface for the iPad. This style has been emerging since the 1990s with the avant-garde architectural work of Zaha Hadid. The parametricist design process seeks to embrace complexity by using fluid navigational techniques to guide an individual. My project uses this design philosophy to maximize productivity and efficiency in a user interface.

On Parametricism

In his seminal work, Parametricism as Style – Parametricist Manifesto Patrik Schumacher heralds parametricism as the “great new style after modernism” with Postmodernism and Deconstructivism being “transitional episodes” which have led to this style. This comparison to modernism is a great starting point for understanding parametricism. First, the comparison recognizes the prominence of modernism and the style’s dominance in last hundred years. Secondly, by comparing modernist and parametricist approaches, the advantages of parametricism will be more easily understood since modernism is the reigning style of user interface design

In The Parametericist Epoch, Schumacher outlines several principles which elaborate an operational definition of the style. Here is a summarization of those principles.

  1. Forms should be soft, avoiding rigidity and possessing malleability.
  2. Systems should be differentiated instead of using simple repetition.
  3. Systems should be interdependent as opposed to isolated.
  4. All activities should communicate with each other instead of segregative functional zoning.

These principles produce distinct visual and functional elements in a design with the goal of increasing an individual’s productivity.

Design Heuristics

There are numerous advantages to parametricism, but the overarching goal is productivity. If the role of a building is to “order social processes”, then the desire is that this order should result in increased efficiencies for the individual, organization, and environment. The architect’s goal of productivity fits closely with the demands of computer software and user interface design. In its simplest form, computer software is a tool used by an individual to accomplish a goal. The user interface for that software is a level of abstraction which is the largest determiner of a user’s success and efficiency in completing that goal. User interfaces can deter productivity by either inhibiting the speed in which tasks can be performed or by limiting the kinds of operations a user can perform. Therefore, productivity by measure of speed and flexibility of use are the heuristics I will use to determine the effectiveness of parametricism in user interface design.

App Prototype

To explore this application of parametricism to user interface design, I have designed and prototyped an iPad application using parametricist principles. The app is a tool for collaboration to be used in a local network. In full implementation, the app would be used by several users on a network to view, organized, and share media. In the follow sections I explain various principles of parametricist user interface design and how I have used them in the design of my app.

Complex Geometries

Complex and fluid geometries are the first striking feature of parametricist works. These geometries rarely feature straight lines, right angles, or parallel planes. They reject the modernist principle of using simple and easy to understand shapes. As time progresses parametricist geometry might become more known to the audience, but initially there is the impression of complexity. But why introduce complexity? These complex geometries serve two purposes. First, they naturally match a source material which often shares in complexity. Second, the complex shapes also possess a fluidity which aims to guide the audience through the system.

The Beko Masterplan concept from Zaha Hadid Architects

The complexity of parametric geometry is meant to match the complexity of the design project itself. Over time, cities have become more irregular and compact, providing interesting and difficult space constraints. In interface design, information and interaction has become so expansive that often times illusory simplification will not suffice. As more services and hardware components become available, complexity increases in the interactions between services and hardware. Like the growing city, these technological advancements create space constraints for input devices and screens.

As the reigning style, modern approaches to user interface design is easy to find. Designers respond to the complexity of computer software by simplifying and creating divisions. Apple’s iOS provides an example of the modernist design philosophy. When launched, apps take up the entire screen and the user may only interact with that app until they switch to a different app. This implementation works effectively in the short-term, but limits potential interactions. With the smartphone as a staple in many people’s lives, multitasking becomes more essential for effective usage. Apps will require better communication between apps without requiring an entire context switch. The latest software update, iOS 7, has begun to bring a more fluid and connected experience with Notification Center and Control Center by layering these screens above existing elements. These screens blur out the content behind them to help the user retain their previous context.

Modernist design seeks to create clear divisions based on function. An example of this would be the tab bar on a mobile device, providing a way to quickly jump between screens. The problem raised by this approach is how to deal with interactions between these screens. How do you manage functionality which bridges both screens and does not fit clearly into a section? Parametricism solves this problem by embracing shallow navigation hierarchies and avoiding regional groupings.

The app I have designed presents a wealth of information with the potential for numerous interactions. While there are many functions in the app, a parametricist hierarchy allows everything to be accessed in a minimum of two gestures. The app’s hierarchy breaks from traditional top-down hierarchies and instead relies on a horizontally-layered hierarchy and navigation structure. The menus slide out over existing content. Viewing the full details of an image or text file zooms the user into that information. This hierarchy keeps the user from the inefficiencies of context switching often caused by large fullscreen transitions.

Content items are enclosed in circles which live on a larger lattice-like grid. The curves in this grid and the items themselves clarify connections between the elements. The app relies on grouping for organizing content as opposed to a hierarchical folder structure. This provides a more sensory approach to organization rather than a strict logical sorting. The app grouped sorting structure also allows users to view their content in a glance and easily browse. The flat organization structure also allows users to easily drag and drop content to other users in the app. Rather than tapping through several menus to share with users, users can simply drag the item to a chosen user with a single gesture.

Physics

While the majority of parametricist works have been in static fields such as architecture and industrial design, these works still convey an important sense of speed and motion. Motion is often used in conjunction with fluid shapes to convey a sense of direction, aiding navigability. Motion in parametricism is also conveyed by joining non-parallel planes to create dynamism. This dynamism matches the complexity of a building which posses multiple uses and a multitude of paths.

Vitra Fire Station - Parametricist Architecture by Zaha Hadid
The Vitra Fire Station designed by Zaha Hadid and completed in 1993

Modernist architecture typically avoids motion and fluid motion-conveying forms. Modernist works such as Le Corbusier’s Villa Savoye have sought elevation instead of motion as a means to escape from the stasis of structural forms. Aside from the occasional arrow, modernist approaches in user interface design are typically void of motion-conveying forms. In Mac OSX windows, toolbars, and status bars are all rectangular elements which tell little about the movements they make.

In my app, I have correlated the action and animation of an element with it’s shape. For example, the pull out tabs on the side of the screen have a convex shape to convey the direction they slide out. Circular elements in the app give users the indication that these elements can be dragged, dropped, and scaled. When the user scrolls their content, the individual elements have a parallax effect where they move at slightly different rates. This physics-like behavior reinforces the drag and drop paradigm which imitates the real world actions. The items are dynamic and active as opposed to static and fixed.

Parametricist fluidity in an interface is served well by gestures and direct manipulation. By inherent nature, clicks and button taps provide an end-stop to a user’s action. Alternatively, gestures are a fluid action with the potential for multiple outcomes. Gestures also share the benefits of keeping users from context-switching since their input is continuous. Direct manipulation of onscreen elements works hand-in-hand with gestures to remove a layer of abstraction between the desired outcome and the required action. This direct interface interaction provides a more natural and fluid experience.

Future Interfaces

While the progression of software and information density will require a parametricist approach to interface design, I believe the progression will be slow because modernist design principles are deeply embedded into the existing technology infrastructure. Manufacturing limitations cause most computer displays to be rectangular. Additionally, the rectangular windowing system found in every major operating system perpetuates lines and grids. As time progresses, these technological limitations will lessen as new types of displays are developed. Advances in flexible and round displays have the potential to free software from the rectangle. The projected display also has less potential for linear confines since the frame is removed.

Aside from inherent limitations, small steps have been taken in parametricist user interface design. Science fiction films such as Star Trek and Iron Man have been exploring interfaces filled with direction manipulation and curvilinear shapes. Apple has also been laying the ground for new parametricist approaches by promoting gestures, layering, and dynamic animations in iOS. My app has been an exploration of how parametricism could be applied to a user interface design problem. With clear advantages, Parametricism is still in early stages of development, and the difficulty for all practitioners is implementation. Future explorations which pioneer new techniques and practices must be continued so the productivity of parametricism can be fully realized.