On my way home the other day, I was standing on the subway platform and decided to open up Facebook. I was greeted by this post that someone had shared:
The wine glass first caught my eye. I thought to myself: “how… do you drink out of that?” And then I quickly realized that was the point of the post. It’s beautiful enough to catch your eye but forget trying to use it for its original function.
I can’t help but see the parallels to web design.
We’ve all seen those websites that feel more like fine art. A designer friend shares a link. “So cool! Check this site out.” You get to the homepage, you’re taken aback by the “immersive” animation. You click around a bit, wonder how you got to the page you’re on and suddenly (without warning) Google Chrome crashes.
I’m not saying a design with a personality isn’t fun or exciting but when the design language begins to overshadow the original function, things start to look a little too much like that wine glass.
So, I’m on the subway platform looking through these images and I start to imagine if we applied this same principle to the MTA.
I’m sure some of you own the famous New York City Transit Authority Graphics Standards Manual, a 2014 version of the guide created by Massimo Vignelli and Bob Noorda in 1970 while working at Unimark International. It’s become quite popular and is generally loved for being a classic example of modern design. The project was no easy task and actually took 3 years to complete. How do you create a universal wayfinding system that anyone traveling from anywhere in the world could understand when visiting New York City?
Much like the contents of the NYCTA Graphic Standards Manual, there are many web user interface elements and symbols that can transcend any language, culture, or subject matter differences. Some of these include drop down menus, buttons, text fields, select boxes, and radio buttons.
Imagine if you were commissioned to redesign the MTA’s guidelines today. You decide that it needs to better represent New York City’s heart and soul. A unique font that speaks to the city’s authenticity. A bright gradient color palette to represent diversity and openness. Graffiti inspired arrows and wayfinding graphics because it feels more “real.”
You get the picture.
Yes, all of these things may do a better job expressing New York City but you’d have some people who can’t read the station names, others blinded by the color of the signage, and many confused which way is uptown or downtown. Would they make it to where they’re going? Who knows.
Moral of the story: brand expression is good, but don’t get caught up in brand expression when you’re working on the quantity selector of a product page.
But what about client feedback? Sure, sometimes clients ask for seemingly crazy things. Just the other day, a client asked for “the buttons to feel more human, more gestural like a Monet painting.” Clients don’t always have the tools for explaining what isn’t working for them. In these situations, they often defer to providing very specific art direction. Chances are they don’t actually want a button that looks like Monet’s Water Lillies, they just feel like the design isn’t expressive of their brand.
It’s our job to create a design that will be effective. Your client hired you because you’re the expert. Remind them of that while presenting a few different options and let them know why their solution poses some challenges. It’s always important to ask questions and get to the bottom of what your client is asking for.
It’s our job to create a design that will be effective. Your client hired you because you’re the expert.
So please, avoiding turning your hamburger icon into a triangle or making your “Add to Cart” button into a hand drawn illustration of a spoon. Use the universal language of the web to your advantage. Focus your creative energy on the areas of the site that can bring your client’s brand story to life, not on the universal symbols that will help users accomplish their goals.
This article was originally published on UX Planet.