Abstract

Today, when you walk around University of Maryland College Park campus, you can find these maps with telephones besides them for visitors to look for directories and seek help. In the world like today where lots of thing are computerized, UMCP still don’t have a computer based map and information assistance system available to the public or school students physically on campus. Our goal is to develop the first generation of such system to help not only the users to find the information they need, but also simplify the process to find the information. Our system is named “Map and Information System – 1” or simply MI-1 (MI one).

This report contains the details of our system. It describes how MI-1 works in steps with screen shots of each page in our system that the users will see. The report contains information about our development process and our usability-test results. The report also describes the criteria we used to design the system, and then describes the hardware and software of the system.

Credits

Nan Zou: he does research on the topic, interface design and programming. He also wrote the conclusions for this final report and the power-point presentation.

Yu Zhai: he created the database for the MI-1 system and wrote introduction and presentation of design of the final report.

WeiKai Zhang: designed the “Restroom” option for the system, wrote development process except the usability testing part.

Andrew Yao: designed the “Nearby” option for the system, and run usability tests and wrote the usability testing process part of the final report.

Introduction

“Where is the freshman Orientation at?” that was the first question pop up in my mind when I arrive on UMCP campus for the first time three years ago. At that time, I found a map near where lot 11a used to be (the big lot11 before we have our new CS building). The map only showed a layout of the campus and nothing else. I was totally lost back then. Eventually I found where the orientation building was by asking people along the way, but lots of students arrived late due to confusion in directions. For a first time visitor of the campus, finding my way around was a very frustrating thing, and nowhere to look for help was another frustrating experience.

That was three years ago. Lots of things have changed. Dow Jones industrial average is no longer above ten thousand, G.W. Bush now is the leader of the free world (hard to imagine that’s true), the UM terps have won our first basketball national championship title, and our Computer Science department is getting a new building. Then how about the maps on campus? Well, there are still there and still leaving visitors with frustrating experiences. I have seen people stand in front of the maps wondering around and looking for help. In a world like today where lots of applications are computerized or have some kinds of computers intergraded in them, University of Maryland still don’t have a computer-based map and information system on campus to help people find information and directions around this campus. The current on campus direction system is just a map and a telephone sits next to the map. We all know that University of Maryland has a very successful computer science and computer engineering program, but we still using a system that has no computer in it, with limited information. Our computer based map and information system (we will called it MI-1 from now) will replace the current system with more information to look up, and more functions than the current one.

There are currently some commercial systems already in place today, especially on the Internet. One of the well known one is www.mapquest.com. R.R. Donnelley & Sons found MapQuest in the 1960s as a cartographic services division that was responsible for creating read maps given to gas station customers. By the 1970s, MapQuest became a leading supplier of custom maps to reference, travel, textbook, and directory publishers. In February 1996, MapQuest launched the first consumer-focused interactive mapping site on the Web, www.mapquest.com (MapQuest.com 2002). MapQuest offers a search database for users to find directions. Users only need to type in the address he/she is looking for.

Microsoft also develops another software that can help users to find directions. It is called “Streets and Trips 2002”. The software has lots of nice features. It can pin point out of the location the user is looking for in a large-scale map, and also has the ability to connect with a GPS system.

PDA or personal digital assistant is a very popular hand held device for many people. Some companies have developed map-searching programs for these little hand held computers, such as Rand McNally StreetFinder Deluxe for Palm V. These PDAs are easy to carry, but since they are very small in physical size, the PDAs’ memory sizes are also limited to at most 64MB today. Limited memory space can only contain databases with the simplest information, and sometimes this information cannot be very detailed.

The software, website and hand-held devices we just talked about above all need computers, hardware devices and Internet access, which sometimes are not available to users. And when users want to find where the computer science department is located in University of Maryland, MapQuest would not help the users to find the useful information. That’s when our system is come to the rescue.

