Progressive Enhancement starts with design

When we talk about Progressive Enhancement we usually assume this is a frontend development concept. And in part that is probably true. However, I think the concept of Progressive Enhancement isn’t solely the responsibility of frontend development. Because if we take it into account from the start of designing a project or a new feature I’m convinced it results in an even better product.

What is Progressive Enhancement

When you start designing or building a new product for the web, it’s easy to get carried away by the sheer amount of possibilities and techniques available to build “A Thing”. All kinds of existing UI patterns, real-time state changes and feedback loops are just a Google search away. But it’s at that moment that we could take a step back, take a good look at what we are trying to create. What is at the core of our idea? What are the bare essentials needed to “make it work”?

That is where Progressive Enhancement comes in. Progressive Enhancement is the concept of starting with the most simple way to make your idea work for everyone and from thereon out start layering techniques on top to make it even better, more delightful if you will. Progressive Enhancement ensures that anyone can use your website or new feature, regardless of how old their mobile phone is, what version of OS they are running or how poor the connection is they are on because they are visiting your website from the train WiFi. We will progressively enhance the user experience, but at the very least you will be able to finish the tasks you came to do in the first place.

Using Progressive Enhancement in design

So far you might think that since Progressive Enhancement mainly concerns technical specifications there is not much a designer can do about it. But I really hope to change your mind about this. Let’s use an example. Let’s say we’re designing a new webapp that let’s you share your thoughts with your friends. What is that web app really, when your deconstruct it to it’s simplest form? (See what I did there?). It’s just that, a simple form that let’s you upload a piece of text to a webserver. It’s as simple as

[Add picture of simple form with label, input and submit.]

<form action="" method="post">
<label for="text">What's happening'?</label>
<textarea name="text" id="text" cols="30" rows="3"></textarea>
<button type="submit">Tsjilp</button>

Once the form has been uploaded to the webserver, anyone with a browser will be able to read it.
Now, on top of that we can start adding all kinds of interesting and delightful user experiences, like the possibility to add a photo to your thoughts, or the option to turn a bunch of your thoughts into a thread, maybe even add some JavaScript so the page is refreshed everytime someone uploads a new thought to the website. But in it’s most basic form this is it.

How does that help you as a designer?

Now, I can understand that you might wonder how this helps you as a designer? I think there are a few things here to consider. Starting your design process from this mindset helps you determine the interaction design, keeping the default behaviour of a form in mind. It helps you to decide which other options you have to enhance the experience, what other types of interaction you can layer on top.

It helps you not having to come up with the most basic interactions, because they are inherently included by your basic building blocks already. Giving you more freedom to start adding those layers of enhanced user experience. But they also provide you with structure and guidance, as not to stray from expectations and conventions your users might already be familiar with.

It helps you to include accessibility into your design from the get-go. Almost all of the basic building blocks of the web have accessibility included in them. So when you start out with them in mind, no extra effort needs to be made to include accessibility. Almost anyone will be able to use your web app and it doesn’t cost an extra minute of development time.

And last, it can help you get your ideas and expectations across to the developers. If you all know you’re talking about a form, that creates a common vocabulary and it also helps them to create a mental model of the thing you’re going to be building. It helps to avoid lengthy discussions over interactions and expected behaviour, because we all understand the basic behaviour of a form.

Designers don’t need to learn to code

So does this mean I think that all designers need to know how to write code to create a website or app? No, I don’t. To me, it’s more about understanding the fabric of the medium you work with. Learn to understand what the medium you design for is made of, what it’s good at. Learn about it’s opportunities but also about it’s limitations. Just like any good graphic designer needs to have a basic understanding of the printing process, I believe any digital designer needs to understand the basics of the web.

Understand the difference between links and buttons, why a checkbox can’t just be swapped out with a radio button. And learn what the default behaviour of these things is, how the interaction of these elements work and how you can use them to build your idea in it’s most basic form. When you have a clear idea of that, then go and make it as delightful and magical as possible for your users. But remember that some of your users might already be delighted by the fact that they are able to use your product or website in the first place.