Thursday, August 03, 2006
Wireframes of Each Page Type
Wireframe of the introductory splash screenAs 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.
Wireframe of the homepage 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.
Wireframe of part of the mapIn 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.
Wireframe of the pop-up window showing the details of the placeDirectory Structure
Sitemap
There are links to six different sections in the main menu of the site.
- About: what the website is all about, what its goals and purposes are, who intended users are, how the site was created or implemented.
- Interactive map: detailed explanation can be found in the section about “Wireframes of Each Page Type”.
- Advertising: the map currently provides some, but not all, of recognizable places of HCMC. People who want to put their business on the map are encouraged to advertise on our site. They will be charged a fee.
- Contact: this page is for questions, comments, inquiries, and whatever else. The users can use the form on this page to get in contact with us.
- Site credits: who created the website, individual responsibilities for the project, copyright issues, where the information comes from.
- Help: instructions on how to navigate through the website.
