What Are The Things To Consider While Designing A Web Service For Mobile Devices

If you're going to design for mobile, then it'southward likely you're going to need to consider the way that the device is used and the specifics of the device itself. There are some general principles that can help designers for mobile get started but don't forget that these don't supercede the need for user research. They are guidelines non hard and fast rules.

There are many things to consider when designing for mobile and while many are standard UX considerations; there are going to be mobile specific pattern considerations also. Are yous going to integrate your mobile offering with your current offering? Will you use responsive design or adaptive design if you do?

A lot of this will eddy down to context. E.g the context in which the mobile device will exist used. If your users access the mobile web from their desks, that's awesome, but many users don't. They're going to exist trying to utilize them in the supermarket, on their daily commute, on the walk to the coffee shop, etc.

That means you lot're going to take to consider how to reduce distractions and make it easy for the user to focus on the chore in manus too.

Josh Clark, the author of Tapworthy- Designing Corking iPhone Apps, offers three categories for mobile web access:

Microtasking: When the user interacts with their device for brief but frenzied periods of activity
Local: When the user wants to know what's going on around them
Bored: When the user has nothing improve to do and is looking to be entertained or otherwise diverted

Basic Design Considerations for the Mobile Web

Small Screens

You don't accept as much screen real estate for mobile devices equally you practice for PCs and laptops. That means, normally, you'll be designing for multiple screen sizes. Y'all need to brand a decision early as to whether to use responsive design (where the device handles the changes in display) or adaptive design (where your servers handle the changes).

You want to focus on a "mobile first" approach which means designing for the smallest mobile platforms and increasing complication from there.

A good process to follow would be:

Group device types based on similar screen sizes and endeavour to keep this to a manageable number of groups
Define content rules and design adaption rules that enable y'all to display things well on each group of devices
Try to adhere equally closely to web standards (W3) as possible when implementing flexible layouts

Don't forget that at that place are many unlike browser types available for the mobile web and the wider Net too. You want to ensure that yous support as many of these every bit possible – including those that are no longer current (such as BlackBerry and Nokia WebKit).

Author/Copyright holder: Philip Jägenstedt. Copyright terms and licence: CC0 1.0

Keep Navigation Elementary

Keypads and touch screens don't make for precise navigation like mice do – so try to:

Prioritize navigation based on the manner users work with functionality – the most popular become at the elevation
Minimize the levels of navigation involved
Ensure labelling is articulate and concise for navigation
Offer brusk-key access to different features
Remember to offering a 30x30 pixel space for touch screen tap points
Ensure that links are visually distinct and make it articulate when they have been activated too
Brand it easy to swap between the mobile and full site (if you choose to implement split up versions)

Keep Content to a Minimum

Don't overwhelm your users – respect the small-scale screen space. Keep content to a minimum.

Make sure that content is universally supported on all devices or avoid it. Call up Flash and then don't apply it, for example.

Brand folio descriptions short and to the point – for relevant bookmarks.

Reduce the Inputs Required from Users

The less the user has to dabble with their phone; the more than they're going to relish using your mobile web offering. Consider:

Keeping URLs short.
Offer culling input mechanisms (video, voice, etc.)
Minimizing inputs in forms (you can always ask for more than data when the user logs on to the desktop)
Allowing permanent sign in (most smartphones are countersign or fingerprint protected – the risks of staying logged in are less than on the desktop)
Keep scrolling to a minimum and just allow scrolling in one management

Author/Copyright holder: Subhashish Panigrahi. Copyright terms and licence: CC BY-SA iii.0

Remember Mobile Connections Are Not Stable

Mobile connections can be a colossal PITA in areas with patchy service. Don't brand things hard on your users. Attempt:

Retaining data so that information technology'southward non lost in a connection break
Minimizing page size for rapid loading
Killing off advertizing-networks, etc. on mobile sites which consume huge amounts of bandwidth and data
Keeping images to a minimum and reducing the size of those images
Reducing the numbers of embedded images to a minimum (speeding up load times)

Author/Copyright holder: Stefano De Sabbata and Mark Graham. Copyright terms and licence: CC BY-SA 3.0

Continuous Integrated Experiences

Every bit users move between mobile and the desktop they're going to look similar experiences. Retrieve to:

Maintain continuity. If they log into your webstore on mobile they should be able to rails orders and make purchases merely similar they would on the desktop.
Maintain consistency. Offer the choice to switch between mobile and desktop offerings at will.
Maintain brand. The look and feel of each version should be similar.

The Have Away

Mobile is different from the traditional desktop surround and while standard UX and usability considerations are needed in a mobile context – the mobile environment also brings new design considerations. Information technology'southward of import for mobile designers to pay attention to the details in order to evangelize the best possible user experiences.

References & Where to Learn More

Grade: Mobile User Experience (UX) Design:
https://www.interaction-design.org/courses/mobile-user-feel-pattern

Creative Bloq suggest focusing on these 10 principles of interactive design for mobile - http://world wide web.creativebloq.com/mobile/10-principles-mobile-interface-design-4122910

Give Skilful UX offer five simple tips for mobile design - http://world wide web.givegoodux.com/five-crucial-principles-swell-mobile-design/

Swell Magazine offers 7 principles for mobile UX design - http://world wide web.smashingmagazine.com/2011/07/vii-guidelines-for-designing-high-functioning-mobile-user-experiences/

InfoWorld thinks yous demand to look at these 10 tips to become mobile app design right - http://www.infoworld.com/article/2612190/mobile-apps/heed-these-10-expert-tips-for-mobile-app-design.html

Hero Epitome: Author/Copyright holder: Michael Sean Gallagher. Copyright terms and licence: CC BY-SA 2.0