Rethink the Browser

At Mozfest, I facilitated a session called, Rethink the Browser. We imagined new ways to peek beyond the surface of a web site to enable smarter, safer browsing on the mobile web. This excellent group generated a lot of ideas, in part focusing on data usage — a costly and limited resource for many people around the world. The problem: we don’t know how much data we have used until after we use it. We designed an intervention that gives users more information before they visit a site, and agency to preserve their bandwidth.


Using bookmarks and top sites listed in Firefox Mobile, we indicate whether each site is more or less resource intensive (red to green in this mockup). Clicking this icon, users can set a preference to view the site with placeholders for images, videos, etcetera. Users could opt-in to load and view each item only when necessary.

The idea in this mockup meets an important need for many users in the FirefoxOS market. While we need a bit more work to improve the indicators and interaction, and to map the relative scale of resources and bandwidth, the design provides a strong user-first feature that could differentiate Firefox from other mobile browsers.

A big thanks to everyone who participated in the session: @tomsharmanweb, @roderick_tan, @Paddy_Cole, @11thMe, @mepartoconmigo, @AviKarnani. (If I’m missing your link, drop a comment below or ping me on twitter: @mw)

Anyone can contribute with comments on the design.

It’s all relative

firefox-page-size-indicatorsData use is relative. A small site for some users might be a huge burden for others with less network access. The weight of pages should be relative to each user, calculated based on typical daily data usage and average page sizes. This should be indicated simply as small, medium, and large to make the information easy to digest and utilize.

I used color in the mockup above, but an icon like one on the right would probably work better.



firefox-quick-load-demofirefox-bookmark-bandwidth-xlThe ideal preference for large sites might be granular control over features, or a more simple quick load setting as designed above. Either way, the browser would load images and other items with a placeholders. A user could click any one to load that item. On the left, we see placeholders on a website. On the right, we see how bookmarks could look on FFOS 2.0. I’m curious how this might translate to 2.1’s design for top sites.



The group shared a few other ideas, some more feasible than others.

progress-barThe browser’s progress bar could be used to not only indicate the page load (left to right), but also show the overall data usage (bottom to top). Over time, a user would be very aware as they approached their limit without the need to dig through other screens and stats.

The group also discussed a platform for anonymously sharing usage stats. This would allow the browser to ping a server and anticipate a page’s size before loading it. This approach would be much more technically challenging, particularly to maintain privacy. But, it suggests an interesting social solution for more informed data usage and control.

Thanks again for everyone who contributed toward this effort. Keep in touch to help see these ideas refined and realized.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment moderation is enabled. Your comment may take some time to appear.