Optimizing User Interaction for Mobile Web Browsing

Presented by Abisha N (12MW01)Divya R (12MW03)

Brains Behind The Paper

Dong Zhou Ajay Chander Hiroshi Inamura

Working at: DOCOMO USA Labs 3240 Hillview Ave., Palo Alto, CA 94304, USA

Email : {zhou,chander,Inamura}@docomolabs-usa.com

What’s the Problem??

• The small form-factor of mobile handsets • Lack of full-sized keyboard • Stable arm-support makes it difficult to input text • Lack of multi-window • Mechanisms for easy copy & paste makes it

difficult to copy data• Cellular network connections are still weaker and

less stable than their fixed-line counterparts

Proposed Idea..

• Design & Prototype implementation of a framework are built.

• Monitored interaction history and runtime interaction context.

• Predicts future interaction sequences and optimizes predicted user interactions

• Uses navigation shortcuts and automatic text copying and form-filling

Frameworks

• Monitoring • Rule generation• Rule Matching & Application

Exploring Modules

• The monitoring module captures and logs users’ interaction history with their browsers.

• The rule generation module creates interaction prediction rules from such interaction history, and generates optimized forms for predicted user interaction sequences.

• The rule matching and application module matches a user’s current interaction context against generated rules

Interaction history Defined as set of interaction state transition

sequences, where the interaction state is defined by the following variables:

1) The page that is currently open in the browser

2) The highlighted text on the current page3) Content of the clipboard4) Form inputs made to the current page

Interaction event

• Page-Load event, URL-Input event, Text-Highlight event, Text-Copy event, Text-

Paste event, or Form-Input event.

Trails

• Captured interaction event sequences are broken into Trails.

• A segment of user interaction sequence that reflects a burst of user interaction activities.

• A long sequence of user interaction with a device can be divided into multiple Trails.

• Long time gap is usually resulted from the user reading a page in detail, or from the user shifting attention away from the browser.

9 Practices for Mobile Website Design

• Simplify. Then Simplify Again. And AgainGiven the restricted amount of screen space, it’s important to figure out what key

pieces of information your visitors will probably be looking for.

• Plan Your Site Layout

Mobile web pages will load slower than traditional web pages, so it’s important

to keep the number of pages to a minimum.

• Match the Branding Elements From Your Standard Site to Your Mobile Site

Even though your mobile site will be much more streamlined than your standard site, you’ll still want to incorporate the same branding elements on both sides of the equation.

• Utilize White Space

White space give a cleaner, more sophisticated appearance, it also ensures that users can easily click the button they’re aiming for.

• Reduce the Amount of Text Entry NecessaryUse dropdown menus, checklists and pre-populated fields as a means of data entry.

This helps minimize the challenges people face when typing text into a smartphone.

Do Not Use Pop-Up WindowsNavigating between multiple tabs and browser windows is more difficult on mobile and can cause slow load times

Use Mobile RedirectsOnce your site is designed and ready to go, make sure to put redirects in place that will sniff out when a visitor is using a mobile device 

Allow People to Visit the Full SiteYou’ve worked hard on your mobile site. You want people to see it and you want people to love it.

How to Optimize Your Mobile Website

Understand How Mobile Consumers Interact with Websites Declutter Your Mobile Interface Maintain Consistent Branding Kill Any Flash or Javascript Files Eliminate Pop-up Windows Include a Link Back to Your Full Website

SEO Tips Use Responsive Web Design to Serve Up the Same

HTML with Separate CSS Use a Mobile URL with Automatic Redirection Handle Mobile-related Canonical Tags with Care

General page design rulesDo's of mobile webpage's design:

Do design pages for a screen size of 320 by 240 pixels.

One of the most important considerations is that user input

Do add alt-tags for pictures, users regularly block downloading images in their web browsers just to reduce bandwidth consumption.

Don'ts of mobile webpage's design:

Don't use scripting languages, flash or other complex objects. 

Don't use frames or other dividers, they take a lot of space and do not add much value, many frames are shown only for 20%, causing a lot of sliders as well.

Don't use objects that have a fixed size, like tables.

Don't use big pictures, besides the waste of screen space, they also use a lot of bandwidth costing a lot of time and money

Don't write lengthy texts, since people on the run generally have a hard time reading them

Advantages of Mobile Website Optimization

Improved User Experience Faster Download Speed Engagement and Context Improved Search/SEO performance Brand Identity Portability and Connectivity Competitive Advantage Integration with Offline Media More Flexible and Cost-Effective Than App Development New Advertising Opportunities Inevitability