Mobile Information Architecture

1
Mobile Information Architecture

• Designing Experiences for the Mobile Web
• _at_ IA Summit 2007

2
A Mobile Web?

• http//flickr.com/photos/petitecorneille/257453343
  /

3
A Mobile Web?

• Coming of age
• Becoming affordable
• Escaping the limitations of WAP 1.0
• Existing alongside mobile apps and texting

4
http//flickr.com/photos/pitifulpussycat/19301063/
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.

6
http//flickr.com/photos/rklawton/400751464/
7
http//flickr.com/photos/moriza/126238642/
8
http//flickr.com/photos/moriza/175599244/
9
http//flickr.com/photos/moriza/175599316
10
http//flickr.com/photos/azrehman/357399358/
11
http//flickr.com/photos/bruceley/199457887/
12
http//flickr.com/photos/mmoorr/348607373/
13
http//flickr.com/photos/kristi-san/37526972/
14
http//flickr.com/photos/dhbress/87105370/
15
http//flickr.com/photos/flickfamily/211470875/
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 Wals come to me web in
  action.

17
http//flickr.com/photos/timcaynes/427589206/
18
Emerging Standards

• 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.

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 youre buying and what youre
  spending.

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?

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?

22
One Site

• Pros
• Build once, display many.
• Avoid redundancy
• No synching or version issues with maintenance
• Avoid redundancy

• Cons
• Requires 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

23
Two Sites

• Pros
• You can fine-tune the content and design for each
  context

• Cons
• Maintenance challenges
• Findability issues (or redirection strategy
  needed) for mobile users

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

25
http//flickr.com/photos/glsims99/124769065/
26
http//flickr.com/photos/ross/109119612/
27
http//flickr.com/photos/mikedefiant/336578542/
28
Tailoring the Navigation

• Limit categories to 5
• Up to 10 links can have numerical accesskeys
• Minimize the number of levels of navivgation
• Dont be afraid to reorder the site categories by
  priority
• Make telephone numbers links link phone numbers
• lta href"tel[phone]"gt1 999 555-1212lt/agt

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

30
And what about .mobi?

• The people that designed .mobi were smoking
  crack.
• - Tantek Çelik

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

32
america.htc.com
33
america.htc.com/mobile
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

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

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

37
The Web Sitemap
38
Web Sitemap Detail
39
Mobile Sitemap
Unique mobile-site content
40
Mobile Sitemap Detail
Unique mobile-site content
41
A Web Wireframe
42
A Mobile Wireframe
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)

44
See Also

• http//blueflavor.com/sxsw2007/
• (Brian Flings presentation from SxSW)

45
thank youChristian CrumlishYahoo! Pattern
DetectiveDirector IT/Web Infrastructure, IA
Institute