M6 Human Interface Design
Team 06
April, 2012
M6 – Human Interface Design
COMP 3513 Systems Analysis and Design
Acadia Environmental Dashboard
Team 6
Dave Rechnitzer – 100102507
Sufyan Shaikh – 100105379
Date 14th February, 2012
1
M6 Human Interface Design
Team 06
April, 2012
Table of Contents
1 Introduction
1.1 Overview................................................................................................................................................3
2 Dialogue Sequence
2.1 Diagram..................................................................................................................................................4
2.2 Description……………………………….............................................................................................................5
3 Dashboard Mock-up
3.1 Homepage...........................................................................................................................................10
3.2 Map
3.3 Graphs
3.4 Competitions
3.5 Green Tips
3.6 Admin Controls
2
M6 Human Interface Design
Team 06
April, 2012
1 Introduction
1.1 Overview
This module has been assembled to demonstrate the user interface for this dashboard, in
particular the sequence of dialogues that a user will be presented with in order to access the relevant
data contained within the dashboard system, and to give a visual mock-up of the actual dashboard
design to show the screens the user will see on accessing the various features of the Dashboard system.
3
M6 Human Interface Design
Team 06
April, 2012
2 Dialogue Sequence
2.1 Dialogue Diagram
4
M6 Human Interface Design
Team 06
April, 2012
2.2 Descriptions
Dialogue Number: 0
Name: Homepage
Description: This is the first page any user will see on first accessing the Dashboard in any given session.
This page will contain a general description of the purpose and idea behind this Dashboard and will also
give basic instructions to the user in terms of how to use the system. From this screen, the user will be
able to access all the other basic functions of the Dashboard. These same links to the other functions will
be accessible from each of the other pages, though for an easier presentation; it will be shown that
these link between themselves and the homepage, rather than the homepage and each other.
Returns to: System
Dialogue Number: 1
Name: Interactive Map
Description: This is the map of the Acadia University campus, from which users will be able to view a
graphic representation of the relative energy uses between facilities on campus by viewing a colour
coded display, where facilities that are using a minimum of energy, saving fuel and water, etc. Are
displayed in green, and buildings that are using more energy, fuel, etc. Will be displayed ranging from
yellow at intermediate levels to red at extremes. The user will be able to select which measures are
displayed from a series of radio buttons below the map, with energy use (in kWh), fuel use (in L) and
water use (in L) available to all public users; and costs for each available if the user is logged in to a user
or admin account.
By clicking on the image of a facility on the map or selecting from a list on the left side of the map, the
Dashboard will display a small window over the chosen facility giving the numeric value of the measure
being displayed (i.e. will display energy use in kWh if energy use was selected, or water use in L, etc.).
At the top of the map, there will be a display for the campus-wide usage of the chosen measure. All
figures given on this display will be hourly, with no option here for displaying longer term statistics, in
order to simplify the display as much as possible.
Returns to: System, 0
Dialogue Number: 2
Name: Graph Display
Description: This display will be where users are able to see a more in-depth view of the measures, both
for individual facilities and as a comparison between two or more facilities.
The left side of the page will contain a series of checkboxes with the name of individual facilities. By
clicking any one box, the screen will display a scaled graph based on a user-selected time scale (hourly,
daily, weekly, monthly and yearly, respectively). Below the graph will be a series of radio buttons for the
selection of a time scale, as listed previously. The graph display will automatically rescale as needed for
the times or facilities selected, with the relevant measure scale listed on the left of the graph, and the
time scale on the bottom. The graph will be drawn in a line-graph style, connecting individual points (i.e
hours, days, etc.) To see them more easily, lines will be drawn in differing colours chosen at random
from a set palette.
Additionally, if a user is logged in to a user or admin account, they will able to see additional graph
details, including the costs associated with the current energy, fuel or water usage, more in-depth data
5
M6 Human Interface Design
Team 06
April, 2012
regarding the facilities, which could include occupancy numbers, types of rooms available and what
sorts of renovations or systems have been put in place to warm or cool the building as they relate to
energy and fuel use.
Returns to: System, 0
Dialogue Number: 3
Name: Competitions
Description: This screen is where users will go to see both completed and on-going competitions. The
initial screen will give a basic overview of ongoing competitions, displaying which facilities are involved,
their current comparative energy use (or fuel use, water use, etc.) and will state which facility involved
in the competition is winning. There will also be a button for viewing more specific information on the
competition and information on completed competitions, which will bring up the next dialogue, 3.1.
Returns to: System, 0
Dialogue Number: 3.1
Name: Select Competition
Description: This will be a new screen accessed by pushing an associated button on dialogue 3. This
screen will have a scrollable list of contests, each with a name and a list of involved residences. On
clicking any one competition, it will bring the user to a relevant display (3.2) with further details on that
competition. There will also be a button to return to the previous screen or the homepage.
Returns to: 0, 3
Dialogue Number: 3.2
Name: View Competitions
Description: This will be a more in-depth display of a chosen competition. It will display each of the
involved residences, their baseline use of the related measures (i.e. fuel use) taken at the start of the
competition, their current use, the difference and a display of whether this is an improvement using a
colour-coded arrow at the end of the column. Below the list of facilities will be a smaller graph showing
a comparison of the differences as percentages, since the actual difference between energy use
between structures can vary wildly, it would need to depend on the percent change between baseline
and end usage. At the top of this display will be the name of the competition, the start and end dates
and either the winner or the leading facility, depending on whether or not the competition has already
closed.
Returns to: 0, 3, 3.1
Dialogue Number: 4
Name: Green Tips
Description: A series of tips for users to view at their own convenience to help them improve their
carbon footprint across a variety of areas. The left side of this screen will have a list of such areas, mainly
energy use, fuel use, water use, as well as related but non-measured ones such as recycling. These will
be radio boxes that will set which Green Tips will be displayed.
The rest of the page will be occupied with the text for the Green Tips, with a previous button and next
button for scrolling through them, and possibly a related image.
Returns to: System, 0
6
M6 Human Interface Design
Team 06
April, 2012
Dialogue Number: 5
Name: User Authentication
Description: The page accessed by clicking on a User Log In button that will be displayed on all pages of
the interface. The initial screen will display the user’s current log-in status (i.e. not logged in, user or
admin) and will link back to the homepage or the admin controls page. If not logged in, there will be a
button to log in, otherwise there will be a log out button and/or a button to change user accounts,
which could be useful if the user is logged in as an administrator and needs to test changes made to
another account.
It should be specified that all access and changes made from this screen onward would be audited, in
the event that major mistakes were made and to track which changes were made by which
administrators.
Returns to: System, 0
Dialogue Number: 5.1
Name: Log In Screen
Description: Brought up by clicking on either the log in or change user account button from the user
authentication page. Brings up a dialog with text entry space for a user name and a password, with a
forgotten password link, an okay or log-in button (either one is interchangeable) and a cancel button to
back out to the User Authentication page. If the information entered is not verified successfully
(username and password do not match records), the user will be returned to the log in screen again with
a message stating the error, otherwise, on successful log-in, the user will be redirected to the homepage
if they logged into a user account, with the additional information available to them, or they will be
directed to the admin control page if they logged into an admin account.
Returns to: System, 0, 5
Dialogue Number: 6
Name: Admin Control Screen
Description: This will be a page displaying a welcome message for the admin if they just logged in, as
well as links to maintain user accounts, modify the Green Tips and maintain the facilities in the system.
As the other pages, this one will also link back to the homepage and other publicly available displays. As
with the user level account, the admin will also be able to access expanded information on each of the
facilities.
Returns to: 0, 5
Dialogue Number: 7, 7.1, 7.2, 7.3
Name: Maintain Users (Add, modify, remove)
Description: This collection of dialogues is involved in the complete maintenance of the user accounts
associated with this dashboard. The first of these dialogs is a page entitled “Maintain User Accounts”,
which will then have links for each of the other forms: add, remove and modify user accounts.
The first of these forms, 7.1, is the form for adding a new user account to the system. This form will ask
for the full name, position (i.e. are they a building manager? Do they work with Physical Plant? This will
basically indicate why they need this account), an e-mail address and/or phone number as contact
information, their username and password, and the user level to set this account to (user or admin).
The second form, 7.2, allows the administrator to change or correct details of an existing user account.
The form will be identical to 7.1, but with a different title. There will also be a pop-up dialog to confirm
7
M6 Human Interface Design
Team 06
April, 2012
the change of details, giving the administrator an opportunity to double-check all completed changes to
be sure no errors were made.
The final form, 7.3, is for the removal of an existing account. It will request the username and password
for the account, and will pop-up two confirmation messages (“Are you sure you wish to delete account:
<<account name>>?”, “Are you really sure?”) to make sure the administrator is deleting the correct
account.
Returns to: 0, 6, 7(for 7.1, 7.2, 7.3)
Dialogue Number: 8
Name: Modify Green Tips
Description: This page will have a drop down menu with all of the names of the Green Tips already in the
system. Selecting one will open two text boxes and a list of radio buttons on the same page, one text
box for modifying the title, the other for modifying the body text (the actual tip), and the radio buttons
will correspond to each category of Green Tip. At the bottom of this will be an apply button and a cancel
button, both of which will remove the objects from the page, with one applying the changes and the
other cancelling, as stated. Lastly, there will be a button next to the drop down menu to add a new
green tip, which will bring up the same text boxes, buttons and radio buttons, but all of these will be
blank, allowing the administrator to input a new green tip for the system.
Returns to: 0, 6
Dialogue Number: 9, 9.1, 9.2, 9.3
Name: Maintain Facilities (Add, modify, remove)
Description: As with the user maintenance forms, this collection of pages serves to maintain the facilities
for which the Dashboard monitors environmental data. The initial page will have the title “Maintain
Facilities”, with links to add, modify or remove facilities.
The first form, 9.1, will be for adding a new facility, with a title stating such. This form will consist of
multiple text boxes or radio boxes to be filled in, asking for the following information. Facility Name
(text box), Facility Type (radio boxes with options such as Residence, meal hall, etc.) and facility code
from Johnson Control Metasys are the three most crucial for the addition of a new facility. If facility type
is a residence, there will be text boxes for R.A. names, occupancy, room types, etc. Any facility will have
text boxes for relevant renovations (i.e. heating, cooling, etc.). The bottom of this page will have two
buttons, confirm and cancel. The first will ask the user to confirm all entered data and will then send a
request to add the facility to the system, returning the user to this page with appropriate error
messages if the information entered is invalid. The second will return the user to the Maintain Facilities
page.
The second form, 9.2, will be nearly identical to 9.1, but for the title and function. This page will serve to
modify existing facilities in the system, changing names, residence information, etc. As needed, and will
have the title “Modify Facility”. All other functionality is the same as 9.1.
The last form, 9.3, entitled “Remove Facility”, will ask the admin for the name of a facility and its code
from the Johnson Control Metasys Database for confirmation, and will then have a confirm and cancel
button. As with the “Remove User” dialogue, it will ask twice to confirm that the user is certain they
want to complete this action, and will then delete the facility from the system.
Returns to: 0, 6, 9 (for 9.1, 9.2 and 9.3)
8
M6 Human Interface Design
Team 06
April, 2012
Dialogue Number: 10
Name: View Audit Reports
Description: This page will have two links, one to view a report of all administrative log ins, log outs and
any changes made by that admin while they were logged in, and another to export a summary of any
particular measure for one or more facilities.
The first page will display a printable page with a time stamped list of notes on all actions taken and the
user who made them. For example, one might say: “<21:35 01/04/2012> Admin 1 added new facility:
Crowell Tower”. This list could be narrowed down by date and by changes made, using drop down
menus at the top of the page, one for changing which timeframe to examine, and the other for which
type of change to display (added facility, modified user account, accessed audit reports, etc.).
The second page will allow the user to select from the list of facilities via a series of checkboxes, and will
then generate a printable report sheet of the statistics over a given period of time for the selected
facilities.
Returns to: 0, 6
Dialogue Number: 11, 11.1, 11.2, 11.3
Name: Maintain Competition (Add, modify, remove)
Description: As per forms 7 and 9, this is a collection of forms to maintain the competitions.
Form 11.1, entitled “Start new Competition”, will ask for a Competition name, a start date and end date
for the competition, a time frame from which to take the base line measurements to compare for the
competition and a series of check boxes from which to select which facilities are involved, followed by a
confirm and a cancel button.
Form 11.2 will be nearly identical to the form for starting a new Competition, only with the title “Modify
Existing Competition” and will allow the admin to change the end date, the start date (if it hasn’t past
yet), the competition’s name, and the facilities involved. Pushing the confirm button will ask the user to
confirm the changes made, and the cancel button will redirect the admin back to form 11.
Form 11.3 will allow the admin to end a competition early, removing it completely from the system.
Since it’s generally harmless to remove a competition from the system, by comparison to removing a
user or facility, it will only require the administrator to select a competition from a drop down menu and
then confirm that that is the competition they want to delete.
Returns to: 0, 6
9
M6 Human Interface Design
Team 06
April, 2012
3 Dashboard Mock-up
3.1 Homepage
This is a mock-up of the homepage screen for the dashboard, which more or less demonstrates the basic
design for the dashboard, with tabs at the top for each of the basic screens and the user log in at the
bottom left.
10
M6 Human Interface Design
Team 06
April, 2012
3.2 Map
11
M6 Human Interface Design
Team 06
April, 2012
3.3 Graph
12
M6 Human Interface Design
Team 06
April, 2012
3.4 Competitions
13
M6 Human Interface Design
Team 06
April, 2012
3.5 Green Tips
14
M6 Human Interface Design
Team 06
April, 2012
3.6 Admin Controls
15