UX UI Design Studio
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, Google’s mobile-friendly algorithm. It is interesting to observe the statistics; 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.
Do you know that on average almost 1.7 new apps are released every minute! 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.
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.
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. For a good solution it is advisable to learn about your stakeholders, market trends, competitors and users. We have covered Research in-depth in our previous article Research is critical to UX.
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 ground work in hand, below mentioned tips can be extremely useful when designers find themselves overwhelmed or are on verge of losing direction.
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:
The modules that needs 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.
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.
At every stage user should be aware about 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.
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.
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 death of your design.
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.
Luke Wroblewski, calls the typical mobile usage 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 research on mobile devices usage by Steven Hoober, found that 49% of people rely on a 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 get the design right is by always checking if users can perform a certain number of tasks with just one hand in under 60 seconds.
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.
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:
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.
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.
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.
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.
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.
Design principles should always be centre 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.
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 first-time user, do you understand everything in 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.
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.
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 behaviours and conditioned patterns. For example, don’t innovate a payment gateway.
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.
Always define the primary, secondary and tertiary colors for 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.
Mobile devices have comparatively very less space and you should not attempt to provide 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.
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.
