tool m: sample wireframes · the first sample wireframe offers an example of a website you would...

arts.gov | @NEAarts ecs.org | @EdCommission

85

THE ARTS EDUCATION DATA TOOLKIT

Tool M: Sample WireframesThe following two sample wireframes offer examples of how you can present and organize arts

education data in an interactive format that suits diverse audiences. Each wireframe contains rough

mockups of charts to demonstrate how the format of your website can affect the content you want

to present. These wireframes are purposely plain. You would need to style your website to meet the

host organization’s branding guidelines. Please note that any data displayed in the wireframes are for

demonstration purposes only. They do not describe any known state, district or school.

The first sample wireframe offers an example of a website you would probably have to design from

scratch. Unless you have a sophisticated team of developers in your organization, you must hire a

vendor to produce a website like this. This approach can give you flexibility over how you choose to

organize and visualize information about arts education, but that flexibility comes at a cost. A website

like this can cost $100,000 or more.

The second sample wireframe aims to demonstrate what is possible on an off-the-shelf data

visualization platform. This solution is substantially cheaper — $20,000 or less, depending on how

much of the work you or your partner organizations can perform. Off-the-shelf solutions offer less

flexibility than bespoke websites, but a reasonably tech-savvy person can create them without relying

on extensive coding skills.

These are merely samples rather than prescriptive models. Your goals, audiences and priorities may

require different kinds of visualizations or navigation. Still, they aim to spark your thinking about how

to present large amounts of data in a well-organized and accessible format.

http://www.arts.gov

http://www.twitter.com/NEAarts

http://www.ecs.org

http://www.twitter.com/EdCommission

arts.gov | @NEAarts

8686

ANATOMY OF A STATE DUCATION DATA WEBSITE: EXAMPLE 1The simple mockup of an arts education data website that appears in the following pages offers results for the state as a whole, every school district, and every school. Under each of these, it also offers three levels of detail: (1.) A page with an overview of all arts disciplines; (2.) Pages offering overviews of each separate arts discipline; and (3.) Pages offering further detail on individual arts education indicators. The schematic below provides a general outline of the website’s architecture.

STATEWIDE RESULTS DISTRICT RESULTS SCHOOL RESULTS

STATE LANDING PAGEpresents a statewide overview of all arts disciplines. Links to pages on individual disciplines (see level 2, below). Also links to the district/ school search page to explore district results or school results.

INDIVIDUAL DISTRICTOVERVIEW PAGEmirrors the state landing page. Links to pages on individual disciplines in the district (level 2, below).

INDIVIDUAL SCHOOL OVERVIEW PAGEmirrors the state and district overviews. Links to pages on individual disciplines in the school (level 2, below).

DISTRICT/SCHOOL SEARCH PAGE This page, which is accessible from every other page in the website, allows users to search for individual districts and schools.

STATE-LEVEL PAGES ON INDIVIDUAL ARTS DISCIPLINES. Each of these pages inks to pages with more detail on individual indicators (level 3, below).

DISTRICT-LEVEL PAGES ON INDIVIDUAL ARTS DISCIPLINES. These pages mirror the state- level pages on individual disciplines. Each inks to pages with more detail on individual indicators (level 3, below).

SCHOOL-LEVEL PAGES ON INDIVIDUAL ARTS DISCIPLINES. These pages mirror the corresponding state and district-level pages. Each inks to pages with more detail on individual indicators (level 3, below).

Level 1: Overview of all arts disciplines

Level 2: Overview of one arts discipline

Level 3: Further detail on indicators from Level 2

STATE-LEVEL PAGES WITH DETAIL ON SINGLE INDICATORS.Each of these pages includes source information and additional context for the indicator it displays.

DISTRICT-LEVEL PAGES WITH DETAIL ON SINGLE INDICATORS.These pages mirror the state-level pages on single indicators.

SCHOOL-LEVEL PAGES WITH DETAIL ON SINGLE INDICATORS.These pages roughly mirrors the corresponding state- and district-level pages on single indicators.

http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov


87


Top level navigation – ABOUT STATE DISTRICT SCHOOL ART TYPE

Introduction TextUse this section to give a brief overview on the site

The About page should detail where data sources and walk the users through how to use the site.

