Stress testing your designs so that they are flexible
How we can be creative and realistic with the websites, we create.
NOTE: This article was inspired by a conversation I had with Lynn Mercier, Lead Software Engineer for MDC Web, for our YouTube series “Designer vs. Developer”. You can also listen to a longer version of the conversation by downloading or subscribing to our podcast on Spotify, iTunes or Google Play Music.
For graphic designers, this will seem quite odd, but to produce boxes with rounded corners on the web was tricky to implement 10 years ago. To get them you needed hacks and horrible HTML tricks to get a box with rounded corners. Ironically when the ability to add rounded corners with CSS standardized across all major browsers, designers didn’t want to do them anymore because they became unfashionable.
The tools we use reflect the things we produce. Sadly the pixel-perfect nature of our design tools means the things we design are not practical or possible. However, it is a chicken and egg situation, without designers wanting rounded corners in the first place, the platform would never have pushed itself to implement a way to make this possible. The dreams of designers push things forward, so we shouldn’t stop dreaming, but there is a glaring issue with our tools. What we create is not a design, but an approximation. Prototyping tools are a positive step forward but creating something that will be thrown away seems like a wasted effort, and the more someone works on a design, the less likely they will be open to critique due to the closeness they feel to their baby. This can make prototyping counter-intuitive the closer it looks to a real product. Designing in the browser sounds excellent, but then you are limited to what is currently possible, therefore the dreaming for a new type of corner stops.
Stress testing your designs
When I spoke to Lynn about these challenges, she was enthusiastic about letting designers run wild with their ideas but to help them see potential issues with what we work on she recommended a couple of tricks to see how flexible our design is.
First thing is internationalization
Take your design with its text labels, go to Google Translate, and change it all to German, as that is a compound language so generally words are much longer than in English. Another alternative is to use a CJK language as the labels are very small. Once you have your translated text, bring it back into the app and see what breaks. This will help you understand the flexibility of your product. Digital as a whole is not a fixed medium, and to be honest, neither is print, as book publisher translate their text too, but when dealing with navigation and information design, it’s critical to create a system that can adapt when context changes and not being precious about our UI.
User-generated content
When designing a user profile, we often pick the names that fit perfectly on a mobile screen. Try designing different variations, with different usernames, avatar pictures, lots of metadata or little amounts. Does the design break? Does it look odd without much information? Consider user cases that adapt depending on user entered data.
Cutting the mustard
This is a term that was developed by the BBC, rather than trying to design a site for everyone, they concentrate on building a core experience for all browsers. This would be very basic but functional. Then they would develop the experience, enhancing for more modern browsers. This means their products work for most people, but advanced features of the design that enhanced the experience would only work for those with modern tech. So users are never excluded from experiencing their websites.
This is much like changing the language, the goal of cutting the mustard is designing a product that is accessible to all, flexible and not afraid of change. Designing static goes against the nature of the web, but so long as the tools we use force designers to work in a fixed fashion we will be stuck. Using the techniques above helps the designer to both open their creativity and still create a site or app that is realistic and flexible in the responsive world we live in.
You can learn more about UX design at Web Fundamentals.
