Design Principles For A Better Mobile Web

 
Published on July 12, 2014

The mobile web refers to access to the world wide web, i.e. the use of browser-based Internet services, from a handheld mobile device, such as a smartphone or a feature phone, connected to a mobile network or other wireless network. This presentation, delighted you with a song while you digest the Google research in a fun way! Transcript: Design Principles for a Better Mobile Web @jtantwtr · Created 7/10/2014 · Updated 7/11/2014 Copyleft -- All Rights Reversed Context Over a billion active uses every 30 days - it can drive your business! Old Sites for Mobile Cut down Hard to navigate Less in features Smaller Poor on design Unfamilar (it looks different from the desktop site!) Research Google had tested 100 websites on mobile - the following is about their research and thus design guidelines based on that for all to ponder about Principles 25 principles are categorized into 5 sections: 1. Homepage and Navigation 2. Site Search 3. Commerce and Conversions 4. Optimizing Form Entry 5. Site-wide Design Considerations Homepage and Navigation 1. Figure out the primary purpose why your site exists - what can you do with it clearly specified in the small screen 2. Keep menus short and sweet 3. Make it easy to get back to the homepage Site Search 1. Make site search visible - so that your users get to your content quickly; unless your site consists of only a page but I highly doubt that 2. Ensure site search results are relevant 3. Implement search filters to narrow results 4. Guide users to better site search results e.g with pre-defined filters Commerce and Conversions 1. Let users explore before you tell them they have to purchase something! 2. Let users purchase as a guest 3. Pick up where you left off - help users remember where they were before they left off at a later point of time 4. Use Responsive Design - so that a single page is used for both mobile and desktop vs redirecting to a different mobile page Optimizing Form Entry 1. Design efficient forms - Touch friendly, less but more meaningfully and "cut the fat" if you have to 2. Use pre-existing information - remember the users information (for existing users) for example 3. Streamline information entry - ask "how many tabs is required?" etc 4. Minimize form errors with labeling - all inputs have to have clear "title" aka label 5. Provide visual calendars for dates - use calendar component if you have to 5.Real-time validation of forms - please do not require the users to redo their form again if the validation fails for any reason Site-wide Design Considerations Don't make users pinch-to-zoom Tappable/expandable images - users want to see the details Be clear why you need a user's location - instead of just making the browser prompts for "Deny" or "Allow" request Keep your user in a single browser window - keep the users at your site! MDI is out of style dude, get over it Site-wide Design Considerations Don't let promotions steal the show - your banner should never take up the whole space and they should be easily dismissable Optimize your entire site (not just part of it for whatever reason) for mobile - especially the navigation aspect of it In Short It is not about "shrinking" your desktop site as a mobile site Delight the mobile consumers which are your users! References Google I/O 2014 - Design principles for a better mobile web https://www.youtube.com/watch?v=xqviGwyy7y0 Principles of Mobile Site Design: Delight Users and Drive Conversions ("What to do to do it right" aka White Paper) http://bit.ly/mobilewebprinciples Web Fundamentals ("How to do it!") http://bit.ly/web-fun Thank you !