Building a Data Dashboard

Dashboard web pages that display, at a glance, a wide range of information about a library’s operations are becoming common. These dashboards are made possible by the ubiquity of web-based information visualization tools combined with the ever increasing availability of data sources. Naturally, libraries want to take advantage of these tools to provide insight alongside some “wow” factor.

Ball State Libraries' dashboard

Ball State University Libraries’ dashboard shows many high-level figures about a variety of services. One can learn more about a particular figure by clicking the “+” or “i” icons beside it.

TADL dashboard

The Traverse Area District Library dashboard has a few sections with different types of charts. Shown here are four line graphs displaying changes in various usage statistics over time.

I’ve assembled a list of several data dashboards; if you know of one that isn’t on the list, let me know in the comments so I can add it.

It’s difficult to set about piecing together a display from the information immediately available. The design and data collection process largely determines the success of the dashboard. I don’t pretend to be an expert on these processes; rather, my own attempt at building a dashboard was a productive failure that helped to highlight where I went wrong.

Why do we want to build a dashboard?

As with any project, the starting point for building a dashboard is to identify what we’re trying to accomplish. Having a guiding idea will determine everything that follows, from the data we collect to how we choose to display them.

There are two primary goals for dashboards: marketing and success. One seeks to advertise the excellence of the library—perhaps to secure further funding, perhaps to raise its profile on campus—while the other aims at improved daily operations, however that may be defined. These are two terrifically broad categories but they create a useful distinction when building a dashboard.

Perhaps our goal is “to make a flashy dashboard, one that’ll make spectators rubberneck as they navigate the information superhighway.”

I’m not even being sarcastic. It’s easy to dismiss designs that are flashy to the detriment of their content. The web is rife with visualizations that leave their audiences with no improved understanding of the issue at hand. But there is also value to shiny sites that show the library can create an intriguing product. Furthermore, experimental visualizations that explore the possibilities of design can be a wonderful starting point. What appeared to be superficial glitz may unearth an important pattern. Several failed, bombastic charts may ultimately lead to a balanced display.

In general, flashy displays fall into the marketing category. They’re eye candy for the library, whether through the enormity of the figures themselves (“look how many books we circulated last year! articles downloaded from our databases! reference queries we answered!”) or loud design.

Increasing the success of the library is a very different goal. What defines “success” is more subjective than marketing and as such the types of data included will vary greatly. Assessing services calls for timelines, cross-sections of data, and charts that render divergent data representing different aspects of a library comparable. Unlike marketing figures, the charts need not be easily interpreted. Simplification may unintentionally distort what’s going on, obscuring important but subtle trends. To quote from an In the Library with the Lead Pipe post from 2009:

Libraries collect a lot of data that encompass complex networks about how users navigate through online resources, which subjects circulate the most or the least, which resources are requested via interlibrary loan, visitation patterns over periods of time, reference queries, and usage statistics of online journals and databases. Making sense of these complex networks of use and need isn’t easy. But the relationships between use and need patterns can help libraries make hard decisions (say, about which journals to cut) and creative decisions to improve user experiences, outreach, achieve efficiencies, and enhance alignment with organizational goals.
— Hilary Davis, “Not Just Another Pretty Picture” 1

If an institution or department has a more narrow goal in mind than marketing or assessment, chances are it still relates to one of the two. It’s also possible to build a dashboard that accomplishes both goals, providing insight for staff while thrilling external stakeholders. However, that’s no easy feat to accomplish. What external parties find surprising may be pedestrian to staff, and vice versa. Libraries provide simple, Google-esque search fields alongside triplicate advanced search forms for the same reason. Users shouldn’t need to know SQL to find a title; staff shouldn’t be limited to keyword searches for their administrative tasks. Appealing to such varied sensibilities at once is an onerous task best avoided if possible.

Choosing Our Data Sources

The ultimate goal of a data dashboard will greatly affect what data sources are sensible. Reviewing the dashboards of other libraries, a few data sources are repeated across them:

  • Checkouts and renewals
  • Print volumes and other material holdings
  • Inter-library loan
  • Gate counts
  • Computer use
  • Reference questions

These data are commonly available, but don’t capture the unique value that libraries provide. We can use them as a starting point but should keep in mind that our dashboard’s purpose determines what information is pertinent. Simply because a figure is readily available within our ILS isn’t a sufficient reason to include it. On the other hand, we may find our display would benefit greatly from a figure which isn’t available, thus influencing how we collect and analyze data going forward.

Marketing displays must be persuasive. The information in them should be positive, surprising, and understandable to a broad audience.

Total circulation, article/ebook downloads, and new items digitized all might be starting points. The breadth of a library’s offerings is often surprising to external parties, too. Show circulation across many subject areas, attempt to outline all the impact of the library’s many services. For instance, if our library has an active social media presence we could show various accounts and the measures of popularity for each (followers and favorites, translated across the schemas of the specific networks).

Simply pilfering all the dashboard’s data from typical year-end reports submitted to organizations like the Nation Center for Educational Statistics, ALA, or our accrediting bodies is a terrible idea for marketing displays. These numbers are less important outside of the long-term, cross-institutional trends they make visible. Our students, faculty, or funders probably do not care about the exact quantity of our microfilm holdings. Since our dashboard isn’t held to any reporting standards, this is our chance to show what’s new, what those statistical warehouse organizations do not yet collect.

Marketing displays should focus on aggregate numbers that look impressive in isolate and do not require much context to apprehend. Different categories need not be comparable or normalized; each figure can have its own type of chart and style as long as the design is visually appealing. Marketing isn’t meant to generate insight so highlighting patterns across different data sources isn’t necessary. All of the screenshot examples at the beginning of this post represent marketing-oriented dashboards because of the impressive nature of the figures presented as well as their relative lack of informative depth.

I’ll be honest, presenting data for marketing purposes makes me feel conflicted. It’s easy to skirt the truth since one’s incentives lie in producing ever more stunning figures, not in representing reality. If there is serious dysfunction within a library, marketing displays won’t disclose them. Nonetheless, there’s value to these efforts. I wouldn’t be in this profession if I didn’t believe that libraries produce an astonishing amount of value for their host institutions, through a wide range of services. Demonstrating that value is vital.

A dashboard meant to improve library success should answer pressing questions about collections and services. A library might want to investigate different areas each year, and so data sources could change periodically. Investigations might be specific and change each year; one year we aim at improving information literacy instruction, another year at increasing access to electronic resources. The dashboard can differ from year to year if it’s meant to aid a focused study. Trying to represent everything a library does at once leads to clutter, information overload, and time spent culling statistics no one cares about.

For a nice end-to-end discussion of building a data warehouse and hooking it up to dashboard charts, see “Trends at a Glance: A Management Dashboard of Library Statistics” (open access via ITAL) by Emily G. Morton-Owens and Karen L. Hanson. They cover in-depth creating a dashboard meant to give an overview of library operations from a broad variety of data sources, including external ones like Google Analytics as well as a local inter-library loan database.

GVSU Libraries status

A dashboard shows that a few minor issues affect various systems at GVSU.

While it’s not displaying the sorts of data this posts discusses, the Grand Valley State University Libraries’ Status page is an example of a good dashboard that aims at improving service. Issues affecting several areas are brought together in on one page, making it possible to gain a quick overview of the library’s operations in seconds. Just because GVSU Libraries Status is not a marketing display doesn’t imply design doesn’t matter; bright, easily scannable colors make information more digestible. The familiar red-for-error, green-for-success color scheme is well applied.

There are some attributes that influence data choices regardless of the goal of our dashboard. Data sources that are easy to access and reuse will naturally be better selections than cumbersome ones. For instance, while COUNTER usage statistics for vendor databases can be both informative and persuasive, they’re often painful to collect. One must log into a number of separate administrative sites, download a CSV (possibly multiple CSVs if we need information from separate reports), trim useless rows, and combine into one master file. This process is difficult to automate and the SUSHI standard meant to address this labor has no viable software implementations. 2

On the other hand, many modern third-party services offer robust APIs that make retrieving data simple. For the dashboard I built, some of the easiest pieces came from LibGuides, YouTube, and WordPress because all three surfaced usage information. Since I wanted to show the breadth of web services we were using and their popularity, it was easy to set up some simple API calls that for our most popular guides, videos, and blog posts. 3

