Published on MuzliVisual Design

Design crimes in UI design: 8 things we should stop doing today

By April 21, 2019 November 9th, 2019 No Comments

You’ve heard of fashion crimes, right? Socks with sandals, double denim, matching the top and bottom colors. You’ve probably guilty of one of them and just found out! These fashion choices are called crimes because they demonstrate either the lacking sense of good measure or complete negligence. It’s the same thing with UI. Some mistakes are so neglectful or juvenile that I like to call them design crimes. I think designers who do them should be punished with a slow internet connection until they learn their lesson!

One of my friends once asked me: You know I appreciate design and I love a well-designed product. But why do designers give it such importance? It’s not like your designing the engine of a civilian aircraft. The stakes aren’t really that high. Not to take anything away from it, but it’s basically commercial art, right?

I believe this is a legitimate question. After all, it’s true that nobody has ever died because the website didn’t use the right font! So the stakes aren’t really that high right? Wrong!

Why this is important

What many fail to understand are the commercial ramifications to sub-optimal design. If your website moves millions of dollars worth of product and you’re pouring hundreds of thousands of dollars into advertising, a 5% drop in conversion rate is a huge issue. Also, if your product sells on thin margins, a 10% increase in customer acquisition costs can take you out of business.

The following are a few common mistakes that I deem as crimes. Not necessarily because they will drop retention rates or cause confusing user experiences, but just because designers should know better.

Some of these crimes are committed by designers, some others by clients and product owners. However, I believe it’s always the designer’s job to show the client the right way to do things and convey that with convincing arguments, not with the “I have X years of experience and trust me…” speech.

1. Negligent text placeholders

It’s when the design doesn’t take into account the size of the text which is going to be placed inside in a real use case. Text placeholders are, as the name suggests, spaces where dynamic text is placed. Since users are free to enter relatively any content they please, the space allocated to that text should be enough to contain both the longest and the shorted text length permitted and still look good. I myself have been guilty of this and I certainly know why designers do it. We often get too hung up on the form that we forget the content. That’s where almost all problems arise.

Chat app user nterface design

https://www.uplabs.com/posts/aphrodite-4-profile-styles

Sport scores application dark mode User interface design

https://www.uplabs.com/posts/kick-score

Consider this example for instance: What if the username is Sebastian Augustinsson or Abdulkuddus Sulaimani or Mirzaakhmedov Kudryashov, which are real names by the way. And in the case of the scores app, beautiful as it may be, what if the team is Borussia mönchengladbach or the Philadelphia Phantoms. I know there are solutions, but the moments you take thinking about them, and the time it takes developers to implement them is not to be taken lightly and they don’t necessarily give the best result visually.

2. Over-complicated navigation patterns

Navigation is the backbone of any website. When I started to do more art direction with junior designers, that’s what I always focused on. I can always be flexible on composition, but navigation is serious business. Users should always feel there’s a clear navigation pattern at all times. They should know where they are, where they’ve come from and how to get back there without putting in too much effort. But here’s the kicker: let’s try to imagine a new navigation pattern that isn’t a top or bottom menu or tabs. It’s not easy right?

Some designers, however, are creative enough to come up with very neat navigation patterns that do not involve menus or tabs. However, in their quest to make them, they sometimes forget the whole purpose of navigation aids: helping the user locate themselves and find anywhere they might want to go. While I’m all for breaking the barrier of the old navigation menu and evolving to more original schemes, I still think that familiarity and ease of use trump all other need here. If it ain’t broken, don’t fix it right?

Keep this in mind

One more thing that I want to note though, is that sometimes confusion is the goal. Sometimes the brand itself demands something chaotic even if it’s confusing, like in the following example. the key takeaway is that you shouldn’t use these schemes for your project unless you deem that something similar is what the brand needs and what will resonate with the audience.

Modeling agency navigation pattern interaction design

https://dribbble.com/shots/5522204-Modeling-Agency

3. Unrealistic animations

tavl app interaction design animation

https://dribbble.com/shots/2855686-Four-directional-multi-dimensional-controller-pull-down

Car diagnostic app interaction design

https://dribbble.com/shots/5321093-AR-Car-Mechanic-User-Interaction

Ever looked at an animation and went: “this is never gonna happen!”? This is a big crime in my opinion. Some designers, who usually refer to themselves as “interaction designers” tend to spam Dribbble and Uplabs and Behance with these gorgeous buttery smooth animations that leave the rest of us feeling years behind. I myself love to see these animations and I think we should all make more of them. But these designs are faced with a huge issue: implementation cost

When we talk implementation, many of these animations are straight-out hard to make with code. But there will eventually be a functioning version of the animation written in code. The question is: how will it perform? Most likely, it’ll end up either laggy on some devices, will load forever, will take to much bandwidth, or too resource-intensive meaning that it’ll kill anything else running with it, etc… But as we know, the right person with the right skill-set will eventually make it work. But at what cost?

Highly specialized people are expensive and most clients will rather spend the money speeding up their apps instead of optimizing unnecessary animations.

Here’s where it gets tricky

This problem becomes most serious when platforms such as Dribbble and Behance are full of these animations. This makes the life of a potential customer more difficult as they’re be making their hiring decision based on work that simply isn’t going to happen because they can’t afford it. And this isn’t just with mobile apps, websites suffer from this too. and don’t get me started on animations that will never work on mobile view.

