Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

Storyboard

Learnability

Efficiency

Safety


Figure 1.1. Bob launches the Smart Grid application from his tablet. He notices from the consumption bar at the left side of the screen that the energy cost in the past 24 hours is very high - $18 - considerably higher than the average. He then uses the chart at the right side of the screen to find out that the consumption was the highest from 1PM to 4PM. He clicks on the Devices button at the bottom of the screen to navigate to the Devices view, trying to find out why.

Pros:
The consumption bar intuitively provides information comparing today’s consumption to the historical records. It uses the metaphor of a thermometer or other similar scaling devices.

The bar chart is a common way to break down data in different time periods, so it’s easy to learn.

The radio button that allows user to select data on consumption or on cost basis is also easy to learn.

Cons:
Using different tabs for daily, weekly, and monthly data is inconsistent with most applications. A user might expect to get different types of presentation on different tabs, although they are the same with only different time scales. Putting them on one page and using radio buttons for selecting time frame would be a better approach.
The consumption bar shows cost, while the chart shows power consumption. It is inconsistent.

Pros:
The consumption bar allows user to efficiently compare today’s data with historical data, and quickly detects any anomalies.

The chart presents much data efficiently in a small space, and yet makes anomalies stand out in a comparison way. If it further supports swiping to change time frame, it would be more efficient.

The radio button to select consumption verses cost allows quick switch between different kinds of useful information.

Cons:
The screen does not provide information on per device basis. Finding out which device causes problems requires user to dig into other screens, and thus inefficient.

Browsing the chart to a specific date and time is also inefficient. Adding a Calendar widget would remedy the problem.
It’s also not easy to compare same time period, say 1PM-6PM of different days.

Pros:
There is generally no safety issue. If user chooses a wrong button, for example, he or she can quickly switch back. If the user navigates to a wrong page inadvertently, he or she can also quickly browse back.

Cons:
If the user goes to another time frame in the chart by swiping, it could be difficult for him or her to get back. Adding a “Back to Today” button would fix the problem.

If user navigates back and forth between different screens, inadvertently or not, the selection he or she made needs to persist.


Figure 1.2. In the Devices view, Bob can see the Floor Plan tab, which presents all the devices in his residence in graphics, grouped by areas as he arranged when he first set up the application. Today however he wants to see what devices consume most power, so he clicks the By Consumptions tab.

Pros:
The floor plan naturally maps the devices as they are in the real world, and thus is easy to learn.

Using graphics for devices is also intuitive and helps learnability. Adding words or tooltip around the icons helps make information more precise.

Cons:
The device icon should not be just a static image. Clicking on it should allow user to go to the corresponding control page of the device, or view detailed energy information of the device.

Pros:
Using graphics is more efficient than words for user to glance all the devices.

Cons:
The floor plan may not scale well to large facilities, for example, a factory. More hierarchies, and zooming capabilities would be needed in that case.
When more devices are available in one place, for example, the basement, they may not fit into the space available. This is another scalability concern with this interface.

Pros:
Using the screen has no safety issue. If user inadvertently navigates to another screen, he or she can quickly come back.

Cons:
Using the screen has no issue. Setting up the screen in the first place would need to consider safety, but it’s not in the scope of this project.


Figure 1.3. In this screen, Bob can see all his devices in a tree view, along with their consumptions in the time period that Bob has chosen at the left side of the screen. Today, he chooses 1PM to 4PM. The screen also lists the top five power consuming devices. The top of the list is the central air conditioner. Clicking on the device brings him to its control screen.

Pros:
The interface uses radio buttons, a tree view, and a table to presents perspective information. All offer standard affordance.

If user selects a different time range, the device tree view and the consumption table immediately updates their perspective data, providing immediate feedback.

Cons:
It’s not easy to do various kinds of comparisons in this UI. For example, user can’t compare a specific device’s data on different days.

Pros:
The device tree view allows user to tailor it according to the task on hand, by collapsing or expanding parts accordingly. This makes it efficient to retrieve information.

The Top Consumer table allows user to quickly find out which devices consume most power in a given time.

The radio buttons for time range selection allows user efficiently see data in different time range without navigating to other screens.

Cons:
It doesn’t provide search capability. If user forgets where a device is, drilling down the tree to find it wastes time.
Individually select start time and end time using the widget provided could be inefficient.

