iggli.com

Ahh the iphone. That lovely sliding interface has infected the web. Here at iggli, we’re doing the “iphone slide” whenever we can. One of our current development projects is to try to capture a user’s RSVP to an invitation with a similar “sliding” interface technique. By using the “slide” we can drive the user to more screens to try to gather more information from them as to why they’re in, out, maybe without overwhelming them with a huge questionnaire up front.

Depending on the user clicking "I'm in", "Out", or "Maybe" the appropriate next screen slides in.

For instance, a user might RSVP for Donovan Frankenrieghter and say “I’m OUT!”…that’s great information…but WHY? Do you hate Donovan or do you just already have plans? It’d be great if we could capture that you really hate…I mean HATE…Donovan Frankenrieghter. So your RSVP status might be something like “I’m out. + I hate Donovan Frankenrighter”

We’ve seen some of this around the web more and more. One site that we found kinda nice was the panic.com “coda slider”. They use it to market the “coda ide”. This was developed by Niall Doherty as far as I can tell. Also, Joe Hewitt’s IUI , which attempts to mimic the native iphone TableView component is also useful.

This is how the typical slide viewer works

A typical slide show viewer works by having a fixed set of slides that move back and forth behind the “slide viewer”.

The slider developed by Niall Doherty works like a slideshow viewer but automagically adds a set of tabs on the top to move directly to any particular slide. It’s fun to use. And works good if you know before hand what the content is going to be.

But we need to change the content depending on what path the user takes through the process of an RSVP to an invitation. Similar to how the iphone TableView component works. For instance, the might say “I’m IN! + I already have my tickets.” or “Im IN! + I’ll get tickets for anyone that wants to go if you pay me back.” It’s kinda like choose your own adventure.

This is a grid viewer...a slide viewer on steroids!

Well, this means a decision tree or “grid” of slides backing the slide viewer. The only problem is that the “slide” is not just left to right, but up and down and sideways. That’s a little weird and doesn’t mimic the iphone “slide” which we’re trying to do.

We couldn’t find anything out of the box that supports exactly what we need…So we are building our own. Here’s the concept we’re working with right now. We want the slide to move left and right like a slide show viewer. But we want the user to drive the interface like a decision tree. So we’re combining a slide show viewer with a grid of slides.

This is a slide viewer backed by a grid of slides

So as the user selects different actions from any slide, the next slide (which may not be next to the current slide in the grid) is copied into the “on-deck” position of the slide show viewer, and then slides into view.

We’ll keep you updated on the progress and are hoping to release the code for all to use. Stay tuned.

Dehru Cromer

an iggli developer