10 Things Mobile Sites are Different from Full Web Sites<br />Shanshan Ma<br />@shanshanma<br />8/9/2011<br />
1. Content Prioritization & Hierarchy<br />In comparison to desktop Web sites, which usually contain a wide range of conte...
Example: orbitz.com<br />
2. Vertical Navigation & Horizontal Navigation<br />On desktop Web sites, horizontal navigation at the top of a page is a ...
Example: urbanoutfitters.com<br />
3. Bars, Tabs & Hypertexts<br />Hypertext is the signature component of the Internet and the Web. However, on mobile sites...
Example: kayak.com<br />
4. Text & Graphics<br />On desktop Web sites, designers use graphics for many different purposes, including promoting, mar...
Example: dell.com<br />
5. Contextual & Global Navigation<br />Various types of navigation are available on desktop Web sites. Some are global, so...
Example: bestbuy.com <br />
6. Footers<br />On desktop Web sites, footers typically provide either links to content users might expect to see on a sit...
Example: dell.com <br />
7. Breadcrumbs<br />On desktop Web sites, breadcrumbs reassure users that they are on the right page and let them backtrac...
Example: amazon.com<br />
8. Progress Indicator<br />Process funnels on desktop Web sites frequently use a progress indicator at the top of each pag...
Example: amazon.com <br />
9. Integration with Phone Functions Such as Direct Calling and Text Messaging<br />Mobile sites offer better integration w...
Example: bestbuy.com<br />
10. Localized & Personalized Search<br />Mobile sites can take advantage of technology that automatically detects where us...
Example: kayak.com<br />
About me:<br />@shanshanma: user experience designer<br />
Thank you!<br />
Upcoming SlideShare
Loading in …5
×

10 things mobile sites are different from full web sites

1,799 views
1,669 views

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,799
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

10 things mobile sites are different from full web sites

  1. 1. 10 Things Mobile Sites are Different from Full Web Sites<br />Shanshan Ma<br />@shanshanma<br />8/9/2011<br />
  2. 2. 1. Content Prioritization & Hierarchy<br />In comparison to desktop Web sites, which usually contain a wide range of content and information, mobile sites usually include only the most crucial and time- and location-specific functions and features.<br />
  3. 3. Example: orbitz.com<br />
  4. 4. 2. Vertical Navigation & Horizontal Navigation<br />On desktop Web sites, horizontal navigation at the top of a page is a widely accepted way of structuring and presenting a site’s content. However, vertical navigation replaces horizontal navigation on more than 90% of the mobile sites we analyzed.<br />
  5. 5. Example: urbanoutfitters.com<br />
  6. 6. 3. Bars, Tabs & Hypertexts<br />Hypertext is the signature component of the Internet and the Web. However, on mobile sites, there are few or no hypertexts on pages.<br />
  7. 7. Example: kayak.com<br />
  8. 8. 4. Text & Graphics<br />On desktop Web sites, designers use graphics for many different purposes, including promoting, marketing, and navigating. Mobile sites avoid using promotional and marketing graphics and use minimal graphics for navigation.<br />
  9. 9. Example: dell.com<br />
  10. 10. 5. Contextual & Global Navigation<br />Various types of navigation are available on desktop Web sites. Some are global, so are consistent across a site, while others are contextual and change depending on where users are on a site. In contrast, while most mobile sites have global navigation, contextual navigation is rare on mobile sites.<br />
  11. 11. Example: bestbuy.com <br />
  12. 12. 6. Footers<br />On desktop Web sites, footers typically provide either links to content users might expect to see on a site’s home page or quick links that are available across a site to provide access to content users often need. Mobile sites employ a minimal form of the first type of footer, but they do not use footers containing quick links.<br />
  13. 13. Example: dell.com <br />
  14. 14. 7. Breadcrumbs<br />On desktop Web sites, breadcrumbs reassure users that they are on the right page and let them backtrack on their navigational path. Breadcrumbs are rare on mobiles sites and really aren’t necessary, because of the relatively flat structure of mobile sites.<br />
  15. 15. Example: amazon.com<br />
  16. 16. 8. Progress Indicator<br />Process funnels on desktop Web sites frequently use a progress indicator at the top of each page to guide users through the process. Such progress indicators do not appear on mobile sites.<br />
  17. 17. Example: amazon.com <br />
  18. 18. 9. Integration with Phone Functions Such as Direct Calling and Text Messaging<br />Mobile sites offer better integration with phone functions—and present marketing opportunities such as facilitating direct orders by phone or sending promotional text messages.<br />
  19. 19. Example: bestbuy.com<br />
  20. 20. 10. Localized & Personalized Search<br />Mobile sites can take advantage of technology that automatically detects where users are to present local search results. When users set up their preferences or profile, personalized search results become even more relevant and valuable to them.<br />
  21. 21. Example: kayak.com<br />
  22. 22. About me:<br />@shanshanma: user experience designer<br />
  23. 23. Thank you!<br />

×