The importance of User Experience: UX Design Tips from Our Head of Design
In a world where our lives increasingly revolve around digital experiences, making sure users stay engaged is key, and that requires a careful consideration of their needs. It’s common knowledge that apps should be easy to use and intuitive without being overly complicated. But truly understanding the essence of these terms and finding that sweet spot between simplicity and uniqueness in design, can be quite a challenge.
When I first joined the company as the Social Media Specialist, I wasn’t well-versed in software development or design. But over time, I’ve learned a lot and grasped just how critical certain factors are in app development. Remembering how tough it was to dive into all the technical jargon with no prior industry knowledge, I’m here sort of like a bridge between our community and our design team.
That’s why, I’m having a chat with Dawid, our Head of Design at TeaCode, to shed light on this. Dawid’s adventure with design began in childhood, which resulted in a passion that developed over 12 years of various design experiences. From creating application designs, creating websites to delving into video game design, Dawid has been involved in many projects, presenting his knowledge and creativity in the digital realm.
Let’s begin!
While preparing for this interview I often stumbled upon a phrase that the goal for the layout of your app should be to maintain it “clean”. But what does it actually mean to have a “clean design”? Does it mean that every app we make has to be minimalistic, and simple with casual fonts? How do you approach that?
That’s a good question. For me, the clean design is quite a buzzword, because I think there’s no definition of that. In a user’s mind, the clean design can be a white app with Helvetica font, pretty pictures and nothing more. But clean can also mean minimalistic for someone else. But I have my own definition of that actually.
So for me, the clean design is like a transparent design where the main goal for the user is to use the app effectively and enjoy it. Basically, we need to create an app that is not a struggle for the user to use. Therefore, in my definition, the clean design is like the pristine interface that doesn’t get in the way of the user.
When it comes to design, there are two ends of the continuum from a user perspective. We can distinguish a very badly designed interface that causes they don’t want to use an app because they struggle. It usually is not easy to read, and it’s not intuitive. On the other side of that is the interface which is very enjoyable.
Of course, we want to be on the enjoyable side and have a super fantastic interface. But the middle ground is actually good because the app doesn’t get in the way of the user. So, this way, we achieve the clean app’s design.
OK, so it’s like the golden mean, you say?
Yeah.
Do you have any advice on making straightforward to use designs that won’t be boring at the same time? Because that’s something that actually worries a lot of people. On the one hand, you will get a boring design, and on the other, you will confuse them with too many things. So where’s the golden mean, and if it’s possible to measure that?
Well, the best answer to that is: “It depends” because we need to understand what our end user is. Sometimes, by oversimplifying, we can actually harm the user. So if users don’t have prior experience with digital products, an app that is simplified to the last extent might be confusing and hard to use.
The first thing is to know our user, and then we should think about how to design the app to let them achieve the goal. If we do that, this is a good base for the app from where we can polish the design.
By polishing the design, I mean we can create a well-chosen microcopy, animations and interactions. For example, a microcopy is where we don’t simply put ‘loading’ for the app, but we write something more enjoyable. So, for example, if we are designing an app for dog owners, we can just put ‘hold your leashes’ on loading pages. And this is how we can make our design not so boring, and we can add some micro-interactions and animations to our app because this is the polishing that I mean.
So we are starting with the base, just creating an app for the user so the user can achieve their goal. And then we are polishing, adding some little things just to create that enjoyable application.
OK, and this way our design will surely not be boring. And talking about simplicity and this golden mean, what do you think is the most important to remember while choosing colours for your design?
This is a good question and actually a simple one because, from my experience, there are two things.
The first thing is, of course, we need to use the brand colour that the client provides. So this is like a base. And, of course, the client can have their visual identification. We need to consider that when creating an app because we want to be consistent across all media for the client.
But sometimes, we are building an app from scratch, and then we can approach the matter differently. If a client doesn’t have a branding, we’re the ones who should suggest him the best option based on their goals and objectives.
The second aspect is accessibility. There are rules of accessibility and recommendations that should be taken into account and implemented.
Those two aspects, following the branding and applying accessibility rules can help us build a solid colour library.
You’ve tackled an interesting matter – accessibility. Can you tell me more what that really means and how you verify whether colours are accessible or not? Maybe you can provide me with a few examples?
Oh, right! When we design an app and choose colours, we need to check whether the colours we want to use are accessible. In simple terms, we need to discover whether they look good with each other and allow users to read every piece of writing easily. It’s about maintaining the right contrast and it depends on our goals, assumptions and branding.
Let’s think about a common example, McDonald’s, for instance. They have a yellow logotype but use black fonts on their website. The brand colour is used to highlight some elements, but it’s not used in fonts. Why? Because it would be inaccessible, which means yellow text wouldn’t be properly visible on a white website. How do they deal with that in graphics, favicon, let’s say? They have a complementary colour, dark or bottle green, that makes the logo accessible – properly visible.
A highly accessible example on a white screen is Coca-Cola – red texts and logotype are perfectly visible on both white and black backgrounds.
When it comes to tools, I use contrast checkers like WCAG Color Contrast Checker. There are a lot of tools in the web that allow to do that. The key is to find colours that have at least 4,5:1 contrast ratio for normal texts and 3:1 for large ones.
Thank you, that explained a lot to me. While reading about user experience on the Internet, I found many pieces of advice to keep your app intuitive. What exactly should we remember to make sure our app is intuitive? In fact, what does it mean for an app to be intuitive?
I have a pretty good answer for that. The main thing is that if something is intuitive for us, that doesn’t mean that it is intuitive for the end user. So, also, we should consider user study for that because once we know our users, this is like the solid foundation for how to build our app.
And, of course, there are some general patterns that are well-known by all users. By patterns, I mean, for example, every single Android user knows how a hamburger menu works. It’s the extended menu symbolised by three vertical lines. For Android user it’s obvious that if they click it, the menu will be revealed. This is like the base interaction in the system.
On the other hand, every single iOS user knows how to get back to the home screen. So those are well-known patterns, and this is the foundation for us, designers, that should be taken into account. And of course, there are a lot of other patterns that we should have in mind designing an app. We should also take as much from our own experience with both operating systems as possible, but never take that for granted. Therefore, it’s best to test our assumptions and solutions on users by conducting user testing.
If we remember to follow all these steps, I’m pretty sure that the application will be intuitive for end users. But I like the high emphasis on user testing because this is the most important thing to verify if the user actually knows how to use our app.
Are there any particular tips, except for this one, or tools that can help us with making informed decisions and keep the app intuitive and as easy to use as possible?
Actually, there is one tool that I would like to recommend. It’s a tool called Mobin. This is an online library of designs patterns from thousands of apps put into patterns.
By pattern I mean the flow scenario and navigation rules between screens. For example, the login flow. So we can check how users are logging into Instagram, we can check which kind of interactions or UI elements we should put in such screens and how interactions are designed. And, of course, because Instagram or other applications like Airbnb are very popular, we can assume that those patterns are pretty well designed because they’re already tested, and lots of users are using them and not complaining.
So this is a good foundation, a good library to start designing quickly. So this is the tool that I would like to recommend. They don’t pay me for that, of course! There are mobile platforms, and desktop platforms. It’s a pretty solid library.
So this is my first recommendation, and the second one is actually one of the UX laws, a Jacob’s law. I think that this was Jacob Nielsen from Nielsen Norman Group who wrote that users usually want our website to work similarly to other websites. Because they are expecting that, they don’t want to learn everything from scratch each time they enter and go to our website. But anyway, we shouldn’t take this to extremes and copy every solution. If we copy everything, the design will be boring. So this is only a foundation to start.
To sum up, check battle-tested patterns and keep in mind the Jacob’s law.
That’s actually quite interesting because this is not obvious to many people. And I wanted to actually ask you more about things that people tend to forget about while creating designs for their apps. So, for example, we know that we hold phones in the vertical rather than horizontal manner and we design apps that way. But are there many more specific instances that are not as obvious as this one?
There are quite a lot of little things that we can overlook. For example, for developers, they will thank us if we prepare all of the error states for the forms. So I know that designers often forget that a client or its marketing team will be delighted if we design a pretty fun 404 page.
This is also quite interesting that many small clients often forget to adapt the screens for the tablets. They’re thinking about the desktop and the mobile and nothing in between those. Of course, in TeaCode, we always remember to go full responsive, which means creating the screens for mobile, tablet, and desktop devices. But from my experience, overlooking it is quite common.
So, don’t forget about the tablets because there are a lot of users that use them.
And the last but not least is the process of uploading our app to stores. Usually, when we are planning our app, clients usually focus on design, development and testing but they forget that we need to put their app in the store. This is something that shouldn’t be forgotten because, in the end, it’s from how the app is presented depends on how successful it will be in the terms of downloads. When we focus just on publishing an app, we tend to forget to create visually pleasing screenshots or even an eye-catching icon for the app. And I want to highlight that once more that this is extremely important because, if we are not attractive in the App Store, users can miss or overlook our app. In my opinion everyone should think about it quite earlier than at the end of the production.
Yes, especially that it can take several weeks or days of work. Okay, so I want to tackle another aspect now. Nowadays, people are impatient and in today’s world, it’s crucial to remember about that and make our apps loading in no time. It’s also one of the SEO requirements. I guess that fancy designs can be a burden on the application and slow it down. So is there any way to prevent this at the stage of design?
Well, sometimes, of course, we have to wait because we are not able to skip the technological contrains. But of course, there are a few tips and hacks from UX and UI perspective on how to shorten the time for waiting. The most obvious one, I think, is just to create a skeleton animation. We don’t put an animation of the skeleton dancing in the app, of course, but if you load Facebook, for instance, you will see those grey boxes that are supposed to look like the posts. Those are slightly animated and you know that there will be content that will load in the moment. So, you are not looking at a blank page; you’re looking at the content that is loading.
So this is quite important as this simple solution allows us to manage the waiting time and subjectively squeeze the loading time a bit and putting some engaging UX writing there can make it quite funny, too. That’s the microcopy that I mentioned before. This is something that the user can just read and enjoy.
Of course, there are different ways to create those loading animations to make them attractive to users. And I would like to refer also to the previous question saying that this is also often overlooked when designing an app. We should put more attention to loading pages more, I think.
Well, let’s move to real-life examples. Let’s imagine I’m creating a form to gather user feedback about my app. How to make sure users will actually complete it? What should I think about while creating such a form? How to make them more willing to do that, especially if the form is complicated and multi-step?
I’m not an expert in user research, but from my experience, there are two ways how to conduct the user research. The first option is to create a closed target study group that you will pay for taking part in such a research. And the second option is that you just go wide to as many users as you can and you just ask them to fill the form with no reward.
Both solutions have their pros and cons. In the first case, when you pay to fill out the form, you usually can adjust the target group demographics to your preferences and narrow it to be as close to your target group as possible. The fact of reward makes people more motivated and allows you to ask more questions, including open ones. You’ll probably have more serious answers, too.
The second solution, when you distribute the survey freely, allows you to gather feedback for free. However, you don’t have any control over the audience’s demographics, and you might not target the right group. Therefore, it’s less reliable. As people don’t earn any money, they can be less motivated and don’t finish the questionnaire or the answers can be of lower quality. However, you can offer them discounts, free trial or monthly subscription, which is a form of reward as well.
Let’s think about website forms as they are the main stop to the conversion and ROI. Are there any tips to make it easier for people or make them more willing to fill in the forms on website? How to gain higher conversion rate?
It’s also about the microcopy. This is important because you can create a very enjoyable form just by writing fun texts there. If filling the form seems funny, people are more willing to do that. But we shouldn’t go too far, the tone of the copy should be aligned with branding. We shouldn’t forget that those texts should be clear and understandable at the same time.
The second important aspect is the UI layout of the form. It should be pretty and welcoming. Don’t ask me what it actually means, cause it can differ for various user groups. Let’s say for youngsters it might be a crazy cartoon form while for business people professionally-looking and clean one.
The third is User Experience, as filling out the form must be straightforward. Think about switching to the next question with Tab key so the user can fill it fast. We shouldn’t overlook such things.
While preparing for this interview, I found a report from 2022 that says that an average person has around 40 apps on the phone, and more than half of them remain unused. Do you think that poor design can be one of the reasons, or are they just boring? Or how can UX affect the usage and the retention?
I checked my phone recently, and I have 250, so I’m out of the scale, I think. About the question. Yes, of course – UX can have a huge impact on retention because the mobile market is super competitive, and there are dozens of apps for every activity or purpose you can imagine. So the competition is strong.
When we create an app that is confusing or problematic for the user to use, with a bad UX, we can be sure they will stop using it and just jump to another one that can help them solve a similar problems. So, we should pay a lot of attention to the UX side of the app.
True. I’ve gone through about 10 different nutrition apps, and each one of them was wrong because of either the design or the pop-up ads or something quite different. It was very difficult to find the one that I would actually enjoy. Do you think that we still tend to use the app if it’s useful or beautiful, but it’s not really intuitive? What’s the importance of that? What do you think is more important actually to focus on, UX or UI?
At TeaCode we design both beautiful and very good functioning apps, however, in my opinion, the UX is the key to create a successful app. Why?
Nowadays it’s pretty simple to achieve a visually pleasing look for our app because there are a lot of pre-made design systems, even platform-based design systems like material design for Android, for example. Those are libraries and beautiful components that are already pretty well designed.
So we can make a very good-looking app with no effort. But if we forget about the UX and the usability of that app, this would be a disaster. We should focus on putting together all those pieces in the final product, and all of them should work well together. And the UI is actually an easier part of the whole product design.
You told me about the importance of UX a lot, but how can we measure if an app has a good UX design? Can we?
I have a pretty simple answer for that and this is user testing. We should learn how people use the app, how they navigate and what they want to achieve using it. Then, we need to make reaching their goals as easy as possible.
We have a few possibilities to conduct that kind of research. We can do that during the preliminary design stage, when we have nothing more than design. We can check what users think about it and how easy they find the navigation if we have a clickable prototype.
The second stage when we can ask them for opinion is development. It’s when we have a piece of an app and can show it to real users. It’s usually called an alfa release or mvp. Users are aware that the app is not working flawlessly, but still can express their thoughts and become a part of the development process. This way we can gather their feedback.
The third possibility refers to the moment when the app is released and available for everyone. We have many options to learn from them. We can read comments in stores, check their sentiment on the internet, ask users to take part in a survey or even analyse data to reveal patterns and potential issues. We can monitor how people navigate through our app using tools that can record sessions, in an anonymised way, of course. Finally, we can work closely with the support team that resolves tickets to learn what causes issues. I think Katarzyna, our Head of Marketing, will soon tell a bit more about user research, so what I can suggest is to stay tuned.
All we need to do is to listen. The biggest mistake we can make is to ignore those voices and assume that we know better than users do. This is the best way to become unsuccessful.
Nowadays, Artificial Intelligence is quite a hot topic. Have you ever used any AI tools to analyse your designs? Do you have any ideas on how we can implement AI while creating an app design?
Yeah, I’m pretty deep into AI, and I surely can tell that this is not the time yet to rely 100% on AI design productions.
For example, Framer has a store that you can prompt: “create me a beautiful website”, or “a blue website for a bank”, and it will create that website in a few seconds. But in terms of the results, there’s a lot to be desired in case of design production.
So this is not the time just to rely 100% of those solutions. But I think it will be extremely useful in the future. Very near future. So we can use it to do mundane tasks like create variants in the user design systems, create a variation of the colour library, etc.
So there are a lot of repetitive or arduous tasks that AI can do for us. So this will be an excellent tool to speed up the work. For example, Booking.com has its own tool that checks the designs to see if they’re all consistent with the design systems so it’s designed to review designs. This is a pretty cool use case.
And for me, I try to train ChatGPT to be my own UX writer, and it helps me with some little copy things so that I just don’t need to think about it. In my opinion, designers can use such solutions to create headlines and boilerplates, tool tips, etc. It’s pretty handy, and it improves my work every day a bit more because the AI-driven tool is constantly learning.
However, there’s one thing that I think we all should avoid. It’s conducting user testing via tools like ChatGPT. In fact, you’re not asking people for their opinion but fetching for general and aggregated summary. That won’t give you enough insights into individual perspectives and can be misleading sometimes. Just think about it for a second. Every design is unique in its own way. It might incorporate innovative solutions, have a unique colour composition or custom navigation. We won’t be able to check our assumptions and outcomes of our work without facing real people who will share their thoughts after having some interactions with them.
One last thing: can you give one, in your opinion, the most important tip to remember when creating an app user experience design?
I have a quote from the book that I’ve read recently. It’s by Irene Pereyra in her book Universal Principles of UX. I love their work, by the way. The quote goes like this:
‘Great design does not come from adhering to the numbers; it comes from following our intuition.’
What does it mean to me? These words highlight how important our experience and intuition are when it comes to design. If we take a look at what we do without being contained by numbers but reveal creativity, a sense of design and empathy, we can build not a good design that people can stand. This way, we can create something extraordinary that makes them delighted and astonished by how easy it is to reach their goals and how visually pleasant the journey is.
And this is about what the design is – making people delighted and attracted to the product.
Thank you David on behalf of myself and our readers for shedding light on UX design and generously sharing all your insights! Personally, I’m feeling much more enlightened about UX, user testing, and app design strategies, and I’m sure our audience was on the edge of their seats too, absorbing every word. I’d love to come back and talk to you again to discuss the importance of UI. Meantime, thank you for this fantastic chat!
Finally, for those of you interested in UX principles and how they combine with human psychology and cognitive science to create user-friendly interfaces, I highly recommend checking out Olga’s article, which contains valuable insights on this topic.
If you need help with the UX Design in your app, don’t hesitate to contact David via email at [email protected] or catch him on LinkedIn. He’ll be much more than happy to help you achieve all of your design goals and steer your app’s courses towards success and prosperity!