« Portfolio

Prototype (Balsamiq Mockup), Filter drawer for mapped data


A prototype made in Balsamiq Mockups for a map-based, mobile app that is intended to support dynamic queries and results exploration (as described by Schneiderman). The then-standard webOS floating heading (here, “Locations”) is elaborated with a magnifying glass and a “Filters” section. Each of those summon translucent dropdown panels.

My process often goes from a content model to a paper sketch to a prototype made in Balsamiq Mockups to a set of prototypes in Balsamiq Mockups (to show an scenario of use or an interaction flow). This is an example from the Balsamiq Mockup prototype stage, fleshing out in greater fidelity what was sketched earlier.

This is the map screen of a mobile app on which geographically-based classified ads are mapped. The interaction goal here is to allow useful default filters to be in effect, but to also allow dynamic filtering and real-time exploration of the set of results.

Taking inspiration from Schneiderman’s “Dynamic queries, starfield displays, and the path to Spotfire” work, the design uses panels of manipulable filters that are translucent to allow users to see the effects of real-time manipulation of those filters on the result set. For reasons of space, those filter panels are not normally visible, but can be made visible by tapping a visible drop-down target (labeled “Filters”, of course), balancing the competing constraints of real-estate, occlusion, and less than constant usage.

This is a sketch from a personal project, a mobile app intended as an intelligent DVR for real-time streams of geographically based mobile ads. Other stages of that project include a content model for this screen and a paper sketch of this page. A write-up of this project as a portfolio page is forthcoming, but you can download the 21 page report now.

Comments are closed