Pros:
If user selects a different time range by mistake, he or she can quickly correct it, by clicking it back.

Cons:
If user collapses a subtree inadvertently, it may not be easier for him or her to get back to the view before, unless the software specifically remembers it.


Figure 1.4. In this page, he adjusts the cool setpoint of his home from 65 degree to 75 degree by clicking the up buttons at right side, and the dial at the left side provides immediate visual feedback. After he is done, he clicks the OK button.

Pros:
The interface uses standard and intuitive controls.

The dial is a metaphor of the physical ones used in many households. It provides immediate visual feedback upon user clicks the up/down buttons.

Cons:
User may think the dial can be directly adjusted, while it can’t be.

The dial doesn’t give the precise number. Supplementing it with edit control will fix that.
While user is adjusting the set point, it’s not obvious what the current effective value is.

Pros:
User can see the set point quickly.

Cons:
If user wants to adjust the set point by a large amount, clicking the buttons to do so is inefficient

Pros:
User has to use the OK button to make an adjustment take effect, so the chance of error is reduced.

Cons:
If user makes a mistake and sets it to a wrong value, the UI doesn’t tell user the previous effective value to be restored to. It also doesn’t support Undo.


Figure 1.5. Bob is curious about the price information now. So he clicks the Prices button at the navigation bar at the bottom of the screen. The Prices screen provides a chart on how much the market will pay for the power that consumer sells, broken down by hours. For comparison purposes, the chart also provides the highest and lowest records in the past. The right side of the screen provides the estimated extra power that his generators provide during the same period of time. Noticing the price from 12PM to 4PM is very good, and he has extra power, so he decides to sell some. So he clicks the Transactions button at the navigation bar

Pros:
The price bar chart is intuitive. The “I” shape mark on top of each bar provides historical statistics data, helping user make decisions.

The storage chart provides the overall storage information. It aggregates the data from different sources, providing the third dimension of information, helping user further manages their devices.

Cons:
The price chart doesn’t allow user to adjust the timeframe.

The storage chart doesn’t allow user to choose devices.
No information is available about the historical storage data.

Pros:
It’s efficient to use the charts to get price information, and statistics helps user make right decisions.

It’s efficient to see the storage data on a per device basis, helping users plan the use of their devices better.

Cons:
Aggregating devices in this fashion may not scale well when the number of storage devices is large.

User can’t compare the data of a specific device at different time periods.
The page doesn’t allow user to select a device and sells its power from there. User has to navigates to another page to do so.

Pros:
The view isn’t used to get user inputs, so safety in terms of correcting wrong data doesn’t apply.

Cons:
The Storage chart uses estimated data. Decision making based on it may not be reliable.


Figure 1.6. In the Transaction page, Bob selects the time, power source, and the amount of power he wants to sell. The Smart Grid application calculates the profit for him. After inputs the correct information, he clicks the Sell button. At the right side of the screen, the Pending Transaction table lists all the pending transactions. Bob can see the transaction he just made is listed there. He can select one or more transactions to cancel if he wants to, but that’s not the plan today. Thinking he can make $10 back, Bob is satisfied, and closes the application.

Pros:
The form at the left side of the screen uses standard controls for user to enter a transaction.

The table at right side lists pending transactions effectively.

User can check the checkbox next to a transaction to view more details or to cancel the transaction. This is consistent with many other applications.

Cons:
No interface for user to get historical transaction data.
It doesn’t provide report capability, which should belong to this page.

Pros:
User can quickly view all the pending transactions and the profits they will generate.

Cons:
User can only initiate a Sell transaction one source for one time period at a time. It’s inefficient to sell from multiple sources and in different time frame.

Pros:
It allows users to cancel a pending transaction, in case they change their minds, or they initiated a transaction by mistake.


Cons:
Miss a Clear button at the left form.

Critiques of the overall design

Pros:
The overall frame structure is sound – a navigation bar at the bottom using large icons, and the screen above provides the corresponding view. It’s easy to navigate around.

The view uses tabbed view as needed. The tabs are clearly visible and intuitive.

The UI is generally based on graphics, and thus intuitive.

It presents information in a self explanatory way.

It generally supports direct manipulation, and provides immediate visual  feedbacks


Cons:
The contents seem light to fit in a large tablet screen – the charts and widgets may need to be large in order to fill it. But this remains to be seen.

Price and Transaction screens can be combined, because they provide closely related information.

