filipe freitas on imagine cup2 2008
TRANSCRIPT
![Page 1: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/1.jpg)
Imagine Cup 2008
Interface DesignRound 1
Team FilipeFreitas
Green Transportation Routing
![Page 2: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/2.jpg)
The traditional approach: boring!Note: i made this interface just for this!
![Page 3: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/3.jpg)
The multitouch aproach!
![Page 4: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/4.jpg)
All interactions are made with finger touch on screen, like Microsoft
Surface.
![Page 5: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/5.jpg)
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.
![Page 6: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/6.jpg)
SD
The map is dragable. It can be panned, zoomed in and out, just like Microsoft Surface.
![Page 7: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/7.jpg)
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.
![Page 8: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/8.jpg)
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.
![Page 9: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/9.jpg)
S
D
Coloured icons means that they’re selected.
Let’s click the Go button to find out our route.
![Page 10: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/10.jpg)
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.
![Page 11: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/11.jpg)
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).
![Page 12: Filipe Freitas on Imagine Cup2 2008](https://reader036.vdocuments.site/reader036/viewer/2022070520/58f182f11a28ab565e8b4611/html5/thumbnails/12.jpg)
Thank you for reaching this far.I hope you enjoyed my idea.