mobile information architecture
TRANSCRIPT
Mobile Information Architecture
Designing Experiences for the Mobile Web @ IA Summit 2007
A Mobile Web?
http://flickr.com/photos/petitecorneille/257453343/
A Mobile Web?
Coming of age
Becoming affordable
Escaping the limitations of WAP 1.0
Existing alongside mobile apps and texting
http://flickr.com/photos/
pitifulpussycat/19301063/
Profoundly DifferentBut 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.
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/
ContextThe 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.
http://flickr.com/photos/
timcaynes/427589206/
Emerging PatternsMobile 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.
A Series of ChoicesThe 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.
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?
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?
One SiteProsBuild once, display
many.
Avoid redundancy
No synching or version issues with maintenance
Avoid redundancy
ConsRequires strategy and
technical solution for rendering well in each context.
Involves serving up content that may not fit the mobile context
Involves serving up design elements that may not fit the mobile context
Two SitesProsYou can fine-tune
the content and design for each context
ConsMaintenance
challenges
Findability issues (or redirection strategy needed) for mobile users
One-Site SubchoicesDo 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
http://flickr.com/photos/
glsims99/124769065/
http://flickr.com/photos/ross/109119612/
http://flickr.com/photos/
mikedefiant/336578542/
Tailoring the NavigationLimit 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>
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
And what about .mobi?
“The people that designed .mobi were smoking crack.”
- Tantek Çelik
A Case Studyhttp://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
america.htc.com
america.htc.com/mobile
Our ChoicesMobile site? Yes, required
One site or two?
- Initial decision: One site
- For the re-launch: Two sites
- Long term: One site
.mobi? Kinda…
One-Site StrategyExplored and rejected CSS magicResearched and adopted mobile-savvy CMSIA of mobile site a subset (+) of the web site
Reduced content on most pagesMinimized images in terms of size and weight
Stripped out sidebar contentRendered navigation as vertical lists
Two-Site FallbackNegotiations 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
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 TestingWe 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”
See Also
http://blueflavor.com/sxsw2007/
(Brian Fling’s presentation from SxSW)
thank you
Christian CrumlishYahoo! Pattern Detective
Director IT/Web Infrastructure, IA Institute