If we allow user to click on a device in the Consumption screen to jump to the Devices screen to view its detailed data, user may feel the screens change abruptly. If we don’t allow such screen change, however, user may feel the screens are disconnected. The dilemma applies in general in this design.

Pros:
Navigation between screens and between tabs is efficient.

Data is presented efficiently, and allows user to easily retrieve the information needed to make decisions.

Cons:
Some useful charts are missing from the design so far.

Data entering in some screens is inefficient.

Pros:
The UI is generally fault tolerant. User can return to the original state if he or she makes an error.

It allows user to cancel a transaction if it’s needed.

Cons:
At some places, it only presents estimated data for user to make certain decisions, this can be unsafe.

No Undo capability in certain places where such capability would help.

...

Design 3 - Parallel Views

Overview

This design divides the application into tabs based on the types of data which are available: usage data, storage data, and data from the grid. Each tab contains a split-pane view. The top pane displays an interactive graph offering detailed data, while the which can be interacted with by touching and swiping. The bottom pane allows tasks to be performed based on that data.

The intent of this design is to keep the most relevant data visible while a task is being performed. Since the user may wish to take into account data from other views while performing a task (e.g. considering the amount of stored power while selling power back to the grid), the most relevant statistic from each view is displayed at the top of its tab, keeping that data constantly visible.

Storyboard and Analysis

Storyboard

Learnability

Efficiency

Safety


Figure 3.1. When Bob opens the Smart Grid application, he sees a graph of his usage for today. By touching the "month" tab at the left of the graph and looking at the average at the top right, he sees that his usage for today is much greater than his average usage over the past month. He returns to the "day" tab of the graph and notes, by expanding the tree in the bottom pane, that his air conditioner is consuming most of the power. He unchecks the boxes for all devices except for the air conditioner, which updates the graph to show only the air conditioner's power usage for the day. By doing so, he sees that the highest usage was during the afternoon.

Pros: 
The tabbed display is a familiar paradigm, especially on mobile devices.

The expandable tree used to display the devices is also familiar from other applications.

The graph is intuitive to use, and tabs, titles, and axis labels make clear what information is being displayed.

Cons: 
The use of the checkboxes in the lower pane to update the graph may be unintuitive.

It may be unclear what the usage numbers in the bottom pane correspond to: are they the current usages? averages for the day? Additional labels would be helpful to disambiguate this information.

Pros: 
The opening screen is easily glanceable. The information likely to be most important to users, the current power usage, is displayed immediately when the application is opened.

The organization of devices into a tree allows the interface to scale well, efficiently supporting operations on large numbers of devices.

Cons: 
The user may have to check and uncheck many boxes in order to display the desired information in the graph.

The device list cannot be sorted by power consumption; some exploration of the tree may be required in order to determine which devices are using the most power.

The usage view does not display information about price/cost of the usage. It may be helpful to add such information in a future version of the design.

Pros: 
It is clear how to undo actions in this pane, such as checking a box or selecting a tab.

There are no irreversible data-related errors to be made in this view.

Cons:
If the user navigates far back in time in the graph, getting back to today's usage information may be difficult. Adding a "Back to Today" button would solve this problem.


Figure 3.2. Bob touches the "grid" tab to view today's pricing information. Simply glancing at the shape of this graph allows him to tell it is a peak usage time. The current price is displayed on the "grid" tab, and can also be viewed by touching the current time on the graph itself.

Pros: 
The graph view and split-pane interface of this screen is internally consistent with the others.

Cons:
The application requires some background knowledge about the way the grid operates and the way power is priced. Non-expert users without such background knowledge may find it difficult to understand the information presented without more context.

It may be unclear what the price displayed on the "grid" tab corresponds to: is it the current price? average price? Again, a label would be helpful.

Pros:
The pricing information is easily glanceable. The information most likely to be useful, the current price of power, is visible both on the graph and at the top of the tab.

Cons:
The pricing information cannot be overlaid onto data from other views, such as the usage information. The user would need to switch between tabs in order to compare the information in multiple views.

Pros:
As with the previous view, there are no irreversible data-related errors to be made, and it is clear how to undo actions.

Cons:
As with the previous view, it may be difficult to return to today after navigating back in time in the graph.


