SFUSD High School Principal

Dashboard Design Recommendations

General Recommendations

Due to time constraints, rather than providing a full mock-up of the dashboard’s design, we have
provided written design recommendations and provided examples of several sections to illustrate
good designs for the graph types that will likely be useful for your final design. We haven’t
provided recommendations for displaying all of the information in your Dashboard Requirements,
but we think that all of the quantitative relationships you’re interested in displaying should be
displayed by bar graphs, line graphs, sparklines, or bullet graphs, and we’ve provided examples
of each.
In general, the dashboard should be organized with the information that is most important in the
upper-left corner of the screen and the information that is the least important in the lower-right
corner. We recommend placing information that changes often and that principals will need to see
every day, such as student absence rates in the upper-left corner. The lower-right corner could be
used for information that rarely changes such as the formative assessment information.
Hover text is very useful on a dashboard. Because dashboards must display a large amount of
information that people can quickly scan, most of the information on a dashboard is encoded in
graphs. Graphs work very well for allowing people to quickly make magnitude comparisons and
see patterns, trends, and exceptions, but they can’t be decoded with great accuracy. As such, if
you allow people to hover their mouse over a part of a graph such as a bar and have the exact
value appear in a tooltip, you’ll provide an easy means for people to get precise values on those
occasions when they need them without cluttering the dashboard with unnecessary text.

Perceptual Edge October 27, 2009 Page 1 of 7

Absentee Recommendations

Here is a design example of the Student Absenteeism information. Rather than displaying Student
Attendance, we focus on its opposite Student Absenteeism, because it directly reflects the principal’s
area of concern and because it’s easier to notice a change from 5% to 10% in absenteeism than it would
be to notice a change from 95% to 90% in attendance.

The line in the top-right corner of this design is called a sparkline. It works similarly to a line
graph, but it’s smaller and doesn’t have a labeled scale so people can’t use it to decode actual
values. The purpose of a sparkline is to quickly provide people with a little history about a metric
and allow them to spot any trends, patterns, or exceptions. For instance, this sparkline, which
displays Student Absenteeism for the previous 12 Wednesdays (or whatever day the dashboard
is being viewed on), shows that today’s Absenteeism (the final value on the right) is one of the
two highest measures over the past 12 weeks. We can also see that there’s no obvious trend in
Absenteeism.
The graph to the right of the sparkline is called a bullet graph. A bullet graph works similarly to a
bar graph with a single bar, but it provides more context than a bar graph would. This bullet graph
encodes today’s Absentee Rate, which is represented by the black bar. The small, black, vertical
line represents the average Absentee Rate on Wednesday’s for the district (alternatively, it could
be used to represent the Average Absentee Rate for this particular school alone). The three
shades of gray behind the bar represent qualitative regions, with the darkest gray meaning
“Poor,” the medium gray meaning “Satisfactory,” and the lightest gray meaning “Good.” Thus,
using the bullet graph people can quickly see that today’s Absentee Rate is about 3.5%, which is
higher than the District Average, but still in the Satisfactory range.

Perceptual Edge October 27, 2009 Page 2 of 7

 The vertical bar graph below the sparkline is a histogram, which is used to display value
distributions. This histogram displays a breakdown of all of the absent students by the number of
consecutive days that they’ve been absent. Using it we can see that about 42 of the students
have only been absent today, about 12 were absent yesterday too, and so forth. Ideally, the user
could click on one of the bars to drill to further details. For instance if the user clicked the “10+”
bar it could bring up a list of all the students who have been absent for 10 or more days along
with contact information for them.
The horizontal bar graph in the bottom-right corner of this section displays Absenteeism by
Ethnicity. The symbol that appears with each bar represents the district’s average percentage of
absentee’s for each ethnicity. Using this, the principal can easily see how absences among
different ethnicities compare today, both to one another and to the district as a whole. In this
case, the Native American group has a significantly higher Absentee % than any other group
today. In looking at the text next to the Native American label, we can see that there were actually
only two Native American’s absent today, so the high absentee rate is probably just caused by
the relatively small number of Native American’s at the school, and probably isn’t significant.

