Mobile Information Architecture

Slide 1: Mobile Information Architecture Designing Experiences for the Mobile Web @ IA Summit 2007

Slide 2: A Mobile Web? http://flickr.com/photos/petitecorneille/257453343 /

Slide 3: A Mobile Web? Coming of age Becoming affordable Escaping the limitations of WAP 1.0 Existing alongside mobile apps and texting

Slide 4: http://flickr.com/photos/pi tifulpussycat/19301063/

Slide 5: Profoundly Different But the mobile interface is still profoundly different from the desktop/laptop interface. It's not just a matter of size and space limitations. The context is different. The desktop and even the laptop are fundamentally stolid. You move around them and stay anchored to them. The mobile web comes with you everywhere.

Slide 6: http://flickr.com/photos/r klawton/400751464/

Slide 7: http://flickr.com/photos/ moriza/126238642/

Slide 8: http://flickr.com/photos/ moriza/175599244/

Slide 9: http://flickr.com/photos/ moriza/175599316

Slide 10: http://flickr.com/photos/a zrehman/357399358/

Slide 11: http://flickr.com/photos/b ruceley/199457887/

Slide 12: http://flickr.com/photos/ mmoorr/348607373/

Slide 13: http://flickr.com/photos/k risti-san/37526972/

Slide 14: http://flickr.com/photos/d hbress/87105370/

Slide 15: http://flickr.com/photos/fli ckfamily/211470875/

Slide 16: Context 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. They want facts: addresses, movie times, support They want access to their own information. This is Thomas Vander Wal’s “come to me web” in action.

Slide 17: http://flickr.com/photos/ti mcaynes/427589206/

Slide 18: Emerging Patterns Mobile applications are also establishing some expectations among users. Menu choices are often presented as vertical lists, usually with numerical accesskeys to provide shortcuts from the device's keypad. Working with these emerging standards makes sense when possible.

Slide 19: A Series of Choices The mobile IA and interaction design process requires a number of either/or choices. There is no single right/wrong answer. “It depends.” But each choice involves a tradeoff, so you need to know what you’re buying and what you’re spending.

Slide 20: Go Mobile? The first decision concerns whether to build for the mobile web at all. Not every website is useful or necessary or makes sense for mobile users. The trend, however, is to find mobile uses for most web presences and services. 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?

Slide 21: One site or two? Can you build a single site that will work perfectly well in both contexts? Should you? Does all the “stabile” content belong in the mobile context?

Slide 22: One Site Cons Pros Requires strategy and Build once, display many. technical solution for rendering well in each Avoid redundancy context. No synching or version issues Involves serving up content with maintenance that may not fit the mobile context Avoid redundancy Involves serving up design elements that may not fit the mobile context

Slide 23: Two Sites Pros Cons You can fine-tune the content Maintenance challenges and design for each Findability issues (or context redirection strategy needed) for mobile users

Slide 24: One-Site Subchoices Do you try to manage the presentation differences entirely with CSS and the DOM… …or do you use browser-sniffing to serve up different content? Will the same content suffice for both experiences or must it be modified for one or the other? 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

Slide 25: http://flickr.com/photos/gl sims99/124769065/

Slide 26: http://flickr.com/photos/r oss/109119612/

Slide 27: http://flickr.com/photos/ mikedefiant/336578542/

Slide 28: Tailoring the Navigation Limit categories to 5 Up to 10 links can have numerical accesskeys Minimize the number of levels of navivgation Don’t be afraid to reorder the site categories by priority Make telephone numbers links: <a href="tel:+19995551212">+1 999 555-1212</a>

Slide 29: IA Matters! “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” - Brian Fling, Blue Flavor

Slide 30: And what about .mobi? “The people that designed .mobi were smoking crack.” - Tantek Çelik

Slide 31: A Case Study http://www.america.htc.com/mobile/ HTC manufactures about 80% of the Windows Mobile devices in the US market. HTC is a Taiwanese based company (“High Tech Computer”) Extractable redesigned their website

Slide 32: america.htc.com

Slide 33: america.htc.com/mobile

Slide 34: Our Choices Mobile site? Yes, required One site or two? - Initial decision: One site - For the re-launch: Two sites - Long term: One site .mobi? Kinda…

Slide 35: One-Site Strategy Explored and rejected CSS magic Researched and adopted mobile-savvy CMS IA of mobile site a subset (+) of the web site Reduced content on most pages Minimized images in terms of size and weight Stripped out sidebar content Rendered navigation as vertical lists

Slide 36: Two-Site Fallback Negotiations between client and vendor dragged on and threatened launch date We were already building a prototype of the mobile site We launched with two separate sites built from the same core content, and no CMS We planned to migrate, with web-only and mobile-only content flagged separately

Slide 37: The Web Sitemap

Slide 38: Web Sitemap Detail

Slide 39: Mobile Sitemap Unique mobile- site content

Slide 40: Mobile Sitemap Detail Unique mobile- site content

Slide 41: A Web Wireframe

Slide 42: A Mobile Wireframe

Slide 43: Usability Testing We brought in users with differing levels of familiarity with smartphones We had them visit the site on a laptop and the mobile site ona 3125 (flip phone) or 8125 (sliding qwerty). They found the mobile site easier to use and (this surprised us) easier to read: “…fewer distracting graphics”

Slide 44: See Also http://blueflavor.com/sxsw2007/ (Brian Fling’s presentation from SxSW)

Slide 45: thank you Christian Crumlish Yahoo! Pattern Detective Director IT/Web Infrastructure, IA Institute