The Beauty of Constraints
P r e s e n t a t e
The Beauty of Constraints
By Faruk Ateş
Constraints, or “things that limit freedom," sound like a pretty bad thing. But in this talk I will explain not just that constraints are a good thing, but that they are beautiful—and important for great design, great software, and great products.
Constraints are everywhere
We are surrounded in life by constraints. Literally. The rooms we live and work in; the streets we drive, ride and walk on; the clothes on our backs, the balances in our bank accounts. Our entire society is built on a set of legal constraints that provide us with morality, stability, safety, and security, which in turn give us freedom and opportunities allowing us to pursue dreams, careers, things we want to do.
Constraints are an inherently beautiful aspect of the universe, and of life itself. Death is the constraint that gives meaning to life. Constraints are inescapable, so it is better to embrace them than to fight them.
Gary Chang is a Hong Kong-based architect who took his 32 square meter (345 sqft) unit and turned it into a 24-room apartment. The walls are adjustable and move around to create a comfortable bedroom, kitchen, living room, den, and more.
Chang took the constraints of his space and used them to do some incredible, innovative design work.
But Chang was not the first to create an adjustable interior. In 1924, Dutch architect Gerrit Rietveld was commissioned to design a house “preferably without walls." The result, known as the Schröder House, was as unconventional as it was amazing. The client's constraints forced Rietveld to take a dramatic departure from all architectural styles before it, which led to a hyper-modern house that looks as if it was built in the last 20 years—not 90 years ago.
Our financial means are a limitation as well. Sometimes there is only limited budget for a project.
For this sommelier, the small budget proved to be no problem for CASERNE, the design firm. It forced CASERNE to think about a simple and affordable solution. The result was a wonderful identity, wherein each item was unique and yet the whole remains cohesive.
Instagram was initially an app solely for the iPhone, whose screen and camera featured a 3:2 aspect ratio. And yet, Instagram chose to force images to be a fixed, square size. There were no actual constraints for this decision; it was something they arbitrarily put upon themselves—and it paid off. It gave them a unique charm and opened as many design-related doors for them as it had closed.
While it was hardly the key element to Instagram's success, this arbitrary constraint contributed to it by, among other things, providing a simplicity and focus to the experience while simultaneously giving them a distinct identity. Today, a square photo is widely associated with Instagram.
The “5 second rule” for presentation slides
There is a somewhat unwritten rule for good slide design: have less than 5 seconds worth of text on each slide. Why? Because research shows people don't multitask well, and after 5 seconds they'll stop listening to you, the speaker. People also think that information in a slide is crucial and must be read.
People's attention spans are a constraint we don't always think about. But can you think of a conference that is very conscious of this?
TED is a worldwide conference of top quality talks about Technology, Entertainment and Design. Their talks are limited to about 18 minutes, because people’s attention span for big topics usually fades around 20 minutes. The entire format of this immensely popular conference is based around the constraint of people’s attention spans.
The lack of a space constraint in North America has made the car an incredibly commonplace mode of transportation, even in densely populated cities where this makes far less sense for people. Slowly, Americans are starting to understand and appreciate the great value and efficiency of a bicycle-friendly infrastructure and culture, but now they’re forced to retrofit this into their driving-optimized infrastructure.
Conversely, the Dutch and the Danish have huge biking cultures, which partly due to space constraints have been cultivated carefully and attentively by the local, provincial and national governments. Compromises have been made for this, but the net result has been an overall happier and healthier population.
In the fields of medicine and space exploration, bugs in code can have very significant consequences. If I write a bug in my software, you’re inconvenienced, maybe lost some work. But write a bug into a space probe or rocket launch sequence, and you can render billions of dollars of equipment useless, or lose human lives.
This kind of zero-bug constraint forces you to think in new and creative ways to rigorously test for bugfree-ness. An ordinary Q&A process is insufficient for these kind of circumstances.
Wikipedia has a
List of Software Bugs cataloging these significant use cases.
Trees have evolved in the struggle of plant against plant many times, in vastly different lineages. The highest leaves win, and so trees tend to evolve to be as tall as possible, given the limits of physics and precipitation. Without competition, every forest would be a thick film of green life.
— Rob Dunn
Imagine if forests were not constrained by physics and precipitation, and earth
would be covered in a green film? Nature's breadth of wonder would largely be absent, and life might not have come to its current state.
Nature is full of such constraints, forcing life to find creative ways around them. But while constraints may force a certain creativity, I definitely am not arguing that creativity solely or exclusively comes from constraints. Far from it.
Take for example the Segrada Familia in Barcelona. This incredible cathedral, designed by Gaudi in 1892, is in my opinion one of the most impressive, awe-inspiring creations in our entire human history. The extraordinary sense of design and creativity rife in the Segrada Familia speak to the limitless potential of the human mind when we are given almost literally no limits, no constraints.
It's also taking more than 140 years to build, because Gaudi wanted it funded solely by donations. Because of that and its incredibly ambitious nature, the cathedral wasn't even halfway completed by the time Gaudi died. We are entirely capable of coming up with the most creative ideas and designs, but without some kind of constraints, such ideas may well outlive ourselves. Sometimes that's part of our legacy. But most times, it's simply not practical.
We deal with constraints constantly in our work. Even though we’re designing for digital media, where there are no real limits like natural resources to consider, we still deal with constraints—but some of us deal with them less well than others.
Take, for instance, the screen size. We’ve never
really been constrained by the screen in the digital world, thanks to the ability to scroll. But scrolling is inconvenient compared to just reading, so we limited it to vertical scrolling, and then later on, we somewhat collectively agreed that 980 pixels was a good width for websites.
But the rise of the smartphone and tablets screwed with that, and so Responsive Web Design came around. And Responsive Web Design is really just an embracing of constraints in a
positive way, instead of a negative one.
RWD suggests that we cannot accommodate screen sizes precisely and accurately, and should instead embrace fluidity and flexibility. We broke free from a constraint that was more self-imposed than put on us by the conditions of our medium, and embraced other, more sensible constraints in their place. With RWD we have a renewed kind of freedom in our designs, with the new constraint being it must exist on a single URL.
Of course, one of today’s biggest problems with RWD is that people design sites for various screen sizes, but code them as if we’re all on desktops with broadband access.
Back in 2000 to 2002, Stewart Butterfield ran the 5K contest: web developers were challenged to create a website or mini-webapp using no more than 5 kilobytes of data. This constraint led to some amazing creativity in people’s output, and was so successful that ALA recreated the contest years later, as 10K Apart. This time with the afforded use of some common libraries and a constraint of only 10 kilobytes, people produced fully interactive apps and games.
Rigid constraints of designing for the web force us to get truly creative. […] Since the space we have to explore is so small, we have to look harder, get more creative; and that’s what makes it all interesting.
— STEWART BUTTERFIELD
CSS Zen Garden is one of the most pivotal works in our industry. It, too, led to incredible amounts of creativity as a result of one simple constraint:
This is the XHTML page. You cannot change this source code. You may only provide it with a new CSS file.
As a result, more than 1200 unique designs were made, firmly establishing CSS as the right way to style websites at a time when this was under dispute.
Separation of HTML, CSS & JS
Mobile resource constraints
With the aforementioned rise in mobile devices, we see a resurgence of constraints we’ve seen before. Today’s mobile devices’ screen resolutions may match that of an average desktop, but their bandwidth is more like crappy coffee shop wifi shared with thirty hipsters. New sites are being touted for being responsive, but sometimes load several
Modernizr also had to be small in file size so that it could execute quickly. This was particularly important because of the html5shiv, which has to run in IE before anything is rendered, as it enables the use of HTML5’s new semantic elements.
Lastly, our goal was to keep Modernizr’s total execution time under 50ms, to avoid flash of content changes in case you were styling your content significantly differently based on different features being available.
All of these constraints were somewhat arbitrary, but it was really important to have them and not let the library be a resource concern for the people using it.
Looking ahead, there are certain patterns emerging in interface and interaction design. One of them is the opinionated interface.
Default settings and opinionated products provide very real but also very useful constraints to users. Users don’t tend to change defaults, which means that the defaults that
you choose dictate and direct both the behaviors and the experiences your users will have.
Similarly, limitations can be turned into liberations. By not offering certain features, you free people from having to think about them.
Take for example Powerpoint and Keynote: these tools offer you the flexibility of choosing the pixel dimensions of your presentation slides. But for every one user they aid by offering this feature, they also increase the cognitive load for thousands of users that don’t need it.
Presentate is opinionated. It sets a constraint we didn’t need to set, but in doing so, we simplify and we reduce cognitive load to users. These slides exist in multiple pixel dimensions at any given time, and although their aspect ratio is technically flexible, we’ve made it fixed. The user should not spend any time thinking about this, as it has no bearing on the story they’re telling. And that’s what a presentation is really all about: the story you’re telling.
are by design
But being opinionated is not an excuse for being bad. You can’t just take an unfinished product and call it opinionated, that’s not how it works.
The difference between a bad interface and an opinionated interface is that in the latter, something like a missing feature is by design. You
have to think your design or application through.
In pursuing simplicity, you need to think about the people who will be using your product, your service, your APIs, tools or frameworks. See their needs as the beautiful constraint of improved usability, and find creative ways to accommodate.
The constraint with
simplicity isn’t in keeping features or options down, but in making those features intuitively available to the user when she needs them, and get out of the way at all other times.
Sometimes people put constraints in their products that just don’t work well.
Hipstamatic emulated the old Polaroid cameras
too realistically, including a lengthy “cool down” period after each photo you took. This was completely arbitrary as it wasn’t waiting on the phone for anything. But it did not enhance the experience for the user, in fact it did the opposite.
The experience was made even worse by its tiny viewfinder, a completely unnecessary constraint that was cute for one snap, but painful and aggravating forever after. In the end, Hipstamatic completely lost out to Instagram, and these arbitrary usability constraints played a notable role in that.
Apple’s widely-discussed skeuomorphism is also a form of constraint: it demands that the software looks and acts like its real world, physical equivalent. But this comes with both pros and cons: the pro is that it feels less alien to certain users—in particularly those who are not so comfortable with software and computers in general—but the con is, again, that it hampers usability, sometimes for
The iCal or Calendar app comes with fancy page transitions when you go to another month. It’s slow and unnecessary and delays the user in achieving her goals.
The felt-covered, casino table design of Game Center sometimes makes it hard to discern which UI elements are decor and which are buttons.
Skeuomorphism is a hot topic. I personally don’t think it precludes good interaction design, but it certainly doesn’t seem to make it easier.
Think about saving space and using resources intelligently, as if your web site or app is Gary Chang’s apartment. Consider efficient code use and reuse, like the Sommelier’s branding. Impose arbitrary constraints on your app, like Instagram. Reduce settings and features to default behaviors and opinionated interfaces.
And if you do find yourself with a seemingly unlimited amount of freedom, like Gaudi did, then go and make something truly amazing.
Thank you very much.
Faruk Ateş @KuraFire presentate.com/kurafire/talks/beauty-constraints
Liked this talk? Share it!
Aug 14, 2013,
Last updated: Oct 14, 2015
Share this presentation