{"id":5116,"date":"2016-07-05T23:56:03","date_gmt":"2016-07-06T03:56:03","guid":{"rendered":"http:\/\/research.prattsils.org\/?p=5116"},"modified":"2016-07-05T23:56:03","modified_gmt":"2016-07-06T03:56:03","slug":"5116","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/visualization\/5116\/","title":{"rendered":"The New York Public Library Branch Services (July 2010 &#8211; June 2011)"},"content":{"rendered":"<div id=\"attachment_5127\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Dashboard.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5127\" class=\"size-large wp-image-5127\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Dashboard-940x569.png?resize=720%2C436\" alt=\"Figure 1: Initial Dashboard Design of 7\/2010-6\/2011 NYPL Branch Services Data\" width=\"720\" height=\"436\" \/><\/a><p id=\"caption-attachment-5127\" class=\"wp-caption-text\">Figure 1: Initial dashboard design<\/p><\/div>\n<p>INTRODUCTION<\/p>\n<p><span style=\"font-weight: 400\">In September 2011, the New York Public Library (NYPL) released data on the various services offered in\u00a0branches throughout the system. The data was collected from July 2010 to June 2011. It was made available to download as a comma-separated values (csv) file through the New York City Open Data website. The dataset includes the number of\u00a0programs, reference transactions, weekly hours, and more from all branches, including special units, throughout the year. There are over 100 rows in the dataset.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The main goal was to not only visualize the data provided in the dataset, but to provide users a tool to seek information in the data based on their own needs and interests. Originally, the intended user of this visualization was employees of NYPL, and anyone involved in the system, that could use this as a statistical reference for annual reports. However, as the design process went on and evolved, it was realized that the intended user can be anyone interested in the data offered. Ideally, any user will be\u00a0able to search and navigate the visualization accordingly and with ease.<\/span><\/p>\n<p><span style=\"font-weight: 400\">PROCESS<\/span><\/p>\n<p><span style=\"font-weight: 400\">Using Tableau 9.0, a dashboard was created to visualize three main components of the data: (1) the total branch services offered both systemwide, and by department, (2) outreach services, and (3) the weekly hours of public service. With over eighty branches performing services throughout the year, visualizing the data was heavily based on the boroughs and central library units. Overtime, a story was created to accompany the dashboard. The story provides users with the option to interact with each section of the dashboard separately, while the visualizations themselves were expanded to provide more visual clarification for the user.<\/span><\/p>\n<p>In the final stages of designing the story three library science students were recruited to participate in the user research portion. The students all have different\u00a0career goals in\u00a0the field of librarianship, however, there is\u00a0a common interest in Digital Humanities and information\u00a0visualization like that of the data used in this case. It is also worth mentioning that the participants\u00a0were part of a small pool of potential recruits\u00a0due to location\u00a0at the time of the\u00a0user research.<\/p>\n<p>DESIGN<\/p>\n<p>The original\u00a0dashboard (figure 1) was initially intended to be\u00a0the main design. At the time, it was felt that it successfully visualized the key information from the data. For each of the graphs, the respective dimensions were placed in the columns, and the measures in the rows. For the departmental (adult, young adult, and children) branch services, stacked bar graphs were chosen because they were always intended to be placed side by side on\u00a0the dashboard, and the goal was to provide\u00a0users with a convenient visual reference to make comparisons. The same color scheme (blue, red, and brown) was used throughout the entire designing process, with exception to the systemwide branch services graph (figure 2), which was made\u00a0green. The darkest green,\u00a0the grand total for each service,\u00a0has\u00a0the highest value. The same two filters, branch and borough\/central library, was applied to each graph. Users are\u00a0also able to hover for details on the current\u00a0point, and click to highlight.<\/p>\n<div id=\"attachment_5132\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-SW.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5132\" class=\"size-large wp-image-5132\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-SW-940x530.png?resize=720%2C406\" alt=\"Figure 2: Systemwide Branch Services (line graph)\" width=\"720\" height=\"406\" \/><\/a><p id=\"caption-attachment-5132\" class=\"wp-caption-text\">Figure 2: Story design for systemwide branch services<\/p><\/div>\n<p>In the story, the departmental graphs (figures 3-5) were changed from being stacked to horizontal. Like the dashboard graphs, shapes were chosen instead of bars because it allowed for more clarification of the values. However, unlike the dashboard, the colors are used to represent the service instead of the borough\/central library. Having these graphs separate from the dashboard, with their own legends, will hopefully have users look closer at the information, without confusion.<\/p>\n<div id=\"attachment_5131\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-AD.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5131\" class=\"wp-image-5131 size-large\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-AD-940x569.png?resize=720%2C436\" alt=\"Figure 3: Adult Branch Services\" width=\"720\" height=\"436\" \/><\/a><p id=\"caption-attachment-5131\" class=\"wp-caption-text\">Figure 3: Initial story design for adult branch services<\/p><\/div>\n<div id=\"attachment_5130\" style=\"width: 400px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-YA.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5130\" class=\"wp-image-5130\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-YA-620x377.png?resize=400%2C243\" alt=\"Figure 4: Young Adult Branch Services\" width=\"400\" height=\"243\" \/><\/a><p id=\"caption-attachment-5130\" class=\"wp-caption-text\">Figure 4: Initial story design for young adult branch services<\/p><\/div>\n<div id=\"attachment_5129\" style=\"width: 400px\" class=\"wp-caption alignright\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-CR.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5129\" class=\"wp-image-5129\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-CR-940x571.png?resize=400%2C243\" alt=\"Figure 5: Children Branch Services\" width=\"400\" height=\"243\" \/><\/a><p id=\"caption-attachment-5129\" class=\"wp-caption-text\">Figure 5: Initial story design for children&#8217;s branch services<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>When designing the outreach services graph (figure 6) for the story, blue was used to stay with the overall color scheme. The horizontal bar graph is descending by programs and attendance, respectively. Users are able to identify\u00a0the relationship between the number of outreach service programs offered and the number of people attending them.<\/p>\n<div id=\"attachment_5171\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Screen-Shot-2016-07-06-at-04.09.40.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5171\" class=\"wp-image-5171 size-large\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Screen-Shot-2016-07-06-at-04.09.40-940x481.png?resize=720%2C368\" width=\"720\" height=\"368\" \/><\/a><p id=\"caption-attachment-5171\" class=\"wp-caption-text\">Figure 6: Outreach Services<\/p><\/div>\n<p>The final step was visualizing the number of hours per week that each branch served the public. A bubble chart was chosen. This was the only time, throughout the entire design process, that the branches&#8217; networks were actively used for the design process. Again, keeping with the color scheme, each bubble is labeled with the borough or central library, the network, and the number of hours. The bubbles are sized by the total number of hours per week.<\/p>\n<div id=\"attachment_5120\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-Hours.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5120\" class=\"size-large wp-image-5120\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Story-Hours-940x570.png?resize=720%2C437\" alt=\"Figure 7: Weekly Hours of Public Service\" width=\"720\" height=\"437\" \/><\/a><p id=\"caption-attachment-5120\" class=\"wp-caption-text\">Figure 7: Initial story design for weekly hours of public service<\/p><\/div>\n<p><span style=\"font-weight: 400\">UX RESEARCH<\/span><\/p>\n<p>At this point, participants were asked to navigate the dashboard and story, and make comments. Other than providing answers to some basic questions, notes were taken with very little to no interference. At the end of every session, participants were asked to share the\u00a0changes and additions they felt should be made to the design.<\/p>\n<p>Overall, all the three participants were pleased with the initial design outcome. Maintaining the\u00a0same color scheme throughout was aesthetically pleasing, and useful in identifying certain data, along with the detail boxes that appear when hovering. It was also said that it had\u00a0been helpful\u00a0having the filters apply to all\u00a0the graphs at once. The participants all commented positively on the navigation and overall clarification of the data in each point of the story. There were, however, two main revision suggestions that were brought up, in some way, during each session: (1) the dashboard was overwhelming at first glance, and (2) some of the graphs were not immediately clear in the\u00a0data they were presenting.<\/p>\n<p><span style=\"font-weight: 400\">RECOMMENDATIONS AND REVISIONS<\/span><\/p>\n<p>One user noted that the interruption\u00a0of the outreach services graph, between the systemwide graph and legend, was distracting. It was\u00a0suggested that the legend for the systemwide graph be kept next to the graph itself so that it would &#8220;flow better&#8221;. Another \u00a0participant remarked on the three departmental\u00a0branch services graphs. Despite the previous design testing positive for aesthetics, it was remarked that without hovering, they were &#8220;not getting much&#8221; from the data. Upon hearing this, it was decided that line graphs would work better on the dashboard. Finally, it was decided that the weekly hours as stacked bars would be changed to circles after the graph was moved to the other side of the dashboard. This was done to not only make all the values clear and visible, but it would not lead to\u00a0users assuming the graph was providing the same\u00a0information as the outreach services graphs which was similarly designed. Shown below (figure 8), is the final dashboard design.<\/p>\n<div id=\"attachment_5157\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Screen-Shot-2016-07-06-at-02.49.23.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5157\" class=\"wp-image-5157 size-large\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Screen-Shot-2016-07-06-at-02.49.23-940x654.png?resize=720%2C501\" width=\"720\" height=\"501\" \/><\/a><p id=\"caption-attachment-5157\" class=\"wp-caption-text\">Figure 8: Final dashboard design<\/p><\/div>\n<p>As one the participants continued onto the departmental graphs (figures 3-5) in the story, they commented on the graphs being somewhat misleading because some of the circles appeared on the same line while having varying values (e.g. 0 and 802). This was due to having such significant outliers. The participant not only suggested labeling the points, but also swapping\u00a0the axes on the graph to allow for more readability. Below (figure 9) is a revised adult branch services graph. A line graph was ultimately decided upon, while still maintaining the same color scheme throughout. Along with\u00a0the new labels on\u00a0the graphs, users are still able to apply filters and explore the graphs by clicking and highlighting desired points.<\/p>\n<div id=\"attachment_5119\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/BrSerc-Rec.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5119\" class=\"size-large wp-image-5119\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/BrSerc-Rec-940x568.png?resize=720%2C435\" alt=\"Figure 8: UX research revision (adult branch services)\" width=\"720\" height=\"435\" \/><\/a><p id=\"caption-attachment-5119\" class=\"wp-caption-text\">Figure 9: UX research revision (adult branch services)<\/p><\/div>\n<p>Finally, one participant admitted to being momentarily unsure of what the weekly hours graph (figure 7) was trying to show. Not only were the bubbles\u00a0edited to reflect the data they were showing, but the lettering for the number of hours was made slightly larger (figure 10).<\/p>\n<div id=\"attachment_5118\" style=\"width: 720px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Hours-Rec.png\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5118\" class=\"size-large wp-image-5118\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infoshow\/wp-content\/uploads\/sites\/2\/2016\/07\/Hours-Rec-940x570.png?resize=720%2C437\" alt=\"Figure 10: UX research revisions (weekly hours)\" width=\"720\" height=\"437\" \/><\/a><p id=\"caption-attachment-5118\" class=\"wp-caption-text\">Figure 10: UX research revisions (weekly hours)<\/p><\/div>\n<p>There are two other future design revisions that can be made. The\u00a0first would be to incorporate more of the branch network data. As previously mentioned, the original intended audience was NYPL employees, and they would benefit from having the option to view and filter the branch network data that is provided in the dataset.<\/p>\n<p>The second would be to include a separate design for each of the services offered in\u00a0the branches. With this, users will also be able to filter the respective service by branch, network, department, etc. A user may only be interested in one particular service and this would make the overall design of the data more comprehensive and accessible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>INTRODUCTION In September 2011, the New York Public Library (NYPL) released data on the various services offered in\u00a0branches throughout the system. The data was collected from July 2010 to June 2011. It was made available to download as a comma-separated values (csv) file through the New York City Open Data website. The dataset includes the&hellip;<\/p>\n","protected":false},"author":245,"featured_media":5157,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"coauthors":[],"class_list":["post-5116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visualization"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/saBdcV-5116","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/5116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/users\/245"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=5116"}],"version-history":[{"count":0,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/5116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=5116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=5116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=5116"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=5116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}