How to Make a user friendly Interface for Mobile Platforms?

We all web Ninja knows the value of USER EXPERIENCE. In mobile platform it requires a different approach to make a better user experience. I am listing few points one must remember while making mobile Interface.

• 1 .Responsive Web design
• 2 .The event handing must be touch friendly
• 3. The Forms must be design in a mobile friendly way .
• 4. Use appropriate screen pixel densities of images

1. We all know responsive Design is one which adapts the layout on the basis of the screen size. It means the user will have the same  EXPERIENCE on mobile as on Desktop while browsing the site.few well known technique for making website responsive are these.

<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css" href="main.css" media="screen, handheld" />

<link rel="stylesheet" type="text/css" href="fallback.css" media="screen  and (min-width: 40.5em)" />

<!--[if (lt IE 9)&(!IEMobile)]>

<link rel="stylesheet" type="text/css" href="fallback.css" />

<![endif]-->

It means non mobile version and The IE version 9 or less than 9 will use fallback.css. We all knows IE 9 and lower does not support media queries. Not only IE some mobile browser like Symbian Browser (Doesn’t exist though) and BlackBerry older browser also not support the media queries. So Conclusion of this Part is make web design responsive.If you don’t know learn it.

Use Appcache to make website offline available. Believe me it increase user experiences

2. Now let’s  jump on the second point event handling. Now days mobile are touch friendly. Apple   bought “touch events AP” from ios 2.0 .Android is also catching up with touch events. W3C also making draft on touch event https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html. There are single touch and Multi touch Devices in market. Let’s not focus on multi and single touch devices (It’s another big debate).

So currently there are three basic touch events currently

1. touchstart: When a DOM element is touched.
2. touchmove: when a touch is dragged over the  DOM element.
3. touchend: when the touch removed from DOM element.

3. The Forms  So one need to handle these events for making website touch friendly .Few things one must remember while approaching for touch friendly devices

1 .Disable the zooming : Preventing the user from zooming will prevent user to scale website.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

2.Prevent the scrolling: Few devices  like IOS jumps the viewport when the scroll exceed the limits.    

document.body.addEventListener('touchmove', function(event) {

  event.preventDefault();

}, false);

Now let’s come to Third point make form user friendly. Mobile have on-screen keyboard and its really frustrating to fill the form with this. But thanks to HTML5 which came with new semantic input types and validation. For making form filling mobile friendly on need to follow these two things .

1 .Input Type. There are number of new input type introduced in HTML which invokes relative on-screen keyboard.

The full list of all input types :

url ,tel ,Email , search, Number ,Color , Range , Datetime , datetime-local  ,Date,  Time , Week ,month

For Example I write < input type=”number” />, the browser will show a numeric onscreen keyboard. Or I write < input type=”Email” /> the on screen keyboard will show alpha numeric keyboard with @ and .com button . So the user will feel it more easy to fill the form

2.Form Validation : Validation of form is very important .It keeps the data clean and improve the  user experience . There are two approach one can use for form validation

 I . Pattern . Pattern is nothing but a regular expression to validate

 <form action="Myform.asp">

  Country code: <input type="text" name="Your country_code" pattern="[A-Za-z]{3}" title=" only Three letter country code">

  <input type="submit">

</form>

The above example will validate the input field and will allow only 3 character

II. Require : If input field have require attribute the user must fill the field before submitting the form

<input type="text" required  name="Your country_code" pattern="[A-Za-z]{3}" title=" only Three letter country code">

III min, max and step: For numeric value specify the minimum maximum value and for the value will increment in slider

<input type="number" id="myNumber" min="10" max="50" step="10" />

IV  maxlength : The maxlength attribute for Input type  will specify the maximum allowed length of input character

4.Now days there is very wide range of screen pixel densities. Some devices have really very very high resolution display. So first and best suggestion for the optimizing different screen pixels  is avoid images as much as you can. Now days there are SVG CSS3 for getting nice interface. And these works fine across the web

But if it is compulsory to use image you can  go for these two approach

1.       Optimize  Single image  for multiple platform. You can use one image and optimize it for different devices. But this will affect the performance badly. As user will download the Hidpi image in all browser ,the old browser will render it badly .

2.       Multiple Image approach . Use multiple images and decide on the browser capacity which to load .We can use following technique to make the dicision

• 1 . Javascript
• 2 .server side Delivery
• 3. CSS Media Queries