State Data Overview(Click to go through to text page)

Search by District(Either pull down list or box for searching)

Search by Schools(Either pull down list or box for searching)

Name of school

Art Disciplines Included in Data(Icons Clickable links to subsequent pages)

Name of district

Landing Page

Top level navigation – ABOUT STATE DISTRICT SCHOOL ART TYPE

Introduction TextUse this section to give a brief overview on the site

The About page should detail where data sources and walk the users through how to use the site.

State Data Overview(Click to go through to text page)

Search by District(Either pull down list or box for searching)

Search by Schools(Either pull down list or box for searching)

Name of school

Art Disciplines Included in Data(Icons Clickable links to subsequent pages)

Name of district

Landing Page

Name of school

Name of district

http://www.arts.gov


http://www.ecs.org


arts.gov | @NEAarts

8888

STATEWIDE--LEVEL 1. STATE OVERVIEW PAGEThis page offers an overview of the condition of arts education in your state, presents the main navigation menu, and gives the reader an introduction to major data points for each arts discipline. Clicking on menu items on the left or charts will take readers to a page with more information on individual arts disciplines. (See State Level 2 on the next page.)

Top level navigation

HOME / STATE X / STATE OVERVIEW

Dance

Media Arts

Music

Theatre

Visual Art

State overview THE CONDITION OF ARTS EDUCATION IN STATE XUse this space to lay out main themes and highlight key data on arts education in the state.

DancePercentage of students who had access to dance courses, State X, 2018/19

Media ArtsPercentage of students who had access to media arts courses, State X, 2018/19

MusicPercentage of students who had access to music courses, State X, 2018/19

TheatrePercentage of students who had access to theatre courses, State X in 2018/19

Visual ArtPercentage of students who had access to Visual art courses, State X in 2018/19

Insert chart here

Insert chart here

Insert chart here

Insert chart here

Insert chart here

SEARCH BY DISTRICT

OR SCHOOL

The top five menu items link to separate pages for each arts discipline (See Level 2, below for an example.)

This item links to a page where visitors can search for individual districts or schools.

These charts present key data points for each arts discipline. Click on a chart to visit the page for that discipline.

http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov


89


STATEWIDE – LEVEL 2. OVERVIEW OF A SINGLE ARTS DISCIPLINEThis page offers a state-level overview of information on a single arts discipline. It provides high-level data on access to courses, course-taking, and access to teachers. Clicking on menu items on the left or charts will take readers to a page with more detail on specific topics, such as access to courses. (See State Level 3 on the next page.)


HOME / STATE OVERVIEW / MUSIC

Access to Courses

Enrollment in Courses

Access to Teachers

Find a district or school

Music STATE X MUSIC OVERVIEWUse this space to lay out main themes and highlight key data points.

The top three menu items, and the corresponding charts, link to more detail on access, enrollment, and teachers (See Level 3, below, for an example.)

Access to courses

Students in schools that offered music courses, State X, 2014/15-2018/19

Enrollment in CoursesStudents enrolled in music courses, State X, 2014-15- 2018/19.

Access to TeachersStudents in schools that employed certified music teachers, State X, 2014/15- 2018/19

Insert chart here

Insert chart here

Insert chart here

http://www.arts.gov


http://www.ecs.org


arts.gov | @NEAarts

9090


HOME / DISTRICT X / MUSIC / ENROLLMENT IN COURSES

Access to Courses

Media Arts


Access to Teachers


Music

STATEWIDE – LEVEL 3: DETAIL ON A SINGLE INDICATORThis page offers more detail on individual indicators presented in the previous pages. Here, visitors can filter results by different student subgroups, or by types of schools.

Arts Education in Our State

Site visitors can filter the data to investigate gaps among subgroups of students. The “school type” filter could include traditional public schools and public charter schools. Other filters could include English language learner status, special education status or

school location (urban, suburban, rural).

Music - Access to Courses in Disctrict X



Access to Courses

Media Arts


Access to Teachers


Music








Access to Courses

Media Arts


Access to Teachers


Music






http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov


91


DISTRICT-WIDE – LEVEL 1: DISTRICT OVERVIEW PAGEThis page offers a general overview of arts education in a single district. It is very similar in format and content to the statewide overview page.


