optimizing user interaction for mobile web browsing
DESCRIPTION
User Interface DesignTRANSCRIPT
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