The UX/UI chronicles: User Interface (UI) Basics
When good looks alone are not enough
The importance of user interface (UI) design is often underestimated by companies and developers. Looking back on some (not all) of my past jobs, I can tell you a thing or two about this. But for a successful IT product, UI design is just as relevant as UX design and the functioning — hopefully bug-free — programming of the frontend and backend. A good UI is not just “pretty”, but is so intuitive that the user doesn’t even have to think much about using the app/website. This is not about some UI trend like Glassmorphism and you haven’t seen it. It must be possible to use your product flawlessly within milliseconds, even without going through a tutorial, as if you had never done anything else. That’s quite simple, isn’t it? Yes and no. One mistake that many people make is to design apps that they can use themselves without any problems. But remember one thing:
You are not the majority of your users.
The principles of UI design
Over the years, some principles for a good and user-friendly UI design have developed and if you take them into account when designing your app, this will help you to create a very good user interface for your app.
Consistency
Consistency is a simple and at the same time difficult matter. It means that both the design elements and behavioural patterns when using an app should be uniform and not constantly changing. For example, Spotify uses the same elements for navigation at the bottom of the screen throughout. This consistency makes it easier to understand the app navigation and improves the usability of the app. This consistency should also be maintained across various app updates. Instagram, on the other hand, often changes some things in the app so fundamentally that I have real difficulties using the app on a daily basis. For example, when I want to share a post from someone else in the story, I still accidentally press the button for sharing on threads because that’s where the button for the story used to be. There’s no consistency here (and I’m totally annoyed by now).
Navigation shortcuts
Navigation shortcuts allow the user to move through the app more quickly and utilise functions. In Gmail, for example, you can delete or archive an email with a simple swipe gesture to the left. Similar to:
“One wipe and everything is gone.” by Zewa
However, you have to bear in mind that other apps may use the same gesture for a different function. For example, if I use exactly the same gesture in the Protonmail app, I accidentally archive the email that I actually wanted to delete (guess what happens to me all the time).
Informative feedback
When your user does something in your app, this should immediately provide feedback to the user as to whether the action was successful or not. For example, if you share a post from another user in your story on Instagram, the app notifies you that you have posted it in your story. That’s a good thing. However, this does not mean that your story post has been successfully uploaded and Instagram does not inform you that this is not yet the case and when the post has been successfully uploaded. So if you leave the app immediately after the message that you have posted it in your story and only go back in after hours, the upload will only then continue. This problem could be avoided with a short message.
Dialogue design
Dialogue design is very important if you have a function in your app that is perhaps not so intuitive to use. Dropbox, for example, guides users through the process of uploading files with clear instructions and visualises the progress. This guided interaction makes using the app more intuitive and definitely more efficient.
Error avoidance
If there is a function that has a potentially critical action/irrevocable action for the user, which may also be undesirable, then it is helpful if you confirm this via an additional confirmation as to whether this is really desired. For example, if you wanted to delete your Twitter account after Elon Musk took over, you also had to confirm this.
Reversible actions
These are one of my favourite features. Let’s say you want to send a meme to your BFF via Whatsapp and this — perhaps not entirely appropriate — meme accidentally ends up in the chat with your mum. How grateful I am for the option to delete the meme.
Control by the user
What do I mean by that? I mean that the user can control how something happens. Let’s take Medium as an example. If we want to listen to an English article (when will this function finally be available for the German language?), we can set which voice should read the article and how quickly. We can skip forwards and backwards in the article and pause the voice. This gives us a sense of control over the app.
Minimal memory load
It’s helpful if your app remembers things for you so you don’t have to. Like YouTube, if you’ve enabled it to remember your history of videos you’ve watched. Maybe you want to show the video to a friend hours/days later but can’t remember the creator? You’ll definitely find it in the history.
To be honest, I sometimes miss this function on Medium. On the other hand, this means that less of my data is saved, which is why it doesn’t bother me so much.
More than just “pretty”
Unfortunately, it really is the case that when UX/UI designers have spoken up with certain concerns in some of my last jobs, this has been dismissed with “We can make it pretty later!” (direct quote from a manager). It is simply overlooked that the UI is not just about looks, but about the successful use of a product without which pretty much every app will be uninstalled very quickly. This also needs to be done consistently and not just at the start of a product. But it’s also true that there are sometimes designers who are really more concerned about the look and less about user-friendliness. I’m thinking of a senior UI-UX designer who created a design for a large German bank with white text on a yellow background (I’ve just realised that the yellow of my banner is exactly the same yellow as his design). A real disaster, but “it [looked] better this way”. But I’ll go into this topic in more detail another time.
You can find the other articles in the UX/UI Chronicles series here:
If you liked this article, don’t hesitate to applaud and share it. If you would like to share your own experiences with me, I look forward to your comments and if you don’t want to miss my other articles, feel free to follow me.
This article was translated by using DeepL to save time.
