Design layouts for touch screen’s and finger friendly design

Web is changed and the usage of internet is growing day by day. We all well known about user friendly designs for web, but how about mobile friendly designs, taking care of touch screen devices?

Smaller the screen dimensions its hard to design. When you are designing for mobiles its better to make your click able links big so that it would be easy to tap for users. But how can you know the area exactly?

Apple’s iPhone Interface Guidelines recommends minimum target size of 44/44 pixels. Microsoft recommends 26px for all 34px for touch and Nokia suggests 28/28 px. All these were not consistent. Small touch screen targets would always lead to big problems, they need to hit exact area. Most of the users use the fingertip to hit  targets. When targets are placed very near, users may accidentally hit other targets and it leads to other action at the same time pressure to applied on the spot.

What is the width for average index finger? An MIT Touch Lab study states that 45 – 57 pixels is average width. A finger sized target gives users enough room to hit without worry.

What is the width for average thumb? Its is around 72 pixels. Most of the users use thumb. Make edges visible and easy to see from all angles.

The size of the button is important, and the space between buttons is also very important. Every screen has different DPI, so you should always speak in terms of physical dimensions and then augment based on the target devices’ touch capabilities. On a standard resolution device screen, one point equals one pixel, but other resolutions might dictate a different relationship.

A responsive web design becomes more popular, designers need to think more about aspects for touch design friendliness to ensure that their designs are truly multi platform. Considering that we have different finger sizes, testing would probably the best measure.

We need your comments or suggestions on how to improve the service and make it more useful. Designing Studios is dedicated to serving the needs of web designing & development professionals.

Comments are closed.