search page
From Prototype to Design
This series follows the development of a web/mobile application from beginning to final design. Started May 2011.
LegendList: Desktop Updates and Mobile Styles (Rapid Prototypes II)
Since the last post, the LegendList prototype has evolved a bit. We’ve decided to go with a drill-down menu that appears when the Activities search box is hovered and not with a multi-level main menu as we’d previously planned. We feel this approach makes for a more natural and effortless introduction to available activities. Seems more right, but time will tell.
By not having the big menu along the top, we’re primed for a mobile version – an important project requirement. So let’s get to it.
The above is how the prototype first appeared on an iPhone and without a mobile-optimized style sheet. It looks… well… shrunk. Not very mobile friendly.
My first goal was to upsize and reformat. A single centered column would also be appropriate. I didn’t want to create a completely separate mobile version of the page, so I worked up a quick stylesheet for screens up to 480px wide.
Decent start. Since the headers would likely become navigation bars in future iterations, I anchored them to the top. Afterwards I removed the rounded box from the search options and made the fields larger and more in the flow.
Okay, that’s more like it, but things aren’t yet perfect. Drill-down is a bit visible if you look close enough, there’s an odd line beneath the labels, and if I press “Search” and then Back on Safari, the stylesheet freaks out.
Even with it’s flaws, we must remember this is a prototype and it doesn’t need to be perfect. Once we get a better of understanding of what works, what doesn’t, and the general personality of the app, we’ll be better prepared for a proper design.
So let’s move on now to search results and activity pages.
Inlteliegnce and simplicity – easy to understand how you think.