BUS MAPPER

Design



Main Page
Introduction
Required data
Conceptual Models
Widgets
Specifications and low-fidelity prototype:
     - Sign-in
     - Registration
     - Sign-in as a guest
     - Main page
     - Schedule
Requirements met from the previous phase

There are different kinds of widgets used in this design. Examples of these widgets are: Menus, icons, information display, and screen display.

 Menu Design:

The menus should not have more than 7 +/- 2 items. The items will appear in alphabetical order and the menus will be structured in a way that they will have sub-menus that will display the items in the menu. The title of the menu will just be a description of the category on what the sub-menu will consist of. Each menu will have different categories, and no menu will consist of the same name or title. The division between the menu title and the sub-menu groups will be divided up in two different colors. The menu title will have a blue color. The sub-menus will have a different color than the menu title in order to distinguish between the two. The sub-menu will have a light blue color. Each sub-menu will have a dividing like between each item. We will try to minimize the number of menus per page to about 7 +/- 2 menus per page.

Icons Design:

Icons are also another kind of widget that is used in this design. The meaning of icons is cultural and context sensitive. Therefore, we tried to come up with the best representation of icons that relate to existing traditions or standards. For example, a list of icons is provided to represent different services. A usual sign for a fire station is an example of a sign with a picture of a fire truck. Therefore, when the user has recognized this icon, he/she will without a doubt know that this icon represents a fire station or something related to a fire station. When the user moves the mouse over an icon, a short synopsis of the item and what the icon represents is shown. The user will be able to click on an icon. Clicking on an icon opens another window describing the landmark Another example of an icon is the printer icon provided. This icon is usually is a symbol of printing something. By clicking on the printer icon the user will be able to view a printer-friendly version of the bus schedule and be able to print it. Other icons that are provided for the user are: a school sign, a Denny’s sign representing an eatery, Adidas, Puma and Nike all representing merchandise, a Safeway sign representing a grocery store, an H representing a hospital, a Shell sign representing a gas station and finally a dollar sign representing something to do with money (usually cost or price).

 Screen Design:

The user will have to move around between screens when using the Bus Mapper system. There will be some kind of interaction per screen. This interaction between the user and the system will consist of ways such as, choosing from menus, entering data, clicking and selecting items. Each screen is designed in such a way that it is balanced by making the background white in order to provide as much white space necessary so the user doesn’t get confused when using the system. The information provided very clear and instructive. For example, when a user decides to sign in as a guest, the first thing he/she must do is to select language from a menu that will be provided to him/her. There will be separation between items and boxes in order to make it easier for the user. The page will also become more aesthetically pleasing since different fields will be separated by different colors and lines.

 Information Display:

The information displayed to the user is always relevant at all times. There is a consistency between the information displayed.