University of Maryland has a directory option on its web site. Users also need a computer and Internet access to get information from the website. MI-1 will be placed at most convenes locations around campus for easy access by users. And all MI-1 machines is linked together and Internet ready. MI-1 also has connections with city police department and campus police for quick access. Details are explained later in the report. MI-1 has a rich database that can be upgraded easily and frequently. The database that MI-1 is using contains information for buildings on campus, department information at UMCP, faculty information, visitor parking information around UM campus, information about the nearby area and daily events at University of Maryland. With this information in the database, users can search by people’s name, office numbers, building names, and get to their destination from the users current location.

MI-1 is intergraded within a touch screen computer that provides not only the information that existing maps already have, but also the following new added features:

Software improvements

Information search

i. Directory locator that includes searching by people, telephone numbers, departments, building names, scenic spots and key words.

ii. Event locator that includes searching for all kinds of events that is in the past, currently going on or in the future. User can find events like seminars, lectures, speeches, orientations, job fairs, sports events, camps, etc.

iii. Campus map download to handheld devices or laptop

iv. University introduction

vi. Directions for all places found by above functions under real-time traffic data

Roadside assistance

i. Telephone directory to campus roadside service, campus police, AAA service and all other related services

Hardware improvements

Touch screen
Voice assistance
Connection between handheld devices and MI-1 via infrared port or USB port
Reading lights

Large amount of information for users to access is a key to a map and information system, but an easy to use interface is the key for users to be able to access the data successfully. Creating an interface that fits most users needs is our biggest challenge in our design process.

Presentation of design

In our approach of the MI-1 design, we try to stay with the “Three pillars of successful user-interface development” described in Dr. Shneiderman’s book “Designing the User Interface” as much as possible. We did research on how important such a map and information system to people who need help to find directions; we also studied some of the systems and software already in use today. After our studies of the current situation, we found that school does need a computer-based map and information system not only to help the visitors, but also show the public our school’s achievement in computer and information technology.

MI-1 is developed mainly using Visual Basic. The graphical design environment of VB can help us to develop a system that is suitable for most users. Our goal is to create a user-friendly interface for the system, and easy ability to be upgraded for future version of the system. The following transition diagram shows the screens in our design of MI-1.

Diagram 1

Diagram 2

MI-1 is a twenty-four hours live system. While no user is using it, a screen saver with logo “MI-1” and start instructions in it will be used to protect the touch screen. When users press the screen initially, the first page of the system with two main selection items will replace screen saver: information search and call for help. From this page, users can select the options they want and go down one level in diagram 1. In the above two diagrams, users can follow the black arrows to the next lower level of the system. The red arrows will take the users up to the previous page. And the green arrows allow users to access page on the same level. For example, if users choose to search information, from the “information search” level, they can select the next 8 options that are on the same level, or go back to the previous menu.

The diagrams above show how MI-1’s pages are related together. The following section will explain each screen page in detail. We will describe that how each function works and how to operate in each option in the system.

Figure 1

Figure 1 is the screen displayed while no user uses the system. By touching on the touch screen, figure one will disappear and figure 2 will be displayed for users to make selections.

Figure 2 (next page) shows the main page of MI-1. In this page, the default display is the search information option. Users can select either “Search Information” or “Call for Help”. In figure 2, “Search Information” is the selected option. Instructions about how to search different kinds of information are displayed in the instruction box near the bottom of the screen. MI-1 supports multiple languages such as English, Spanish and Chinese. Figure 3 shows the instructions in Chinese. Users can select the language display options below the instruction box to change the language displayed in the box.

There are eight selections available to the users. If users know the building’s name they are looking for, just press the “Building” button. Users can also do search by departments’ names, person’s name, office numbers. These above four search options require users to know some primary keys in order to perform the search. The next four options: “Events”, “Restroom”, “Parking”, and “Nearby” don’t require any keys. Users can just click on the thing they are looking for to get general information.

Figure 2

Figure 3

Figure 4