Building the Dashboard Pt. I: Data Stores

Once we’ve chosen our data sources—ignoring, for the sake of brevity, the important part where we get staff buy-in and ensure our data quality is sufficient—we’ll need a central data store to power our dashboard. This can be simpler than it sounds, for instance a single relational database with tables for various data sources which are imported on a periodic basis. I’ve even used Google Spreadsheets as a data store and since the spreadsheet is already online, its data can be accessed through an API or even downloaded as a CSV.

Even if we rely on third-party APIs for much of our data, we may want to download the data into a data store. Having a full copy of our library’s information has many benefits: we don’t need to worry about service outages or sudden discontinuation, we can add summative values which many not be present in the original API, and we can reduce the total number of databases the dashboard relies upon by keeping everything centralized.

Once we have a data store, we can use it to power an API and a site that consumes the API, known as a client. At a high level, our client-API interaction looks like:

  • the client passes parameters in the URL letting the API know what kind of data it wants
  • the API receives the request, parses the parameters (in PHP this is done with the superglobal $_GET associative array, for instance)
  • the API queries a database with those parameters
  • the API takes the query response and formats it as JSON, sending it along to our client (formatting as JSON is common enough that most languages have a built-in function for it) 4
  • the client consumes the JSON and outputs charts, figures, etc.

A more code-like example of this process:

a GET HTTP request for example.com/api.php?month=02&dataset=reference asks for reference data from the month of February

the API performs query like SELECT * FROM reference WHERE month LIKE 'february' on the database

the API takes the query results and formats them into a JSON response like:

{
 "reference questions": 404,
 "directional questions": 808,
 "computer questions": 10101,
 "ready reference": 42,
 "research consultations": 42
}

This is a basic example of library-specific data that probably lives in a database we control. However, depending on how many third party APIs we choose to rely upon, the necessary flexibility of the client varies. If we’re normalizing and storing everything in our data store, the front end can be simple since the data is in a pre-processed, predictable format. For instance, aggregation operations like sums, maximums, and averages can be baked into a well-designed, comprehensive dashboard API such that the client only needs to know what URL to request. On the other end, a sophisticated client might consume multiple sources of data, combine them into a similar profile, and then run summative calculations itself. Both approaches have their relative advantages depending upon the situation.

Building the Dashboard Pt. II: Charting

There are numerous choices for building graphs and charts on the web. This post will not attempt to list them. Instead, I have two recommendations. One, our front-end shouldn’t be Flash. Adobe Flash doesn’t work on the mobile web and, at this point, JavaScript has a tremendous number of data visualization libraries. Secondly, we should use D3 or something that builds on top of D3.

While there are a lot of approaches to data visualization in JavaScript, D3 has a large user community, tremendous flexibility (it can be used for visualizations as varied as timelines, bar charts, and word clouds), and a nice design based on chained function calls that will be familiar to jQuery users.

While D3 is a knockout choice, we can’t just plug data in, pick a chart type, and watch the output instantly appear as in Excel or Numbers. Instead, D3 is more of a framework for working with data on the web. It takes a lot of learning and code to produce high quality charts. Instead, it’s best to use a library that provides an easy-to-use wrapper around D3. Here are several choices that abstract away common difficulties:

  • C3 makes creating D3 charts full of nice features and best practices as simple as passing data to c3.generate()
  • reD3 is a set of reusable D3 charts
  • The D3 Gallery shows what the framework can do with imitable example code

Raw is another interesting option. It’s browser-based charting software that works more similarly to spreadsheet software: plug in our data, choose a chart type, and then take the output that’s produced (using D3). If our charts don’t change often then we don’t need to build a sophisticated client-server setup; we can take our data and then use Raw to produce a web-friendly chart. Repeat every year or as often as the dashboard needs be updated.

When I made a dashboard, I didn’t use a wrapper around D3 and instead ended up building my own, a creaky abstraction for making pie charts with a few built-in options. While it was fun, I spent time making something not on par with what was already available.

Conclusion

Figure out why you want a dashboard, choose data sources appropriate to your purposes, build a data store with an API, use D3 to display web-based charts. Easy, right?

That sounds like numerous increasingly sophisticated steps, but I think each one also poses value in its own right. If you can’t define the goals of the data you’re collecting, why exactly are you gathering them? If you’re not aggregating your data in one place, aren’t they just a messy hodgepodge that everyone dreads negotiating come annual report time? Dashboards are shiny. Shiny things are nice. But the reflective processes behind building a data dashboard are perhaps more valuable than their final product.

Notes

  1. This post also recommends the book Information Dashboard Design by Stephen Few which is probably an excellent resource for those who want to learn more about the topic.
  2. I’d love to hear from anyone who has found a good open source SUSHI client. I’ve been looking for one for years now and found a number of broken options but nothing I was capable of setting up. There are a few commercial SUSHI products that ease this pain significantly for those libraries that can afford them.
  3. I haven’t seen many good explanations of what an API is; the acronym stands for “Application Programming Interface” which I find utterly nondescript. APIs expose information about web services such that they can be easily processed by programs. They fall somewhere in between having direct access to query a database and only being able to see an HTML page intended for human consumption.
  4. There are non-JSON APIs—XML is common—but JSON is becoming a de facto standard due to its light weight and the ease with which JavaScript and other languages can parse it.

LibraryQuest Levels Up

Almost a year ago, GVSU Libraries launched LibraryQuest, our mobile quest-based game. It was designed to teach users about library spaces and services in a way that (we hoped) would be fun and engaging.  The game was released “into the wild” in the last week of August, 2013, which is the beginning of our fall semester.  It ran continuously until late November, shortly after midterms (we wanted to end early enough in the semester that we still had students on campus for post-game assessment efforts).  For details on the early development of the game, take a look at my earlier ACRL TechConnect post.  This article will focus on what happened after launch.

Screenshot of one of the quests.

A screenshot from one of our simpler quests as it was being played.

Running the Game

Once the app was released, we settled on a schedule that would put out between three to five new quests each month the game ran.  Designing quests is very time intensive, and 3-5 a month was all we could manage with the man and woman power we had available. We also had short duration quests run at random intervals to encourage students to keep checking the app.  Over the course of the game, we created about 30 quests total.  Almost all quests were designed with a specific educational objective in mind, such as showing students how a specific library system worked or where something or someone was in the physical building.  Quests were chiefly designed by our Digital Initiatives Librarian (me) with help and support from our implementation team and other staff in the library as needed.

For most of the quests, we developed quest write-up sheets like this one:  Raiders of the Lost…Bin.  The sheets detailed the name of the quest, points, educational objective, steps, completion codes, and any other information that defined the quest.  These sheets proved invaluable whenever a staff member needed to know something about a quest, which was often.  Even simple quests like the one above required a fair amount of cooperation and coordination.  For the raiders quest, we needed a special cataloging record created, we had to tag several plastic crowns and get them into our automatic storage and retrieval system.

For every quest players completed, they earned points.  For every thirty points they earned, they were entered once in a drawing to win an iPad.  This was a major component of the game’s advertising, since we imagined it would be the biggest draw to play (and we may not have been right, as you’ll see).  Once the game closed in November, we held the drawing, publicized the winner, and then commenced a round of post-game assessment.

Thank You for Playing: Post-Game Assessment

When the game wrapped in mid-November, we took some time to examine the statistics the game had collected.  One of our very talented design students created a game dashboard that showed all the metrics collected by the game database in graphic form. The final tally of registered players came in at 397. That means 397 people downloaded the app and logged in at least once (in case you’re curious, the total enrollment of GVSU is 25,000 students). This number probably includes a few non-students (since anyone could download the app), but we did some passes throughout the life of the game to remove non-student players from the tally and so feel confident that the vast majority of registered players are students. During development, we set a goal of having at least 300 registered players, based mostly on the cost of the game and how much money we had spent on other outreach efforts.  So we did, technically, meet that goal, but a closer examination of the numbers paints a more nuanced picture of student participation.

A screenshot of the LibraryQuest Dashboard

A detail from our game dashboard. This part shows overall numbers and quest completion dates.

