Mobile UX Guidelines – A developer’s perspective

Posted: February 9, 2012 in iOS Development, User Experience
Tags: , , , , ,

My experience with many developers is that they can do amazing things with functionality but when it comes to user experience they don’t know how to start and always rely on UX professionals. While their professional guidance is helpful but most of time we need to take the first step ourselves.

Before I would list any of the thumb-rules I follow; I would like to clarify one thing. User experience is often not just about designing and creating the photoshop images. Those things an expert designer can do far more better than what we can come up with. As mobile app developers our goal should be to create some decent looking application with amazing user experience. And then sit with an expert to make it even better.

1. Read the “Human Interface Guidelines”

If you haven’t read it yet then this is a must read for you. And similarly for Android they have a better design guidelines now. Most of your design experience will come from these documents.

2. Check on App Store for similar products

If it’s a consumer app you can find similar apps on App Store but if it’s an enterprise app then look on sites like mobilecrunch or macrumors about reviews or articles about similar apps. Try to find out the thing or feature users like the most about those apps and what they find confusing. Often by doing a google image search you can see screens of similar apps.

3. Check (there are 3 “b”s in the name)

Dribbble is a closed social network for designers and UX professional where they share their work and seek advices from other designers. You can not post anything if you are not a member however you can observe other’s work and get inspiration. For example if you are building an iPhone app that requires a table view then just search for “iPhone Table” and see the various designs people have thought about and then find a direction for your story. Don’t just copy. The idea is to get inspired and come up with something that suits best for your application and customers. 

4. Always do it on pen and paper first before staring to code right away.

This is one golden rule that can potential save a lot of time that you might spend doing several iteration if the goal or scope is not clear or if you users don’t just get your designs.

5. Don’t over design.

Don’t try to put lot of animation or graphics if you have just learnt Cocos2d or OpenGLES. Remember the Spider Man’s catch-line “With great power comes great responsibility”. So if you know stuffs that can create the wow factor then use it smartly and control your enthusiasm.

6. Stick to default controls as much as possible

Don’t try to use a custom tab bar or navigation bar if those are really not required. Users are used to the default controls of these platforms and whenever you are introducing a new component it should be really obvious to use. For example Facebook or LinkedIn’s iPhone app shows how you can use simple animation and component to create a wow factor.

7. Rely on the power of these devices.

Smart phones are tablets these days are able to gain so much attention because of their ability to do things using touch, multi-touch and gestures. You don’t need to teach an user to flip a magazine by a simple gesture, zoom a photo by multi-touch. Tap into some of these gestures, touch and multi-touch action detection techniques to make it more interesting for users. Some of the good example of apps that became successful recently are Flipbook, Path, Band of the Day.

8. Image speaks thousand words

When things are little complicated to explain through words or sentences use meaningful images. Most of the time user will get it just by seeing the images. Ideally if possible use small text along with the image.

For example I like Navjot’s thinking on this image:

I think it’s better than the record icon of the audio app on iPhone. The text in this case make it really obvious for the user to understand the purpose of the button.

A not so good example from the same guy would be:

Here I don’t quite get the meaning of the icon until I tap on it.

9. Colors and Branding

Refer to design magazines like “Smashing Magazine” or “Think Vitamin” and you will get a set of guidelines for different type of applications. For example if you are building a finance app you might go with red color and if you are building a travel app using yellow or blue would be more relevant. Also think about where this app would be used in-doors vs out-doors. If the app is going to be used out-doors then if you don’t use proper colors or contrast users might not be able to read or see the app properly.

10. Every pixel counts

Very important: if you want to leave an impression among your users, every pixel counts. Even a bad alignment in one place can caught bad attentions and users won’t be satisfied. People have enough reasons in their lives to be unhappy about and you are going to give them another one by avoiding an extra effort to fix that alignment. Try to be an user first and before trying to be a developer or designer. Just trying to be an user can fix a lot of things. Never give up or let it go until you are satisfied yourself. I always believe as a developer or designer you always know what are your mistakes before anyone else figures those out.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s