Mozilla.com/Mobile in Mind/Challenges

From MozillaWiki
Jump to navigation Jump to search

For the 2011 Q3 "Mobile in Mind" project, the first step is to identify a list of aspects of the site which will not translate directly to mobile. This will serve as an outline for the design process, where we address each of these challenges one by one to develop reusable design patterns. We should be able to then apply these patterns to mozilla.com on the pages listed here, and get a site design that can be more easily made mobile-friendly.

Mobile in Mind Challenge List

There is no Hover on Mobile

Even if we'd like to provide this method of interaction on desktop, we need to find reliable fallbacks for mobile.

Examples

Site-Wide:

  • Main menu drop-downs operate on hover

Specific Pages:

Large Amounts of Content Won't Fit

Having too much content can bury important information, especially on a small screen.

Examples

Site-Wide Examples

  • Main menu drop-downs have too many subsections to fit, even when arranged horizontally

Specific Pages:

Content Must be Linearizable

Since the small amount of screen real estate on phones necessitates a linear browsing experience, the information hierarchy must be clear enough that making the content on a page linearized does will not confuse the user.

Horizontal Space is at a Premium

The desktop convention of scrolling downwards on webpages is even more prominent on mobile, due to the limited horizontal space available on phones when held in portrait mode. Thus, interactions that require a lot of horizontal space to function will be frustrating to use on mobile.

Examples

Specific Pages:

  • http://mozilla.com/firefox/fx - The content of the spinning wheel popup is horizontally oriented, and the panda graphic takes up a lot of horizontal space.
Retrieved from "https://wiki.allizom.org/index.php?title=Mozilla.com/Mobile_in_Mind/Challenges&oldid=329606"