Of the registered players, 173 earned points, meaning they completed at least one quest.  That means that 224 players downloaded the app and logged in at least once, but then failed to complete any quest content.  Clearly, getting players to take the first step and get involved in the game was somehow problematic.  There are any number of explanations for this, including encounters with technical problems that may have turned players off (the embedded QR code scanner was a problem throughout the life of the game), an unwillingness to travel to locations to do physical quests, or something else entirely.  The maximum number of points you could earn was 625, which was attained by one person, although a few others came close. Players tended to cluster at the lower and middle of the point spectrum, which was entirely expected.  Getting the maximum number of points required a high degree of dedication, since it meant paying very close attention to the app for all the temporary, randomly appearing quests.

A shot of a different aspect of the LibraryQuest Game dashboard.

Another detail from the game dashboard, showing acceptance and completion metrics for some of the quests. We used this extensively to determine which quests to retire at the end of the month.

In general, online-only quests were more popular than quests involving physical space, and were taken and completed more often.  Of the top five most-completed quests, four are online-only.  There are a number of possible explanations for this, including the observation offered by one of our survey recipients that possibly a lot of players were stationed at our downtown campus and didn’t want to travel to our Allendale campus, which is where most of the physical quests were located.

Finally, of our 397 registered users, only 60 registered in the second semester the game ran.  The vast majority signed up soon after game launch, and registrations tapered off over time.  This reinforced data we collected from other sources that suggested the game ran for too long and the pacing needed to be sped up.

In addition to data collected from the game itself, we also put out two surveys over the course of the game. The first was a mid-game survey that asked questions about quest design (what quests students liked or didn’t like, and why).  Responses to this survey were bewilderingly contradictory. Students would cite a quest as their favorite, while others would cite the exact same quest as their least favorite (and often for the same reasons).  The qualitative post-game evaluation we did provides some possible explanation for this (see below).  The second survey was a simple post-game questionnaire that asked whether students had enjoyed the game, whether they’d learned something, and if this was something we should continue doing.  We also asked if they had learned anything, and if so, what they had learned.  90% of the respondents to this survey indicated that they had learned something about the library, that they thought this was a good idea, and that it was something we should do again.

Finally, we offered players points and free coffee to come in to the library and spend 15-20 minutes talking to us about their experience playing the game.  We kept questions short and simple to keep within the time window.  We asked about overall impressions of the game, if the students would change anything, if they learned anything (and if so, what) and about what quests they liked or didn’t like and why.  The general tone of the feedback was very positive. Students seemed intrigued by the idea and appreciated that the library was trying to teach in nontraditional, self-directed ways.  When asked to sum up their overall impressions of the game, students said things like “Very well done, but could be improved upon”or “good but needs polish,” or my personal favorite: “an effective use of bribery to learn about the library.”

One of the things we asked people about was whether the game had changed how they thought about the library. They typically answered that it wasn’t so much that the game had changed how they thought about the library so much as it changed the way they thought about themselves in relation to it. They used words like “”aware,” “confident,” and “knowledgeable.”  They felt like they knew more about what they could do here and what we could do for them. Their retention of some of the quest content was remarkable, including library-specific lingo and knowledge of specific procedures (like how to use the retrieval system and how document delivery worked).

Players noted a variety of problems with the game. Some were technical in nature. The game app takes a long time to load, likely because of the way the back-end is designed. Some of them didn’t like the facebook login.  Stability on android devices was problematic (this is no surprise, as developing the android version was by far the more problematic part of developing the app).  Other problems were nontechnical, including quest content that didn’t work or took too long (my own lack of experience designing quests is to blame), communication issues (there’s no way to let us know when quest content doesn’t work), the flow and pacing of new quests (more content faster), and marketing issues.  These problems may in part account for the low on boarding numbers in terms of players that actually completed content.

They also had a variety of reasons for playing. While most cited the iPad grand prize as the major motivator, several of them said they wanted to learn about the library or were curious about the game, and that they thought it might be fun. This may explain differing reactions to the quest content survey that so confused me.  People who just wanted to have fun were irked by quests that had an overt educational goal.  Students who just wanted the iPad didn’t want to do lengthy or complex quests. Students who loved games for the fun wanted very hard quests that challenged them.  This diversity of desire is something all game developers struggle to cope with, and it’s a challenge for designing popular games that appeal to a wide variety of people.

Where to Go from Here

Deciding whether or not Library Quest has been successful depends greatly on what angle you look at the results from.  On one hand, the game absolutely taught people things.  Students in the survey and interviews were able to list concrete things they knew how to do, often in detail and using terminology directly from the game.  One student proudly showed us a book she had gotten from ILL, which she hadn’t known how to use before she played.  On the other hand, the overall participation was low, especially when contrasted against the expense and staff time of creating and running the game.  Looking only at the money spent (approximately $14,700), it’s easy to calculate an output of about $85 per student reached (173 with points) in development, prizes, and advertising.  The challenge is creating engaging games that are appealing to a large number of students in a way that’s economical in terms of staff time and resources.

After looking at all of this data and talking to Yeti CGI, our development partners, we feel there is still a great deal for us to learn here, and the results are promising enough that we should continue to experiment.  Both organizations feel there is still a great deal to learn about making games in physical space and that we’ve just scratched the surface of what we might be able to do.  With the lessons we have learned from this round of the game, we are looking to completely redesign the way the game app works, as well as revise the game into a shorter, leaner experience that does not require as much content or run so long.   In addition, we are seeking campus partners who would be interested in using the app in classes, as part of student life events, or in campus orientation.  Even if these events don’t directly involve the library, we can learn from the experience how to design better quest content that the library can use.  Embedding the app in smaller and more fixed events helps with marketing and cost issues.

Because the app design is so expensive, we are looking into the possibility of a research partnership with Yeti CGI.  We could both benefit from learning more about how mobile gaming works in a physical space, and sharing those lessons would get us Yeti’s help rebuilding the app as well as working with us to figure out content creation and pacing, without another huge outlay of development capital. We are also looking at ways to turn the game development itself into an educational opportunity. By working with our campus mobile app development lab, we can provide opportunities for GVSU students to learn app design.  Yeti is looking at making more of the game’s technical architecture open (for example, we are thinking about having all quest content marked up in XML) so that students can build custom interfaces and tools for the game.

Finally, we are looking at grants to support running and revising the game.  Our initial advertising and incentives budgets were very low, and we are curious to see what would happen if we put significant resources into those areas.  Would we see bigger numbers?  Would other kinds of rewards in addition to the iPad (something asked for by students) entice players into completing more quest content?  Understanding exactly how much money needs to be put into incentives and advertising can help quantify the total cost of running a large, open game for libraries, which would be valuable information for other libraries contemplating running large-scale games.

Get the LibraryQuest App: (iPhoneAndroid)

 

About our Guest Author:
Kyle Felker is the Digital Initiatives Librarian at Grand Valley State University Libraries, where he has worked since February of 2012.  He is also a longtime gamer.  He can be reached at felkerk@gvsu.edu, or on twitter @gwydion9.


My #HuntLibrary: Using Instagram to Crowdsource the Story of a New Library

[Updated to reflect open-source availability. May 13th, 2013]
 
Introduction

North Carolina State University opened the James B. Hunt Jr. Library in January of 2013, creating a heart for our Centennial Campus that defines the research library of the future. My #HuntLibrary was created as a platform to foster student and community engagement with the new building via social media imagery and to preserve and archive these images as part of the record of the Hunt Library launch. My #HuntLibrary is a Ruby on Rails application that harvests images from Instagram and provides several browsing views, mechanisms for sharing, tools for users to select their favorite images, an administrative interface for moderating images, and a system for harvesting images for inclusion in the NCSU Libraries digital archives. Built according to the principles of “responsive design,” My #HuntLibrary is usable on mobile devices, tablets, desktops, e-boards, and the massive MicroTiles displays in the Hunt Library.

In the three months since the launch of My #HuntLibrary (coinciding with the opening of the Hunt Library building), we received nearly 1700 images from over 600 different users, over 6800 “like” votes, and over 53,000 “battle” votes. This post will detail some of the risks involved with the project, the technical challenges we faced, how student engagement strengthened the project, and the potential benefits of giving students and community members a voice in the documentation of the Hunt Library.

The code that drives My #HuntLibrary has been extracted into an open-source Rails Engine called “lentil” that is available on GitHub.

My #HuntLibrary front page

My #HuntLibrary