HOME / DISTRICT X / DISTRICT OVERVIEW

Dance

Media Arts

Music

Theatre

Visual Art

District overview THE CONDITION OF ARTS EDUCATION IN District X

If feasible, use this space to lay out main themes and highlight key data for the district.

DancePercentage of students who had access to dance courses, District X, 2018/19

Media ArtsPercentage of students who had access to media arts courses, District X, 2018/19

MusicPercentage of students who had access to music courses, District X, 2018/19

TheatrePercentage of K-12 students had access to the-atre courses, District X, 2018/19.

Visual ArtPercentage of students who had access to Visual art courses, District X in 2018/19.

If there are many school districts in your state, it will be difficult to tailor this introductory language to each specific district. It may be more feasible to include standard language here that helps frame the context and importance of the information presented on this page.

Insert chart here

Insert chart here

Insert chart here

Insert chart here

Insert chart here

This page offers a general overview of arts education in a single district. It is very similar in format and content to the statewide overview page.

http://www.arts.gov


http://www.ecs.org


arts.gov | @NEAarts

9292

DISTRICT-WIDE – LEVEL 2: DISTRICT OVERVIEW OF A SINGLE ARTS DISCIPLINEThis page offers a district-level overview of information on a single arts discipline. It closely resembles the statewide overview of information on a single arts discipline.

Access to Courses


Access to Teachers


Music THE CONDITION OF MUSIC EDUCATION IN DISTRICT X

If feasible, use this space to lay out main themes and highlight key data for the district.


HOME / DISTRICT X / MUSIC

Access to coursesStudents in schools that offered music courses, District X, 2014/15- 2018/19

Enrollment in coursesStudents enrolled in music courses, District X, 2014-15- 2018/19.

Access to teachersStudents in schools that employed certified music teachers, District X, 2014/15-2018/19

Insert chart here

Insert chart here

Insert chart here

http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov


93


DISTRICT-WIDE – LEVEL 3: DETAIL ON A SINGLE INDICATORThis page offers more detail on individual indicators presented in the previous pages. Here, visitors can filter results by different student subgroups, or by types of schools.


Access to Courses


Access to Teachers


Music



MUSIC - Access to Courses in District X

In smaller districts, some student subgroups may be so small that the state will suppress data on them to abide by federal and state policy laws. If this is a widespread problem, you may consider removing this tab.

You can add context to district-level results by comparing them with state-level results, as in this chart.

http://www.arts.gov


http://www.ecs.org


arts.gov | @NEAarts

9494

SCHOOL-WIDE – LEVEL 1: SCHOOL OVERVIEW PAGEThis page offers a general overview of arts education in a single school. It is similar in format and content to the statewide and district-wide overview pages. Unlike those pages, however, this one probably cannot offer percentages of students with access to arts classes. In most cases, your data will only show whether or not schools offered the class. The page could focus on enrollment instead.


HOME / SCHOOL X / SCHOOL OVERVIEW

Dance

Media Arts

Music

Theatre

Visual Art

Disctrict/School

School overview ARTS EDUCATION IN SCHOOL XIn 2018/19, School X offered courses in the following arts disciplines:

[Include icons representing each discipline offered]

Insert chart here

Insert chart here

Insert chart here

Insert chart here

Insert chart here

DancePercentage of students who enrolled in dance courses, School X, 2018/19

Media ArtsPercentage of students who enrolled in media arts courses, School X, 2018/19

MusicPercentage of students who enrolled in music courses, School X, 2018/19

TheatrePercentage of K-12 students who enrolled in theatre courses, School X, 2018/19.

Visual ArtPercentage of students who enrolled in Visual art courses, School X in 2018/19.

Some schools will appear to offer no classes in one or more arts disciplines. In that case, you can simply write that the school had no enrollment in the discipline, rather than displaying an empty chart. It will require additional coding to replace a chart with a sentence in such cases.

This box could offer a very brief overview of which arts classes the school offers. If the data are robust enough, you can offer a list of specific courses under each arts discipline.

http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov


95


THE CONDITION OF MUSIC EDUCATION IN SCHOOL X

If feasible, use this space to lay out main themes or frame the context of data below.