Perceptual Edge October 27, 2009 Page 3 of 7

Student Behavior Recommendations
The following figure illustrates a good way to show the student behavior metrics for the school compared
to the other schools in the district and the district average.

This section uses the horizontal gray bar to represent the full range of rates for the schools in the
district (with the lowest value encoded with the left end of the line and the highest value encoded
with the right end). The short, gray vertical line represents the district average, and the short,
black vertical line represents the rate for the principal’s school.
The principal should be able to click on any of the graphs in this section and be taken to a screen
that displays the most Off-Track Student , similar to this:

This screen shows the students who are most off-track, along with the number of referrals,
detentions, suspensions, truancies, and absences they’ve received. In this case, we’re assuming
that the students are ordered by their overall score using a system that gives the most weight to
suspensions, then detentions, then referrals, with truancies and absences given the least weight.

Perceptual Edge October 27, 2009 Page 4 of 7

 Of course, this is made up data and based on our assumptions of what areas are considered
worst, so you should order the top students based on whatever system will make most sense to
your principals.
The quantitative scales for each of the bars could be automatically set so that the top of the
quantitative scale reflects the largest value in the data set. For instance, in our example, no
student has more than 19 referrals, so Rajesh Ranade’s bar completely fills the plot area.

Perceptual Edge October 27, 2009 Page 5 of 7

Budget Remaining Recommendations
The Budget Remaining section should emphasize the amount that’s remaining rather than the amount
that has been spent, if this is what the principals care about most.

Each row represents a different spending category.

The sparkline next to the category title is a modified version of a step chart. Where standard
sparklines and line graphs display changes in values using the slope of the line as it moves from
one point to another, step charts only use horizontal and vertical line segments. The advantage of
this method is that, rather than a change occurring gradually as the line moves from one point to
another, it occurs immediately (as the line moves straight up or down) which draws more
attention to the change in value. In these sparklines, the top of the vertical space represents the
budgeted funds for the year and the bottom represents $0. As expenses are incurred throughout
the year the line drops lower and lower until all of the money has been spent.
The horizontal bars on the right represent the budget remaining. At the beginning of the budget
period the bars extend to 100%. As money is spent the dark gray bars grow smaller and smaller
until they’re completely gone.
Using the graphs above, for example, we can see that the current budget for the Extended Hours
category has $19,427 available, which is approximately 35% of the original budget for that
category. Using the sparkline we can see that there were several expenditures during the year,
including two fairly large ones. Using hover functionality or clicking to drill-down to more
information could give the principal the opportunity to investigate these two large expenses
further.
Although the principals need to know what funding sources comprise their budgets for each
category due to spending restrictions, we don’t think this information should go on the dashboard.
The dashboard is used for at-a-glance monitoring, not analysis, and attempting to include that
information on dashboard would cause extra clutter and require the principal to try to keep all of
the spending restrictions in their heads. We recommend letting them click on a bar for a particular
spending category and taking them to a separate screen that shows a bar graph that breaks that
category’s budget into its constituent funding sources. Below the bar graph you could provide
notes to remind principals what restrictions each of the funding sources places on their spending.
This would allow people to easily see and compare the different funding sources without overly
cluttering the dashboard or making the principal keep too much information in their head.

Perceptual Edge October 27, 2009 Page 6 of 7

Student Performance Recommendations
The following figure illustrates a good way to show the student performance distribution (based on
grades) for the school compared to the district average.

The principal should be able to click on this distribution to accessa separate screen that displays
one of these graphs per class, teacher, grade level, or student demographic group (for example,
ethnicities), . Here is an example of what four of these graphs would look like:

By stacking the graphs in a column, one above the next, notice how easy it is to compare the
patterns in each of these classrooms.

Perceptual Edge October 27, 2009 Page 7 of 7