Differences between Desktop 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  Desktop 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

Reuters Web Sites

Reuters Mobile Sites

Orbitz Web and Mobil Sites

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

Hypertext and Actionable Objects (Cont.)

3. Text and Graphics

Text and Graphics (Cont.)

4. Contextual and Global Navigation  Desktop 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

Best Buy Web and 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 desktop 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

Discussion – A View on a Tablet