SCHOOL-WIDE – LEVEL 2: SCHOOL OVERVIEW OF A SINGLE ARTS DISCIPLINEThis page offers a school-level overview of information on a single arts discipline. It resembles the state- and district-wide overviews of information on a single arts discipline, though again with important distinctions. If a school did not offer access to courses in the discipline, the page can simply say as much, or the system can suppress the page altogether.


HOME / SCHOOL X / MUSIC


Access to Teachers


Music

Enrollment in coursesPercentage of students enrolled in music courses, School X, 2014-15-2018/19.

Access to teachersNumber of dedicated music teachers in School X, 2014/15-2018/19

Insert chart here

Insert chart here

Unlike the menus on the corresponding state- and district- wide pages, this menu does not include access to courses in the arts, because the previous page already indicates what arts courses the school offers.

http://www.arts.gov


http://www.ecs.org


arts.gov | @NEAarts

9696

SCHOOL-WIDE – LEVEL 3: DETAIL ON A SINGLE INDICATOR This page offers more detail on individual indicators presented in the previous pages. Here, visitors can filter results by different student subgroups, or by types of schools.



HOME / SCHOOL X / MUSIC / ENROLLMENT IN COURSES

Access to Courses


Access to Teachers


Music MUSIC - Access to Courses in School X

Add text here to set context or explain the chart below.

You can provide more context for your school- level information by comparing it to district- and state-level information.

http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov


97


ANATOMY OF A STATE DUCATION DATA WEBSITE: EXAMPLE 2This simple mockup of an arts education data website offers arts education data results for the state as a whole, every school district, and every school. Under each of these, it offers two levels of detail: (1.) A page with an overview of all arts disciplines; (2.) Pages offering overviews of each separate arts discipline, with options to view data by subgroup or to toggle between snapshot and trend data. The website also allows users to view district-to-district and school-to-school comparisons. The schematic below provides a general outline of the website’s architecture.

STATEWIDE RESULTS DISTRICT RESULTS SCHOOL RESULTS

STATE OVERVIEW PAGEpresents a statewide overview of all arts disciplines. This is the site’s main landing page, and it links to pages on individual disciplines (see level 2, below).

INDIVIDUAL DISTRICTOVERVIEW PAGEmirrors the state landing page. Links to pages on individual disciplines in the district (level 2, below).

INDIVIDUAL SCHOOL OVERVIEW PAGEmirrors the state and district overviews. Links to pages on individual disciplines in the school (level 2, below).

DISTRICT/SCHOOL DROPDOWN LISTS on every page allow users to move among state, district, and school results.

STATE-LEVEL PAGES ON INDIVIDUAL ARTS DISCIPLINES. Dropdown lists allow users to examine data by subgroup. Users can also select multi-year trend data or single- year snapshot data. This page links to another page where users can compare districts.

SCHOOL-LEVEL PAGES ON INDIVIDUAL ARTS DISCIPLINES. These pages mirror the corresponding state and district-level pages.

Level 1: Overview of all arts disciplines

Level 2: Overview of one arts discipline

District or school comparisons

DISTRICT-LEVEL PAGES WITH DETAIL ON SINGLE INDICATORS.Users can select the districts they want to compare on individual arts disciplines.

Compare SchoolsUsers can select the schools they want to compare on individual arts disciplines.

DISTRICT-LEVEL PAGES ON INDIVIDUAL ARTS DISCIPLINES. As in the state overview pages, users can view data by subgroup and see trend data as well as snapshot data for a single year. This page links to a page where users can compare schools.

COMPARE SCHOOLS

http://www.arts.gov


http://www.ecs.org


arts.gov | @NEAarts

9898

The top dropdown list allows users to choose a state overview or a specific district. The bottom dropdown list will automatically populate with schools in the selected state or district.

This menu bar allows users to explore discipline- specific data in greater depth.

This is the main landing page for the website. It offers an overview of the condition of arts education in your state, presents the main navigation menu, and gives the reader an introduction to major data points for each arts discipline. Drop down lists at the top of the page allow users to navigate to pages showing similar data for individual districts or schools. Back to wireframe overview.

Landing Page

State or disctrict

School

State X [Dropdown List]

