Mobile User Interface Design Considerations

So while we’ve been putting together the finishing touches to our mobile application for theme.fm, we’ve also started work on a mobile theme to accompany one of our forthcoming themes ‘Business Impact’ and as we’ve done quite a bit of research into mobile interface design it occurred to us that it would also make sense to share some of our findings on theme.fm. Now that mobile optimization is growing in importance, websites interfaces that are adapted and modified for the mobile touch screen experience require a lot of careful consideration.

Key concepts

So what are the key considerations that need to be applied to mobile interface design?

  • Multiple screen sizes & densities
  • Touch targets
  • Gestures, and actions
  • Context and usage

Multiple screen sizes & densities

Below you can see a variety of mobile screen sizes and densities to illustrate a little of the range. Since screen sizes are variable for every device, we’ve decided to make our tests on iPhone 3 and 4.

Available screen size

The screen sizes above have some great area of pixels for a full screen application, but if you are designing a mobile website you also should consider the available space left after top-bars, browser bars and navigation have been accounted for.

Luckily there is a handy and small script that hides Safari’s address bar so we can gain an extra 60 pixels. So the final size we’re working to is 320x410px.

<script type="application/x-javascript">
	if (navigator.userAgent.indexOf('iPhone') != -1) {
		addEventListener("load", function() {
			setTimeout(hideURLbar, 0);
		}, false);
	}
	function hideURLbar() {
		window.scrollTo(0, 1);
	}
</script>

The grid system behind the theme

After our recent post‘An Introduction to Grid Systems’, we noticed that ready made grid systems are pretty useful, but designing a grid system for our new premium theme is a good way to experiment and learn.

This is the ‘Business Impact’ Mobile Theme home page and the grid behind it. Basic information on the home page is fitted into the safe area. The swipe gesture is suggested to the user while images are loading.

Questions to be asked:

Q: How close can text be to the edge of the screen?
A: 15 pixels from the left and right side is reasonable, which is about 4mm in real life.  If we subtract 2x15px from total width,we get  290 px.

Q: How many columns do we need?
A: 6 columns would be ideal when you consider it is divisible by 2 and 3, so we can get several layout options.

290 / 6 = 48.333333.  When we consider 10 px minimum gutter between columns, it perfectly fits with 40 px column size!

Here is The formula we come up while trying to divide screen 6 columns and and 15 px margins on each side.

width 320px =   (2 x 15 px margin) + (5 x 10 px gutter) +(6 x 40 px columns)

Button sizes

And for the button sizes we first tried 36×36 px which is smaller than Apples suggested 44 px. But as we had to come up with a small user test, we decided that 36 px square are was enough to distinguish :]

The Impact of PPI

The ppi also known as pixel density, is the measurement of the resolution of screens. When ppi value is high it means that there are more pixels packed in a 1 inch square, and the result is sharper and better images.

Touch targets

Touching with your fingers is a different way to interact than pointing with a mouse arrow, actually your fingers are changing about between 30 pixels to 44 pixels, according to the several company guidelines.

Thumb usage and index finger usage is also another point to consider. Think of UI elements positioned at the bottom and in most cases people touch them with their thumb finger which is very close when you hold your phone in your hands. And spacing required for thumb usage is usually a bit more.

Lets say that interface elements should be no smaller than 1cm (0.4”)

  • Young users have smaller fingers
  • Older or heavier users may have larger fingers
  • Older, distracted, or disabled users may not have the motor control necessary to hit a small target
  • Unlike a mouse cursor, the finger will obscure part of the screen while being used to interact with the device

Gestures, and actions

Gestures are handy when designing for mobile, they are kind of a natural way of doing an action. Gestures are mostly inspired by real world metaphors, and similar usage of daily life objects. For instance you can delete your mails by swiping right to left on the title, this is something like throwing some dust from your desktop.

Here is a list of basic touch gestures:

  1. Tap
  2. Double Tap
  3. Drag
  4. Flick
  5. Pinch
  6. Spread
  7. Press
  8. Press & Tap
  9. Press & Drag
  10. Rotate

Context and usage

Another big consideration on mobile application design is the context of the application.People interact with the application in a variety of environments and places, and this is fairly different than sitting on a computer and using keyboard and mouse.

People may have use your app in dark restaurant, one-handing in a moving subway or in a no sound environment. Also you need to imagine physical realities of the user, finger size and movement capabilities of the hands in different holding situations.

I remember some research saying that men use mobile applications more on the toilet and the women uses mobile apps more in bed :]

Resources

Iphone User Interface guidelines
Windows Phone UI Design and Interaction Guide [PDF]
Nokia’s developer resources
Ubuntu Designing for Finger UIs
Android: User Interface Guidelines
http://developer.apple.com/library/ios/navigation/
http://www.zeldman.com/2010/04/20/touch-gesture-reference-guide/
http://developer.android.com/guide/practices/ui_guidelines/index.html

Touch Gesture Diagrams
http://www.lukew.com/ff/entry.asp?1073
Open Source Gesture Library

Further Readings

A study of One-Handed Thumb Use on Small Touchscreen Devices (2005) that looked in detail at the interaction between target size and task performance in single- and multi-target tasks recommended target sizes at least 9.2 mm for single-target tasks and 9.6 mm for multi-target tasks.
An MIT Touch Lab study of Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF) found that the average human finger pad is 10-14mm and the average fingertip is 8-10mm.

So with mobile optimization now becoming a necessity with rising mobile usage are there any other points that you consider in when designing for mobile interfaces? What do you think of current mobile interface design? Tell us what you think of our key considerations?