190 likes | 296 Views
Differences between Traditional Web Sites and Mobile Web Sites. Yonglei Tao. Computing Environments. Laptop and desktop computers Lenovo IdeaPad - 15.6” screen with 1920 x 1080 resolution Pointing and clicking with a mouse A broad range of development tools
E N D
Differences between Traditional Web Sites and Mobile Web Sites Yonglei Tao
Computing Environments • Laptop and desktop computers • Lenovo IdeaPad - 15.6” screen with 1920 x 1080 resolution • Pointing and clicking with a mouse • A broad range of development tools • Mobile devices like smart phones • iPhone 5 – 4” screen with 1136 x 640 resolution • Tapping on a touch screen • Access to phone and geolocation services
1. Content Priority and Screen Layout • Traditional Web sites • Often contain a wide range of content • Use horizontal navigation to structure and present content • Mobile sites • Usually include the most crucial functions and features • Use vertical navigation to organize content
2. Hypertext and Actionable Objects • Hypertext is the typical component for the Web, but links often appear in the form of bars, tabs, and buttons on mobile pages • Easier and more accurate to click a link with a mouse than using fingers on a touch screen • Bigger objects allow users to tap with more precision
4. Contextual and Global Navigation • Traditional Web sites use various forms of navigation • Global – remain consistent across the site • Contextual – change according to where users are on a site • Limited use of global and contextual navigation on mobile sites • May make it difficult for users to figure out where they are • Need to reduce hierarchy when organizing the content on mobile sites
5. Footers Footers on the Best Buy Web site Minimal footers on the Best Buy mobile site
6. Breadcrumbs • Effective to reassure users they are on the right page and allow them to backtrack on their navigational path • Make sense for sites with different content at multiple level in a hierarchy
7. Progress Indicator • Guide users through a multi-step process • Rarely appear on mobile sites due to limited space • Instead they use buttons with explicit labels to inform users exactly what the next step is such as “Proceed to Checkout” or “Specify Shipping & Payment” progress indicator on Amazon Web site
8. Integrate with Phone Functions • Mobile devices such as smart phones open up new opportunities that regular Web sites cannot provide Shop by phone on the Best Buy mobile site
9. Localized & Personalized Search • Many mobile devices can automatically detect where users are and give them local search results Auto-detection of geographical location to suggest an airport on Kayak