[Dropdown List]

http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov


99


STATEWIDE—LEVEL 2 SINGLE DISCIPLINE PAGEThis page offers a state-level overview of information on a single arts discipline. Drop-down lists above the charts allow users to see results broken out by student subgroup or displayed as trends over multiple years. Back to wireframe overview.

State or disctrict

School

State X [Dropdown List]

[Dropdown List]

This button takes users to a page where they can compare districts to one another.

The trend or snapshot drop-down list allows users to switch between snapshot data (shown here) or multi-year trend data.

The student subgroup drop-down list allows users to see the charts below broken out by such categories as gender or race/ethnicity.

Users who hover over this information icon will see a box with further information about the chart—such as the data source or an explanation of the terms in the chart.

http://www.arts.gov


http://www.ecs.org


arts.gov | @NEAarts

100100

DISTRICT COMPARISON PAGEThis page allows users to compare results among districts within a single arts discipline. Users can select districts for comparison from a drop-down list. Other drop-down lists allow users to select the metric for comparison and then break results out by student subgroup. Back to wireframe overview.

State or disctrict

School

District X [Dropdown List]

[Dropdown List]

Users can select districts for comparison from a multi-select drop-down list. The list should include a “select all” option.

This button returns users to the state overview page.

The “metric” drop-down list allows users to select what metrics they want to examine when comparing among districts—access, enrollment, or access to teachers, for example.

http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov


101


DISTRICT OVERVIEW PAGEThe district overview page closely resembles the state overview page, but it presents data specific to the district. Back to wireframe overview.

State or disctrict

School


[Dropdown List]

This drop down list will show all the schools in the district. Users who select a school will be taken to the school overview page.

http://www.arts.gov


http://www.ecs.org


arts.gov | @NEAarts

102102

DISTRICT—SINGLE ARTS DISCIPLINEThe district page displaying data on a single arts discipline closely resembles its state counterpart, but it presents data specific to the district. Back to wireframe overview.

State or disctrict

School


[Dropdown List]


In small districts, you may not be able to report data on certain subgroups, If they’re small enough in number to meet data suppression limits designed to protect students’ privacy.

DISTRICT—SINGLE ARTS DISCIPLINEThe district page displaying data on a single arts discipline closely resembles its state counterpart, but it presents data specific to the district. Back to wireframe overview.

State or disctrict

School


[Dropdown List]


In small districts, you may not be able to report data on certain subgroups, If they’re small enough in number to meet data suppression limits designed to protect students’ privacy.

http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov

http://WWW.ECS.ORG


103


SCHOOL COMPARISON PAGEThis page closely resembles district comparison page, but it presents data specific to select schools. Back to wireframe overview.

State or disctrict

School


[Dropdown List]

This button returns users to the district overview page.

Note that, in many schools, breakdowns by race/ethnicity, income, or other subgroups may be impossible, because enrollment in some subgroups may be below the reporting threshold established to protect students’ privacy.

As with the district comparison page, users can select schools for comparison from a multi-select drop-down list. The list should include a “select all” option.

http://www.arts.gov


http://www.ecs.org


arts.gov | @NEAarts

104104

DISTRICT OVERVIEW PAGEThe district overview page closely resembles the state overview page, but it presents data specific to the district. Back to wireframe overview.

State or disctrict

School


[Dropdown List]

Here, you can indicate whether schools offered classes in any given discipline. In some cases, total lack of enrollment can be a sign that schools did not offer the course.

http://www.arts.gov


http://WWW.ECS.ORG

http://www.arts.gov


105


SCHOOL SINGLE ARTS DISCIPLINE PAGEThis page closely resembles the corresponding page for the district. Back to wireframe overview.

State or disctrict

School


[Dropdown List]

If a school does not offer courses in a discipline, your overview text can simply note that fact. You can then suppress the charts below, if your data visualization platform allows that feature.Alternatively, the charts can indicate that there was no enrollment.

As in the school comparison page, enrollment in some subgroups may be below the reporting threshold established to protect students’ privacy. In those cases, subgroup analysis may be impossible.

http://www.arts.gov


http://www.ecs.org


tool m: sample wireframes · the first sample wireframe offers an example of a website you would...

Documents