Design for the Unknown

“What if someone doesn’t browse the web as I do?”

This was the – apparently obvious – question that Ethan Marcotte posed at the beginning of his talk at An Event Apart 2016 – Boston, which I attended recently.

As designers, we often end up thinking everyone uses the internet the way we do: on large desktop computers, on fancy fruit-branded smartphones, on lightning-fast 4G networks… that’s not always the case. Indeed, we have all experienced how bad hotel WiFis are, right? Moreover, what is referred to as “the next billion” (the people coming online in the next years) will not be from rich western countries, but rather from developing countries, using basic mobile devices and not-that-fast connections.

“There is a failure of global imagination in the rich world, an inability to understand the nuances of life lived by people with limited means. Some of the ‘next billion’ to come online are taking boats across the Mediterranean, the South China Sea, elsewhere. They will have smartphones.“

On the opposite side, 2016 has been the year where acronyms like AI, AR and VR got out of research labs – where they’ve been sitting for years – and hit the consumer market. Facebook launched its conversational platform and so did Amazon with Echo; we saw more examples of engaging Virtual Reality experiences in the digital sport industry and also the very first experiments with Microsoft HoloLens and other Augmented Reality devices. We don’t know yet which of these technologies will stick but – as Josh Clark pointed out –  we can be sure that all Interfaces deprecate, sooner or later.

So, the range of experiences to design for is getting larger and larger: we’ve got feature-phones on one hand and latest tech advancements on the other, with an almost infinite amount of screen sizes and features in between. And the larger it gets, the more difficult it is to know – and control – all the variables. How can we cope with that? The brilliant speakers at An Event Apart 2016 outlined some useful strategies.

Content and Standards

or dealing with the baseline experience

When technology advances and new challenges arise, we often forget to look at the past for inspiration. Indeed, the foundation of the web itself – standard, semantic HTML – is already designed to cope with some of the problems described in the introduction, as Jeffrey Zeldman reminded us in his opening keynote. HTML emphasises a core principle to keep in mind when designing: we need to start from content, not from layout. Content that can be then progressively enhanced with presentation (CSS) and behavioural (Javascript) layers, but that is already digestible as-is by any web-connected device, even in the worst possible conditions.

The first web page is still accessible today, 26 years later. This is how it looked like in the original Line Mode browser

Starting the design phase from content could also change our workflow, as Josh Clark explains in his talk. Here, he describes the first step of the process he followed for the redesign of o’Reilly Media website: an inventory of all individual content items that will appear on a page. After that, they skipped the traditional wireframing phase and they worked in parallel on layout and visual, delivering only mobile graphic comps to the client (that is not normally used to judge based on individual content modules). Then, they moved right into the browser with HTML prototypes to iterate on all behaviours and screen sizes details.

Yes, text as a wireframe. And its translation into mobile visual comps

Thus, starting from content lets us develop more compatible experiences. And also enables leaner design processes, a topic that leads me to the next point.

Modular Design to the rescue

or dealing with a continuum of screen sizes

As the number of devices sizes is outnumbering our design possibilities (and budget), the shift on designing systems rather than pages seems inevitable. And as we do this, there’s one concept that keeps popping up in every new project: modularity.

This was the situation in 2014. And these were just Samsung devices.

Design practice is evolving, and so our deliverables should do as well. The challenge today is to move away from tools and methods that we were already using 20 years ago. Breaking down the system in individual modules, described through HTML styleguides seems the way to go.

Ethan Marcotte in his talk outlined the key benefits of this approach:

If you need inspiration, the examples of styleguides out there are endless.

In the process of creating one, Ethan suggests that one of the crucial steps consists in correctly naming and organising elements and modules. Brad Frost’s Atomic Design methodology is a good framework to start with, but we shall use the convention that makes more sense for our organisation.

Starting from content and designing in a modular fashion lets us cope with the baseline experiences and also deal with the modern continuum of screen sizes. However, what if we want to achieve design consistency even when there’s no screen at all?

Design Principles FTW!

or dealing with devices we don’t know yet

As new technologies emerge, the touchpoints for which we need to design become more and more diverse. Our goal as designers is to achieve what Cameron Mall calls “Unified Design”: an experience that feels nevertheless consistent because – as Jeffrey Zeldman puts it –  your brand happens between devices”. How can we design such a thing if our users jump seamlessly from our website to our Snapchat channel, then talk to our Facebook chatbot and they finally immerse into a Virtual Reality experience offered on Oculus Rift?

Ethan Marcotte suggests to step back and – before even conceiving these experiences – define a set of underlying Design Principles: something generic enough to be device-agnostic, but also specific enough so that it can be used to decline design decisions in a coherent way across many interfaces, not starting from scratch over and over again.

Salesforce Lightning principles: Clarity, Efficiency, Consistency, Beauty

Mailchimp developed a Voice and Tone styleguide to describe the basic principles behind the copy used on their site and apps. For example, starting from this, it would be a lot easier for them to design a chatbot to be deployed on the Facebook Messenger platform.

Remember, principles can be your compass whenever a new device pops up and you have to design for it.

Looking ahead

By starting from content and a solid foundation we can provide a suitable user experience to both the “next billion” and newer devices. We can make our design more efficient, by organising it in reusable modules that adapt to countless screen sizes. And we have to identify the underlying principles that fuel our digital presence, regardless of the channel in which it is experienced, so that it will always be perceived as a coherent entity.

The bottom line is, this means evolving the way we approach product design: something that may seem painful, but that will help us cope with future challenges posed to our profession. Something that will help everybody make a giant leap in the way we design and build products.

Products that can be experienced by everyone. Regardless of the device they’re holding.