...
Multi-Layout Rectangular design
Single-Layout List design
For each high-level task that the user works on there is a separate layout.
A layout describes a specific configuration of the interface best suited for certain task. For example,
a user might use one layout for monitoring, another for debugging and a third for developing a certain system.
Multi-Layout Rectangular design
In the multi-layout rectangular design the user can have several layout open as shortcuts / tabs.
That will allow for easy switching between high-level tasks and lets the user to organize the visualizations into categories.
When the user selects a layout by tapping, the screen slides to the left and and the layout is shown.
Each visualization is contained in a rectangle (hence Rectangular) the user can move visualizations around by dragging them and change their properties by tapping on them. The screen slides to the right where the user can specify the parameters of the visualization : channel, property (within the channel), visualization type (histogram, plot through time, etc.).
A challenge for this design is making visible the affordance that the visualizations can be dragged around with a finger. For this we rely on intuition the user has from using other mobile interfaces (ex. iOS main menu behaves in a similar way).
Single-Layout List design
<working on now>
List-Based Interface
Main Screen
The main screen shows a list of available channels and color codes them based on recent activity. Tapping a channel selects its detailed view (bottom right) which displays live graphs of any numeric quantities. Tapping a graph or number in a channel brings up the graph interface (below).
Graph screen
Graph interface fills the screen. Interaction is similar to a photograph which users are familiar with. Pinch or double-tap to zoom, drag to pan. A single tap anywhere freezes/unfreezes the graph (ie stops or starts live data being added.)
More traces can be added to the plot by pressing Menu and then selecting Add Trace. The Add Trace window appears (lower right) which allows the user to browse through available channels and variables in those channels. More than one new variable can be selected.
Graph screen (cont.)
When graphing text, we display small colored bars at the bottom of the screen that change color when the text changes. While this does not convey what the text is, it conveys that it has changed, which may still be useful. We use a hashing strategy to display colors, so that the same text will always have the same color.
Control mode
A control mode, accessible from the Menu button on the main screen allows the user to change parameters. Options are presented as spinners which update in real-time (send data on finger-up). An interface for selecting the resolution of the spinner is shown in the lower right.
Analysis
- Learnability
- Most things are clickable in this interface, so learnability should be relatively easy. The graph mode has a few features that novice users are not likely to know about, but that is more a visibility issue.
- Visibility
- Some options like the command menu are accessible only from the Menu option, which might cause visibility issues. This issue arises for some of the graphing screen's more advanced features as well.
- Most data is displayed early and quickly, so data visibility is high.
- Efficiency
- The drill-down aspect of the interface may not be the most efficient, but we expect that it is worth the organizational and learnability benefits.
- Error Prevention
- The only serious errors that can occur with the application is in the command screen. As the interface stands, commands are sent on finger-up, but if testing reveals that this is an issue, we will likely add a Confirm button.