Organizing Mobile
Facebook recently redesigned their mobile web experience and
actually reduced the number of navigation options. If you don’t count
the Top News and Most Recent filters on their news feed, they cut the number of
navigation choices in half (from ten to five). That’s a pretty good start!
The examples from YouTube and ESPN both emphasize
content over navigation, but they handle the ability to pivot and explore the
rest of their site through navigation differently. YouTube provides a shortcut
to a full screen experience dedicated to getting around the site.
This approach requires you to actively seek out navigation options and takes
you out of context (to a separate page) when you do. You also need to know that
the grid icon in YouTube’s header means “navigation menu, please.”
ESPN has a more clearly labeled “Menu” button in their
header that reveals an extensive (and multi-leveled) navigation list directly
below it. This approach allows you to stay on the current page when
considering where to go next. No need to move to and load a separate page. ESPN
also repeats their navigation options in a menu at the bottom of most pages.
Controls at the bottom of the screen are easier to interact
with one-handed and present people with choices and ideas on what to do next
when they get to the end of a screen. YouTube’s design lacks these pivots at
the end of their pages; when you get to the bottom, there’s nowhere left to go.
Though bottom menus are useful for further exploration, they
probably shouldn’t just duplicate a menu that can be found elsewhere. Instead,
a top-level menu button can simply link people to a navigation list on the
bottom of a mobile webpage (after the content). We recently used this approach
on the Bagcheck mobile web experience.
A simple anchor link in the site’s header jumps people to
navigation options at the bottom of the page. Having this list present at the
bottom of content pages allows people to pivot and explore other parts of the
site. Especially when they come directly to a content page and may not be
familiar with the rest of what the site offers.
The menu on the bottom of Bagcheck pages also has a “top”
link to bring people back up to the start of a page if they want to return to
the content they were just viewing.
This design uses a minimum amount of navigation elements
(just a single link at the top), gives people an opportunity to pivot and
explore when they get to the end of content, doesn’t duplicate the content of
another menu, and (best of all) only requires a simple anchor link to work.
That’s right: no fancy JavaScript, overlays, or separate navigation pages to
maintain—just an anchor that links to the bottom of the page. That’s like HTML
0. (Which I’ve heard works in most browsers except Internet Explorer.)
Content pages on Bagcheck also have unique related
navigation lists for deeper exploration. These navigation options
allow people to immerse themselves in further information about a single topic
if they choose. Or they can simply use the global navigation options below to
pivot to a different area of the site.
Contextual navigation options are also useful for tasks. In
the Gmail mobile web experience (Fig 4.11), a contextual menu of actions can be
accessed from the top of the screen. Because these actions are directly related
to the current email message being shown, putting them at the bottom of a web
page wouldn’t be very efficient. Instead, they are always present at the top
and thereby instantly accessible.
Tidak ada komentar:
Posting Komentar