When design trends meet reality, part I.
UI/UX design is about solving problems. In the world of the internet, that translates into creating user experiences that make people buy products, use your services with ease or search for information faster. However, designers often forget about this very purpose of design and focus only on aesthetics.
Working as a front-end developer in the past few years has made me look at design from a different angle. In this article, I’ll take my shot at analyzing some designs with regard to user experience.
- Disclaimer: I’ll be pointing out problems in designs, but mind that I don’t know more than what is presented by the author and their dribbble shot. There might be valid justifications for what they did and without knowing the scope and requirements of the project I can only guess. The client can have different opinions from the designer and that often manifests in the design.
Sacrificing usability for aesthetics
Most designers on dribbble, including myself, are guilty of this. In the pursuit of sleek and modern design, we forget (or deliberately sacrifice) usability.
For example, in this movie onboarding app design above. In the first screen, we see a list of actors presented in, let’s call it a “scrollable picker”. This type of picker is normally used for selecting date and time. The scrollable picker works in a calendar or alarm clock app because we already know the limited set of options: 12 Months, 24 hours, 60 minutes.
Using the scrollable picker is not a good idea in cases when:
- The list is so long that it makes the user scroll all the way down/or to find a specific item
- The user doesn’t know the length of the list. Where does the list start and end? Are there 10 or 100 options?
In the second screen, we see icons of movie categories. When people look at websites, they scan for information. In this list, scanning becomes more difficult because we have to jump from icon to icon as they’re not aligned in a grid or a list. Besides, icons for movie categories are not standardized (unlike, for example, the music player icons ◼ ❙❙ ► ⏪ ⏩ ). The users would have to read the labels anyway.
Users often perceive aesthetically pleasing design as design that’s more usable.
Although I pointed out the UX problems in these two app screens, I still think the minor problems users would experience are outweighed by the aesthetics. After all, it appears to be a movie recommendation app. Whoever is using it probably has the time to scroll through lists of actors or take the time to learn the meanings of the movie themes icons.
Flat design
When the first flat design arrived on OS Windows Phone 7 in 2010 and later on Windows 8, it was received positively, especially by the graphic design community. Nowadays, many research studies suggest that flat design is not as good as “traditional” design. It lacks the 3rd dimension to which our brain is accustomed. This causes a higher cognitive, the brain requires more time to process information, search for icons or scan through text.
Participants in a study were asked to search for icons in both a realistic (3d) and flat set of icons. A significant difference was found in the mean values of the icon search time: almost twice as high for flat as for realistic icons.
Large background pictures
In my opinion, it’s easy to create an aesthetically appealing website using a dramatic picture stretched across the screen. With a large title over it, a few minimalistic icons and buttons sprinkled here and there and voila! We have a likable design.
When we’re designing for websites with content that is either generated dynamically (fetched from other sources) or curated by editors, we need to realize that the picture in the background can be replaced. Unless our editors are also designers and have time to hand-pick suitable images, there will always be a case when the picture covers text or other important elements.
In the example below, featuring a dramatic photo of Benedict Cumberbatch, we can notice a few spots that would basically become invisible if we used a picture with a white background instead.
Visibility vs accessibility
This is a tough one. Globally, it is estimated that approximately 1.3 billion people live with some form of vision impairment (source). Also, people use monitors with different brightness and contrast settings.
Web Content Accessibility Guidelines (WCAG) recommend a contrast of at least 4.5:1 between foreground and background colors to be easily readable. To check if you pass the WCAG accessibility test you can use this tool: https://webaim.org/resources/contrastchecker/
As you can probably see, the design below would fail this test.
Charts
I always shake my head when I see designs with unrealistic charts. Charts should display data accurately. There is not much freedom for creativity when we need to display data over time, be it expenses tracking or website visitors. Using some sort of bar or line chart are our only options. Don’t make the mistake of turning your chart into an artwork.
What most designers don’t realize is that you can’t just smooth lines in a chart how you like it. Smooth lines misrepresent and distort data. Especially with invisible points.
Consider the two graphs below without their background grids. It would be really hard to tell the exact points on the x-axis with the graph on the right.
Copywriting and localization
I’ve worked on multiple projects that needed to support translations in English and Chinese, among others. With this in mind, you can no longer rely on fixed widths and heights of your elements in a design. What can be a 10 character long sentence in one language, can be 30 characters in another. At a minimum, in order to mitigate problems with different locales, try to design for the longest possible phrases and make your layouts more flexible.
Also, I used to think that designers are only responsible for the graphics and not the text. I would slap “Lorem ipsum dolor sit amet” everywhere I could. While it’s true that most bigger projects involve a copywriter or professional UX writer, the text should be an integral part of a design. Good copywriting will make you a better UX designer.
You won’t always be able to break your words as in the example below.
To write good text keep it short. And then cut them in half. Keep your words consistent across your design (i.e. don’t use “scheduling” in one part of the UI and “booking” in another). Think of the end user. For example, if your clients are developers it’s ok to use technical jargon in your error messages. If your clients are my parents, please use simple language and specific words.
Final thoughts
I remember my first days on dribbble (sometime in 2013). I would design a website and then cut out the best part of it to make a stunning 800x600px preview. Tilt my head a few times (Why do designers tilt their heads?) and finally hit the submit button. After that, I would keep refreshing the websites to see how many likes and followers I got.
What is the point of this anecdote? We, designers, have been tricked into playing the same game that social media platforms want us to play. We want followers, we want to be featured in popular shots, and the algorithms favor those with many followers. That’s why we spend so much time working on eye-catching previews that, once published, only give us a few minutes to catch attention before they get buried in the avalanche of new shots.
Don’t let the new trends and hypes tempt you away from creating designs that fulfill their purpose. Unless it’s to get likes and pats on the back, in that case, go crazy. The real world is full of iterations, compromises, and edits.
If you enjoyed this series and found it useful or if you think that my arguments or reasoning were faulty, please let me know in the comments.