Mobile app design is a topic that can be debated for hours. Every designer has their habits and preferences. However, while designing an app, the most important rule is to follow the tastes and practices of the users. Regardless of experience, knowing a few rules will make the process of designing a digital product easier. Here are some do’s and don’ts of mobile app design. Keep them in mind to simplify your day-to-day work.
Do’s of mobile app design
Don’t focus on dribbble
Artworks presented on dribbble are mostly visual business cards, very often tweaked significantly for this service to attract the audience’s attention.
It is worth finding a balance between this community and reality and learn how to take the essence of your work from dribbble and turn it into a functional design.
I would even advise you to forget about dribbble at the very beginning of your app design journey. The main inspiration should then be applications that have proven themselves in usability and gather positive reviews from customers. It is worth analyzing and thinking about why this design is considered beneficial and valuable for the recipients.
Solve existing problems
All applications called “perfect” have one thing in common – they do not exist. Applications are created for different people, and some of them will like it in every aspect. Others won’t be able to accept some flaws and will reject them. One of the factors that affect the perception of the application is the age of the user. As an exercise, think about how a senior citizen would deal with a popular app and think about how you could make it easier for them to use.
There are also popular applications on the market that have typical UX and UI errors. Try to analyze your favorite application critically, find places where there are annoying bugs, and think about replacing them.
Maintain the customer’s product style
This principle can be considered fundamental—maintaining a unified style of the client, consistent with its identification as an elementary determinant of creating an app design. Types depend on the industry, but also the purpose for which the application is used. Choosing and matching the right style will always influence the user. Think that your banking app would suddenly start looking like a children’s cartoon app, entirely unsuitable, right?
Allow your audience to a breath
Don’t give the user a sense of lack of freedom. Lack of spacing from the edges of components or correctly fitting gaps between pieces creates a feeling of overwhelm and squeezing. Even the most casual screen containing much space will look poorly laid out and appear over-packed, and the viewer will feel overwhelmed. On the other hand, the proper spacing will make the application look lighter and more casual.
Lead the user by the hand
Feeling lost is something we don’t strive for online or in life in general. As part of understanding the importance of clarity, try clicking through multiple sub-pages on any site and figure out where you are now and how can you get back to where you came from? Confusing user flow is the bane of large websites. An analogy of crossing such a path would be going through many doors in almost identical rooms. Many years ago, the solution to this problem turned out to be breadcrumbs, but including them in mobile applications is not possible because of the smaller space. That is why the designer’s role is to be creative in solving this issue to enable the most intuitive movement of the user. When developing an application, it is worth constantly asking yourself these three questions: “Where am I?” “How did I get here?”, “What happens when I get out of here?”. These 3 questions will help you define your place in the app flow.
Remember the first iOS icons? The first Instagram logos? They were realistic icons, and their leading role was to teach the audience to associate certain elements and shapes. Compare how these icons have evolved. It’s the same with creating flow; it has to come from the associations people learn in everyday life. An example that might give you a little insight into this topic is to imagine that you walk into a home improvement store to buy a sink. You enter the store, look for an aisle with a specific product, ask the staff for help, choose a product, head to the checkout, and finalize your purchase. And how should it look in the store app? You open the application, search for categories or use search, add the selected product to your cart, pay. Take into account the habits of your users and do not try to change them by force.
My proprietary design philosophy is the Piano Principle. Designing an interface can be compared to listening to music. The keys of the piano produce sound at a volume analogous to the force of a tap. A series of aggressive sounds create an impression, but that impression will diminish after a while. Worse, a series of harsh strokes will become uncomfortable or even tiresome for the listener.
In contrast to the strong beats, subtle parts of sounds are punctuated by occasional more energetic moments. Such a composition makes a much bigger impression, and what’s most important – listening to such music, the audience can bear it longer. The application, which will be screaming at us, be one big blasting concert can simply overwhelm users, which in the long run will be challenging to use it.
Create a style guide
Predict all component states. A style guide helps you to keep your project in a specific style. When you start working on a project, let your imagination run wild so that a practical design can emerge from this madness. When creating subsequent screens, define fixed elements such as buttons, inputs, icons. Putting these elements next to each other, you will be able to determine whether they are consistent with each other, affecting the coherence of the entire product.
When creating an application, it is vital to generate a positive relationship between designers and developers. The best way to achieve positive results is to make people’s work easier. So try to build a library of components, colors, styles that will make it easier for developers to pull solid design elements into the code! I guarantee that making things easier for yourself every day has a good effect on the atmosphere of the whole team.
Start from creating wireframes
Start by planning with wireframes. At the beginning of my journey as a designer, my mistake was doing wireframes based on “I’ll start the whole project by coming up with colors and icons,” which is a mistake. It’s worth remembering that wireframing saves us time because we plan only the process, the flow itself. We do not think about “how it will work/how it will behave at this stage.” At the level of mockups’ creation, you can verify your idea against the whole product faster. In case of a mistake, you can correct it more quickly. Thanks to this, creating the UI layer constructs itself because you base it on previously prepared solutions.
Typography should be comfortable for everyone to read. The keyword here is “to read” – pay attention to books. With well-designed typography in books, the viewer can quickly absorb the content without necessarily reading word by word. This is because our eye acts like a scanner, combining parts into whole words and then into the entire range. This would not be possible with intricately designed typography. You can translate typography familiar from books into mobile app design. Use simple, popular fonts, work on line height, and choose appropriate weights for your content.
To understand the topic even better, I recommend the book “How to design typefaces – from sketch to screen.” The title sounds quite specialized, but trust me, typography is such a broad, complicated field that one book (unfortunately) will not make you Stanley Morisson. On the other hand, it will help you learn the craft from the ground up. Read how the best do it, and with a solid foundation, you will be able to recognize what a well-planned text looks like and arrange its position so that the perception of the composition is comfortable for the user.
The size of the clickable space is probably the most overlooked design element. A safe value for the length of clickable aspects, in my opinion, is 44px. So even if the component itself will be slightly smaller, it is worth assigning it a more expansive space in the design.
Also, pay attention to your finger reach. In an ideal world, we would use our thumb to operate the application. Unfortunately, as I mentioned earlier, ideal applications do not exist, but it is worth striving for them, so let’s make sure that the most important elements are just within reach of your thumb. Unfortunately, smartphones are designed for men’s hands, which means manufacturer’s models are too big for women to fit in their palms, pockets, or wallets. The only mainstream phone made small was Apple’s iPhone SE, which was discontinued after just two years.
Don’t use many colors
The user first scans the composition and only then reads its fragments. It is worth remembering not to force the assimilation of certain content and focus on facilitating the scan itself. Make sure to show clickable elements only after the element style. Using many colors can disturb the visual identification of the product. Limit the design to Primary, Secondary colors and their shades along with grayscale. Add to it semantic colors, and it will allow them to find the right way only by scanning.
Don’t apply different icon style
Some of the most repeated elements in an application are undoubtedly icons. Try to find a screen in your favorite app without presenting a single icon. They are no less important than colors, and just like colors, they must fit together. When creating a set of icons, make sure you have a consistent style, even dash thickness, finish, and applied rounding to the edges of the mark. Remember, your app will not appear exclusively on one screen size. The biggest bane of responsiveness is an overly detailed sign. Before you decide on a particular set of icons, check out the standard HOME icon in different sizes (from 32×32 to 8×8) and analyze whether it is possible to distinguish it every time, or is it worth looking for or creating something else?
Don’t use a lot of shadows
The shadow effect works best when you want to make an element stand out. If five elements stand out on the screen, none of them stand out. In addition, too large shadows can overwhelm the design, taking away the desired lightness. Ensure that only the elements that need to stand out get a shade, which will also be smoother. Not everything needs a shadow effect.
Don’t skip WCAG
Take care of all users of your future product. A few months ago, dribbble was dominated by neumorphism, which involved creating delicate transitions between components with equally soft shadows. This effect seems incredible, but only on dribbble – in real life, such use may cause the elderly or visually impaired to miss the most critical elements. When designing digital product design, remember inclusivity.
WCAG standards specify contrasting elements that should be easily visible on screen for people with specific disabilities. It should be ensured that essential factors such as texts and interactions are easily noticeable for every user.
Do not leave blank fields
Over the years, 404 type pages have been overlooked during design. However, it is also a part of the interface! And it influences the perception of the invention as much as the homepage. Try to design these pages so that they do not frustrate the users, but show them information on how they can fix the problem. It’s also worth pointing the user to a familiar place in the application.
Do not use highly unpopular solutions
While originality is significant, users navigate applications very intuitively, along paths that have been built the same way for years. Think whether your original tactic of using some new gesture will be handy for the user. For example, some time ago, news circulated the automotive world about a change to the turn signal system on the Ferrari Roma. The issue was changing the system from standard turn signals to buttons located near the horn. Changing something that users were used to was met with criticism.
Don’t ignore responsiveness
Throughout the design process, analyze how the element will behave on a smaller screen and whether displaying it will be without any complications. Finally, think about how the solution used on the landing page will translate to mobile. The user should not feel too much difference in the comfort of using a given web application in its mobile version.
Do you want to find out more about mobile app design?Talk to us!
Do’s and don’ts facilitate mobile app design process
Mobile app development is a long and complicated process, so following the tips will make your work faster and easier. However, you may not have realized some don’ts, and creating an app that no one will use because of its lack of usability misses the point. The mobile application market is enormous. Now and then, there are new products that set recent trends and standards. Therefore, it is worth following its usability for everyone and for a long time when creating a product.