Figure 4 shows the “Building” search option. MI-1 users can selected the building’s name, and see the directions on the map that displayed on the bottom. Figure 5 shows when “Main Administration” building is selected, and the search result is being displayed on the map. The red triangle indicates the user’s current location, and the route shown in red in Figure 5 is the direction from the current location to the “Main Administration” building. The “Main Administration” building is shown in a red dot. User can choose two ways to store and read the search results. One is by printing out the current page and directions in text format, the other one is to send the search result to user’s personal hand held computer or PDAs. By clicking on the “Print” button, user can get a paper version of what he/she sees on the screen plus additional information such as phone numbers and step by step directions from the MI-1 machine (user’s current location) to his/her destination. Figure 6 shows the printing process of the system.

PDAs are very popular among people today. MI-1 also provides a option call “Beam”. By clicking on the “Beam” button, users will receive the text information in their hand-held computers. Figure 7 shows the beam process of the system.

In this page shown in figure 4, users can also choose operating instructions in other languages. We provide users with the options of English, Spanish, and Chinese.

Figure 5

Figure 6

Figure 7

Figure 8

Figure 8 shows the “Department” option. All the departments are listed in the list box in alphabetic order. User can select the academic department and the direction will be displayed in the map. The building’s name and the room number will also be displayed flowing on top of the map in red fonts. Figure 9 shows when “Mathematics Department” is selected and the search results are being displayed on the map. User has the same option to either get a paper print or send the results to his/her hand-held computer.

Figure 9

Figure 10 shows the “People” search option. People’s names are listed in alphabetic order. One unique operation this page has is the twenty-six letter short-cut list. The user can shorten the name list by click on the letters. When user selects a letter, let’s say “s”. Only those people whose name start with s to z will be shown in the name list. This option can give user quicker access to the person’s name he/she is looking for. Speed up the search process. In figure 11, Dr. Shneiderman’s name is being selected. The search results are being displayed on the map.

Figure 12 shows the “Event” option. Only daily events will be display in this page and user can select the event to find the location of the event.

When user searches information in one of the eight options, he/she can always go back to the previous page by clicking on the “Back” button on each page. If the user want to go back to main page or choose “Call for Help”, these options are always available to users no matter which level there are at and he/she will always has the options to switch between two same level or different level pages (screen).

Figure 10

Figure 11

Figure 12

The “Search Information” commands provide information for users to look up. If user find that the information they find is not useful to he/she, or just need further assistance. User can choose the “Call for Help” commands. A microphone and a set of speakers are hide next to the touch screen system to implement the phone system in MI-1. The following part of the report will explain the “Call for Help” option, and figures explain search process in details.

Figure 13 shows the “Call for Help” option. In this page, user can have four options to choose to perform. User can press on “Call Police” to connect with College Park police directly. In a situation of emergency, this will help the users to reach help faster. Since all MI-1 system are connected to city and campus police departments, the city police will automatically have the information of user’s current location, even if user doesn’t know the exacted address, the police will receive user’s location information from MI-1.

“Car Service” is for users with auto problems such as flat tires, jump-start, and etc. By pressing “Car Service” button, user will be connected to the department of campus parking. “Call for Help” option also has a telephone dial pad for user to call any local phone numbers. If users needs more assistance, they can just press the “Campus Directory” button, and user will be connected to (301) 405-1000 to talk with a operator. Figure 14 shows when a phone number is being dialed.

Figure 13

Figure 14

Development process

· First Design

Figure 15

Figure 15 is delicate for novice users who have never had any computer experience before. These users need step-by-step instructions to operate our Campus Information System. However, our expected users are college students and visitors so first screen design is not appropriate.

· First Design

Figure 16

Figure 16 was our second screen of the Campus Information System. The layout and design was fine but it was not perfect. It did not have a luxury outlook to attract new users. Moreover, this design has only one language, the visitors from other country can’t benefit for this visual-aidless design.

Improved Designed (Academic Design)

Figure 17