Planning for Risk

Most projects carry some level of risk and My #HuntLibrary was no different. It was difficult to predict the level of engagement we would be able to achieve with various application features. The timeline for development was short, carried a firm deadline (due to the need to launch alongside the new library), and included work with several technologies that were new to the development team. Additionally, the application relied on a third-party API that could change at any time. In order to mitigate project risks, we structured the project around goals with short and long (and more speculative) timelines that would each individually justify the project effort.

  1. Utilize social media to increase engagement with a new library

Social media engagement with students was a linchpin of our opening strategy. Before the Hunt Library came online, NC State students already had a high degree of ownership over existing Libraries spaces and we sought to extend that to our new library. My #HuntLibrary could contribute to that sense of ownership by providing a platform for users of the new library to document and share their experience, learn about the experiences of their peers, and to collectively curate the images using voting tools. Furthermore, My #HuntLibrary is an opportunity for staff to learn about important and unexpected uses of the building during the critical post-launch period.

  1. Provide a mechanism for students to contribute to digital collections

We felt that the Hunt Library opening could be an opportunity for students to add their voices to the documentation of campus history that is preserved in our extensive digital collections. My #HuntLibrary could also allow us to leverage social technologies to diversify the perspectives reflected in our archival collections. This is our first major social media preservation effort and we hope that our project, along with others (such as GWU Libraries’ Social Feed Manager, or the State of North Carolina’s Social Media Archive), may begin to contribute possible answers to several questions related to social media archives, including:

  • Can we utilize existing streams of social media content to integrate additional student perspectives in our documentation of the history of their university? Does this enhance our special collections?

  • Can an invitation to participate in core library practices, such as the development of special collections, serve as an effective engagement strategy?

  • What is the research value of social media collections? How does this value vary based on media, users, and harvesting methods?
  1. Explore new technologies

The developers involved with the project created a support structure that included pair programming, code reviews, and tutorial sessions that mitigated many of the technical risks, including the integration of new software frameworks and libraries and the coordination of work on a tight schedule. This project also provided an opportunity to learn more about the design of interfaces for the large-scale displays described later in this article.

Student Engagement

