Five Best Mobile Design Tips for App Design

I've researched so many apps which provided me with a wide variety of tips that we can share with you about making the best possible mobile apps. I’ve selected several of those tips to share with you today.

For the last few months, my dear friend Tomas Laurinavicius and I have been rigorously writing a book about mobile design, more specifically what you should and shouldn’t do when it comes to mobile design. The book is still currently in the making but you can sign up for updates at our website.

I'm sharing some of my favorite tips below.

Tip 1: Don’t abuse colours

Just like on the web, mobile apps seem to hit or miss their colour design too. I am very picky about things like these that can be simply resolved. If your app tries to utilize the whole rainbow, it will come off very messy and also unpleasant. When it comes to colours, keep them to the minimum and on brand.

Take a look at apps like Sky or Rise pictured above. They both use subtle gradients within their background that aren't overwhelming yet the hues themselves are simply stunning. The background colours are very prominent as there isn’t much text going on in the foreground to fight against the background colour. To compliment the background, the text is a simple white colour. This way the background can stand out and make a great impression on the user.

Tip 2: Keep information to the absolute minimum for the simplest of experiences

My favourite example of minimalist information is Lyft. When you are within the app and are about to call yourself a ride, all the information you’d possibly need is right there in front of you on the main screen. You see, Lyft could have provided you with a lot more information but that information would have been useless because most users are doing just fine without it. Instead, it would have cluttered the page and made the experience much more complicated.

When you open the Lyft app you see several things: first you notice the map, which the app finds your location for you so you don’t have to find yourself in the vast world. Second the app tells you how many drivers are around you — if there are any at all — so that you don’t have to guess whether or not it will be difficult for you to find a ride. Lastly, in order to actually get a Lyft all you have to do is tap the big, green call-to-action button at the bottom of the screen. It’s honestly this simple to use this app; why make it anymore complicated?

Tip 3: Icons are your friends

Icons are a fantastic tool that can take a design to the next level. There are three major advantages for using icons. First, because phones have small screens, icons can be a helpful space saver as a well picked icon takes up a lot less space than even a single word would. The second reason is appropriateness. It’s much easier for a user to recognize an icon and know what it means than to read — people don’t like to read on mobile devices either, sorry to break it to you. Icons are clear and easier to comprehend. Third reason: icons can embellish your design by giving it some personality. However, there is a caveat; icons need to be clear, obvious and overall, well picked. Otherwise they will be more confusing than helpful.

Two amazing examples are Google Docs and, naturally, Tumblr. When you want to add a new file to Google Doc the menu shows you both an icon — which is more easily recognizable — and text. They are a perfect UX aid. In Tumblr, the create new post navigation is simply fantastic. It creates holistic navigation and one filled with personality.

Tip 4: The user experience of our walkthrough matters

Through the whole research process, Tomas and I found that walkthroughs seem to be important to apps but the user experience of them was often overlooked. Don’t think that a walkthrough doesn’t matter; it’s often the first interaction between an app and the user so it has to be marvelous and delightful as well. This means that the user experience of the walkthrough is in fact important. So don’t overlook it.

If you are looking for inspiration on a great walkthrough Box is a good pace to start. Their walkthrough is very engaging and fun. The design of it is nothing special actually, until you start moving along it and you noticed that the image within the walkthrough is animated to follow along with you. This is a perfect touch as it shows off what the app does exactly as well as engages the user to actually follow along.

Tip 5: Use images to your advantage

Images are often key in making for a delightful experience and great visual design. Images are a big part of the wow factor for some designs. A great quality photograph or image can make a great impression. Often times images are coupled with whitespace and great typography for that amazing and stunning design. If you don’t believe me that images can be this powerful take a look at apps like Stellar or TriplAgent.

You’ll notice that Stellar is using pictures as the background for their navigation items. You have beautiful photographs for every single collection type, which make sense because they are, after all, a photo-based app. Then, you have an app like TriplAgent which too uses great photography of the places it suggests to travelers. Photographs help tremendously, especially when they are of great quality.

Bonus Tip: Don’t be afraid to use whitespace

Of course I had to add a bonus tip. Whatever you do, don’t be afraid of whitespace. I know that phones have small screen so you might want to pack things into it but please don’t. Like I just said, phones have small screens so it’s hard on a user when there are things crammed into it. Instead, make sure users can successfully tap buttons or icons, or that things are legible and easily read. It’s not worth sacrificing space just to fit everything into a screen at once. It’s okay for users to scroll on a mobile device. It’s okay to use white space to your advantage by using it to provide the best possible experience.

Spotify's mobile app is a great example for this point. When you browse playlists in Spotify they give you wonderful thumbnails of genres and playlist types. They could have listed them instead, but they didn’t. They are showing off the individual genres/moods two at a time and you scroll through to view the complete list. This is much better experience than a text list.

Conclusion

This is just a short list of tips that came out of the research I and Tomas have done for our book, the Mobile Design Book. I do hope you find it helpful and sign up for out newsletter to receive updates on the book as we write it.

What other tips do you find useful when designing for mobile?