The 3 Turtles

An introductory splash screen is displayed when the site first loads. This page provides a link to the Flash plug-in. In case the user’s browser doesn’t have Flash player 8, he/she can have it auto-detect the plug-in. At this very first page, usually there are options allowing the user to choose either a text-only version or a flash version of the website. However, it is not necessary to create a text-only version of this website to gain accessibility. Since the website is mostly about an interactive map of HCMC showing places that would be of tourist interest, there is no point trying to provide just a standard list of places. The Yellow Pages can do that better.

As soon as the user clicks on “ENTER HERE”, a pop-up opens. If the user is using a pop-up blocker, he/she will get a notice saying that the pop-up has been blocked. In order to view this site correctly, any pop-up blocking software must be switched off and then the user can re-enter the site. A short movie clip (or an animated intro) will be played before it enters the main menu for the site. There is a link under the intro so the user can skip the intro if they want.

The setting is laid in a café along a street in HCMC, where tourists meet. As seen in the above image, there is a table with several items on it. The scene in the background shows the surroundings of the place. Thus, the homepage tries to simulate the experience of a person sitting at a table in some café in HCMC. The table is strewn with a city map, a mobile phone, a digital watch, books, newspapers, a calendar, some pens, a mug of coffee, a spoon, a dish, scrap papers, leaflets, the menu, and a glass of ice cream having a little decorative umbrella on top of it. These are metaphors which help users navigate to different sections of the site. As you mouse over the object, it is animated and a caption is displayed, telling you where it would bring you to if it is clicked. Not all the objects on the table are linked to somewhere on the site, however. Some are just there for fun. Also, random noises can be heard in the background, including passing traffic, people talking, birds chirp, phone rings, and some other sounds. In the bottom right corner of the screen is a “Help?” tab and in the opposite corner is a “Site Credits” tab. These tabs are always there and do not change when passing between links.

In the main menu of the site, there is a link to the map of HCMC. Above is the close-up view of that map. A full view of the map including all the districts of the city is displayed when it is initially opened. There are some tools, located at the bottom right hand side corner of the screen, which help the user to navigate through the map. The zoom-in tool, which looks more like a magnifying glass with a plus sign in its center, is used to zoom in or see a magnified view of the map. The zoom-out tool, which is a magnifying glass with a minus sign in its center, is used to zoom out the map or to come back to its original viewing %. The user can use these two tools to zoom in to get a closer look at some districts on this map or to zoom out to get a wider view. At the maximum zoom-in level, the user can get a general view of one district as in Figure 5. The maximum zoom-out level returns the initial view of the map. Each click can only zoom out or zoom in one level at a time. The zoom-out or zoom-in tool becomes unavailable when the maximum zoom-out or zoom-in level is reached, respectively. There is another tool called the hand tool which is used for panning the map. The user can use this tool to drag in the direction in which he/she wants the map to move. To the right of the map is the legend, which shows what the icons on that map mean.

At this stage, the user can only see a vague image of the streets and their name, and the icons of the places but cannot click on any of them to see more information. In order to do so, the user needs to click on the district from the bottom box corresponding to where they want to go to. That particular district will be attractively presented and important places are clearly identified. All icons are replaced with clickable 3D-like objects to represent physical places. As the user mouses over the object, it is animated and a caption is displayed, telling him/her what the place is and its address. Again, the user can always use the zoom tools and the hand tool to navigate around the district. Or he/she can activate rollovers for the entire navigation. What that means is the user will explore the district by pointing the cursor where he/she wants it to go. If the user wants to know more about a certain place, he/she can click on it and then a pop-up window filled with details on the selected place is displayed as in the below figure. A link for “More Info” is also presented, which redirects the user to the website of the place (if it is available).

The legend, the navigation tools, and the list of all districts are always there when moving from place to place within the map.

Posted by Hang Tran on Thursday, August 03, 2006 at Thursday, August 03, 2006 | Permalink