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

Source: https://dribbble.com/shots/5794359-Movie-app-onboarding

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

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.

Source: https://www.researchgate.net/publication/281628009_Flat_Design_vs_Traditional_Design_Comparative_Experimental_Study

Large background pictures

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.

Source: https://dribbble.com/shots/5758937-New-Design-Concept/attachments

Visibility vs accessibility

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.

Source: https://dribbble.com/shots/5546800-bwin-Game

Charts

https://dribbble.com/shots/5630666-Dashboard

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.

Source: http://www.vizwiz.com/2011/12/when-you-use-smoothed-line-chart-your.html

Copywriting and localization

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.

Source: https://dribbble.com/shots/5219787-Internet-s-Undersea-Cables

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

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.