differences between desktop web sites and mobile web sites yonglei tao
TRANSCRIPT
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.)
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