Imagine Cup 2008

Interface DesignRound 1

Team FilipeFreitas

Green Transportation Routing

The traditional approach: boring!Note: i made this interface just for this!

The multitouch aproach!

All interactions are made with finger touch on screen, like Microsoft

Surface.

SD

These icons select which transportation means are to be processed.

These dragable pins select the source (S) and destination (D) locations.

The Go button. It calculates the “greenest” route.

SD

The map is dragable. It can be panned, zoomed in and out, just like Microsoft Surface.

SD

Let’s go from Porto to Aveiro.

We have to drag the S pin over Porto.

We have to drag the D pin over Aveiro.

S

D

I desire to travel by train. It’s more ecological.

I’ll just press the train icon to include the train paths on the router processor.

S

D

Coloured icons means that they’re selected.

Let’s click the Go button to find out our route.

S

D

We have a route!

Notice the colour. It’s the same as the train icon.

The path colour indicates which transportation mean will be used.

Remember that a path may have various transportation means, thus various path colours along the way.

S

D

A few tweaks can be made. We can add sound and animations (i didn’t).

We can reduce the icon size when not in use and enlarge them when we hover them. An example (a bad one sorry).

Thank you for reaching this far.I hope you enjoyed my idea.