Responsive design: it’s an ethos, not simply a technique
For the last 6 years, I’ve been involved in designing and guiding the UX for various types of business data & analysis software. Most recently this has been with Qlik for their next generation BI software, Qlik Sense. From the outset of the project we took the stance that there was more to data visualisation than perfect, pretty charts. The artefacts created with our software need to be compelling, but above all they need to be accessible and useful. People should be able to access what they need, no matter where they are or what device they have. As part of delivering against that challenge we set ‘responsive’ as one of our early design principles. Here’s why…
Unicorn tears
Ever since we ‘went digital’ designers and developers have been chasing pixel perfect replication of a design across all devices, screens and systems. It did not matter whether it suited that screen or the person viewing it, it had to be consistent, in fact it had to be identical. This was a fools errand. The variants of the technology were always too high, from screen size & screen resolution, gamma & colour profile, down to OS & browser version. Things never displayed exactly the same. On top of this you have the person viewing it. Do they have a vision impairment? Do they use assistive software? Or do they simply have a slightly different cultural understanding of what you mean when you use a particular colour or phrase?
This ‘requirement’ for fidelity was based on the mass production ideal of a perfect reproduction — the printed edition. If it wasn’t a perfect reproduction it must be a ‘fake’ and not to be trusted — ‘look how it differs from the original’. But that makes no sense in a digital world where there is no original artefact to speak of, and definitely not one you can simply look at to check. What you see is awakened in the moment of viewing and all the potential variants that are part of the context which frames that moment. This attempt at a perfect reproduction is the result of concentrating on the artefact instead of the people who are using or experiencing it. In other words, simply looking at things from the wrong direction.
Being artefact centric doesn’t help enough people; it just creates a nice artefact. All well and good if you’re creating an Art or Design piece whose reason to exist is simply because it’s lovely. But when you are creating tools or services or even media, that needs to help people accomplish something — the value exchange is more complicated. It’s not about having to abandon our designer or artistic pride and sensibilities. Which thanks to years of teaching and cultural persuasion aren’t going anywhere. It’s just that they can get in the way when it comes to distribution and usefulness, they conspire to put the artefact first, ahead of its point. Of course it still needs to be aesthetically pleasing, delightful to use and all the other facets that contribute to a good design and great user experience, but it doesn’t have to be identical in every instance.
Unfortunately too much emphasis has fallen on the need to create a pixel perfect, lovingly crafted and static thing. A permanent edifice to the author/artist’s genius. This may be fine for mystics and Art but for business tools?
It’s true that these ‘perfect’ artefacts can be wondrous, persuasive and inspiring, and as such have their place.
However they simply don’t cut it when it comes to delivering continuous value, they are too fixed, too rigid. After all the artefact isn’t the point, it’s what it triggers and the actions taken that really matter. We’ve spent too long thinking about things from this aged publishing and broadcast perspective. We’ve been too focused on how we replicate the original, how we reproduce the exact same instance in another place. If all the effort goes into crafting one exquisite thing but that thing can only be viewed by one person at a specific time and place, it’s utility is very low. The effort to exactly mimic the experience elsewhere fails, it always differs from this first expression, and can never be the same. Even when we rewatch a film or movie it feels different, and that’s a fixed unchanging thing.
We should not waste so much time and effort on this ideal of perfect reproduction, the approach has to flip. The people who will utilise the artefact need to be placed at the centre of the decisions on how the thing is made and distributed. After all just because a person created it on their multiscreen, top of the line workstation on a Friday afternoon whilst listening to Mozart, doesn’t mean that is how everyone else who needs to use it will experience it. The real world smashes this careful single context to bits. The contexts in which different people find themselves when they need to use a thing varies immensely. After all it’s the use of the thing that creates value.
In the past we have tried to imagine and predefine those possibilities, essentially crafting a version of the artefact for each imaginable context. But even without considering the ‘unknown’ contexts it still leaves you with this horrible production cost:
Time spent to perfect artefact
x
Number of ways said artefact needs to be displayed
Now imagine the effort for pixel perfect rendition on just the android screens from last year. It would be expensive, impossible and pointless to create all those unique versions, so you have to compromise but the model of ‘exact replication’ gets in the way. You end up creating ‘classes’ of experiences, often as degenerates from the original ‘perfect’ experience.
More than a technique
This has lead to the thinking that gave us new approaches to tackle these diversified experiences and has manifest primarily in Mobile First and Responsive Web Design. Mostly responsive design is seen a method or technique for reflowing content so that it fits the screen. But there’s more to it than that. The real leap forward is not in the technique but in breaking away from the perfectly reproduced artefact and concentrating on maximising the usefulness of the artefact. Making it about what value and use the person viewing or accessing the thing can get from it, whenever and wherever they interact with it.
Approaching the design from this perspective concentrates on the person using it and places their ability to get the most from a thing as the requirement — it’s about user needs, it’s people centric. This means whether I’m using an iPhone on the bus, a desktop with multiple screens or presenting via my tablet and a projector, I get a familiar experience of the artefact but in a way that fits my context. What’s smart is that the content and UI is now automatically fitted to be the most useful for the context. The meaning and familiarity are retained but the exact layout and way the pixels are utilised changes. This enables the same content and experience to be delivered on a wider variety of devices, supporting a broader group of people and contexts. The subtlety here is that it’s not simply cycling through a predefined set of rigid views to find one that fits. It’s reflowing the pieces and allowing the content to adapt and shift to suit the view, whatever that maybe. The design and development skills needed to make this a reality lie in understanding what to show, what to hide and how to prioritise the components so that you get the maximum value for the person who is using it.
How this manifests in the real world
Today you can see this technique employed across may websites and digital services. My experience has been with how to achieve this for a visualisation and analysis tool. For Qlik Sense we utilised responsive approaches throughout the product but it’s in the charts where it really shines. We don’t ask the person creating the chart or dashboard to make multiple versions for display at different screen sizes and resolutions. You create it once, keeping the focus on the content and usefulness rather than the artefact and distribution. The charts adapt and render in the best way to suit the available space, retaining the charts meaning and integrity. It doesn’t skew or distort a fixed graphic. It works by using the scaling and hide and show techniques of responsive design and adaptive design to recreate the chart and it’s components to most suit the physical space. If it’s a small space we show hints and a suggestion of the shape, reducing the noise and erroneous parts so that the information scent is as strong as possible. When viewing these small things it’s all about information foraging and spotting that indicator that says ‘look here, this is interesting’. You can quickly scan a set of these and get a good idea of what to explore further. Give the chart more space and more is revealed, the same key content is there but you get progressively more detail, enriching the chart with more information and tools for taking your inquiry further. This helps the chart be meaningful across a wider range of contexts and uses, without the creator needing to think about them all up front.
This becomes even more useful when you want to look at a layout of multiple charts (a dashboard) on a different device, or more importantly you’d like to share you dashboard with someone. How often do you know the context it will be seen in? Here we use a grid layout in combination with the responsive model to ensure the whole sheet renders in the most useful and organised way. This means I can walk in anywhere and present, no messing around with aspect ratios and resolutions. No need to rebuild the layout, it simply works. Whether I’m doing it from my phone or laptop, I get the most useful rendition. This fluidity enables the content to move easily in an organisation and reach the people at the edges not just the ones whose Desktop system is the same as the content creator’s.
With this approach you get a lot more value out of the artefact, essentially a higher ROI. And it’s all thanks to a shifting away from focussing on the thing and instead focussing on the people using it. We can replace the scary production equation from earlier with this positive one:
Number of people
x
The value and usefulness they extract from the artefact
The real value isn’t in this technique or that technique. It’s in thinking responsively and enabling the most people to get the most value from a thing by realising its maximum utility. By delivering usefulness and value to the person whenever and wherever the information is needed — not leaving it trapped in a rigid state that only a few people can understand and use on a Friday, whilst listening to Mozart.
