...
| This first screen would be the screen that the user first sees upon opening a file set. At the top, there is a title bar indicating that the user is in analysis mode. There is a flat very lightly colored gray scale map of the area in question (pictured here is the northern two-thirds of Africa). Similarly to Google Maps, the user can drag around the map with the mouse, as well as zoom in and out using the controls on the left. In the top left there is a button that toggles between month and year (other option can maybe be added) and corresponds to the slider on the bottom. For instance, if you are in month-mode, the slider will move through monthly averages of the data from January to December while in yearly mode, it would move from 2000-2012 or something of that nature. On the top right of the screen, there is a button titled "Layers" which will generate a drop-down list upon click that will contain all the possible data sets the user can add to the map. The large arrow on the right of the screen will shift the user into the next mode (which for lack of a better name is referred to as the edit mode in this design). |
| If the user clicks the "layers" menu and selects an option, "demographics" (here written as population) for instance, the first that will occur is that a box with the name "demographics" and a small "x" will appear to the left of the "layers" menu. In addition, the data set will be added to the map. Color and specific shading can of course be determined later, but let's assume for this design that demographics is represented by the color red. In that case, a light red area representing the entire year's population area will appear on the map, and a bright, solid red will indicate the area covered in that |
| On this screen, we can see more details in Analysis mode, in terms of overlaying data sets and popping open the "layers" menu. It becomes more apparent as to how the user would use the program to visualize the exact set of data he'd like to analyze. |
| When the user is done setting the data, he can hit the arrow on the right side of the screen to move forward. The first thing to occur after this action occurs is that the title bar will change to "edit" mode (here written as "edit hotspots"), and a pop up window will appear as the background fades out in some way indicating inactivity. The window will indicate some backend sort of magic occurring (not the focus of this class, so we will just assume it exists) |
Frodo first logs in to his account, where he can view his existing projects and create new projects.
Frodo creates a new project to analyze Africa's WiFi coverage. The screen is initially a world map, with an empty list of "Current Data Sets" in the left toolbar. Frodo clicks on the "+" button to import data into the project. This brings up a box where he can search and browse data sets and drag them into his Current Data Sets list.
After importing the data he needs, he can see the data sets visually laid out on the map. The map's zooming and panning functions are externally consistent with other maps, i.e. Google Maps.
The Current Data Sets list allows him to toggle each set on/off in the map, and provides a legend of how the data is visualized. The timeline on the bottom shows a line graph of data that varies over time. The timeline has its own legend where data sets can be toggled on/off. Frodo can zoom in and out of the timeline (e.g. view by years, months, or days) with the slider at the top of the timeline. To display a time average of the data on the map, he can use his mouse to highlight a selection of the timeline.
The toolbar on the right side provides specific data geared toward optimization and more detailed analysis. Frodo can create scoring metrics to assess how good coverage is in the currently visible region. He can display an overall "score" (i.e. percentage of the population with access to Boingo WiFi), and highlight areas on the map where coverage is insufficient. Below the "scoring toolbar," Frodo can see specific data about the area his mouse is currently hovering over. He can also adjust the size of the "hovered area" (i.e. the circle around his mouse).
Frodo will want to add hypothetical new Boingo WiFi towers to the map to improve his score. On the lower left toolbar, he can add new towers to the Boingo WiFi towers data set. He can click and drag a new tower onto the map, and data related to the new tower will display right next to the mouse. The data on the right-hand side of the screen will also update automatically as Frodo moves his mouse around the map.
To see data for towers on the map, Frodo can hover over them, and a box will automatically pop up next to the tower. To edit this data, Frodo must click on the tower, then the box of data will remain visible when the mouse is moved. He can adjust parameters with sliders, and see tradeoffs between different factors such as cost, power, coverage area, etc. There are also buttons to add a note and to delete the tower. To move the tower, Frodo can click and hold down the mouse for ~1 second, then drag the tower to a new location.
If Frodo gets stuck, he can ask his friend Samwise for help. First, he might want to write some comments on the map itself. He can click on a commenting toolbar on the left side, which will have tools for adding textboxes, circling areas, etc. Although not pictured here, the toolbar will have external consistency with programs such as PowerPoint and Photoshop.
To share his project with Sam, Frodo clicks on the "Share" icon at the top of the screen. A window drops down from the Share icon, where Frodo can enter Sam's username/email, set editing privileges for him, and add a message. Sharing allows for real-time collaborative editing, as it does in Google Docs.
After Sam tells Frodo that his analysis looks perfect and wonderful, Frodo is ready to "publish" a final report to his boss, Gandalf. Functionally, publishing sends only the a copy of the current project, and does not send real-time updates like sharing does. Ideally, Frodo would be able to select which parts of the project to include in the report, and provide extra commentary/analysis for his boss. However, since we are focusing on the UI for visualization, Publish will look essentially like Share, at least for now.