...
The idea behind this design is to keep it very clean and simple. Manipulation is largely mouse-based and allows for a lot of real-time visual updates in response to the user's actions. The emphasis is on learnability. It should be intuitive for the user to move around the map, to choose and add layers, to select objects on the map to bring them into focus, to manipulate the time, etc. These actions should all map to actions that users are generally familiar with through other software and real-life activities. In addition, the focus on clean and simple design means that there are fewer aspects of the design for the user to learn. Efficiency may be sacrificed as a result, however, because in an effort to be minimal, certain things may be more than one click away, but the use of sliders for some functionality may help in that respect. As for safety, the user is fairly limited in their actions. They may accidentally add layers they don't want or change modes, but these errors are fairly simply undone.
Storyboard
| When Frodo logs in and uploads his file sets, this is the first screen he would see | | 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 he 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 Frodo 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 he is 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 when Frodo clicks on it, will generate a drop-down list upon click that will contain contains all the possible data sets the user can add to the mapFrodo had selected on logging in. The large arrow on the right of the screen will allows Frodo to shift the user into the next mode (which for lack of a better name is referred to as the edit mode in this design), after he has finished his analysis of the data sets. |
| If the user clicks the Frodo can then click on the "layers" menu and selects an select the option, "demographics" (here written as population) for instance, the first that will occur . The first consequence of this action 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 | ||
| this screen, we can see more details in Analysis mode, in terms of overlaying data sets and popping open Frodo clicks on 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 analyzeagain. We can see the menu pop open here. He selects a new layer, "rainfall" for instance, and it gets added to the map, in a different color from demographics, but overlaying the previous data set. | ||
| When the user Frodo 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) that will generate a number of new hot spots, strategically placed on the map. | ||
| This After the computer finishes generating the new towers, this last frame pops up. |
is the "edit" mode screen that the user can actually interact with. Note that now the arrow is on the left side of the screen, indicating the way which the user can return to the analysis screen (by clicking or perhaps with a keyboard shortcut). Note that the layers menu at the top along with the current layers being displayed are still visible. What is new, however, are the circular forms on the map. Each of these circles would represent a new wifi tower as generated by the magic backend algorithm. There are also sliders (three sliders pictures, although more or less might be appropriate as needed for the parameters the users desire) in which the user can adjust things like total cost, quantity of towers, average strength of towers, power used, etc. These sliders would have an immediate effect on the representations of the wifi towers on the map, in that using the sliders would change the size of the circles appropriately. In addition, it would be possible to manipulate each individual tower by clicking on it. Clicking on a circle would display the information pertaining to that particular tower (i.e. location, strength, wattage, and whatever else is relevant). It would also be possible to drag it to change the range or move the circle itself. After the user is finished, they can save the map using the save button at the bottom right. It would also be ideal (even though this is not pictured) to add a share button and feature to the map on this screen. |
Design #3
This interface views important information in an efficient way, as well as an easily manuverable layout.
...