Design of a CTA kiosk

CS422: User interface design and programming, spring 2006

Satya Popuri (spopur2 at uic dot edu)
Bharath M P (bmukka2 at uic dot edu)
Eric Ho (ericho2 at uic dot edu)

We made some major design changes to our City map screen after looking at various other designs and considering the feedback given to us through the critiques. In this map, you can see that we have used a google-maps style appraoch. The "Food", "Attractions" and "Events" buttons bring up the respective markers on the map. The Food button for example brings up the local restaurants. Each marker can be clicked to expand and reveal more info about the restaurant.
We also resolved the issue of overlapping markers by adding more zoom to the map. The zoom buttons on the top right can zoom the map in and out until the map becomes clear enough for the user. The Emergency button is fixed to stand out from the rest of the menu buttons as suggested in one of the critiques and the date, time and temperature details were removed from the scorlling marquee as they were out of place there.With the languages button we had to consider the fact the foreign language speakers are morelikely to recognize the word "English" than the word "Language". So we decided to experiment with the button named "English" rather than "Language".

This screen (and the next one) shows the maximum zoom level, and how the user can expand the restaurant markers to reveal more information like address and telphone numbers of a restaurant. Pressing on the "More Info" link would reveal restaurant menus and timings in an expanded window on top of the map. (See below for this type of interation).

This is the attractions screen. Now the Restaurant markers are removed and the major attractions around the El station are shown. Each attraction marker reveals the details about the place. The "More Info" link opens up a bigger popup window on top of the map as shown below. This way the user is not carried away somewhere else. The popup window can be closed by touching on the 'X' mark on the top right.

This screen is showing the current and upcoming events around the area. The markers behave the same way as described above. Additionally, this marker has "prev" and "next" links in case more than one event is planned at this location.