Mobile User Experience

As the scope of mobile platforms continues to develop, the value of Mobile User Experience naturally increases. The difference between a good app and a bad app is usually the quality of its UX, which is essential for smaller companies, because it gives them the opportunity to compete with leading brands.The default approach used by many designers when designing for a mobile device is still to scale down their (desktop) website and make it responsive. This approach is a poor strategy for mobile design. Rather than just scaling down a site, you need to examine your client's business and asses the importance of mobile access for their particular business.

Menus and Navigation: Keep It Simple

Traditional desktop websites display a prominent menu bar at the top of the page. On a mobile this eats up precious screen space. To resolve this, make the menu a drop down accordion or icon on the top left or right of the mobile screen. Another desktop habit that doesn't work well on mobiles is multi level menus with sub menus that show on hover. On a mobile device, you want to keep things accessible. If the user has to tap through 4 levels of menus to find something, chances are high they'll leave after the 2nd tap. Avoid multi level menus on mobile sites as much as possible.

Create Fluid Layouts

Many mobile devices means many different dimensions. However tempting it may be, don't just design for a 320 pixel width. Like it or not 176, 240, 320, 360, ~480-600 (landscape) are also common device widths. Keeping your layout flexible and fluid ensures it displays properly on different screen sizes. You don't want the site to work just on devices that match your fixed break points but look weird on everything else. Here's a primer to fluid layouts and one on getting fluid layouts working in responsive designs.

Keep Forms Minimal

Small touch screens and yet smaller virtual keyboards with keys that are barely 5mm x 5mm in size do not make for a happy typing experience. Keep forms simple and small. If you need to, keep a separate form for mobile users, with the least number of fields required to get the data you need. As far as possible, pre-fill fields with defaults. Use auto-fill for commonly used fields. For example, use visual calendars instead of making users type the date. For forms that are longer than a single screen, it's good to show users a progress bar indicating how far they've come, and more importantly, how close they are to finishing. Here's some good guidelines from Google to create good forms..