Although we knew it would be possible to utilize the Instagram API to collect and display photographs about the Hunt Library, we needed to have a reasonable expectation that people (and students in particular) would participate in the project. This question hinged on the likelihood that a person would tag a photograph of the new library with a hashtag that would allow us to capture it. The Libraries had previous experience trying to engage students through Twitter around the question “What are you doing in the library right now?” We looked back on that project’s limitations to inform our engagement strategy. The chosen hashtag (#whyncsulib) was unique, but in order to answer our question, students had to be aware of the hashtag and willing to deviate somewhat from their normal social media communication patterns. However, we found that it was already common for students to use the tag #DHHill to visually depict their activities in our D. H. Hill Library on Instagram. 

Example #DHHill Instagram images

Example #DHHill Instagram images

Assuming that students would continue this tagging behavior at the new library, we chose the hashtag “#HuntLibrary” in hopes that it would see widespread adoption regardless of the level of awareness of our project.

As we began to design the application and develop a social media plan, another milestone in the project came with the opportunity to present the idea to actual students. The NCSU Libraries Student Advisory Board is charged with providing guidance and input on the programs and services the Libraries offers. This regular open meeting (fueled by free food) allowed us to collect feedback on specific questions about the project (e.g. do students want images to “Battle?”). The feedback from this presentation varied widely, from useful (e.g. roughly two-thirds of the students present had Instagram installed on their phones and yes, they want to battle) to unsanctionable (“If you want cute photographs you should let us bring cats into the library”). However, the general reaction from the students was that it seemed like a good idea, and we continued work with increased confidence.

The Student Advisory Board meeting also led to another breakthrough: our Director’s commitment of funds to award an iPad Mini to the photographer of the best image. Prior to the Advisory Board meeting, our only participation incentive was an assurance that the best photographs would be ingested into the University’s permanent digital archives. While this is a thrilling idea to a roomful of librarians, we were uncertain that students would have the same reaction. Perhaps unsurprisingly, when our Director asked the gathered students if they would take more pictures if there were an iPad Mini at stake, the students were unanimous in their response. Although we later learned in usability tests that students reacted very positively to the idea of contributing to their University’s story, the tablet prize gave the project a focal point, and the contest became the cornerstone of our student engagement strategy.

Display Technology

The NCSU Libraries’ vision is to be NC State’s competitive advantage. This vision is often operationalized by putting cutting-edge technology in the hands of our students and faculty. For the Hunt Library, we made a strategic investment in large-scale, architecturally integrated visualization spaces such as ultra-high definition video walls and virtual environment studios. These visualization spaces serve as large canvases to reflect the research and activities of our campus in new interactive ways. The Hunt Library is, in short, a storytelling building.

We anticipated that My #HuntLibrary would produce a visually compelling record of the new library, and so we chose to display the photographic activity in one of the library’s most accessible visualization spaces: the iPearl Immersion Theater. The Theater features a curved video wall that is twenty-one feet wide and seven feet tall. The wall uses Christie MicroTiles, a modular display system based on LED and DLP technologies that gives the wall an effective resolution of 6824 pixels by 2240 pixels. MicroTiles feature high color saturation and a wide color spectrum, making them ideal for Instagram photographs of the colorful library. A key part of the technology behind the MicroTiles is a Christie Vista Spyder. The Spyder is a hardware-based video processor that allows for 12-bit scaling. This upsampling capability was important for our application, as it allowed small (612 pixels square) images to be enlarged to two-foot images in the Theater with very few noticeable compression artifacts. 

Viewing My #HuntLibrary in the Immersion Theater. Photo by Instagram user crmelvin14.

Viewing My #HuntLibrary in the Immersion Theater. Photo by Instagram user crmelvin14. 

As a public, physical space, the iPearl Immersion Theater allowed us to create embodied and shared user experiences that were fundamentally different from the web and mobile views of My #HuntLibrary. The Theater is a semi-open space near the entrance to the library, adjacent to an expansive reading lounge. The video wall installation had an attractive presence that invited passers-by inside to examine the images. Once inside the Theater, the content could be appreciated more fully by moving around in the space. Standing close to the wall enabled the user to see more detail about a particular photograph while moving farther away gave an impressionistic sense of the library’s spaces. While dwell times for the installation were sometimes low because users often dropped in for a moment before heading to their intended destination, seating in the Theater allowed for a more leisurely viewing experience as new photographs rotated into the display. Small groups of people gathered in the Theater to discuss the merits of their favorite photographs, point out their own photographs to their friends, and engage in conversations with strangers about the images.

Responsive Web Design

With the large MicroTiles displays in the Hunt Library we now face the challenge of designing for very small (mobile device) and very large displays and many sizes in between (tablets, laptops, desktops, e-boards). The growing popularity of responsive web design techniques have helped developers and designers meet the challenge of building applications that work well on a wide range of device screen sizes. Responsive web design generally means using a combination of CSS3 media queries, fluid grids, and flexible images to progressively enhance a single web design for optimal display and use on a wide range of screen sizes and devices (Marcotte 2010). Most of the discussion of responsive design centers around building for devices ranging from phone-sized to desktop-sized displays. However, there is no technical reason why responsive design cannot work for even wider ranges of display sizes.

Our final design for My #HuntLibrary includes two different responsive designs, one of which supports mouse and touch interactions and display sizes ranging from phones to desktops, and another for non-interactive public display of the photographs on displays ranging from large eboards to more than twenty-foot wide Christie MicroTiles arrays. Our decision to build two different responsive designs for the smaller and larger sets of displays has more to do with the context in which these displays are used (personal, interactive devices versus public, non-interactive displays) than any technical limitations imposed by responsive web design techniques. In our case, the design of My #HuntLibrary for phones, tablets, and laptop and desktop computers has features to support interactive browsing, sharing photos, and a photo competition “Battle View” for people to compare sets of images and pick their favorites. These features would not translate well to the Libraries’ larger public displays, which range in size from a large eboard to huge Christie MicroTiles video walls, and which are, for now, mostly non-interactive. It made sense to develop a different view optimized to support a non-interactive display of the My #HuntLibrary photos. For the eboard-sized and larger public displays we developed a grid of images that are periodically replaced by new images, a few at a time.

Mobile view of My #HuntLibrary.

Mobile view of My #HuntLibrary.

My #HuntLibrary on Christie MicroTiles in the Immersion Theater.

My #HuntLibrary on Christie MicroTiles in the Immersion Theater.

Collecting Social Media

Although the initial development push was heavily focused on the core data management and display infrastructure, the longer-term goal of content preservation (for the sake of historical documentation rather than personal archives) influenced most aspects of the project. In particular, we have attempted and are continuing to address three major preservation-related themes: harvesting, crowdsourced curation, and legal clearance.

For short-term use of the images, we harvest only the metadata, leaving the images on the Instagram servers. Clearly, for long-term preservation we would need to collect the images themselves. This harvesting is complicated by the necessity to declare an arbitrary “break” from the source materials, at which point any changes to the metadata (or removal of the images) would not be reflected by our system. We are currently developing a milestone-based harvesting schedule that takes into account both the length of time the image is in the system and the submission of a donor agreement.

While we are currently planning on collecting all “#huntlibrary” images, we are very interested in the potential to allow our users to influence the selection process for certain parts of our archival collection. In order to test and support this goal, we developed two voting tools: individual image “like” voting and this-or-that “battle” voting. Our hope (which early usage metrics seem to support) is that we could use the data from these tools to select images for preservation, or at least to promote a subset of preserved images, that reflect the interests of our community. In addition to improving our selection processes, this may be an opportunity to promote archival selection as a student engagement tool by promoting opportunities for students to influence the historical record of their own experiences.

Image battle interface.

Image battle interface.

Finally, we worked with a lawyer and copyright specialist at our library to develop a donor agreement that was short and clear enough to be submitted as a comment on an image. Instagram users retain rights to their own images and thus the ability to grant the limited rights that we are requesting. Furthermore, the use of the Instagram comment system will allow us to automate this process, provided that we are responsive to takedown requests.

Conclusion

In the three months since the launch of My #HuntLibrary (coinciding with the opening of the Hunt Library building), we received nearly 1700 images from over 600 different users, over 6800 “like” votes, and over 53,000 “battle” votes. In addition to these measures of user contributions (of either images or vote-based reviews), My #HuntLibrary recorded 135,908 pageviews from 10,421 unique visitors (according to Google Analytics) during this period. Furthermore, the project was regularly cited by students, staff, and institutional partners on social media channels, and was featured (with an emphasis on historical documentation) during the Hunt Library Dedication events.

The evaluation of the archival components of this application will take place on a longer timeline. We are currently extending the long-term content harvesting features in order to support these activities in a more automated way. We have received several indications of the value of pursuing image preservation features, including surprisingly enthusiastic reactions to questions about the preservation of images from students taking part in a My #HuntLibrary user study. As a particularly encouraging example, when an undergraduate student contributor to My #HuntLibrary was asked “How would you feel if one of your Instagram photos were selected by the library to be kept as a permanent record of what students did in 2013?” they responded, “I would be so excited. For me, I think it would be better than winning an iPad.”

About our guest authors:

Jason Casden is the Lead Librarian for the Digital Services Development group at the North Carolina State University Libraries, where he helps to develop and implement scalable digital library applications. He is the project manager and a software developer for “My #HuntLibrary,” and has served as a project or technical lead for projects including the Suma physical space and service usage assessment toolkit, the WolfWalk geo-enhanced mobile historical guide, and Library Course Tools.

Mike Nutt is a Fellow at NCSU Libraries, where he leads a strategic initiative called “Networked Library: Marketing the 21st Century Library.” He is the product lead for My #HuntLibrary, and also facilitates content strategies for the large video walls in NC State’s new Hunt Library. He founded the University of North Carolina at Chapel Hill student group Carolina Digital Story Lab and was a research assistant at the UNC-CH Carolina Digital Library and Archives.

Cory Lown is Digital Technologies Development Librarian at North Carolina State University Libraries where he works collaboratively to design and develop applications to improve end-user resource discovery and use of library services. He has contributed as a developer and/or interface designer to a number of projects, including My #HuntLibrary, WolfWalk, QuickSearch, and the latest version of the library’s mobile website.

Bret Davidson is currently a Digital Technologies Development Librarian at the North Carolina State University Libraries. Previously, Bret worked as an NCSU Libraries Fellow on visualization tools and resources to support the new James B. Hunt, Jr. Library. Prior to becoming a librarian, Bret was a music educator in the public schools of Pennsylvania and Illinois, as well as a performing musician with the River City Brass Band in Pittsburgh, PA.


Tips for Making Your First Mobile App a Success

About a year ago we launched the Gimme Engine (gimme.scottsdalelibrary.org) – a mobile web book recommendation engine.  Choose one of the categories – Gimme a Clue, Gimme Something Good to Eat, etc – and the Engine will offer you a staff-recommended book from the Scottsdale Public Library collection, complete with summary, staff review, and a quick link to the mobile catalog to check availability or reserve.

Since launch, our app and the Gimme Engine Brain Trust that created it have won a number of awards – including a 2012 OITP Cutting Edge Technology in Library Services award.  What’s our secret?  We are happy to share what we learned in our process with the hope it will help you in your next technology process.

Find out what your users (and future users) want

When our team got together for the first time we had more ideas than we knew what to do with – everything from a mobile formatted version of our web site to a Dewey-caching in library scavenger hunt. We soon realized that in order for us to create a successful, and more importantly, sustainable mobile app, we needed to poll our customers and find out what exactly they want out of a mobile app. Though we had done some basic surveys of staff in the past, we didn’t feel that we were the experts best suited to properly create & distribute a survey that would ultimately drive our entire project.

We hired a local experience design agency called Forty to craft a survey to get the information we so desperately needed. Forty also helped distribute the survey via their social media, email lists and other outlets. This meant that in addition to our customer we would get responses from non-customers as well. This would help us understand if there was a difference in need between customers and future-customers (at least that is how we like to think of our ‘non customers’.)

What they want might be what you already have

There was in fact no real difference between customers and non customer need in the survey results but one thing was clear:  current and future customers had no idea that we already had a mobile catalog with most of the standard functionality that they wanted.  Great, we thought, just get the word out about the mobile catalog and our job is done!  Then we realized no, we still have all this LSTA money that the Arizona State Library was nice enough to give us . . . we should probably spend that out.

Maximize your resources

So we looked at the highest items on the list that we didn’t have in mobile – book reviews and staff recommendations.  That’s when we decided to make the book recommendation app.  As it turned out we already had a lot of the raw materials for the project.  Staff was already doing book reviews and posting them on GoodReads.  We had content enrichment services for bib data and book jackets(Syndetics).  And we had the mobile catalog and the ability to generate RSS feeds of items in the collection (AirPAC and FeedBuilder from Innovative Interfaces).  All we needed was someone with enough experience to put that together.

Back to Forty for the design work and to hire a programmer.  We had so little money to work with that I thought for sure the end result would use a rubber band.  But when we sat down with the programmer not only was he able to do the project he actually saved us $3,000 in expected software costs by putting together the feeds, mobile catalog, content enrichment with some JavaScript and the GoodReads API.  The end result is a very simple, easy to care for web-based app that keeps working as long as we keep feeding it the raw materials – staff book reviews.

Maximize your expertise

From the outset of this project, we engaged all levels of staff. This was critical to ensuring that whatever product we created would be supported throughout the organization, as well as vetted to ensure that we didn’t leave out any crucial elements.  One of those elements was the encoding that allowed FeedBuilder to pick up the items for Gimme.  A quick chat with the catalogers solved that problem – they created a series statement utilizing controlled vocabulary that would identify the item as belonging to a particular Gimme category and pasted the review into the MARC record. By adding Library staff review_[gimmeCategory] in the 830 field of each record and indexing it, not only were we able to create a constant flow of records for the Gimme feeds we were able to give all library staff easy access to these reviews when searching in the catalog.

The other process we had to create was a standardized way for people to submit reviews.  Here we called on the cataloging group, the folks who where posting to GoodReads, and our IT department to create a book review form on SharePoint.  The form itself was easy – staff at any level go to SharePoint (which functions as our intranet), type in their name, info about the book and their review and submit.   The catalogers and GoodReads group developed a process to “hand off” reviews that ensure that it gets encoded, posted in both the catalog and GoodReads,  and at all times is associated with the ISBN of the same edition so that everything seems to magically link together.  Having staff who don’t normally interact working together on the share outcome certainly fostered a sense of ownership and respect in the group.

Don’t just build it . . . make it fun

Once the Gimme engine design was complete, and we had the back end programming to make it work, we were ready to unleash Gimme out into the world. Our biggest concern was that Gimme would get lost amongst all of the other products and services the library offered. One evening while cooking a delicious shepherd’s pie, a light bulb went off over Ann’s head. Since we were using our library staff book recommendations to fuel Gimme, why not turn our Staff in marketing vehicles? The next day a call went out to staff asking whoever wished to help to come forward. The end result was 15 life-sized cardboard cut outs of library staffers, highlighting their personalities. Attached to each was a ‘speech bubble’ that directed customers to go to http://gimme.scottsdalelibrary.org to see what books that staff member recommended.

The next phase was to create floor decals to put in various spots in our five library branches, so as customers walked through the library they would gain exposure to Gimme. We created corresponding buttons for staff to wear, which helped spur conversions and questions from customers, “What is Gimme?” This marketing plan engaged all level of staff, which helped make the launch of Gimme a success.

One year later the Gimme Engine is continuing to grow with new categories and increasing stats.  Not only was the project a success but it by integrating the various workflows we’ve been able to make it, as well as doing fun reviews by staff, part of our culture.  We hope that our experience can help you in some way make your next project as successful as the Gimme Engine.

 

About Our Guest Authors:

Aimee Fifarek is the Library Technologies and Content Senior Manager for the Scottsdale Public Library in Arizona.  She has an MLIS and an MA in English from University of Wisconsin-Milwaukee and spent 6 years as the Systems Librarian at Louisiana State University in Baton Rouge before going to Scottsdale.  Her professional interests include ebook platforms & development, self-publishing, and mobile technologies.  She can be found on Twitter @aimeelee.

Ann Porter is the Community Relations Coordinator at the Scottsdale Public Library. She has over 11 years of marketing, PR and media relations experience, working for organizations such as a major cosmetics company, an online retargeting agency that was recently purchased by Ebay and for a major NFL team.

 


Design 101: design elements, part 2 Typography

Previously I wrote about the importance of design in libraries, the design process and discussed three core elements of design: color, composition, and size. In this post, I’d like to focus on typography. Though not traditionally a design element, typography is more a tool or a language to use within your design to convey the message you are trying to achieve.

As mentioned previously, design elements work together to create a successful design that communicates to your audience if used well, and typography is no exception.

Type is rather complex and has a rich history. There are abundant options available with free and for-a-fee font files available. There are even resources available to have beautifully designed type on your website. Designers still create typefaces from scratch if needed, particularly for decorative uses. But it is perfectly acceptable to use already available font files and most designers do this. To create thoughtful designs using type well does not have to be difficult; with some basic knowledge, you can successfully choose the right type for the job and develop a successful design.

About fonts versus typefaces

As you work in design, it’s good practice to use the correct terminology. When most people talk about letterforms, they use the term, “fonts.” However what most people really mean is “typeface.” Fonts are really the format in which the typeface is available- librarians can understand this distinction easily. As Ellen Lupton states in Thinking With Type, “A typeface is the design of the letterforms; a font is the delivery mechanism…In digital systems, the typeface is the visual design, while the font is the software that allows you to install, access, and output the design.” Lupton’s book is a resource I highly recommend by the way. If you read nothing else about design and type, please read her book. I’ve provided the citation toward the end of the post.

Typography versus design

Typography within design should never be an afterthought. In fact, in many cases the typeface you choose can make or break a design. Every design should be a fluid creation, balancing between the various design elements and type. A designs are being created, it is best to bring the elements up together, tweaking and adjusting each piece as you go while also taking that step back to see the whole picture. As in writing, it can be more beneficial to keep the overall theme and outline in mind as you work on various details and sections of a piece; being too focused in on one small detail may be detrimental to the overall design piece.

Basics

There is a lot to learn and geek out over design and typography but rather than overwhelm, I’m going to give some good basics about type that will get you started right away. There are several main type classifications and the main three groupings are humanist, transitional, and modern or geometric.

Ellen Lupton defines each as the following: “Humanist letterforms are closely connected to calligraphy and the movement of the hand. Transitional and modern typefaces are more abstract and less organic.”

For the purpose of this post and for what you really need to know, I’m going to lump them into four categories based on the look of the typeface: Serif, Slab Serif, Sans Serif, and Decorative. There are examples of each one below.

Serif

Serif typefaces essentially have feet. Serif typefaces are essentially more organic and derive from various periods in history. You see these typefaces traditionally used in novels and blocks of text. Their use is not limited to that, however. There are many new Serif typefaces being developed that are contemporary based on their more historic predecessors.

Baskerville

Baskerville

Garamond

Garamond

Typographic Anatomy Lesson print: http://www.ligatureloopandstem.com/product/lesson-plan-print

Slab Serif
Slab Serif typefaces also have feet but their feet are blockier and slab-like, hence the name. These typefaces were developed for advertising and are more contemporary than traditional Serifs. These are used in a variety of ways but are popular for titles, posters, flyers, websites, and logos.

Museo Slab

Museo Slab

archer

Archer from the H&FJ foundry: http://www.typography.com/fonts/font_overview.php?productLineID=100033&path=head

Sans serif

As the name implies, these typefaces do not have Serifs or “feet”. They are generally more contemporary and less organic than Serif typefaces. These are very popular for text within websites, logos, and posters.

Helvetica

Helvetica

Gill Sans

Gill Sans

Keep Calm by K-Type: http://www.k-type.com/?p=2199

Decorative
Decorative or ornamental typefaces are self explanatory. These are typefaces that can stand alone as an image or illustration. They are highly decorative and should be used very carefully as they can overpower a design or clash more easily with other elements. Not all decorative typefaces are equal and many designers who are really good with decorative type do the lettering by hand and specialize in this area specifically. When done well and with skill, decorative typefaces are a true art form and when done poorly, they can quickly highlight an amateurish design. Decorative type is gaining in popularity as people, designers and non-designers alike, are embracing retro styles again and these typefaces are seeing a resurgence in use.

Rosewood STD

Rosewood STD

Decorative type from Louise Fili

Decorative type from Louise Fili: http://www.louisefili.com/

 

Bold, Italic, Underlined, Caps, and, and, and….

There is nothing wrong with using these elements. However it’s a good rule of thumb to use them sparingly and not all at once. By using them judiciously, they will have more impact and continue to maintain readability, which is key to design. Use them with caution.

Use

As you design and use type, be aware of what your type may be conveying to your audience and the medium in which you are designing in. Some typefaces are more successful on screen than others and some typefaces are specifically designed for print, screen, etc. A good resource for typefaces on the web is the 3rd edition of The Web Style Guide. There is a section specifically on typography that is helpful and gives insite into where typefaces are today.

Like all design elements and design in general, you are communicating with others. What is the type you are using saying? Does it fit with the message you want to send? Are you going for a modern and sleek look? Do you want to give your design a tactile/print feel or maybe you want it to be an homage to a specific period in design history? How does the typeface fit in with the rest of your design? What kind of mood might you be setting with the type and design elements you’ve put together? Type has a personality so be sure to choose a typeface that assists and hopefully conveys the message you want to give.

The end

At this point, you have the type basics and I hope that this gets you thinking more about the typefaces you see and perhaps use in your designs. I highly encourage reading Ellen Lupton’s book, Thinking With Type: a critical guide for designers, writers, editors, and students. She goes over a good deal of design basics and some design history and it’s a quick, enjoyable, informative read.

A couple of other good resources are: The FontFeed and The Elements of Typographic Style.

The best way to learn type and design is to just start. Things change so quickly and what was once right can become wrong or out of style very quickly. In design, you learn much more quickly by designing and making work. So pick a project and begin!


Design 101: design elements, part 1

Previously, I wrote about the importance of design in libraries and the design process.  Next I’d like to delve in deeper and talk about the elements of design. These elements, or components, are the pieces that make up a whole design. Design elements work together to create a successful design that communicates to your audience if used well.

Most designers would agree, the elements of design are essentially the following:

  • color
  • shape
  • line
  • space or composition
  • value
  • size
  • texture

I am also going to add typography. Though not traditionally an element, choosing type carefully and in some cases even showcasing it within your design, can transform something that meets the status quo into a higher quality design. In carefully crafting your design with an understanding of the elements, your design may be considered not only professional, but memorable.

Rather than talk about all of the elements in this post. I’m going to focus on three to get you started and then I’ll come back to typography and perhaps others in future posts.

With color, composition, and size down, you can create a strong design whether you are making a flyer, sign, promotional materials, or webpage. To create a design considered high quality, nuanced, or sophisticated by design standards, you will need to push further and understand all of the elements. This post is just to get yourself started and able to make something professional that will add to your credibility as a professional organization.

http://frankandjan.com/WIT/?tag=comic-sans

Some have asked me in the past, what credibility has to do with design and libraries and it’s a good question. Without delving too deeply, you can see the above photo where someone has made a simple sign using the typeface comic sans and in response someone calls them out for being unprofessional in using it. Honestly, I have mixed feelings about this image but it still illustrates a valid point: in creating bad design or making poor design choices, you may look unprofessional to your audience. Good design will build trust and credibility with your users. I’ll be including examples throughout this post to show different elements and where they work.

Color

Starting with color, there is an enormous amount of resources on color theory and designing with color. There are scholars who have made a living on researching color alone. To have a successful design, you don’t need to be a color expert but it helps if you have some basics down to understand how color works and doesn’t. It’s a choice to include color in your design- plenty of successful designs are black and white or have minimal color and it’s part of the aesthetic and the message they want to convey.

Sometimes one color is enough; this is called a monochromatic color scheme.

Employing the use of opposite colors on the spectrum together is complementary.

There are numerous ways of combining colors and using them effectively in design. When using color the most important piece to keep in mind is using color consciously, thoughtfully and being aware of individuals who may have vision impairments. You can use many colors in a design, but if not done so with care, it may not achieve the look or convey the message intended. In some cases, misuse of color may not be readable. There are a number of resources available that can assist in putting together a good color palette as well ensuring your colors are accessible.

The designer Luke Beard applies color well on his website. While Beard uses color minimally, as you stay on his website, the color rotates revealing various color combinations in a fun and eye-catching way. The selected colors compliment his website and overall design. If you don’t stay on the page long enough to experience the change in color, you don’t lose much value since the colors work well and the design itself is successful and strong. The change in color is an additional feature intended to delight his audience.
http://lukesbeard.com/

Composition

Composition is where the pieces lay on the page in relation to the page sides, edges and other pieces. Composition may include: an illustration or a logo, title text, headlines, or a call to action, and smaller elements such as a block of text or links. There is a decision to be made about what the most important elements are. Not every element should have the same amount of weight in importance.

In laying out the composition, you’ll want to pay attention to what is referred to as alignment. Often in design you’ll see a strong left alignment where several elements begin at the same starting point on a page; this is fairly conventional and a good choice. Left alignment is certainly not the only successful way to create a composition, but it rarely fails. As the design is being formed it’s good to think of the elements and pieces you are working with abstractly. Imagine them as puzzle pieces or building blocks. Many designers use methods such as the grid, wireframing, or abstract sketching to get a rough sense of the composition. The grid is a good place to start and is a current design trend. My best advice is as you build together the pieces, keeps things somewhat loose and flexible so that you think of the overall page and the pieces in relation to each other, rather than get bogged down by one piece.

http://www.jessicahische.is/designing

On Jessica Hische’s website, she balances a lot of information on each page without losing the quality of the overall design. She showcases portfolio pieces and allows those designs to shine while the composition, typography, and color compliment her efforts and don’t compete for attention. To the right of the large image, Hische aligns the subheading and links to the left, along with the various elements below the link list. Organizing the site in this way creates order and contributes positively to the overall design. Hische devotes a good deal of the composition to white space. Doing so allows the viewer’s eye to rest and directs them back toward the focus, in this case the photo and information on the portfolio piece she is showcasing.

Size

Size is related to composition in that the size of one shape or block of text will relate to others around it.

So, for example, if you have a title, subtitle, author, and publisher and you want to emphasize the title above everything else, then the title will naturally be larger in size. Next, you may want the subtitle to be less than the title but larger than the author or publisher. In some cases, you may want to make the author name the largest element- these are all design decisions relating to size that will convey different things to the audience who sees it.

http://trentwalton.com/2011/05/10/fit-to-scale/

On Trent Walton’s website, he’s making a point about responsive web design (a topic I hope to delve into in a future post). To communicate his message, he’s using size and color. The bold color and size of the title, Fit to Scale, captures viewer’s attention. There is also variation in size within the text block, drawing out the first sentence for emphasis. The navigation is also a different size, easy to see when it’s needed but not in the way of the message of the page.

Putting design into practice

Now that we’ve gone over some basics, I recommend exploring what designs out there speak to you. Develop a collection of designs you like; whether they are websites, flyers, posters, etc., if there is something you like about the design then study it. Much like writers who read a lot to become better writers, designers will study good design and analyze what makes it good in order to become a better designer.

Get feedback from other designers or others who understand design. There are a number of excellent portfolio websites out there that have extremely rich communities willing to offer a critique in exchange for a critique. These are excellent resources that are invaluable to designers, as meaningful feedback is very difficult to find:

Look more deeply into what elements the designer has employed to make the design successful and ask yourself some questions: what colors did they use? what is the balance between the different colors used? is there whitespace? how is the composition set up? can you identify alignments? how did the designer break apart size?

If there is a design you don’t like it is worth exploring why you don’t like it. Ask the same kinds of questions. What makes it fail to you? Figure out what it is that makes you react strongly

This is a way to get yourself to really think in a design way, observe, and subsequently learn about design. In seeing, you will be a step closer to designing well.

If you can recognize, study and thoughtfully employ these elements and make them work together harmoniously you can make a good design. Keep things simple- better to err on the side of restraint than give too much.

Don’t forget that in designing, you are communicating. Think about the message. What do you want to say and how can you attempt to convince your users to believe you? Are you earning credibility? Trust? What kind of atmosphere are you creating?

Design is an opportunity to give our users a positive experience and perhaps even to delight them.


What is a Graphic Design Development Process?

Previously, I wrote about the value of design in libraries, and others, including Stephen Bell and Aaron Schmidt, have written and presented on the topic of design in libraries as well. Now I’d like to focus on and delve specifically into what graphic design process may entail. For librarians who design regularly, I hope this helps to articulate what you may be doing already or perhaps add a bit to your tools and tips. For those that don’t design, I hope that this might give you insight into a process that is more complex than it may seem and that you might give designing a try yourself. For some ideas, try any of these are great library design projects: signs, webpages, posters, flyers, bookmarks, banners, etc.

What Is It Like to Design?

People might wonder why design needs to be a process. The very basic process of design, like many processes, is to solve a problem and then create a solution. Jason Fried, founder of 37signals and co-author of Rework, tweeted recently, “Your first design may be the best, but you won’t know until you can’t find a better one.” He later added this image from The Intercom blog as an illustration to make this important point. Striving for an elegant or best solution is something librarians and designers have in common. Librarians often share best practices and examining this process may not only assist us in terms of design, but perhaps we can apply these concepts to other areas of librarianship as we create programs, outreach, marketing, and more.

Design is a process.
Designers work hard to develop a successful design and it doesn’t always come easy. Here are some of the basic steps designers take in the development phase of their work. Every designer is a bit different, and not all designers follow the exact same process. However, this is a pretty good foundation for beginner designers and once you get good, you can incorporate or modify pieces of the process to make it work for you and the project at hand. Design is subjective and there are few hard and fast rules to follow, however, in future posts I’ll be talking more about design elements and details to help you create stronger designs that will speak to your users.

Design has constraints.
Before you start laying things out and jumping into a design, you want to understand what the “specs”  or specifications are. These are the details of the final piece you need up front before you begin any design. For example, is the piece going to be printed or is it an online piece? What’s the budget? Is it black and white, color, how many colors? What size? If printed, what paper will it be printed on? Will color bleed to the edge or is there a border? Is there folding or cutting involved?

All of these considerations are going to be the rules you must work under. But most designers like to think of them as challenges; many times if the specs aren’t too restrictive they can actually empower the designer to drive harder to make it more creative. You really don’t want to start designing before you get this all worked out because once you’ve jumped in it can mean starting over if a critical spec is missed. If you have designed for a set of specs and then try to modify it to fit all new specs later, it almost always compromises the strength of the design to work this way. Better to know those specs up front.

Design requires an open mind.
Sketch like crazy. You may think you have the best, most original idea ever once you get your assignment or have your specs, but please do yourself a huge favor and sketch some ideas out first. Do at least a page of sketches if not much more. Take notes, do some research on the topic, do word associations and mind maps and draw stick figures and doodle. Keep an open mind to new possibilities. Observe the world around you, daydream, and collect inspiration. You might still stick with that first idea but chances are you come up with something even better and usually more original if you push yourself to think in new ways and explore.

Design step by step.
Depending on the complexity of the piece, whether it’s print or web, I might do more or less of each step below. If you’re designing or reworking a website, this is a good method to get a powerful, thoughtful design. And of course, you can go back and iterate based on feedback given, changes to the design that impact design elements. If the design structure is strong, changes should be fairly small.

Basic Design Development Process:

1. research the topic, take notes, ask questions, doodle, jot down ideas, simmer 

2. series of thumbnail sketches
This is an extension of step 1. Do as many as you can muster…do it until you are sick of it. Here is a great presentation I recently found on sketching.

3. build wireframe
Stay abstract/block in composition. This is going to be larger than a thumbnail but try to keep it free from detail.

4. sketch comps
Take steps 2 and 3 and flesh out 3 comps. These should not be final but should follow specs and be close to finished in terms of look and feel for the major design components. You may use lorum ipsum text if you wish. This technique helps to keep people from giving feedback about the content over the design. Of course there are times the content may absolutely need to be there but use your own discretion and know that this is an option and may help in moving forward.

5. finalize comps
Usually 3 choices are offered to a client, but if you are your own client obviously just do your favorite.
All of this is separate from any CSS, html, javascript, etc. Mock it up using Photoshop and/or Illustrator (or a similar program of your choice). The point is to focus on the design apart from laying down code. “Form Follows Function” really rings true. It isn’t an either/or statement. The product must work first and foremost and the design will support, enhance, and make it work better. If it doesn’t work, no amount of gorgeous design will change something that is badly broken.

TaDa, right?
The design is done, let’s celebrate!

Well, not exactly. This process is merely just one phase of a much larger process that includes steps including: initially meeting the client, negotiating a contract, presenting your designs, more testing and usability, iterative design adjustments, possibly working with developers or print houses, etc. Design is a process that requires study, skills, schooling, and knowledge like many fields. I’ll be talking about more design topics in the future, so what is not covered here I’ll try and cover next time. Luckily, I gathered some great…

Design resources to get you started:

This is not a comprehensive list by any means but highlights of a few resources to get you thinking about design.

  • Non-Designer’s Design Book: One of the best beginner design books out there (overlook the cover- it really is a great book!).
  • Smashing Magazine: Really good stuff on this website- including freebies, like decent icons and vector artwork. Covers typography, color, graphic design, etc.
  • a list apart: another great site that delves into all kinds of topics but has great stuff on graphic design, UI design, typography, illustrations. etc.
  • Fast Company Design: relevant design articles and examples from industry.
  • IDEO: design thinking, great high level design examples- check out their portfolio in selected works.
  • Thinking With Type: title says it all- learn about the fine art and science of typefaces. You will never look at design and type the same way again.
  • Stop Stealing Sheep and Find Out How Type Works: another must on typography
  • Drawing on the Right Side of the Brain: seriously. even if you think you can’t draw. try it. anyone can draw, truly. Drawing helps you think in new and creative ways- it will help you be more creative and help in problem solving anything. Even those small doodles are valuable.

Pick. your. favorite. see above. do it.

Enjoy and thanks again!


Design in Libraries


photo by kvanhorn on flickr some rights reserved

What is the importance of design in libraries?

Libraries have users, and those users go through an experience, whether they walk through the doors and into the building or use the library’s online website and resources.

Why should we care?

  • Design can give users a good experience or a bad one.

Think about when you go to a store. Any store. The experience you have can be improved by design, or hindered by design. For example, if you go to a store in person and you are trying to find a particular item- signs have the potential to help you find that item. But what if you had too many signs? Or what if those signs are unreadable?

Think about when you are at a restaurant. You certainly want to have an enjoyable dining experience. From the time you walk through the door to the time you leave, everything you encounter and experience has an impact on you. When you sit down to the table and open the menu, you want to be able to easily read the menu items. Have you ever been to a restaurant where it was hard to decide on what to order because the menu was difficult to read? This seems to be a common occurrence, yet a simple well thought out menu can change that experience entirely. And great design can even give people an emotional experience that they remember deeply. Think about a time when you went to a restaurant and had a great experience; think about what details made that experience great.

  • Now take these concepts and redirect them to libraries.

When a user walks into the door of the library, what is their experience? Put yourself in the users shoes. Are signs unfriendly or hard to read? Is it difficult to find what they might be looking for? Think of design as a way of providing service to users. Good design takes training and study, however, within a relatively small timeframe, anyone can understand design basics and fundamentals to create decent design that communicates. Librarians are good at organizing things and within design lies organization. Designing is simply organization and choices about elements such as typography, composition, contrast, and color to name a few.

  • Design is also about restraint; what you don’t do.

This is an important distinction because often people get excited when they explore elements of design and want to put everything they love all into one design. Often this doesn’t work very well and it comes back to making good choices and sometimes leaving out an element you really love but doesn’t work in the overall design you are building. It’s okay though- designers collect like librarians do and we just save that good stuff for another design that it will really work well in. Keeping a little library and saving elements and inspirations are part of being a good designer. Whether online or in paper- both practices are good to get into. The tool Pinterest serves this purpose well but any tool or method for collecting design elements and inspiration is good practice. When you are looking for ideas- don’t forget to go to that tool to give you new ideas or to help get you thinking in new ways.

  • Good design in libraries leads to a quality user experience.

This concept of design can extend to all kinds of user experiences in the library, including layout of a room, the library’s web presence, the building’s architecture, furniture choices, marketing materials, and more. But let’s start simple- start in your library and examine what you have for signs. Ask this: what does this sign communicate to our user? How does it look and feel to you? What if this sign were in a store where you were making a purchase, how would it communicate in that scenario? Ask users what they think of your signs as well. Developing an understanding of what works and what doesn’t, will only lead to better design and thus better user experience.

 


Hot Topic: Infographics

Do you know what an infographic is? Infographics are visual representation of facts, tutorials, or other data-centered information that inform while staying focused on great design.

Here’s an example of one about the history of the iPad:

iPad infographic

iPad infographic via http://killerinfographics.submitinfographics.com/

This infographic takes a whole mess of data and makes it visually interesting and easy to digest.

So, what do infographics have to do with libraries? Libraries have tons of data- both informational and instructional data ranging from topics like local history facts to how to do research. Take a look at this Google infographic recently posted on the HackCollege site: http://www.hackcollege.com/blog/2011/11/23/infographic-get-more-out-of-google.html

A snippet:

Google Infographic

Google infographic via http://www.hackcollege.com/

This image highlights several complex research skills while explaining the thought process behind it in one easy to understand sentence, while being attractive and compelling to look at. What’s better than that?

Great examples of infographics can be found across the web. Wired magazine, for one, often uses them and Holy Kaw!, Guy Kawasaki’s website (http://holykaw.alltop.com) also highlights great infographics from other sites. Another great site to see examples of different types of infographics is http://killerinfographics.submitinfographics.com/.

The importance of infographics and other great visualizations of data (see Warby Parker’s 2011 Annual Report for the best annual report ever: http://www.warbyparker.com/annual-report-2011) to libraries is obvious. People respond to great design, and great design makes information accessible and inviting. It is in our best interests to strive for great design in all that we do, to make libraries accessible and inviting.

Recently, Sophie Brookover, New Jersey librarian, posted in the ALA Think Tank Facebook page (http://www.facebook.com/groups/ALAthinkTANK/) about starting a group of librarians learning to create infographics, much like the Code Year project. This idea is very much in the early stages, but keep an eye on it or get involved- good things are sure to come.