15 Mobile App Design Tips That Get Results
An average app has pretty bad retention metrics.
Andrew Chen, Silicon Valley-based entrepreneur and writer believes that the average app loses 77% of its daily mobile users (DAU) within the first three days of launch.
There could be different reasons.
The app didn’t deliver what it promised, the app is a pain to navigate through, the app is buggy, the app sends too many notifications or frequently ask for ratings, or the app has lengthy sign-in process.
Most of these issues can be resolved with the correct design techniques relevant to your app.
With so many mobile apps being released every day, app designers need to really create apps that stand out. A great concept can attract users to download the app but a great design can retain the existing users.
Even with a brilliant concept, some of the apps become a pain to use due to its bad design and interface.
Here are 15 killer app designing tips you can implement today to get more downloads and retain users:
#1 Stick to operating system guidelines
Every operating system has a different user interface and hence have a different set of design guidelines explaining their unique aesthetics.
For instance, Android phones have a back button, which can be used to return to previous screens in the app. iPhones don’t have this button, so there needs to be a way to travel back to the previous screen. Similarly, on Android, the text is left aligned in the navigation bar, whereas for iOS it’s centered.
If you have or planning to build a cross- platform app, it is important you go through the design guidelines of each platform, very carefully. These guidelines often come handy when you’re not sure how to proceed.
Here are the links of the design guidelines from different platforms:
#2 Draw or even write your prototype, but do it
Having a well-thought-out user flow ready to go before wireframes and designs begin is an obvious thing. But still most of the app developers tend to skip this important step.
Jonas Downey, Designer at Basecamp, wrote a blog post about how you can write down many variations to mock basic UI in text.
Jonas says, “A quick way to measure a designer’s maturity is to watch what they do at the beginning of a project. Inexperienced designers are often smitten by the allure of new tools and quick results, so they’ll jump in to Photoshop or Sketch and start messing with layouts and style explorations. Seasoned designers know this can be distracting, so they might start by doing research or drawing in a paper sketchbook instead.”
While designing prototypes try to sum your app up into one feature and make it the primary function or give it the most important place.
Even the simplest of the applications should have a well-considered flow map in place to help ensure a logical and reasonable navigational structure.
Jerry Cao, a UX content strategist at the wireframing and prototyping app UXPin, says, “Your prototype doesn’t have to be anything fancy — your prototype can be done on paper so you can start understanding how users flow between content and actions.”
#3 There is no harm in keeping the app simple
The app bagged this award for a clean, content-centric design, and beautiful typography that nicely balances app branding and iOS design conventions.
In fact, some of the best interface designs are invisible. They do not contain UI-bling or unnecessary elements.
Jared M. Spool, an expert on the subjects of usability, software, design, and research, wrote an interesting post called – Great Designs Should Be Experienced and Not Seen.
Jared mentions, “The better the design, the more invisible it becomes.”
“It’s like an air conditioner in a conference room. Nobody ever interrupts our meetings to tell us how comfortable the temperature is. They don’t even notice. We only notice the conference room temperature when it is too cold or too hot. Or perhaps we notice if the unit is too loud or is leaking all over the floor. But when it’s working perfectly, it becomes invisible.”
So, whenever you are thinking about adding a new feature or element to your interface, ask the question, ‘Does the user really need this?’
However, InfoWorld’s executive editor, Galen Gruman, beware oversimplification where everything (color, weight, texture, and so on) looks the same.
Galen writes, “Too simple is as confusing as too complex, as both lead to difficulty in centering user focus for the task or content at hand.”
#4 Know your colors and use them according to the brand needs
In the realm of design, the selection of colors is often a crucial starting point. There are many things to evaluate when deciding what colors to incorporate into your designs as each color signifies a different psychology.
For example, Red is the color of energy, passion, action, ambition, and determination. Blue is for trust and peace. Yellow is the color of being optimistic and cheerful.
Here is a graphic explaining the Color Emotion Guide:
The right amount of contrast is a tricky balance. Because of the drastic variation between screens, a grey that seems dark enough on the designer’s monitor could appear much lighter on the user’s.
The middle of each of the circles is the same size, shape, and color. The only thing that changes is the background color. Yet, the middle circles appear softer or brighter depending on the contrasting color behind it.
Bethany says, “This is because the way in which we use two colors together changes how we perceive it. So when you’re choosing colors for your graphic designs, think about how much contrast you want throughout the design.
For instance, if you were creating a simple bar chart, would you want a dark background with dark bars? Probably not. You’d most likely want to create a contrast between your bars and the background itself since you want your viewers to focus on the bars, not the background.”
#5 Consider the user experience behind every font
The key to any style of typography, on any device, is readability. If the user can’t read it, the design does not work.
Text that is too large will create lots of breaks and text that is too small can cause the reader to strain and make it hard to focus on the text.
The folks at User Testing, ran a study on two mobile sites with similar layouts to the ones above: one with optimal type size and one without. Not surprisingly, users preferred the site with the larger text:
Dan Mayer of Smashing Magazine, wrote a post about choosing best font types, “Many of my beginning students go about picking a font as though they were searching for new music to listen to: they assess the personality of each face and look for something unique and distinctive that expresses their particular aesthetic taste, perspective, and personal history. This approach is problematic, because it places too much importance on individuality.”
Carrie Cousins, chief writer at Design Shack, writes, “When selecting typefaces for blocks of text in mobile design – think anything other than a logo or typographic art element – go with something simple, of a standard weight and that has a fairly uniform stroke width. Avoid novelty typefaces, condensed styles and letterforms with thin strokes.”
#6 Put yourself in user’s shoes and get the design cues
“Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward.” – Jeff Bezos
When we spend enough time observing the users, we always get good ideas on what will delight them.
Callum Chapman, a User Experience & Interface Designer, suggest designers to plan the project by putting themselves in the users shoes.
Callum shares his experience of designing apps, I worked with an off-road map and GPS startup in the second half of 2011, and putting myself in the shoes of a typical user was very important. I’d grab a piece of paper, write ‘user’ in the middle, and write down anything that comes to mind. Three of the big questions I asked myself were:
- What will they use the app for?
- Where will they be using the app?
- How much time do they have to use the app?
Callum very well summarizes how to take cues from user’s reactions and incorporate them in the app design.
He further adds, “Obviously the user was going to use the app for navigation both roads and off-road tracks, they’ll be using the app in the car and on foot – sometimes this will be in direct sunlight (therefore a dark UI probably isn’t suitable).
The app will be used for good lengths of time, yet in some cases the user will only have limited times to interact with the app (at red lights for example) so navigating around the app has to be simple and very quick.”
#7 Animation is the basis of effective interaction design
Using animated videos to highlight a particular feature or product within an app has become a trend. As users we are also naturally programmed to take notice of a moving object more.
Tristan Plank, Interaction Designer at Blink, wrote a blog post, where he shares how he have paying a lot more attention to the little things that his favorite apps are doing, “In most cases, these little delightful details revolve around the animations and refined microinteractions peppered throughout an app, like a clever transition from one screen to the next or a whimsical refresh animation that makes me chuckle (or even better, makes me want to do it again, but just a little more slowly so I can see how they pieced the animation together).
Tristan further puts down a point of view as an app user, “After using a well-crafted app that employs thoughtful transitions and animations, I feel disappointed when I use other apps that didn’t put in the effort. The bar is raised when I use a product that sweats the details.”
#8 Don’t go overboard with intro animations
Animations can interact better with the users but you should make sure the transition is seamless.
Ryan Matzner of Fueled, says, “Those fun little animations when an app first opens can be really nice, but it’s important not to go overboard with them. The catch with intro animations is that they technically can’t begin until the app is already loaded. So in effect, they actually delay the user from accessing the app. If you’re going to use one, make it quick, subtle and appealing enough to be worth the extra second or so that the user has to wait.
As an app loads, a still image should display, which then transitions into an animation. Some poor implementations have a jump or glitch as the app transitions from the still loading image to the intro animation, and that’s no fun.”
#9 Design everything around the invisible grids
Invisible grids define your design base. Though we may not be able to catch the realistic view of grids, but these grids exist on every mobile’s interface. They can be really helpful in kickstarting any mobile app’s design task.
Valerie Lisyansky of SWARM, says, “Grids are the basics of mobile app design. There’s an invisible grid on every surface. You may not see it, but it’s there to guide you.”
#10 Use negative space (white space) positively
Whitespace, many times referred to as negative space, is the portion of a screen left unmarked, the portion that is left blank, or the empty space in a screen.
Here are the elements of white space:
- Space around graphics and images
- Margins, paddings and gutters
- Line-spacing and letter-spacing within text content
- Space between columns
Ryan Co of Echo & Co., says, “Just as important as styling content is the space in and around it. Space generally helps visualize the connectedness and non-connectedness of elements on a page. But aside from grids, there aren’t many tools that allow us to figure the ratios automatically.”
John Kash from London(UK), a designer having over 5 years experience, suggests another way to use this space:
“Screen titles are excellent ways of saving users or surfers from getting lost, but if you as a designer think that this space can be used for some other meaningful purpose, then go ahead! If you have the creativity and idea to transform this space to an effective search tool, then proceed by all means. However, don’t try to compromise the title functionality only for the sake of saving some extra designing work.”
Canopy app is a good example of the usage of white backgrounds with a lot of white space.
#11 Don’t rule out the ‘Rule of Thumb’
A study found that about 75% of people’s interactions with a smartphone were managed with a thumb. Whether holding the device with one or two hands, it was the thumb that was doing all the work.
67% of smartphones range between 4 and 5.5 inches and 94% of the time they’re used in portrait orientation. When in landscape mode, 72% interactions rely on just one thumb.
Luke Wroblewski, Product Director at Google, wrote in his blog post, “When designing for mobile today, it’s worth considering a 4-5.5 inch smartphone, in portrait (vertical) orientation, being used with one-thumb. Of course, there many variants as well but making sure your mobile experiences work well in this context is a great baseline to start from.”
In another post written by Luke, he explains, how much you can get done with one thumb:
- Swipe up to move down the list
- Tap on either side of a question to vote
- Swipe up to load more
- Swipe down slightly to reveal the main menu
- Swipe down more to refresh the list
- Swipe across to skip questions
Considering the trend the future devices probably will be larger than the current generation, so while designing your app consider the use of thumb gestures to improve the user experience.
#12 Navigate smoothly, don’t ask users to dig out information
Navigation is one of the most important features of an app and is not a place to try unconventional methods. Simple app navigation is loved by most mobile users. Provide clear and concise labels for actions and keep your messaging simple.
Here’s a great tip for creating navigation bars, ‘Take examples from Apple and Google in how to do your navigation. Navigating an app can be aesthetically pleasing, but not at the expense of functionality and intuitiveness.’
Jacob Cass, a graphic designer, says, “Do well to make it easy for your visitors and consumers to find the content, information or service they’re looking for. With simple navigation will come smooth, uninterrupted, relaxing, and friendly end-user experience.
Ryan adds, “Another thing to pay attention to is making sure that key functional screens are close to the top rather than buried beneath multiple levels of navigational elements.
#13 Consider left-handed people too
12% of the world’s population are left-handed.
While designing your app, consider people who are left-handed.
So while considering button placement, remember, when a user is holding a smartphone in their hand, the bottom half of the screen is easily reached by the thumb. Right handed users can access the bottom-right side of the phone the easiest and lefties the opposite.
A reader suggestion from this blog post points out a solution, “Since users being right handed or left handed affect to button placement what do you think allowing users to configure the UIs for their convenience through some kind of setting? Like switch to specify whether they are right or left handed.”
#14 Design for human fingers
An MIT Touch Lab study of Human Fingertips to investigate the Mechanics of Tactile Sense found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest.
The average width of an adult thumb is 1 inch (2.5 cm), which converts to 72 pixels.
Small touch targets can lead to touch errors.
Anthony T, Founder of UX Movement, writes, “When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap.”
#15 Keep your elements consistent throughout
Define elements and repeat.
For instance, If one of your ‘go’ buttons is purple in color, then all your ‘go’ buttons should be in purple color. If one screen has 20 px padding on all side, all screens should maintain this consistency.
“The more users’ expectations prove right, the more they will feel in control of the system and the more they will like it.” – Jakob Nielson, Usability consultant.
According to Treehouse blog post, “Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. Language, layout, and design are just a few interface elements that need consistency. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency.”
Let us know your app designing experiences in the comments section below. And if you are looking for any kind of help with developing or designing your app, here is some help.