FORM STILL FOLLOWS FUNCTION FOR WEB APPS
I still take much of my inspiration from early days poured over architecture magazines. The mentor to Frank Lloyd Wright first said: “Form follows function”, and the phrase has since been considered an important basic principle in design. Today, I find it’s still relevant when building products of all kinds, including websites and web apps. I’ve found there are a few tweaks to make it relevant for the app world though, and I’d like to propose them here for discussion.
Form, as I use it here, is really an amalgamation of a few things: the actual UI elements in use and the UX principles you’ve defined for interaction with those elements. It can also include specific elements of your design language, such as elements created custom for your brand.
Function is the key set of uses that your product exists for, as well as the ‘child functions’ it encompasses to greater enable a core function. For example: Instagram, made for sharing photos, but has strong child functions in photo editing in order to differentiate the app from other photo-sharing apps or sites.
Form as an output of planning
Good planning allows you to see the full form of your application before hi-fi mockups give it life, and often times dictates the foundation of an app’s most intuitive functions. Personas, interviews, research, and wireframes get you far, but every so often, they just won’t give you the inspiration you’re looking for!
For example, you and your team plan out an app based on the key needs of your users and other parameters you’ve collected through research. As you create your hi-fi mockups and start to have a bit more fun, you find you ‘see’ more necessary elements.
In essence, this means that form is influenced heavily by function, but that great apps are designed for evolving functionality according to the product’s life cycle (and how your users change in that cycle).
Form is multi-faceted in development
My design process, as most others I suspect, will always involve 1) determining the key functions, 2) identifying user’s ‘needs’, and 3) selecting ‘wants’.
In my days at RewardMe, I’d identify these three for every new product that came my way. ‘Needs’ actually refers to things we felt the user needed to see based on research, or data clients tell us they need visually manipulated to be at their most efficient. In essence, over time, we want functions to absorb the most useful of these Needs, making an app faster / more intuitive / more aware depending on context.
Wants, on the other hand, come from us. There are few of these, and they relate to influencing user behavior. Think of these as assets made for A/B testing something before it’s optimal.
I have separated Needs and Wants from functions because they play into an element of a product the user doesn’t see – namely, things research shows we should show, and things we want the user to react to. I suppose in this way, web apps give us the grand luxury of constant feedback on our interface designs.
Form Influences Function Hierarchy
If you’re one of the 20% in the 80-20 Principle, then you’ve surely used an app where one of the smaller functions becomes so critical to your use of the app, you wonder why it isn’t more accessible from the core UI. Later, the redesign shows up and voila! Your voice has been heard through research, and your favorite button is now on the home screen.
The question behind how that happens is: how do we decide what’s most important for mainstream users and what needs to be put “behind the curtain” for the advanced users? This battle during development and prototyping ends up determining a form that not only leans to the app’s ‘mainstream’ function, but also determines all the other ways a user directly interacts with your product.
What Do You Think?
A symbiotic, flexible relationship between elements of form and key functions allows for smoother iterations along the development process. Of course, none of this is to say that Sullivan and other great thought leaders aren’t right about ‘Form follows function’, but rather to prove that successful aesthetics come from a multi-faceted approach and can have far-reaching effects.