Video Prototype. CSE 440 Autumn 2008 Assignment 4 Online URL

Transcription

1 Video Prototype CSE 440 Autumn 2008 Assignment 4 Online URL Group Manager Design Usability Test Documentation Jonathan McKay Linda Hong Le Alireza Bagheri Garakani Nuo Yan

2 Page 1 Overview Finding parking in a congested area is difficult. A recent study by the University of California found that 30 percent of traffic congestion in major business cities arises from difficulties in parking, and this wasted effort burns 47,000 gallons of gasoline and produces 730 tons of carbon dioxide per year. [Simon] To help resolve this issue, we propose an application that will allow an iphone to help drivers find parking spaces by retrieving information from an online database. The application would provide drivers with information about areas such as parking garages and park and rides. In these parking lots, a gate or sensor would be placed at the entrances to count the number of cars in the lot. This information would then be uploaded to a database that the application would access in order to determine the number of vacancies. Drivers would be able to input their destination to find suitable parking nearby or use GPS to cross-reference their location with a database to highlight available areas. By providing drivers with an efficient means to find parking we can relieve stress, reduce CO 2 emissions, save time, and save money.

3 Page 2 Storyboards 1. Proposed Storyboard #1

4 Page 3 Proposed Storyboard #2

5 3. Proposed Storyboard #3 Page 4

6 Page 5 Selected Design Choice of Design and Reasoning Our choice for interface design primarily reflects our third proposed storyboard and the save parking feature from the second storyboard. The third proposal presents two of our primary tasks, determining system-wide availability and locating parking, and emphasizes conveying information using a familiar map interface. Although the other proposals also offer these qualities, this particular proposal offers a smoother integration with the map-like interface. However, the other proposals move from one screen to the next in a more confined manner, which may be undesirable while traveling. Also, the third proposal effectively illustrates parking availability and other key parking information using intuitive icons and an expandable information sidebar with further relevant details, a feature the second proposal lacked. Functionality & User Interface Description The proposed storyboard offers the capability to easily achieve each of the three designed tasks, including saving a parking spot, determining system-wide availability, and finding parking near ones destination. The customer can indicate that they have just parked and identify if that particular location is simply a way to remember the location of their car or a location that they would like to add as a favorite (See left figure). The customer s choice of either option in this scenario contains useful information for the application to store. Indicating that the customer has Parked Here provides information for the drivers parking location. Also, it allows the application to display a list of recent destinations (see right figure). A more useful type of data, however, is the result of selecting the Favorite option. This option, much like the presets on a radio player, is a feature that allows quick reference to a location and its corresponding availability. It is important to note that the data collected through this feature greatly contributes to the next central task of getting directions to a desired parking location.

7 Page 6 Finding parking near a particular destination is the fundamental feature of this device, therefore it must be carefully implemented in the user interface. Unless a particular favorite location is chosen, the customer will use the system-wide availability option to find a particular location near their destination. This availability of parking can be intuitively illustrated within the map application upon the customer entering a particular location. The diagram to the left shows a collection of Favorite places, and the diagram to the right shows a method of displaying this system-wide availability information. The shaded red zones indicate shady areas where a user s car is more likely to be broken into or stolen. One significant benefit of this method of showing availability is that the customer can easily get a system level impression of the availability in their chosen destination. An important consequence of this design decision is that the customer can quickly choose alternative locations in the nearby area and,, make plans to use public transit or to car pool with a friend in the case of limited parking availability. Once the customer finds a suitable parking garage, it is intuitive that the customer will seek both additional information about their chosen location and directions from their current location upon finding a specific parking location (either via the Favorites selection or the system-wide availability view). The figure to the left shows how this information (available space, cost per hour, etc.) may be represented. As a final note regarding features of the user interface, there are many general features that aid using the application. First, the user interface is integrated into the iphone, which prevents the need to purchase a new device and therefore provides accessibility to many customers. Second, the user interface allows an easy and intuitive method of navigation using a touch screen. And finally, the use of a steady toolbar at the bottom facilitates access to key features with ease.

8 Page 7 Scenarios 1. Determine System Wide Availability (Medium) Jon wants to meet some of his friends at the Barnes and Noble near his house in the U-district. In order to do so, he will first want to check the general availability of parking in the U-Village area to make sure he does not need to call his friends to tell them that he will be late. In order to do this, Jon will turn on his iphone, and open up the ParkSmart application. Once there, he will search for the University Village, in the text input screen. Once U-Village comes up on the map, Jon should be able to zoom in and see the availability of parking garages in the area. Green represents parking garages that have many spaces open and should have many parking spaces. Yellow means that the garages are filling up and that it may be harder to find an available space. Red means that the parking garages are either full or near full and that Jon should look for a different parking garage. 3. Get Directions to a Desired Parking Spot (Hard) Once Jon decides on which parking garage he wants to use, he will need to figure out how to get there. In order to do this using the ParkSmart application he will first tap on the icon of the parking garage that he wants to use. This will bring out a sidebar that displays detailed availability and cost. If Jon wants to get directions to this parking garage he would then tap the get directions button that will lay out a map from his current location to the location of the parking garage with turn by turn directions until he reaches the entrance of the garage he is looking for. 2. Save a Parking Spot (Easy) Now that Jon has successfully parked, he may want to solve his paring location for two reasons. The first is so that he knows where he is parked, and the second is so that he might be able to see good parking spots on his iphone for the possibility that he would return to U-Village in the future. Once the iphone detects that Jon has parked by a lack of movement, a pop-up screen will ask if he wants to save his current parking location. If he says yes he will then be prompted by ParkSmart to specify how he wants to save it. He can either save it as a favorite or just as his current location so that he can easily find his car when he returns. Once Jon taps on a parking garage, a detailed information bar will appear.

9 Page 8 Video We made our video prototype using the resources we had on hand. Nuo had a high quality digital video recorder, and Linda had composed digital mockups of the user interface for our application based on our design sketches. With the key resources, we used group members as actors and composed two scenarios for our story: in one the protagonist would be using the ParkSmart application, and in the other the protagonist would be relying on traditional means of finding parking. For editing, we used Adobe Premiere provided by the school to add music and captions. We filmed at Barnes & Noble, U-Village, the U- district, and Ali s house. We filmed in four general areas. The first was Barnes and Noble at the U-Village shopping mall, where we filmed the Meeting scene and the Missed Opportunity scene. The second was around U- Village, to find scenes when parking would be difficult and scenes in which parking would be easy. Ironically, parking on the surface lots was rather difficult even when we were legitimately looking for a parking spot. Third, we filmed scenes of driving around the U-district, to show how movement and vehicle transportation are inextricably tied to the application. Finally, we filmed the opening scenes at Ali s house near 45 th and the freeway. We chose this location because it was close to the other filming locations. When filming it was very beneficial to compose a scene list before shooting, as we actually shot the scenes of the movie in reverse. The main difficulty we had was attempting to film the user interface of the iphone. In order to get around this, we eventually decided to forgo attempting to show the ipod user interface indirectly through recording it on the camera and instead inserted the.jpg files directly in the video stream. This was helpful because we did not have to worry about the lighting or focus issues that would have been particularly troublesome had we relied solely on filming the user interface using classical means. One problem that we worried about but did not have to contend with was store policies barring filming. While we only filmed in Barnes and Noble for around 15 minutes, we were worried that either store employees or security would ask us to leave. However in the end we were able to film fast enough as not to trigger any negative response from the store employees. We inserted.jpg pictures directly into the video to highlight the user interface.

10 Page 9 Notes Simon, Malloy. "Let technology find parking for you." 16 July CNN.com. 15 October 2008 <