The improve design has integrated multi-language support and vivid visual aid. With this design (Figure 17), foreign visitors who don’t speak English can pick up the system easily and search for what they needed.

Improved Designed (Academic Design)

Figure 18

Figure 18 is a sub screen of our CIS; it has many other small seminary categories of options in it. All the operating buttons are fantastic. They are vivid of pictures and colors to catch user’s attention. Moreover, The buttons are big which was designed to be operated under a touch-on screen.

We have made many changes on our system interface during the developing process. These changes were based on effectiveness, frequency, eye catchy, and easy of operating. The usability has also helped us on how to change the interface to make it better. The functions are important to users but easy of operating is more important to users sometimes. A well-designed system interface encourages novice users to try out new things. Therefore, system interface design is a keystone of a system especially Campus Information System (CIS). We have gathered together and discussed to find the ways to improve our interface design. Nan Zou has spent a great amount of time and efforts to redesign the interface as we suggested. The improved version not only has more functions but also has different language supports. The result we have so far is pleased but we are still working on it to see if there are anything can be improved.

In the first design we were concentrating on the helping screen. The first screen was started with introductions to teach the user how to operate our Campus Information System. I think we under estimated our users and treated them as idiots. As we study our users, we found that our CIS users are smart. Most of our users have had computer experience and most of them know how to operator a computer with touch-screen. Spending time to give introductions on how to use a simple interface makes users feel bad and downgrade our CIS. As a result we changed our first screen to the core of our system, which eliminate the introductions and hid them into deeper screens. The core functions of CIS are search information. We have categorized the functions in groups and use it as the first screen for easy search and operating. Putting the core functions on the first screen gives the users a sense of what the system is and what it does. Moreover, it helps shorten time wasting and make the system effective. Making operating time shorter is another key feature of our system. The expected operating time of the system is about 2 minutes so smooth system operating is a concern. The short time operating strategy has gained many user supports because some of the users can’t spend too much time on the system. They just find what they need and leave. For example, searching for a nearby bathroom, under this kind of situation no one would prefer to play something fun than going to the bathroom. Comparing the old design and new design, there are dramatic differences. The outlook of the old design was boring; it did not have much color or much picture-icons. The colorless and picture less interface lost attraction to inexperience users, where we want all different kind of people to use our system. Moreover, experienced users would find our system is time consuming, not a professional CIS and lost the interest on using it. There would be a great lost if we don’t make improvement and make our CIS eye catchy.

The improved interface not only is easy to use but also has integrated many pictures on every icon to show what it is about. Using proper picture on an icon is more descriptive then just plan-text because picture illustrated-icon tells a user its functionality in a glance. A system such as CIS can take a great advantage of this design. Even thought our CIS has three different language supports but not many people understand all of these languages. Moreover the CIS user interface could be set to any of these three languages when a user arrives. So looking at the picture presented icons, a user can find out what to do or set the interface language to the one s/he understood. It’s a good idea to have multi-language support on the system but it has side effect sometimes. With our vivid graphic design we have conquered the problem and take the advantage of multi-language support power.

Usability testing process

For the usability testing, tests were performed by a variety of test subjects at different times. For the pre-testing phase, users were asked to fill out a questionnaire, asking for relevant background information about them (see below). First series of questions asked were there technical expertise and familiarity with computing systems. Some of these questions included, “How long have you been using any computers in general?”, “How often do you use utilize database systems to search for information (online or offline)?”, “How comfortable are you with using computers and systems?.”. Next, it would need to be determined if users would have any biases or unfair advantages when using the Map Information Directory system. The next series of questions would then determine if the any of the users are already familiar with the College Park campus (students, staff, faculty, and other common visitors) and whether or not such systems as databases and search engines will affect those users in any way (they may already “give up” prematurely if their previous experiences with such systems were unfavorable due to the system taking too long to access data, or users may be expecting the program to work one way and may utilize much more effort just to perform a simple task).