Figure 3.3. To change the settings of his air conditioner, Bob first navigates back to the "usage" tab (Figure 3.1), then clicks the "settings" button for the air conditioner. The top pane displays a graph of the air conditioner's power usage for today, helping Bob decide what settings to change in the bottom pane. He uses the spinner to increase the setpoint of the air conditioner. He then presses "save" and is returned to the screen in Figure 3.1.

Pros: 
The spinners used for numeric data entry are standard Android widgets, familiar from other applications.

Spinners are populated with default values, which, together with the up and down arrows, make clear what kinds of inputs are permitted.

Cons:
By using spinners to change device settings, the application may lose external consistency with the way those settings are entered on the devices themselves.

Pros: 
The graph is automatically updated to display daily view, which is presumably the information that is most relevant to the settings being changed.

After the settings are saved, the graph returns to displaying the data that was previously selected.

Cons:
It is not possible to view data for other devices while changing the settings of a device. If the user wants to take this information into consideration, they will have to go back to the main usage screen to see it.

Since the graph is automatically updated to the daily view, if the user was interested in looking at usage over the last week or month, they will have to readjust the graph after entering the settings screen.

Pros: 
The "cancel" button allows the user to revert any changes they have made to the settings.

Cons: 
There is no indication of whether the settings have been modified, so a user may end up saving an inadvertent change.


Figure 3.4. Bob checks the status of his power storage device by touching the "storage" tab. He glances at this screen to see both the current amount of stored power and the historical amount of stored power for today.

Pros:
The graph view and split-pane interface of this screen is internally consistent with the others.

Cons: 
As with the "usage" screen, the checkboxes may be unintuitive to use, and the .

The numbers displayed in the devices list and at the top of the tab may be ambiguous without additional labels.

Pros:
This screen, too, requires only a quick glance to determine the needed information.

Cons:
As with the "usage" screen, devices are not sorted by amount of stored power, and much checking of boxes may be needed to display the desired information.

The storage information cannot be overlaid onto data from other views; the user would need to switch tabs.

Pros:
As with other views, there are no irreversible data-related errors to be made, and it is clear how to undo actions.

Cons:
As with other views, it may be difficult to return to today after navigating back in time in the graph.


Figure 3.5. To schedule a sale of power, Bob returns to the "grid" tab (Figure 3.2), then touches the "schedule transaction" button. He uses the spinners to adjust the time and the amount of power to be sold. He uses the pricing graph in the top pane, and the total amount of stored power displayed on the "storage" tab, to help him decide. He touches the "save" button and is returned to the screen in Figure 3.2, which now lists the scheduled transaction.

Pros: 
Again, the use of spinners is familiar from other applications, and makes clear the kinds of inputs which are allowed.

Cons: 
The interface does not expose all underlying details of the grid and of power transactions. A non-expert user may not know how to decide on the parameters of a transaction, and may not understand where the power goes or how they are paid for it.

Pros: 
The data displayed at the top of the "storage" tab allows the user to decide how much power to sell without having to switch back to that tab.

Cons: 
Previously scheduled transactions cannot be viewed from this screen. If the user wants to take this information into account, they will have to return to the main grid page to see it.

Pros: 
Transactions take place at a scheduled time rather than happening instantly, so they can be modified or cancelled in case an error is made.

Cons:
The user receives no suggestions about how much power to sell or when to sell it, so a non-expert user could make a poor selling choice.

Critiques of the overall design

Pros: 
The similarity of each pane of the application provides internal consistency, enhancing learnability.

The use of familiar widgets and paradigms, such as tabs, spinners, trees, and graphs, provides external consistency.

Text labels clearly show what data is being displayed, and help the user understand the results of their actions.

Cons: 
Where labels are absent, the meaning of data may be ambiguous.

Certain controls, particularly checkboxes, may be hard to learn or unintuitive.

For some actions, users need knowledge of the underlying grid system beyond what is provided by the application itself.

Pros: 
The design attempts to enhance efficiency by displaying the most relevant data for the current decision being made.

Cons:
If the automatically selected view is not the one that is desired by the user, this feature may be annoying rather than helpful.

There is no way to combine data from different tabs in a single view. For instance, power usage and stored power cannot be viewed together in a single chart.

Pros:
The use of tabs, widgets, and transaction scheduling makes it clear how to undo most actions.
 
The use of spinners for input helps to prevent invalid inputs.

Cons: 
The absence of suggestions from the application may mean that non-expert users make poor decisions.