Post 4 – Mobile and Responsive Design Tips

By April 8, 2015 Blog No Comments
mobile design tips

Hey everyone! This week I’ll be going over a few tips for mobile design. This is an area that a lot of developers have issues with and it can truly make or break an app. Creating a great flow, user experience (UX), and visuals is no easy task, but if you follow these guidelines, it should be a bit easier!

  1. My first tip is consistency. When designing an app, you will often have several screens or pages. It is a good idea to keep these consistent. For example, if your navigation bar is on the bottom on your home screen, it should also be there on every other screen. This allows for a better user experience and flow for your app. You can achieve this by using the grid option during development or using the “paste in place” option if it’s available. Also, you can create a template for your page and use it as a base for each other page. This will ensure everything is consistent and placed correctly throughout your entire application/site.

  2. Next, we’ll look at sizing – this is a big one. When it comes to mobile, you have to remember that your screen real-estate is limited, but this doesn’t mean that everything should be shrunk down evenly. Your font should still be a large enough size that is it legible and easily viewed by the user with no eye strain. This is also true when it comes to buttons. Apple recommends a minimum touch target size of 44 x 44px, Microsoft recommends 34 x 34px, and Nokia says it should be no smaller than 28 x 28px. The average width of an adult’s index finger is 1.6 – 2cm (45 – 57px) and studies show that user errors decline as target size increases.

  3. Another aspect of design that should be considered is complexity. It is good practice to tone down the complexity when it comes to mobile development. Simplicity is one of the first things I take into account when I design anything, but for mobile, simplicity is absolutely key for UX. Often, users use apps instead of desktop because it is supposed to be easier and quicker. Make it as simple as possible for the user to navigate, use functions, and access information and you’ll have a happy user. Get feedback from users and find out what kinds of issues they are having with the app and what you can do to simplify the experience for them – it will pay off. An example, keep important features and buttons within thumb’s reach so the user can operate your app with one hand.

  4. Additionally, proper colouring is another factor that can really add a nice vibe to your app. To be frank, some colours just don’t look good together. When trying to find out which colours jive, there’s a lot to think about. Consider your target audience and what colours they may be in to. It’s also a good idea to check out competitors or other similar apps and “borrow” ideas from their colour schemes. An excellent resource for developing a colour theme can be found here: Adobe Color. Finally, a great use of colour is contrast. You never want to create buttons that are the same colour or a similar shade to the background.

  5. Lastly, you’ll want keep responsiveness in mind. Will your app look great on both a phone and a tablet? Will it differ from iOS to Android? How about from landscape to portrait mode? I recommend extensively testing your apps on several devices in order to confirm compatibility as well as usability on each device. There are several tools and emulators you can use to test responsiveness for apps, web apps, and mobile responsive sites (though, nothing beats an actual device for compatibility testing). Try responsivetest.net  for responsive sites or bluestacks.com for Android apps.

Check out these infographics for more mobile design tips!
mobiledesign

A few side notes:

-Font selection does matter – use easy-to-read fonts and try to stick to sans-serif typefaces.

-Remember, some people are left handed. A left handed option to switch navigation or button locations may benefit some users.

-Creating an option for alternative skins/layouts can be a refreshing addition to your apps/sites.

 

Well, that’s about it for today. Leave me a message in the comments below if you found this helpful or if you have any mobile development tips of your own. Be sure to check back next week for my next mobile blog post!

Leave a Reply