During the actual testing phase, users were asked to perform various tasks, such as finding certain locations on campus, finding certain people, finding valid parking spots at some that given time of the day, and even to seek more detailed information on a subject of their own interest. The users were encouraged to “talk aloud” to give us, the observers a more detailed and in depth idea of the procedure the users are using to seek perform their tasks and to provide insight on their assumptions about the system. Since the entire test subjects have used programs similar to ours in one form or another, (for example, the campus map directory on www.testudo.umd.edu, and interactive, digital, touch screen maps found in malls and corporate buildings), current levels of computer skills for each person turned out to be rather irrelevant. The touch screen interface allowed an easy, natural interaction with our search system. More importantly, no mandatory memorizing or commands to remember, all the test subjects were able to “dive right in” to the testing. Our clearly distinct categories Parking, Buildings, and Departments to name a few, greatly minimized ambiguity on which category/menu should be selected to find a certain piece of information. Users were delighted to be able to find what they wanted to know for the most part quickly and conveniently, although there were times where annoyances and disgruntlement were detected, as the information in those cases took longer to dig out than anticipated.

Finally, we concluded the user testing. As for the post testing, or follow-up, many of the users DID find what they were looking for, efficiently, and with little effort. Although this interface and database of ours didn’t, have the sheer number of entries as those of various departments and specific organizations on campus, they admitted that it did have a “personal feel” to it, in where it kind of “brought many of the UMCP sites together“. Last of all, users were encouraged to provide any suggestions that would improve the system and make it more “user friendly”. The suggestions made to us were to include expanding such a database to include more entries, allowing multiple windows to be present to perform multiple searches simultaneously, and perhaps more of Maryland’s colors in the background to give it a more “campus feel” to it.

Questionnaire and tasks:

1 – a lot, 5 – Very little

1.) How much experience do you have with computers in general? 1 2 3 4 5

2.) How often do you use utilize database systems to search for

information (online or offline)? 1 2 3 4 5

3.) How comfortable are you with using computers and systems 1 2 3 4 5

1- too simple, 5 – too complex

What do you think of the main page (first page of our system on screen) 1 2 3 4 5

Did you find the helping instructions on screen useful in getting the task done? Yes No

Did you find using our touch screen was easier to navigate than compared to say, a regular computer mouse and keyboard? Yes No

Do you like the fonts in the system? Yes No

Do think the command buttons are too small for you operate properly Too big

About right

Too small

1 – not at all, 5 – much faster

Compared with regular paper maps, do you find using our system helped you to find the location much faster? 1 2 3 4 5

1 – not at all, 5 – quite comprehensive

Did you feel that our system was comprehensive, in where it provided a wide variety of information? 1 2 3 4 5

Would you choose to download the information onto a PDA (eg Palm, Visor) to view for later, or just examine it off the main screen? Download onto PDA

Just view it off the screen

I don’t own a PDA

1 – not at all, 5 – very much so

Do you think the background colors worked well in helping to distinguish groups and to find items quicker? 1 2 3 4 5

Conclusions

The framework of MI-1, the Map and Information system, has been constructed. Most of the functions can work with current data, which is pre-input in the program. User can search for buildings, departments, people, events, nearest restrooms and parking lot for visitors in our program. Our codes can support all these functions fully work include map display. All information in our database can be shown properly in our map. The usability tests proved our system is easy to use. All subjects finished their tasks successfully. And the appearance of the interface is comfortable for all of our subjects. Some of the dialogs in our system, however, were made for demonstration purposes, such as dialing a phone call, beaming data to handheld devices and printing out a map because we do not have ability to study on the hardware and write codes to communicate with them.

There are still a lot of things can be improved in our program. The most obvious thing is that the current version of program does not have a function for the information search of offices, such as graduate office, registration office and so on.

