Building the Web: Architecture and User Experience

Building the Web: Architecture and User Experience

I spent years training to be an architect. Years that helped me decide architecture as a career wasn’t going to be for me. But those years left something behind. To this day, they influence my work creating software, websites and digital interfaces.

Studying architecture taught me that technicality, aesthetics, and functionality were all essential components of successful design. It taught me that no project could succeed without them coming together in some way.  It also taught me that when you are designing for the real world, integrating and reconciling constraints is the only way forward. Gravity, the availability of a material, the natural flow of crowds, security requirements, urbanism, and even what the client desires.

On the web, these constraints are less obvious, yet they operate in pretty much the same way. Availability of technology, screen size, bandwidth, browsers, new interfaces. In many ways all design practices share the same process.

In architecture school, an interesting real world design problem we were confronted with was the Dry Feet-Wet Feet Paradigm. The premise is simple: the building you’re designing is a gym where people have access to a pool, a locker room, and other facilities like squash courts and body building areas. How do you design it so that the people coming back from the pool with wet feet and those wearing sneakers as they return from their workouts don’t cross paths, for obvious sanitary reasons.

Solving this kind of problem and thinking about waiting areas, the rooms and corridors of a hospital, or the chef’s flow through a kitchen, taught me that before space is designed it has to be conceptualised. This came in handy when I had to teach myself about UX. I didn’t have a set of rules to work with, which was liberating. And naturally enough I began to derive my approach to UX from architectural design. And I broke it down into five main elements.

1 – FUNCTIONAL DISTRIBUTION

The first thing you do when approaching the design of a building is sketch out a functional organization chart. It’s the architectural equivalent of a site map. These days sitemaps are XML files that most designers and project managers never even look at, limiting themselves to checklists of pages to be developed.

Functional organization charts not only make for great checklists (I cannot begin to count the number of times I forgot to ask my designer for a search result page), they help group similar content and functionalities, and most importantly they help visualize the flow and relationship between logical groups.

FLOW-CHART

These charts help visualize the site as a layered object. They make evident the public and semi public areas of a platform, and the interactions between them.

Sketching sitemaps and workflows is an essential step of the web design process, they allow us to glimpse the possible problem areas of the system.  Just like the Wet Feet – Dry Feet Paradigm.

2 – CONSTANTS

In UX design, as in Architecture, there are certain standards you take for granted. The width of a door or the height of a handrail are constant during any given historical period. The same can be said of the maximum width of a site or the minimum height of an element that is destined to be tapped on a mobile interface.

Of course these constants are only constant as long as the technology remains the same. For example, responsive design and generally larger screens made the maximum width obsolete, in pretty much the same way we were able to change the size of a doorway opening when we stopped using stone beams.

Knowing the prevailing standard is the first step to healthy design.

3 – PROPORTIONS

I knew a professor who would glance at floorplans I had spent hours designing and blurt out: “Your kitchen is too big.” Indeed, it was almost the same size as the living space. Functional heresy. I was worried about silly details like floor cladding or how furniture was set up and had forgotten to make sense of the proportions.

plan-maison-schema

(Image Source: www.architecte-paca.com)

For example, you can’t use Google Plus without noticing how ridiculously large cover photos on user profiles are. That’s basically your brain looking at it and saying: “Your kitchen is too big.” We understand the world through proportion and the sense of hierarchy that it creates for us. We can tell where the entrance of a building is because of the proportions of its elevation. We decide which road to take at a crossroad by using proportion to decide which one feels like a main road.

UX is no different. Mastering the relative size of interface elements, like menus, content, footers, or side columns is an essential part of the exercise. Before looking at the details of a screen, try outlining the functional sections first, and see if the whole feels harmonious and proportionate.

4 – AFFORDANCE

There is a debate amongst architects about whether the need for signs in commercial or public buildings is compensation for design failure. On the web, nothing is more important than being able to direct a user towards the functionality they’re looking for. The word that describes this kind of ‘good design’ is Affordance.

Affordance is the sum of the properties of an object which allow an individual to intuitively perform an action. An example of this is the door knob, which encourages a person to twist, then push. In interface design, a blatant example of the use of affordance is Skeuomorphism of which Steve Jobs was an advocate (think of the notepad app that looked like a yellow legal pad).

I recently had to design a mobile app for warehouse employees to manage their inventory. Having never met the intended users, who were halfway across the world, I naively made full use of the mobile phones’ gesture interface. But the 66-year old warehouse manager wasn’t a digital native, so long tapping a cell to edit its content didn’t come naturally.

Affordance evolves with time. When designing for an audience, don’t forget who they are, what they know, and how they will naturally make use of your design. Think of the difference between designing a building for children and designing one for lawyers. Don’t think that because you are designing for the web you can f*** the context.

5 – MODULAR DESIGN

Designing the components of a system independently, then piecing them back together, is common in many design areas. The benefits of the model are evident: industrialization, scalability, reusability.

On the web, this type of approach is called Atomic design. It advocates the creation of a design system where elements such as buttons, colors, fonts and so on, come together to compose molecules, such as a search bar or a form, which come together to compose organisms until a page is designed.

Modularity is endorsed by many experts, starting with Tim Berners-Lee, and has been widely adopted for the design of responsive interfaces. The engineer inside me rejoices at this systemic approach, yet I cannot help but feel like all our websites have started looking like this:

chambre-cabine

(Image Source: www.tripadvisor.com)

In Architecture, Modular design was successfully explored by Le Corbusier in high rise housing units, the most iconic of which is the Unité d’habitation. Built to provide housing for displaced citizens following WWII, the building is composed of 337 identical housing units, which are plugged into a structural frame.

The Unité greatly influenced many modernist housing complexes, but most failed at achieving their objective of providing safe and healthy high density housing. The most notable of these failed modular complexes is Pruitt–Igoe in St Louis, which was demolished some 17 years after its construction. The failure of the system came not only from the inadequate modular design of the housing units but from the lack of design of the remaining interstitial space and the overall soullessness of the complexes.

Similarly, atomic design can bring about systems that are useable but ultimately hostile to human interaction. Websites made of boxes, which communicate nothing and speak to no one outside of their pure practicality. Pages with no soul. The experience of a website should generate emotion, not just efficiency.

statuecadiztm9

(Image Source: forum.plan-sequence.com)

We teach people how to design buildings we want to live in, and it’s about time we start doing the same for the web. And it shouldn’t be scary. While buildings have a certain permanence that can be stressful to bear for the designer, the web leaves us much more freedom for experimentation and iteration. So let’s use it.

 

Posted in: In Focus, Keeward Ventures, Technology, What's new
RELATED POSTS