Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Mobile  Information  Architecture <ul><li>Designing Experiences for the Mobile Web  </li></ul><ul><li>@ IA Summit 2007 </l...
A Mobile Web? <ul><li>http://flickr.com/photos/petitecorneille/257453343/ </li></ul>
A Mobile Web? <ul><li>Coming of age </li></ul><ul><li>Becoming affordable </li></ul><ul><li>Escaping the limitations of WA...
http://flickr.com/photos/pitifulpussycat/19301063/
Profoundly Different <ul><li>But the mobile interface is still profoundly different from the desktop/laptop interface.  </...
http://flickr.com/photos/rklawton/400751464/
http://flickr.com/photos/moriza/126238642/
http://flickr.com/photos/moriza/175599244/
http://flickr.com/photos/moriza/175599316
http://flickr.com/photos/azrehman/357399358/
http://flickr.com/photos/bruceley/199457887/
http://flickr.com/photos/mmoorr/348607373/
http://flickr.com/photos/kristi-san/37526972/
http://flickr.com/photos/dhbress/87105370/
http://flickr.com/photos/flickfamily/211470875/
Context <ul><li>The mobile web browser is seeking information (often), yes, but most likely this person is looking for the...
http://flickr.com/photos/timcaynes/427589206/
Emerging Patterns <ul><li>Mobile applications are also establishing some expectations among users.  </li></ul><ul><li>Menu...
A Series of Choices <ul><li>The mobile IA and interaction design process requires a number of either/or choices. </li></ul...
Go Mobile? <ul><li>The first decision concerns whether to build for the mobile web at all. </li></ul><ul><li>Not every web...
One site or two? <ul><li>Can you build a single site that will work perfectly well in both contexts? </li></ul><ul><li>Sho...
One Site <ul><li>Pros </li></ul><ul><li>Build once, display many. </li></ul><ul><li>Avoid redundancy </li></ul><ul><li>No ...
Two Sites <ul><li>Pros </li></ul><ul><li>You can fine-tune the content and design for each context </li></ul><ul><li>Cons ...
One-Site Subchoices <ul><li>Do you try to manage the presentation differences entirely with CSS and the DOM…  </li></ul><u...
http://flickr.com/photos/glsims99/124769065/
http://flickr.com/photos/ross/109119612/
http://flickr.com/photos/mikedefiant/336578542/
Tailoring the Navigation <ul><li>Limit categories to 5 </li></ul><ul><li>Up to 10 links can have numerical accesskeys </li...
IA Matters! <ul><li>“ Be prepared to invest some time or hire an IA to [make clickstream diagrams] for you. You'll spend m...
And what about .mobi? <ul><li>“ The people that designed .mobi were smoking crack. ” </li></ul><ul><li>- Tantek Çelik </li...
A Case Study <ul><li>http://www.america.htc.com/mobile/ </li></ul><ul><li>HTC manufactures about 80% of the Windows Mobile...
america.htc.com
america.htc.com/mobile
Our Choices <ul><li>Mobile site? Yes, required </li></ul><ul><li>One site or two? </li></ul><ul><li>- Initial decision: On...
One-Site Strategy <ul><li>Explored and rejected CSS magic </li></ul><ul><li>Researched and adopted mobile-savvy CMS </li><...
Two-Site Fallback <ul><li>Negotiations between client and  vendor dragged on and threatened launch date </li></ul><ul><li>...
The Web Sitemap
Web Sitemap Detail
Mobile Sitemap Unique mobile-site content
Mobile Sitemap Detail Unique mobile-site content
A Web Wireframe
A Mobile Wireframe
Usability Testing <ul><li>We brought in users with differing levels of familiarity with smartphones </li></ul><ul><li>We h...
See Also <ul><li>http://blueflavor.com/sxsw2007/ </li></ul><ul><li>(Brian Fling’s presentation from SxSW) </li></ul>
thank you Christian Crumlish Yahoo! Pattern Detective Director IT/Web Infrastructure, IA Institute
Próxima SlideShare
Cargando en…5
×

Mobile Information Architecture

62.818 visualizaciones

Publicado el