Let me step back here and say that I’m all for these kinds of designs. Before flash, the web used to be a dull place. But then flash came and we started to see some beautiful things (and have too many viruses to enjoy it). Then HTML5 came along and things got a whole lot better for the web. Swift came and made things easier on IOS. These things take time. What is important to remember, however, is to animate responsibly especially on client projects.

4. Bad copy

Bad copy ruins design. It’s that simple. Luckily, most designers are aware of this. Many of us have a humorous nature so they can write beautiful things. Others don’t, so they try to copy those who do. But if you can’t do any of these, hire a copywriter! If you’ve spent tens of thousands of dollars on your app, the last thing you want to do is to cheap out on some good copy. As a matter of fact, good copy can elevate your design and reach your users in ways typography, animations, and composition can never achieve. Here’s an example of great copy and how it adds up so much to the experience

delightful empty space illustration from webflow.io

www.webflow.com

5. Fabs

This is a dying fad (or Fab, get it? Excuse the pun) but I thought I’d mention it. It used to drive me nuts with clients. I’m sure you can relate to this. the client comes into the meeting with some very horrible sketches and all they have in mind on top of that is a color and that round plus button on the Gmail app. They don’t have a particular function they would like it to serve, but they just want to see it somewhere in there. I’ve seen it a thousand times.

Now, I’ve been a designer and I’ve also been a client and I must say that there’s a time to push back and a time to just give the client what they want. This is the case with Fabs. Since it’s not going to hinder the user experience in any meaningful way, you might as well just use it and put some points in the bank for when they’ll want the yellow background!

Fabs are awesome, but not always necessary

I find Fabs to be a very elegant solution that can help immensely in a lot of different use cases. However, they are not always necessary. Fabs are best used as a primary call to action that needs to be seen as the user scrolls. I think about them this way: they’re an elegant replacement for the “click me” buttons. Google defines them as follows:

A floating action button (FAB) represents the primary action of a screen -material.io

6. Too many calls to action

This one , also, is probably not the designer’s fault. This one usually comes from clients who learn about the importance of “call to action placement” so they want a call to action everywhere! “Get in touch now” “Talk to us” “Learn more” “Explore further” and all sorts of useless CTA that nobody actually clicks or benefits from. What many fail to realize is that repetition has its weaknesses.

When an element get repeated too many times, it loses its importance and become invisible to the user, much like banner ads, but worse.

7. Make it bigger

Also a client crime. We often mistake big for important and it’s a natural misconception. Clients want their logo to be bigger. They want the titles to be centered and in bold, whereas in fact, that may sometimes take away from their importance. Why, you said? It’s because important things don’t need to be loud and big. Big things do not necessarily capture our attention. This isn’t to say that titles don’t need to be big. All I want to say is that unless you’re coming with data from some serious A/B testing, making type or images “just a little bigger” is probably not going to get you anywhere. It’s the designer’s word against yours. When it comes to that, I’ve come to learn to always trust the guy who does it for a living.

8. Copying design giants

This is when a product owner asks a designer to “make my app look just like Airbnb”. The crime is not plagiarism. I believe that unless you’re copying pixel for pixel, There aren’t any morality principals being violated. The problem is that it’s super difficult to get things to look exactly like famous apps. Ask me, I tried. Copying the same functionality is hard enough, but when it comes to adapting the app for its exact use case, or the branding of the company, or adding new screens, things start to look awful.

tayara.tn vs Airbnb android apps

tayara.tn vs Airbnb android apps

You see, companies like Airbnb spend a whole lot of money making their designs as refined as you see it. They go into ridiculous details like anti-aliasing and resolution-specific customizations. These guys also have proprietary fonts and icons and ridiculously perfect color choices. They have great photography and excellent copy. They spend thousands of hours refining every aspect of the interface for it to look that great. We take all that for granted until we try to copy it and fail.

I’m not saying you shouldn’t get inspiration from Spotify or Netflix. I’m saying don’t try to copy it. Not because it’s plagiarism, but because it will usually work against you if people make the connection and start to compare. This is all with the exception of Google (and some other names) because they actually tell you how to do it. But even Google was quick to use a new font on all its products and nothing will look perfectly googly again.

A few words to wrap up

I’ve taken these examples from designers who are probably much more talented than I am. I don’t assume any dishonesty or laziness from these designers. They didn’t get where they are by being negligent and lazy. Most of these designs are concepts and side projects anyways. All I’m saying is that we should all keep in mind that not all visually pleasing design is good design and that the basics are still mandatory even for the most talented designers. What I also want to say is that when we’re looking for “inspiration” on Dribbble or Uplabs, we should draw the line very clearly between what we like and what will actually work.

I’d love to hear your opinions on these mistakes. Do you disagree with any of my picks? Do you have any examples you’d like to share? Any other mistakes that you want to highlight? let me know in the comments. Cheers!

 

Ghaith Ayadi

Ghaith Ayadi

I’m Ghaith Ayadi [ɣaajθ ʕajadiː]. I am an entrepreneur who writes and designs. I specialize in Product Design and Branding and write about design, entrepreneurship, growing up and other things that matter. I currently do freelance work while I’m working on my next big thing. Reach me on: yo@ayadighaith.com