Published on <a href="https://blog.prototypr.io/tips-for-designing-a-mobile-app-1ae8da052637?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Appedus Editorial Team <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*z1bDlI6TfGMmB0fXV_-ILg.jpeg">Tips for designing a Mobile app By <a href="https://medium.com/u/5ab3d019c8e3">Lollypop Design Studio</a>
Mobile first approach has been an extremely crucial factor in recent years because of the two fundamental reasons — first, increased number of smartphone users and second, <a href="https://developers.google.com/search/mobile-sites/">Google’s </a>mobile-friendly algorithm. It is interesting to observe the <a href="https://wearesocial.com/special-reports/digital-in-2017-global-overview">statistics</a>; More than half the world uses smartphones and they account for over half of the world’s web traffic. But, this is just one side of the story.
<blockquote>Do you know that on an average almost <a href="http://files.appannie.com.s3.amazonaws.com/reports/1705_Report_Consumer_App_Usage_EN.pdf">1.7 new apps are released every minute</a>! But, users only end up using around 10–15 of installed 30 apps per month. The numbers are outrageous and so is the competition. The only way to survive in this crowded digital market is by ensuring retention and re-engagement.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*hYz6oB08gym_sivY.">
Designing such an app is not an easy task, it demands a lot of focus and dedication from the stakeholders and designers alike. In this piece, we have covered five important tips that we always keep in mind while designing an app ourselves. But, before heading on to the tips, let’s first talk about the soul of every design — Research! Without this one fundamental step, none of the tips will be useful. Period.
<h3>Research</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*UMjYNPq2BoRiUGkv.">
The first and foremost step into design begins with research. And, when we talk about research we mean digging information from various avenues such as product owners, market landscape, technology, competition and most importantly your users. A good research ensures that your app is usable and feasible. Below are the areas that need to be studied:
<h4>Stakeholder Interview</h4>
When talking with the stakeholders, it is crucial to understand their vision, their product and the goals that they are trying to achieve. What is the problem statement that they are trying to solve from their product? Who are their target audience? How do they want to position themselves? Asking right questions at this stage is very important because this will help you define your strategy and understand the basics to move forward.
<h4>Market Research</h4>
The very first answer you should look for is if the market is ready to accept your innovation. We have seen many magical products go down the drain just because users were not ready for it. Timing is everything!
<h4>Competitors Analysis</h4>
This is the platform to get inspired from and to gather insights on the aspects that users are not comfortable with or expect to change. The saying ‘Keep your competitors and critics close to you’ holds true in design as well, the amount of information they provide can help you craft the products USP.
<h4>User Research</h4>
This is the stage where you spend most part of your time as they are center to your design and product. Here, the complexity might be extremely high because you might have multiple user groups and various personas under each group. Also, the variation is going to be extensive if you are aiming to design for different geographies as the preferences of the users might vary.
Let’s break down user research into easier to understand elements:
<h4>Personas</h4>
This step helps you understand your target audience, their perceptions, and their needs. It is going to give answers to many questions as we proceed further on our design journey.
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*o3WSibkILr-fKzC9.">
<h4>Understanding Pain Points</h4>
Now, this can get extremely tricky! A general assumption is that of implementing the feedback received from the users. But, this can kill your design and product! As a designer, it becomes your sole responsibility to understand ‘Why they want something’ and ‘Why they do not want something’. Here, is when you know if the actual need of your product exists. You would also end up discovering new needs that might form the underlying success factor for the product in hand.
<h4>Mental Models</h4>
Mental models are completely based on the past experiences and feelings; it is basically what users believe about the system at hand. For example, we have been conditioned to believe that magnifying glass icon is meant for research on digital products, so, when users would see the same icon on your app, they might believe that it is meant to perform search action. So, while designing an app their mental models would be derivative of their previous interactions with existing applications and websites. Understanding Mental Models will help you achieve answers to the most widely used phrase in designing — ‘Don’t make your user think’. The best methods to get an accurate answer is through card sorting, user testing and click flow analysis.
<h4>Information Architecture</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*19X3UH8QlyUh4ppc.">
Now is the time to structure the modules of the product. In the previous stage, we have studied the mental models to have a fair understanding of the users and their needs which would clearly lay out the how content should be organized so that users can find everything they need with least effort.
Depending on the kind of app you are designing be it mobile, native, hybrid or responsive, you will have to structure the information accordingly. There are different patterns that can be used, few of the most popular ones are — Hierarchy, Hub &amp; spoke, Nested doll, Tabbed view, Bento box and Filtered view. Every one of them come with their set of merits and demerits which you must consider while designing depending on the complexity of the system.
<h4>User Journey</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*aiYRNHPp83URvecQ.">
This step would lay out how user would move through your app, basically, the steps he/she will take to reach the goal. You will have to try various journeys of the major flow to understand how users will move through the app. This will help you further in cutting down the clutter and easing users in getting things done at the earliest.
<h3>5 Tips for designing a Mobile app</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*4Qp6Hhy4sHiY76V5.">Tips for designing mobile app by <a href="https://medium.com/u/5ab3d019c8e3">Lollypop Design Studio</a>
We can never stress the importance of research enough while designing. it is always advisable to ‘Learn the design and not the tricks of design’. However, once we have the solid groundwork in hand, below mentioned tips can be extremely useful when designers find themselves overwhelmed or are on verge of losing direction.
<h3>A. Taking Care of Basics</h3>
This is the first golden rule to follow; amidst so much data and insights, it is easy to lose your way, but we can always check ourselves with these basics:
Navigation and Placement
The modules that need to be upfront and the ones that can be hidden would be clear to you in the Information Architecture stage during the research. But, you should also consider these two things; First, navigation should be obvious, by using proper signifiers and elements. And second, navigation should be consistent, by always making them appear at the same place and not hiding them on a new screen or moving them.
Optimize for Different Devices &amp; Screen Sizes
<img alt="" src="https://cdn-images-1.medium.com/max/651/0*prP1YnkCvAsT5oAS.">
With the wide range of screens sizes available on the same OS, designers should always aim to keep the UI elements consistent. Start with the smallest screen and later design for the bigger spaces.
Give Feedback
At every stage, the user should be aware of what is happening. It is absolutely critical to let them know if the action is in progress, was successful or has failed. Using simple micro-interactions can help you make this process fun and keep your users informed at the same time.
<img alt="" src="https://cdn-images-1.medium.com/max/651/0*2uWP_OhiC2xcDSYW.">
Don’t go overboard with Animations
Animations are good to have and help in engaging user’s, but they also delay the loading speed. It is advisable to have subtle, quick and appealing animations that are worth the extra second of users.
<h3>B. One Task One Screen</h3>
Space in smartphones is limited. Consider designing for the smallest screen size, the amount of stress to communicate information must already be creating panic in your head! And, having multiple actions on this screen will be close to the death of your design.
<img alt="" src="https://cdn-images-1.medium.com/max/651/0*9ozH72vsA4h15-oK.">
It is advisable that every primary screen facilitates just one key action of real value to the person using it. This practice makes users comfortable and they can easily adapt to designs; this also ends up demanding complete attention to one call to action, simplifying the whole process. Moreover, it would also allow you room as a designer to add or build on when necessary.
Uber would serve as a wonderful example here. They only focus on letting you get your cab at the earliest by ensuring that all you have to do is enter the drop location.
<h3>C. Rule of Thumb</h3>
<a href="https://www.lukew.com/ff/entry.asp?1071">Luke Wroblewski</a>, calls the typical mobile user experience a “one thumb, one eyeball” experience since the highly distracted environment causes most mobile users to engage in one-handed use with short spans of partial attention. Another <a href="http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php">research</a> on mobile devices usage by Steven Hoober found that 49% of people rely on one thumb to get things done on their phones. Josh Clark, in his book Designing for Touch, took this study a step further, where he states that 75% of interactions over mobile are thumb-driven
The trick to getting the design right is by always checking if users can perform a certain number of tasks with just one hand in under 60 seconds.
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*Em2ewXNwaqZSj0Wo.">
Another major tip to remember is to design for the flow of the thumb zone. You should place the negative elements in the zone that is under ‘Hard to reach’ area as you do not want users to accidentally tap on them. And you should consider placing the frequently used controls and common actions under ‘Easy to reach’ area for empowering users in performing tasks with ease.
Here, you should also consider the space and size of the buttons that are being designed because our thumbs are definitely not like a mouse cursor. And we require enough space for tapping or clicking the call to actions that are within our reach.
<h3>D. Design with Affordances &amp; Signifiers</h3>
Affordances are crucial while designing an app that is intuitive and easy to use. The concept of affordances helps you fully understand the relationship between the human mind and technology. While affordance is the function, signifiers hint at affordance. For example, blue, underlined text indicates that clicking on it will take you elsewhere. Use signifiers correctly so users don’t need to think about what each UI element does. Affordances are of various types, which are:
Visual affordance
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*6aGfsbmm47UNSom7.">
This type of affordance includes the hints given off by the physical appearance of the object. For instance, a raised button would prompt to the user to press it, without the action being spelled out.
Language affordance
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*oSJ4bHdc9DPTiFNx.">
Simply put, a language affordance is the clues given to a user with words. A button that says, “Click me” or “Go back”, would prompt the user to click the button or go back to the previous page, respectively.
Pattern affordance
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*PZ18lix22BJhjCkc.">
This is by far one of the most widely used affordances because designers incorporate it without a second thought into their designs. Examples of the most commonly used pattern affordances include navigation menus/bars, and the downward arrow beside a word.
Symbolic affordance
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*sE9wz_CTO4clj-Ik.">
Think about the icons you see on your phone. The envelope denotes email, the chat bubble denotes messages, and gear (like a spanner) denotes settings. All of these icons are essentially symbolic affordances and are based on real-life objects to convey to users what action they need to perform.
Negative affordance
<img alt="" src="https://cdn-images-1.medium.com/max/650/0*Xjk-NlGNFJ-2X_DT.">
This is a kind of affordance that essentially indicates no affordance at all — it’s basically the presence of an inactive button. For example, when a user sees a grey button, it’s extremely likely that they assume the button cannot be used.
<h3>E. Stick to core UI Principles</h3>
Design principles should always be central to your design as they bring you close to designing a great, functional mobile app interface. With huge chunks of data and extremely limited space, there are great chances that you might lose track and find yourself in a mess. But, this is when your basics would guide you back.
Clarity
Designs should always help users complete the given task at the earliest possible by making the process very intuitive. Keep questioning your designs from the perspective of the first-time user, do you understand everything in a fraction of seconds? if the answer is yes, you are heading the right direction. Clarity lead towards removing the unnecessary and making your design simpler.
Consistency
Maintaining consistency across your application will reduce the need to rethink and remember; what we should really aim at is associating users with a pattern and they would reckon what needs to be done easily.
Familiarity
Not everything needs to be out of the box. We as beings love familiar things and are comfortable with them. You need a ground-breaking app not a maze of puzzles for users; so, make use of subconscious behaviors and conditioned patterns. For example, don’t innovate a payment gateway.
Breathing Space
<img alt="" src="https://cdn-images-1.medium.com/max/651/0*P_OWSDEZxAJ66A-Q.">
White space around elements is important to draw user’s attention to the content and arm users with greater readability and clean UI. While designing mobile app this serves as a very active element and should be considered vital.
Proper Contrast
<img alt="" src="https://cdn-images-1.medium.com/max/651/0*-Ik1i6c9YGedc8re.">
Always define the primary, secondary and tertiary colors for the app to increase usability. Special focus should be given while designing an app because users might be outdoors with low contrast on the screen because of lighting.
Legible Text
Mobile devices have comparatively very less space and you should not attempt to provide a lot of information here. A rule of thumb for mobile is that text should be at least 11 points so it’s legible at a typical viewing distance without zooming. Also, you should use white space generously and play around the type to help users with greater readability.
<h3>Conclusion</h3>
There are multiple factors that should be considered while designing an app and it is impossible, to sum up everything in mere five points. But, above suggestions would definitely ensure that your design ends up in a usable and feasible design. However, to add that wow factor you will have to dig way deeper.
These tips for designing a mobile app were authored by <a href="http://appedus.com/lollypop-india-based-app-design-agency/">Lollypop Design Studio</a>.
Originally published at <a href="http://appedus.com/tips-for-designing-a-mobile-app/">appedus.com</a> on January 31, 2018.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1ae8da052637" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/tips-for-designing-a-mobile-app-1ae8da052637">Tips for designing a Mobile app</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Tips for designing a Mobile app

Top Stories