Designing Experiences for the Mobile Web. Basic choices and considerations in mobile web information architecture and a brief case study

  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • The Surprising Reason 11:11 Keeps Appearing. Free report reveals hidden messages from the Universe to unlock success, wealth... even true love. Claim your copy and reveal your messages now! ★★★ http://scamcb.com/manifmagic/pdf
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ,DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Mobile Information Architecture

  1. 1. Mobile Information Architecture <ul><li>Designing Experiences for the Mobile Web </li></ul><ul><li>@ IA Summit 2007 </li></ul>
  2. 2. A Mobile Web? <ul><li>http://flickr.com/photos/petitecorneille/257453343/ </li></ul>
  3. 3. A Mobile Web? <ul><li>Coming of age </li></ul><ul><li>Becoming affordable </li></ul><ul><li>Escaping the limitations of WAP 1.0 </li></ul><ul><li>Existing alongside mobile apps and texting </li></ul>
  4. 4. http://flickr.com/photos/pitifulpussycat/19301063/
  5. 5. Profoundly Different <ul><li>But the mobile interface is still profoundly different from the desktop/laptop interface. </li></ul><ul><li>It's not just a matter of size and space limitations. </li></ul><ul><li>The context is different. </li></ul><ul><li>The desktop and even the laptop are fundamentally stolid. You move around them and stay anchored to them. </li></ul><ul><li>The mobile web comes with you everywhere. </li></ul>
  6. 6. http://flickr.com/photos/rklawton/400751464/
  7. 7. http://flickr.com/photos/moriza/126238642/
  8. 8. http://flickr.com/photos/moriza/175599244/
  9. 9. http://flickr.com/photos/moriza/175599316
  10. 10. http://flickr.com/photos/azrehman/357399358/
  11. 11. http://flickr.com/photos/bruceley/199457887/
  12. 12. http://flickr.com/photos/mmoorr/348607373/
  13. 13. http://flickr.com/photos/kristi-san/37526972/
  14. 14. http://flickr.com/photos/dhbress/87105370/
  15. 15. http://flickr.com/photos/flickfamily/211470875/
  16. 16. Context <ul><li>The mobile web browser is seeking information (often), yes, but most likely this person is looking for the answers to questions and not for a long involved reading experience. </li></ul><ul><li>They want facts: addresses, movie times, support </li></ul><ul><li>They want access to their own information. </li></ul><ul><li>This is Thomas Vander Wal’s “come to me web” in action. </li></ul>
  17. 17. http://flickr.com/photos/timcaynes/427589206/
  18. 18. Emerging Patterns <ul><li>Mobile applications are also establishing some expectations among users. </li></ul><ul><li>Menu choices are often presented as vertical lists, usually with numerical accesskeys to provide shortcuts from the device's keypad. </li></ul><ul><li>Working with these emerging standards makes sense when possible. </li></ul>
  19. 19. A Series of Choices <ul><li>The mobile IA and interaction design process requires a number of either/or choices. </li></ul><ul><li>There is no single right/wrong answer. </li></ul><ul><li>“ It depends.” </li></ul><ul><li>But each choice involves a tradeoff, so you need to know what you’re buying and what you’re spending. </li></ul>
  20. 20. Go Mobile? <ul><li>The first decision concerns whether to build for the mobile web at all. </li></ul><ul><li>Not every website is useful or necessary or makes sense for mobile users. </li></ul><ul><li>The trend, however, is to find mobile uses for most web presences and services. </li></ul><ul><li>As always, consider context. If your site or application makes sense on the mobile web, which parts of it belong there. Which content? Which features? </li></ul>
  21. 21. One site or two? <ul><li>Can you build a single site that will work perfectly well in both contexts? </li></ul><ul><li>Should you? </li></ul><ul><li>Does all the “stabile” content belong in the mobile context? </li></ul>
  22. 22. One Site <ul><li>Pros </li></ul><ul><li>Build once, display many. </li></ul><ul><li>Avoid redundancy </li></ul><ul><li>No synching or version issues with maintenance </li></ul><ul><li>Avoid redundancy </li></ul><ul><li>Cons </li></ul><ul><li>Requires strategy and technical solution for rendering well in each context. </li></ul><ul><li>Involves serving up content that may not fit the mobile context </li></ul><ul><li>Involves serving up design elements that may not fit the mobile context </li></ul>
  23. 23. Two Sites <ul><li>Pros </li></ul><ul><li>You can fine-tune the content and design for each context </li></ul><ul><li>Cons </li></ul><ul><li>Maintenance challenges </li></ul><ul><li>Findability issues (or redirection strategy needed) for mobile users </li></ul>
  24. 24. One-Site Subchoices <ul><li>Do you try to manage the presentation differences entirely with CSS and the DOM… </li></ul><ul><li>… or do you use browser-sniffing to serve up different content? </li></ul><ul><li>Will the same content suffice for both experiences or must it be modified for one or the other? </li></ul><ul><li>What do you do with sidebars and how do you make the design degrade gracefully (or enhance progressively) to support the jumble of form factors, mobile operating systems, and browsers that support different subsets of the prevailing standards </li></ul>
  25. 25. http://flickr.com/photos/glsims99/124769065/
  26. 26. http://flickr.com/photos/ross/109119612/
  27. 27. http://flickr.com/photos/mikedefiant/336578542/
  28. 28. Tailoring the Navigation <ul><li>Limit categories to 5 </li></ul><ul><li>Up to 10 links can have numerical accesskeys </li></ul><ul><li>Minimize the number of levels of navivgation </li></ul><ul><li>Don’t be afraid to reorder the site categories by priority </li></ul><ul><li>Make telephone numbers links: </li></ul><ul><li><a href=&quot; tel:+19995551212 &quot;> +1 999 555-1212 </a> </li></ul>
  29. 29. IA Matters! <ul><li>“ Be prepared to invest some time or hire an IA to [make clickstream diagrams] for you. You'll spend more time on that than on the actual design” </li></ul><ul><li>- Brian Fling, Blue Flavor </li></ul>
  30. 30. And what about .mobi? <ul><li>“ The people that designed .mobi were smoking crack. ” </li></ul><ul><li>- Tantek Çelik </li></ul>
  31. 31. A Case Study <ul><li>http://www.america.htc.com/mobile/ </li></ul><ul><li>HTC manufactures about 80% of the Windows Mobile devices in the US market. </li></ul><ul><li>HTC is a Taiwanese based company (“High Tech Computer”) </li></ul><ul><li>Extractable redesigned their website </li></ul>
  32. 32. america.htc.com
  33. 33. america.htc.com/mobile
  34. 34. Our Choices <ul><li>Mobile site? Yes, required </li></ul><ul><li>One site or two? </li></ul><ul><li>- Initial decision: One site </li></ul><ul><li>- For the re-launch: Two sites </li></ul><ul><li>- Long term: One site </li></ul><ul><li>.mobi? Kinda… </li></ul>
  35. 35. One-Site Strategy <ul><li>Explored and rejected CSS magic </li></ul><ul><li>Researched and adopted mobile-savvy CMS </li></ul><ul><li>IA of mobile site a subset (+) of the web site </li></ul><ul><li>Reduced content on most pages </li></ul><ul><li>Minimized images in terms of size and weight </li></ul><ul><li>Stripped out sidebar content </li></ul><ul><li>Rendered navigation as vertical lists </li></ul>
  36. 36. Two-Site Fallback <ul><li>Negotiations between client and vendor dragged on and threatened launch date </li></ul><ul><li>We were already building a prototype of the mobile site </li></ul><ul><li>We launched with two separate sites built from the same core content, and no CMS </li></ul><ul><li>We planned to migrate, with web-only and mobile-only content flagged separately </li></ul>
  37. 37. The Web Sitemap
  38. 38. Web Sitemap Detail
  39. 39. Mobile Sitemap Unique mobile-site content
  40. 40. Mobile Sitemap Detail Unique mobile-site content
  41. 41. A Web Wireframe
  42. 42. A Mobile Wireframe
  43. 43. Usability Testing <ul><li>We brought in users with differing levels of familiarity with smartphones </li></ul><ul><li>We had them visit the site on a laptop and the mobile site ona 3125 (flip phone) or 8125 (sliding qwerty). </li></ul><ul><li>They found the mobile site easier to use and (this surprised us) easier to read: “…fewer distracting graphics” </li></ul>
  44. 44. See Also <ul><li>http://blueflavor.com/sxsw2007/ </li></ul><ul><li>(Brian Fling’s presentation from SxSW) </li></ul>
  45. 45. thank you Christian Crumlish Yahoo! Pattern Detective Director IT/Web Infrastructure, IA Institute

×