Designer vs Developer #6: Building new tools for designers and developers

The sixth episode of Google Design Advocate Mustafa Kurtuldu’s YouTube and podcast series aimed at improving understanding between designers and developers looks into whether design tools prevent us from discovering the truth. In this episode he speaks to Surma, a Developer Advocate on the Google Developer Relations Team, about whether the design tools we use are fit for purpose

Mustafa Kurtuldu’s Designer vs Developer series seeks to foster greater understanding between the two camps.

Released every two weeks, each episode deals with a different issue, from effective collaboration to whether too much testing and data ruins the creative process. There will be six episodes, all of which we are featuring here on the CR website.

In episode 6, Kurtuldu speaks to Surma, a Developer Advocate on the Google Developer Relations Team, about whether the design tools we use are fit for purpose and how Dash Elements (now renamed to ‘HowTo: Components’) will help educate designers and developers about important topics like accessibility.

For each episode, Kurtuldu writes an accompanying essay. This week he looks at how design tools can distort what should be obvious and prevent us from discovering the truth.

I miss the design app Flash. It was the perfect design tool for digital designers. It visualised code concepts like using ‘movieclips’ like variables and the ‘stage’ like a UI canvas. This made the logic of programming accessible to visual makers who didn’t have a computer science background. It was also excellent for getting teams to work together. When the sunsetting of Flash began, a lot of us fought against the tide, because we believed the perfect designing environment was all that mattered and we didn’t consider the context of our users. Designing on our big screens in our perfect world with our amazing tools was great. The problem was that the user experience was terrible when it came to accessibility, performance, and consuming data. But that didn’t matter to us.

Photo: https://unsplash.com/@bamagal, Creative Commons

I remember waiting 5–10 minutes in excitement for the websites of MTV2, Dazed & Confused and the band Gorillaz to load. Most users accepted these experiences as at the time they didn’t have a point of reference of what the norm was. Though those same people would get bored and click away wondering what the point of the web was. As blog-like-websites started to take hold and the mobile web began to grow, Flash experiences felt sluggish and out of date. But ask any designer of that era, and they will tell you how much they miss the good old days of creative expression, passion for the experimental and to create web experiences which only seemed to serve one purpose — showing off their portfolios.

It isn’t until you watch someone trying to navigate your website or app that you realise all of the flaws in its design. Because we sit behind big screens with the latest software and hardware, our actual experiences are divorced from reality of most people. Even when we test things, it’s usually on a device connected to our computers, with a decent internet connection in office lighting.

Most users don’t have those types of privileges. Mobile phone networks lie, laptops have some corporate software installed that slow them down, phones have bumpers and cases that obscure UI to the extent of blocking users from tapping a button if it’s too close to the edge of the screen. When you see the thing you have created for the first time in the real world fail, it’s a bit like thinking your house is tidy, then a guest walks in and your world view shatters as you see how messy your home actually is. You start panicking, stumbling and stuttering “yeah, yeah, yeah… Eerr one sec… let me remove my socks from those tea cups….hehe welcome….”. Seeing your designs in the real world under real conditions can be a sobering experience.

A Clearview highway sign in Farmington Hills, Michigan, Photo: Public Domain

A Clearview highway sign in Farmington Hills, Michigan, Photo: Public Domain

There is a story about designing in the right context that has become a common lore among type enthusiasts*, and that is the design of the typeface Clearview and highway/motorway signs. It’s believed that one of the primary causes of traffic accidents in the United States is due to illegible letter forms on the signs as a 5th of all drivers are elderly and/or have poor eyesight paired with an optical effect that occurs during sunset and sunrise called halation. This is when the shapes of an image become foggy due to the light blurring the edges. For example, when headlights shine on highly reflective road signs during halation it makes the text hard to read because the light contrast keeps changing.

In 1989 graphic designer Donald Meeker and typographer James Montalbano decided to create a typeface that would solve the issues of legibility during halation. They felt the primary cause of fuzziness was the illegible letter shapes of the existing typeface, Highway Gothic, and not just the shiny material they printed on, or the size of the text.

Above Sketch showing Clearview development from existing highway typeface. Image: Creative Review, January 2005

Above Sketch showing Clearview development from existing highway typeface. Image: Creative Review, January 2005

Over the course of 10 years, they created a new font called Clearview Hwy which resulted in improved legibility and potentially life saving. It was adopted by American Federal Highway Administration in the US. Or so it would seem. In 2014 a further study showed that the increase in legibility had more to do with the result of recognition, rather than readability, due to learning effects.

The initial research didn’t necessarily simulate the actual process of reading a sign: detection, recognition, and reaction via many glances. They also found that the Clearview Hwy was tested against weathered and old signs which were naturally worn out and hard to read hence providing false positives. Though Donald Meeker does dispute these findings.

A little bit of knowledge can be a dangerous thing. At times we potentially fool ourselves into believing that we’re designing in context because the test environments and device labs we create don’t reflect the real world. The tools and processes we use can have a huge impact on the things we create, and we must tread carefully. Because changing a typeface under potentially false pretenses has negative economic impact on society in the same way that designing an app with lots of images costs the user real money through data because we only design in a WIFI environment thinking fake 3G throttling in our dev-tools is adequate.

The definition of design for me at the beginning of my career was about choosing the right typeface and colours. That design was something I was born to do and as such should never be challenged. These days, for me design is about doing the right thing for the user and less about the visual. It’s about honestly looking at the problem and trying to evaluate the best thing to do and admitting that maybe I don’t have all of the answers. Because I feel the next step of evolution for us is not a physical thing but a psychological one — the realisation that maybe we’re wrong. But if true, then is this a paradox. My head hurts. I just want to make things look pretty. I miss Flash.

You can learn more about design and UX at Web Fundamentals.

*Creative Review, January 2005

More from CR

Nelly Ben Hayoun on teaching designers how to change the world

Experience designer Nelly Ben Hayoun has teamed up with Amsterdam’s Sandberg Instituut, WeTransfer and Village Underground to launch The University of the Underground – a free MA programme for designers who want to change the world. We caught up with Ben Hayoun to find out more…

Elton John Tiny Dancer

Elton John releases new videos for three classic songs

Elton John, via a competition held with YouTube, AKQA and Pulse Films, has commissioned videos for three of his classic songs from the 70s: Tiny Dancer, Benny & The Jets and Rocket Man. And they’re all great.

IIASA_115x115

Graphic Designer

International Institute for Applied Systems Analysis
Centaur_115x115

Integrated Designer

Centaur Media