Posts Tagged ‘mobile’

Mobile Ergonomics for those with two thumbs

Nov 09
23

Mobile Ergonomics

You can’t easily tap every region of the phone with equal ease. Your hand isn’t designed for this.  Yes your thumb is opposable but unless it’s double jointed there will still be parts of your phone that will be harder to tap.

When designing an application consider how it’s going to be held.  In one hand, sometimes in the other, perhaps in your pocket?  That’s why it’s so important to get the app out of the simulator and actually into your hand. The mechanics of how you hold your phone make it much harder to grip the device in certain orientations. It makes it particularly difficult to reach the lower corners by your thumb.

Consider the built in Camera application that Apple provides. The application is simple and attractive but the buttons for the application are in exactly the wrong place. To take a proper picture you need to hold the phone perfectly vertical (unless you’re taking a picture of the floor.)  The slippery edges of the phone require you to either grip the phone firmly with your hand making it difficult to tap the camera or alternatively balance the camera precariously on your pinkie finger.

iPhone Camera Interface Tap TargetsI have dropped my phone at least twice attempting this and know of at least one person who has smashed their phone into little bits because of this.

There’s a principal called “Fitts’s law” that describes how clickable items are on screen. Said simply:

Items that are larger and closer to the mouse cursor are easier to click.

The mathematical details then explain that traditional screen edges are infinitely click-able since they have a virtually unlimited size.   On a mobile device the same assumptions don’t hold true. The mechanics of your hand play a significant role.  Not only do items have to be larger to be easier to click but they have to be easily reachable when holding a phone in one hand.

Post to Twitter

Going Mobile – Giving users the finger

Apr 09
29

Last month I gave a talk for UPA Boston, this is a summary of that talk.

Over the last five years we’ve seen a shift in mobile applications.  For about 30 years people thought of mobile phones as an extension of traditional phones. They would make calls and that was the primary use. Over the last 10 years we’ve added features like voice mail, texting and even basic web browsing. It wasn’t until just the last 4-5 years that the next wave of mobile has taken off.

Mobile today

Mobile phones today are dominated by three classes of devices, 16 button, 60 button keyboard and new touch devices. There are about 1Billion 16 button phones, 50-100 million keyboard phones and about 20-40 million touchscreen phones. I’m mostly talking about this last category of emerging phones though some principals apply to both keyboard phones and 16 button phones.

The key difference between the phones of yesterday and the phones of today are a combined set of capabilities and technologies that fundamentally change the user experience. These include:

  • Always connected – email/web/etc
  • Adaptive input screen (control every pixel)
  • Geo-location
  • Touch/Gesture interface
  • Accelerometer
  • Apps you can download

A lot of these technologies existed either in isolation or in awkward implementations. Together they allow for a much richer application experience. This has become a platform that is fun, exciting and profitable for application developers.

Design for existing behaviors

When designing an application it’s key to keep scenarios in mind. A scenario is the basic story of how a person may use the application. The important thing when thinking about scenarios is that actions tend to stay the same but the way you complete those actions changes.  Behavioral changes are difficult and rare. It’s much easier to design tools that encourage and support existing behaviors. Similarly it’s much easier for end-users to adopt your application or tool into their existing behaviors rather then changing established patterns.

Designing for Mobile

When designing for mobile remember that people are out in the real world. Your application needs to be a good alternative to the desktop/laptop. The factors for this type of design should include:

  • Input methods – make it easy and minimal to get information into the device.
  • Form Factor – Design for a smaller screen size and make it easy to read and get information back out of the device.
  • Location – Take location into account
  • Efficiency – A mobile application should be quick and efficient
Input Considerations
You can’t always expect that the user has both hands free. People are often holding something else in their hand, coffee, bags, railings, doors, etc.  You should design your application to be usable with one hand. Consider scenarios where the user may have both hands occupied, driving, running, etc.
Opposable thumbs are great but they aren’t perfect. There are spots on the phone that are particularly hard to hit with one hand. Certain apps aren’t designed well for single handed use. Fitts law doesn’t work on mobile devices. Because of the mechanics of the human hand certain zones are easier to hit and this has little relation to the screen edge.
Output Data
Use large presentation size fonts, 14-18pt fonts are typical. Use large finger tip sized targets, 30-40px are easy to tap.  Small targets are particularly hard to hit. Examples: Info buttons are tiny and sliders tend to be particularly hard to tap.
Touch Screen Language
The user interface language is being defined now. The desktop conventions of click, double click, right click. These conventions don’t always hold on a mobile device. A whole new interface language is being developed in rather an ad-hoc way. Certain conventions are becoming more popular:
  • Tap – most similar to click
  • Tap & Hold – magnify, copy/paste, selection/make dragable
  • Swipe – scroll, secondary action/delete option
  • Pinch – Zoom
  • Shake – Undo/Refresh/Clear
Basic guidelines
1) Each screen should do one thing (well)
2) Minimize on-screen elements (quantity, not size)
3) Make things easy to tap
4) Avoid preferences
5) Design for the 80% case
The session covered other topics including Mobile Wireframe Design, Mobile Web Design. Mobile Usability, and Mobile Gaming. The variation of the talk will be given at this years Mini-UPA, an event put-on by Boston UPA.  If your company or organization is interested in hearing it first hand contact me for additional info.

Post to Twitter

Application design for mobile phones

Jun 08
5

I love designing applications for mobile phones. It forces you to think about the essential features. Often times this is exactly the type of design you want on larger applications but it’s tougher to convince clients that the application gets better when you take away features. Many larger applications can learn from this.

  • Do one thing, do it well
  • Linear flow top-down
  • Purposeful word choice
  • Large fonts for readability
  • Keyboard accessibility
  • The details matter

Post to Twitter