iPhone website design ideas for a hierarchical site?

July 17, 2009 5:15 PM

iPhone website design ideas for a hierarchical site?

I want to make an iPhone version of a listings website. I'm confident about doing the HTML/CSS/Javascript. It's the "listings" bit that's a bit problematic.

The site is very much based on a hierarchical scheme, as in, you choose Springfield, then "Food and Drink", then "Bars" then "Dives" to drill down to Moe's Tavern.

I'm thinking that all of that is normally done with the horizontal space of a bigger screen in a conventional website -- breadcrumbs, the use of a folder-tree left nav using indentation and so on.

Leaving aside "have a very smart search function" how would you approach this?

Suggestions so far include:

• an AJAX "wizard" approach as in "I'm looking for [dive] [bars] in [Springfield] where the brackets represent menus launched from buttons
• buttons which jump from one branch to another, as in "show me the same category level, only in Shelbyville"

How would you approach this? Am I thinking about it all wrong? Got a good example of a similar problem solved for the iPhone screen?

Oh and technical question -- given access to users' location, can I say "looks like you're in Shelbyville" to auto-fill that stratum of the data? If I come up with a lat-long polygon?

posted by AmbroseChapel to computers & internet (6 comments total)

If you want an example, Mobile MetaFilter mimics the iPhone's UINavigationController interface that is used in most apps that require a hierarchical, or "drill-down" interface, all the way to the navigation widgets.
posted by Blazecock Pileon at 5:25 PM on July 17

Interesting, thank you, but I'm not so concerned about how to make it look iPhone-native as how to make it easily browsable/navigable. The users won't be highly-motivated "how do I turn on my WiFi?" types, they'll be the more casual, "I'm on the corner of Foo and Bar, and I wouldn't mind a beer" crowd, then when they're having their beer, "Oh yes, where can I buy flowers for my mother on the way home?" There are going to be lots of options, but it shouldn't feel like they have to work too hard to flip between them.
posted by AmbroseChapel at 9:30 PM on July 17

I think the Mobile MeFi is just Joe Hewitt's template (sure looks like it) but that's not a bad thing. It's simple and works pretty well.

The important thing, Ambrose, is that "sliding list view" is exactly the UI standard way to navigate hierarchical information on an iPhone. It's instantly-understandable and accessible by any iPhone user.

You have drill-down, hierarchical information. There's a perfect interface for that.

Don't reinvent the wheel on this one.
posted by rokusan at 1:26 AM on July 18

Again, I'm not sure you've understood what I'm looking for. An interface which looks like you're controlling the iPhone interface isn't necessarily the right interface for controlling a website!

I would like to hear some suggestions for ways of doing this, for instance: tabs, concertinas, carousels, endless scrolls, drop-down menus and so on.

I appreciate that there exists a conventional interface for navigating hierarchical information using the iPhone OS, and that websites may choose to imitate this. But all information isn't hierarchical in one way or another, and simply having arrows pointing left to go one level deeper and arrows pointing right to go back isn't the only way -- it's not how Wikipedia does it, for instance, or Google Reader or Facebook.
posted by AmbroseChapel at 2:30 AM on July 18

If you're familiar with how iPhone apps are put together, perhaps you could merge the UINavigationController interface for drilling down, with a UITabController or UIToolbar interface on "end result" pages (mimicking all of this through HTML/CSS/JS).

The tab controller or toolbar offers buttons that, among other options, can open a modal view that switches to other cities, for example.

You can do what you're asking, using iPhone human interface guidelines. If you want to make an iPhone-like app, perhaps look through Apple's iPhone HIG document for more specifics and images.
posted by Blazecock Pileon at 3:05 AM on July 18

Interesting, thanks again.
posted by AmbroseChapel at 3:44 PM on July 18