Metafilter Prototypes

MetaFilter iOS and Android Prototypes

The popular community weblog MetaFilter has cataloged the "best of the web" for over 10 years using an iconic blue layout from the era of 56K modems. I was curious about the potential for modern touchscreen enhancements.

My Approach

Frustrated by the lack of official MetaFilter apps, I launched an independent six-month project to explore the core mechanics for browsing MetaFilter discussion threads on a touchscreen and to coordinate the interaction across multiple devices.

As the design progressed, I built a working prototype in PHP to interface with MetaFilter's servers for browsing, commenting, flagging and favoriting. Once I had a functional app I began using it on a daily basis to assess its strengths and weaknesses as I iterated the design.

Over the course of the project I added support for iPad, iPhone, Android Froyo and ICS phones and Android 7-inch and 10-inch tablets, each with its own native controls.

Scroll to Top and Back

Tapping the title bar will automatically scroll to the top of any thread. Tapping the title bar again will scroll back down the page to the next unread comment. This action is useful when returning to long threads.

Tilt Scrolling

The prototypes use the built-in accelerometer to automatically scroll whenever the phone or tablet is tilted slightly.

Snap Scrolling

The thread will automatically snap to the next or previous comment with a quick swipe up or down or by tapping the bottom toolbar.

Swipe Right to Favorite / Left to Flag

Swiping a comment presents a set of options to either favorite/unfavorite the comment or flag the comment for moderator attention.

Pinch-to-Zoom Text Size

The pinch gesture adjusts the text size without disturbing the rest of the page. The Android prototypes use a double tap for zoom. Double tap on the right side of the screen to increase the text size; left side to decrease.

Thread Popover and Split View

The iPad and Android tablet prototypes include a thread snippet navigation bar with the title and first few lines of each thread. The navigation bar displays as a split view, popover or menu. These designs permit in-thread navigation.

Fullscreen Posting

The prototypes each include a fullscreen text box to provide as much space as possible for composing comments and answers. The posting interface supports the live preview feature from MetaFilter and includes a style bar for inserting HTML tags. The Android prototype introduces a smart tag function.

Moderator Voice

Fullscreen posting can be a tradeoff since it also obscures the current thread. The interface helps to restore context by displaying the most recent moderator warning or notice in a banner above the keyboard.

No Blind Links

Desktop web browsers often display the URL for a link in the status bar. Tablets require a long tap to access this information which takes more time and introduces the potential for accidental taps. The prototype addresses this problem by scanning each link in the thread and showing the domain in brackets if the link goes to an external website.