Even in each available function in our program, the improvement space is still big. Such as, for the function of information search for people, although we do not have a large database, we still think about the case with a large database. We built an alphabetic index to speed up the browsing procedure for user. However, when database is very large - let's suppose there are 20,000 people in the database then there must be more than 1,000 people have last name starting with same letter, then, we must construct other efficient way to help user search. Actually, our system currently only provide the way to let user “Select” their choices. User can only single touch to make their action of selection. In another word, user cannot input but choose. After discussion, all our group members agreed that adding a physical keyboard is not a good idea since people are not expecting to use a keyboard in such a system and the keyboard is easy to break. Some of the solutions for this problem are to create a virtual keyboard on the screen and to add voice recognition function. The virtual keyboard is easy to construct for producer; and the voice recognition function may be easy for user to use if accurate. Because a touch screen system cannot let user first focus one field, such as an input text box, then activate keyboard to input, we may create virtual keyboard in the following way. There is one button named “Input” right near each input field. When User touch that button, a virtual keyboard will occupy the whole screen with a text box display the input result and a button function as “Go Back” which allow user to go back to previous screen after they finish inputting or editing the text. So, after user activates the virtual keyboard, the only thing the user can do is to input or edit, the user cannot jump to other function until they touch on the “Go Back” button. We believe this design will not make user confuse about inputting text. However, we still need usability test for our hypothesis.

Another thing needs to improve is about the map display part. Current, all the pictures are fixed and are assigned an ID associate with certain data, such as a building, a department or a person. Then, when user wants to display some certain information, the associated picture of map will be loaded. Current design works fine now, but if there is some construction of road, a lot of pictures need to be redesigned because the routes are changed. Next phase for this problem is to create a database to store the campus network then display dynamic result from database to display the proper route. Also, since user may need to park first then go to a building, there could be choices like, “Walk”, “Park then walk”, “Kiss and ride”. User could have different kind of direction based on their needs.

Since the congestion condition are different during different time period of one day. We may avoid driving on Campus Drive pass the Stamp Union in the noon due to the high volume of pedestrians crossing road. Our map direction, which supposes to be the shortest path, could coordinates with other traffic detectors to come out the shortest and “Easiest” route for user. We call the way easiest because a user who is not familiar with campus may want to reduce the turn movement to arrive the destination successfully.

As we described before, there are a lot of fancy stuffs can be added to our system and there are a lot of information could be stored in our database. A camera cannot only let user be able to see the other party in the call (the other party needs to have camera too), but also acts as a security camera for police. The camera could take a picture for the user and send it to police when the user asks for help. That makes police easier to find the user.

Practically, a center database is necessary because at least events information should be updated everyday. The dynamic direction also can take advantage of this kind of design. And, since the size of the map reduced a lot, from a big map more than 7 feet high to a monitor, how to improve the representation of the detail of the map could be a big issue. In order to make the map zoom smoothly, a GIS based map system might be needed.

Acknowledgements

Here we have to thank Dr. Shneiderman and his staffs’ efforts to help us to understand the concepts of building a good user interface. It has been an exciting semester. We are looking forward to our presentation.

References

“The Essentials of User Interface Design” ------------------------- by Alan Cooper

“Designing the User Interface” -------------------------------------- by Ben Shneiderman

“Information Seeking in Electronic Environment” --------------- by Gary Marchionini

Microsoft Developer Network --------------------------------------- by Microsoft

http://www.hcibib.org/, 2002

http://www.usability.gov/, 2002

http://www.useit.com/, 2002

http://www.ibm.com/easy, 2002

http://www.palm.com, 2001

http://www.mapquest.com, 2002

http://www.microsoft.com/streets, 2002

http://www.elotouch.com, 2001

http://www.otal.umd.edu/SHORE2001/, 2001

http://www.ualberta.ca/CLASSROOMS/LrgTouch.htm, 2001

http://www.dssresearch.com/library/touchscr/touchscr.asp, 2001

http://www.virtual-keyboard.com/, 2001

http://msdn.microsoft.com/vbasic/technical/training.asp, 2001

http://www.vb-world.net/databases/dbtutorial/, 2001