Making Your Website Accessible Part 3: Content WCAG Compliance

Welcome to part 3 of the web accessibility series. While part 1 explained a bit about web accessibility and the web consortium accessibility guidelines (WCAG) and part 2 covered implementing WCAG on the development side, part 3 will cover the content side of things.

The main goal is that you walk away with a set of guidelines you can give to staff. I’ll start with the easier stuff that apply to all staff that have access to editing content, and then I’ll move on to more complicated content, namely media and forms, where the guidelines may be for technical staff either for content creation or for evaluating add-ons/plugins.

Headers

Use headings 1-6 to structure information so people using assistive technologies can navigate web pages easier (2.4.6). If your page were displayed with only headers or with headers and content indented, would it make sense? Will your headers be in the right place? Many screen readers and tools use an “Outline View”, which shows only the headings of a page.

Header 1 is the Title of the Webpage
Header 2 is a Subtopic of the Webpage
Header 3 is a Specific Sub-topic of Header 2 (and 1)
Another Header 2 would be a Subtopic of Header 1
(but separate from the  first Header 2)

Example:

<h1>E-Resources in Engineering</h1> = title of your page.
  <h2>Standards and Codes</h2> = topic 1
    <h3>International Standards Organization</h3> = 1st subtopic of topic 1
    <h3>Canadian Standards Association</h3> = 2nd subtopic of h2 topic 1
  <h2>Journal Databases</h2> = topic 2
    <h3>Compendex</h3> = subtopic of topic 2

Enter your HTML or the URL of your page into HTML5 Outliner to see an outline view.

Links

The text for every link should be descriptive (2.4.4) and unique (within a single page). Imagine there was no other text around it (except the title of the page). Would you understand what that link is for? Many assistive technologies have a “links only” option for viewing.

While many CMS provide the option to add additional text to a link through the title attribute (and is described as a sufficient technique, H33), the title attribute is generally not read by screen readers 1 as reading the title attribute on links (and images) is off by default. 2

Text in a Foreign Language

While each page should already be marked with a ‘default’ language (3.1.1), chunks of text (e.g. quotes, titles) in another language should be marked (3.1.2) with the ‘lang’ attribute and the appropriate language code, which can be applied to any HTML element. 3

Tables

Only use tables for information and data that should be presented in a tabular format. For example, a calendar, a list of contact information, or data sets should be presented in a table (1.3.1). Tables should not be used for layout, such as presenting content in columns.

If you need to use a table, then the information must be presented in a way that is accessible to users with disabilities and allows the table information to still be understood by the user even if they can’t see the table’s layout.

Elements

<table> : This element defines an HTML table
<tr> : This element defines a table row
<th> : This element defines a table header and should have the appropriate scope
<td> : This element defines a table cell
<caption> : This element identifies the table and acts as a title for the table. A caption is shown to all.

Example using Code for a Simple Table (Technique H63)

<table>
  <caption>Overdue Fines for Library Materials On Loan</caption>
  <tr>
    <th scope="col">Type of Item</th>
    <th scope="col">Amount per Day</th>
  </tr>
  <tr>
    <td>Books</td>
    <td>$0.50</td>
  </tr>
  <tr>
    <td>DVDs</td>
    <td>$1.00</td>
  </tr>
</table>

For examples of more complex tables, take a look at Technique H43.

Images
  • Alternate Text

When you include image elements on your website, you also need to include alternate or alt text, which allows you to include descriptive information about the image. While the text is not visible to most users, assistive technologies will read the alternate text as a description of the image, so write concisely, while still providing an accurate description of the image.

However, if your image has been included for purely decorative purposes, leave the alternate text empty. Assistive technology will ignore the image completely.

For example:

<img src="/6th-floorplan.jpg" alt="floor plan of the library's 6th floor">

If decorative only:

<img src="/example.jpg" alt="">
  • Title for Images

The title field allows you to provide additional information about an image in addition to the alternate text (meaning the title should not repeat alternate text). The title will also typically appear if users hover over an image with a title. However, as already noted, the title is typically not seen or read, so the use of title is discouraged 4.

  • Use Text Whenever Possible

Basically, don’t use an image of text instead of just text – use CSS instead (1.4.5). The one exception is for logos.

The logo of this website is an image, but all other text you see in this screenshot is just text

The logo of this website is an image, but all other text you see in this screenshot is just text

  • Meaning through Text

In a similar vein, understanding information and instructions should not be dependent on any sensory characteristics, such as sound, colour, or shape (1.3.3, 1.4.1). Think about it as: your message should be understood in text-only mode.

Audio/Video, Animations & Interactions
  • Autoplay

In general, audio and visual content should not play automatically. Instead, users should be able to hit a play button when they are ready for the content. Audio that autoplays for more than 3 seconds must have a pause/stop control or independent volume control (1.4.2).

  • Alternatives to Media

All non-text content, including audio and visual materials should have an alternate (1.1.1), typically a text transcript and/or descriptive audio (1.2.1, 1.2.3). At the AA level, WCAG requires audio descriptions for all videos as well (1.2.5), but the Ontario legislation (AODA) excludes it.

Example of Audio Description in a Movie

Much like images, if the audio/video is actually an alternate to text, such as in a tutorial where an explanation is already fully explained in text form, then no alternate is required.

  • Captions

All audio/video should have captions (aka subtitles) again unless the actual audio/video is an alternative to text (1.2.2). At the AA level, WCAG requires captions for live (streaming) audio/video as well (1.2.4), but this is the one other exception to the AODA.

  • Timing

Timing issues are particularly important in media and interactive elements, although it applies to any session based activity, such as bookings and forms. The basic idea is that anything that is on a timer can be extended and in some cases, users have to be warned (2.2.1). The exceptions are when it’s in real time (e.g. auction) or it’s essential (e.g. timed quiz).

Toronto Public Library gives this session time out warning to users

Toronto Public Library gives this session time out warning to users

  • Moving, Blinking, & Flashing

While this applies to websites in general, particularly for interactive elements or animations, the simplified version is that anything that starts automatically should have an accessible mechanism to pause, stop, or hide it (2.2.2). Additionally, nothing on the website should flash more than 3 times within 1 second so as not to cause seizures (2.3.1).

WARNING: Epilepsy inducing website(please don't ever do anything like this, ever)

WARNING: Epilepsy inducing website
(please don’t ever do anything like this, ever)

  • Keyboard Accessible

Again, this applies to the website as a whole, but particularly with more interactive elements, everything on a website should have the ability to be used through a keyboard (2.1.1).

One of the major issues with web based media is that they tend to live in a Flash-based container, which is not usually accessible. (This may shortly prove to be less of a problem with accessible controls in Flash videos by default built into Flash CS6 5.) YouTube videos are a prime example.

One alternative is to provide a link to an accessible player. For YouTube videos, you can create a link that will load a video (or playlist) into an online accessible player, such as Easy YouTube Player or the Accessible Interface to YouTube.

The other common method is to wrap the Flash object with accessible controls (see Keyboard Accessible YouTube Controls for example). However, wrapping an embedded video may remove existing functionality, such as full screen or volume control.

If you host your own videos, consider having accessible controls load for all your videos, such as using the JW Player Controls.

I also emphasize that you should be careful to never have a keyboard trap (2.1.2) though this is uncommon these days. See the following section for more on keyboard accessibility.

Forms

Keyboard accessibility along with many guidelines talked about here may apply to any similar element in a website, but the rest of the guidelines are covered here as they are commonly related or encountered with form elements.

  • Tab Order

Not surprisingly, users should be tabbing through fields in the meaningful order, which is not always the same as the default browser order (2.4.3).

annotated screenshot of an incorrect tab order on a form

Default order based on the code, which is obviously confusing to a user.

To fix the (above) problem, you can use tab index attribute.

For simplicity, I’ve left out some coding such as the form attributes.

<form>
  <label for="realname">name: <input id="realname" tabindex=1>
  <label for="comments">comments
  <textarea id="comments" cols=25 rows=5 tabindex=4></textarea>
  <label for="email">email: <input id="email" tabindex=2>
  <label for="dep">department: <select id="dep" tabindex=3>
  <option value="">...</select>
</form>
  • On Focus & Input Behaviour

Whenever an element can take input or interaction from the user, the current focus should be visible (2.4.7). The most basic example is the border/shadow effect when your cursor is in a text box, which is already built into the latest webkit browsers. (Some of the other browsers do show a minimal effect, but nothing that would pass the colour contract guidelines.)

screenshot of default field focus styling in Chrome and Safari

Source: http://monstertut.com/2012/04/remove-outline-input-forms-chrome-onfocus/

Since the default behaviour only covers the webkit browser, some simple CSS will do the trick.6

input:focus, textarea:focus, select:focus {
  border: 2px solid #8AADE1;
  box-shadow: 0 0 3px #8AADE1; /* not supported pre-IE9, but border still applies */
  outline: medium none;
}

Putting focus on or entering something into an element should also not change the context (3.2.1, 3.2.2). Finally, submission should be manual, not automatic (though I’ve never encountered an automatic one).

  • Avoiding and Correcting Mistakes

Appropriate labels (and possibly instructions) should always go along with user input (3.3.2). Form elements in particular should generally each have a label element attached (though not used for buttons 7), such as in the basic code example above.

Any errors in input should always be identified and described (3.3.1), with corrections suggested whenever possible (3.3.3). For business transactions, particularly related financial or legal transactions, all data should be given to the user to be reviewed first (3.3.4).

With HTML5, marking required elements is now simpler than ever with the required attribute, such as:

<input type="text" name="name" required>

The browser will automatically identify whether the field was left blank and inform the user.

screenshot of popup when field required in chrome, firefox, and opera

Similarly, there are now more input types you can use for browser-based form validation, such as the email input type:

<input type="email" id="user_email">
Captcha

Do not use recaptcha. It irks me to no ends that recaptcha claims it is accessible, because they provide an audio alternative. While that’s true, next time you encounter one, try listening to it.

The alternative is to use a captcha that is more accessible. The wikipedia article on captcha can give you some ideas and example. Personally, I like the simple questions, such as ‘If you write 5 followed directly by 2, what number did you write?’

HTML5 Accessibility Support

Unfortunately, accessibility support for HTML5 is only partially there. Even basic elements, such as header and footer, are not supported across browsers. Based on various sources that I have read, for assistive technology purposes, your website should be accessible through the latest IE and Firefox on Windows, and Safari on OSX. Check out the HTML5 Accessibility website to see which HTML5 elements and attributes have accessibility support in the various browsers.

In the mean time, while in part 2, I mentioned that WAI-ARIA should only be used for custom interfaces, since not all browsers support all the new HTML5 elements and attributes, it has been suggested to use ARIA roles during this transitional phase. If you find something you’re using isn’t supported in the recommended browsers, check out Using WAI-ARIA in HTML, which talks about which ARIA role you should use.

Conclusion

This is the last of the series. I’ve made sure to cover all the guidelines, and while I haven’t specifically covered scripting, there’s almost no difference. Flash, Silverlight, and PDF are fairly different things, so I point you to the WCAG guidelines and other resources (see the next section).

Awareness of web accessibility has increased, but we can do more, a lot more, and there is no better place to start than with our own institution’s website. While web technologies are forging ahead and making it easier for people to interact with the web, adaptive or assistive technologies are frequently playing catch up, so we need to be aware of what works for everyone and what doesn’t. Make the web friendlier, for everyone.

Resources & More Information

If you want more information and resources, check out:

Notes

Responsive web design and libraries

Brad Frost's This is Responsive Website

Brad Frost’s This is Responsive Website via desktop browser

Responsive web design is not really a new concept, yet libraries and many websites in general, still have a way to go in adopting this method of web design. ACRL’s Tech Connect has covered various web design topics, including mobile applications, hybrid mobile applications, design basics, and website readability. Consider the responsive web design approach and its benefits another tool in your toolbelt and yet another option for libraries to present themselves online to their users.

So what is it?

As the number of devices in which we are able to view and interact with websites grow, it becomes more cumbersome to keep up with the plethora of laptops, desktops, mobile devices, and potentially devices or platforms that don’t yet exist. As our users view our websites and online resources in these various ways, we must ask the simple question- what does this look like and what is the user’s experience? If you have a smart phone or tablet, you may recall viewing a website and being annoyed that it is merely a shrunken teeny version of the site you’re used to seeing rather than adjusting nicely to accommodate the device you’re using. In many cases it requires you, the user, to do something to make it work on your device rather than accomodate you; a rather unappealing way to treat users I think. Here’s an examples from the New York Times website:

New York Times displayed on a desktop browser

New York Times displayed on a desktop browser

New York Times displayed on the iphone

New York Times displayed on the iphone aka the Barbie sized website

To avoid these awful Barbie-sized websites on our devices, the solutions we often see are: develop a mobile website, develop a mobile app, or create a website that is responsive and can handle most anything that comes it’s way. All of these are great solutions to developing a mobile presence however the responsive approach is fast emerging as a winning solution.

What makes it great?

The very basic benefit to creating a responsive website design is that you have one site for all devices- it’s intended to be inclusive for desktop machines and a variety of devices. A responsive site does not require anything of the user; no downloading or additional buttons to click, the result is immediate. That’s it. Rather than separate approaches for mobile through either a mobile site or mobile applications and then another approach for desktop machines- this method is flexible and covers it all under one design.

Responsive websites in the wild

The best way to experience responsive web design is to try out some websites that are designed in this way. Here are a few great examples with screenshots included- I recommend checking them out in your browser and then shrinking your browser window down to get the full effect or how this technology works. If you’re even more invested in the experience, bring the site up on any number of devices to see the benefits of responsive design done well.

Graphic designer, John Boilard, showcases his portfolio website using responsive design:
http://jpboneyard.com/ As you can see the images are flexible and each project displays very well on many devices. The images adjust accordingly and the performance of the site is easy to use and easy to view.

JP Boneyard Design viewed on a desktop browser

JP Boneyard Design viewed on a desktop browser

JP Boneyard design viewed on an iphone

JP Boneyard design viewed on an iphone

Web designer and the founder of responsive design, Ethan Marcotte, http://ethanmarcotte.com/ showcases not only his design but also his publications. There is a variety of content on his website and the responsive design works extremely well. For a quick article on responsive design from the graphic design perspective, see his article on A List Apart.

Ethan Marcotte website via desktop browser

Ethan Marcotte website via desktop browser

Ethan Marcotte website via the iphone

Ethan Marcotte website via the iphone

Matthew Reidsma, web services librarian at Grand Valley State University, also has a fantastic flexible site where even videos are responsive: http://matthew.reidsrow.com/ He is a web librarian to watch as he often writes and presents on responsive design (more on that below) and he is always creating really awesome and interesting web projects. The Grand Valley State University Libraries have a fantastic responsive site: http://gvsu.edu/library/

Matthew Reidsma's website via desktop browser

Matthew Reidsma’s website via desktop browser

 

Matthew Reidsma's website via iphone

Matthew Reidsma’s website via iphone

Grand Valley State University Libraries website via desktop browser

Grand Valley State University Libraries website via desktop browser

Grand Valley State University Libraries website via iphone

Grand Valley State University Libraries website via iphone

The website TitleCase, co-founded by designers and type experts, Jessica Hische and Erik Marinovich; this is an elegant example of showcasing this side project with a focus on type while all giving users a pleasant experience through responsive design.

TitleCase website via desktop browser

Title Case website via desktop browser

TitleCase website via iphone

Title Case website via iphone

Scribble Tone, the Portland, OR based design studio, created this responsive website for Design Week Portland: http://www.designweekportland.com/#footer With the gorgeous flexible images, the bold colors, and clear typefaces- all created and designed responsively- this website is pleasant and fun to use.

Portland Design Week website via desktop browser

Portland Design Week website via desktop browser

Portland Design Week website via iphone

Portland Design Week website via iphone

Resources

If you were like me and did not attend ALA Annual this year and get to see Matthew Reidma’s fantastic talk on Responsive Web Design for Libraries: Get Beyond the Myth of the Mobile Web, you are still in luck because he posted the talk and slides on his website here. He covers quite a lot and he provides a fantastic list of resources within that post. It’s a great presentation and truly worth watching all the way through.

To delve in more deeply into the details of designing with responsive web methods, I highly recommend Responsive Web Design by Ethan Marcotte. He not only provides good examples and techniques for designing this way, but he also explains the flexible grid and flexible images as well and displays his balanced approach between good design and good functionality. His website is also responsive and he’s designed complex websites: http://ethanmarcotte.com/

Another option, particularly for those who use WordPress as a CMS, there are a number of free responsive themes available that are already designed. Simply selecting the theme or taking a further step by creating a child theme that you could then customize would be a fairly simple way to make your website design responsive and more enjoyable.

The website, This is Responsive has a wide variety of tools to develop your own responsive website as does Bootstrap. So even if you don’t think of yourself as a designer, there are a lot of ways to get started in creating good design that is also responsive.

Whether you are interested in responsive design, mobile websites, or creating mobile apps, it is critical for libraries to be aware of the user experience as our customers use our websites and online resources on a variety of devices. The bar is being raised with responsive designed websites and users will come to expect this kind of experience. As the web, platforms, and devices evolve, it will be crucial for libraries to be already poised to offer a positive experience through good thoughtful design.

Brad Frost's This is Responsive Website via iphone

Brad Frost’s This is Responsive Website via iphone


3D Printers in the Library: Toward a Fablab in the Academic Library

Colegrove and a student assembling an articulated model of a V8 engine
photo by Nick Crowl

Considering adding a 3D printer to the array of technology your library offers to meet your members’ needs?

The DeLaMare Science & Engineering Library at the University of Nevada, Reno, recently added two 3D printers, along with a 3D scanner and supporting software, to its collection. In the spirit of sharing the tremendous excitement involved in providing a 3D printer to our community, we hope our successful experience may be of use to others as you make the case for your own library. We’ll cover the opportunities libraries can embrace with the potential 3D printing brings, what exactly 3D printing is, how 3D printing, making, and fabrication enhances and perhaps changes learning, and to illustrate we’ll talk about what we’re doing here in DeLaMare.

What’s a 3D Printer?

In a manner similar to printing images on paper, a “3D printer” is a type of additive manufacturing: a three-dimensional object is created by laying down successive layers of material that adhere to one another, creating a three-dimensional output.

What the material is composed of varies from one manufacturer to the next including:

  • fine cornstarch held together by “watered-down superglue”
  • ABS plastic (think Legos!) with each layer literally melted onto the other
  • high-end photopolymer printers where each layer is “printed” by flashing a 2-D image of the layer onto a thin film of a photoreactive layer deposited on the growing surface of the object, the process is similar: the three-dimensional object is constructed by printing and adhering one layer at a time.

Although the technology has been around for well over a decade, the cost for reliable printers has dropped to the point where it is now becoming widely accessible to hobbyists and the education market. Fair warning: don’t be surprised (like we were!) to find that your local high schools may already be years ahead of you in this arena. You can learn a great deal by talking to the high school teachers that may already be on their second or third iteration of the equipment. This makes sense: with the ability to rapidly produce detailed precision parts, such a device is by its very nature a rapid prototyping tool; it has a rightful place next to those CNC routers and milling machines in the shop.

But… the academic library? We would argue that the DeLaMare Science & Engineering Library and academic libraries in general are about knowledge creation, and “rapid prototyping represents the kernel activity of knowledge creation through action.” Spraggon & Bodolica, 2008.

Think of it this way: a laser printer enables students to create a tangible product of their creative writing, enabling further refinement and creation as it is marked-up and shared with others. A 3D printer can play a similar but more broadly-based role in the lives of research and learning – producing tangible models of theoretical constructs, acting as the springboard of new ideas. The ability to go from a two-dimensional model on a computer screen to a real-world object that can be handled, is potentially transformative; immediately accessible, it will not only promote but accelerate knowledge creation and innovation.

Engine assembly
Photo by Nick Crowl

 

But… a 3D printer in the library?

Not everyone can easily understand the connection between libraries and 3D printing. Sometimes stakeholders need to have the “dots connected” to better understand what it is, the value it provides in academia, and why a library is a prime location for this technology.

First consider technology that has become commonplace in today’s library:

  • copy machines, recently expanded to include scan to email functionality
  • desktop computer workstations and software
  • laptops and tablets
  • supporting equipment such as laser printers and scanners
  • audio and video production and editing equipment and staff
  • large-format (poster) printers and scanner

students look on at a piece of math art
photo by Nick Crowl

There is serious potential here

UNR Libraries and many academic libraries across the country already strategically deploy technology to enable knowledge creation across departmental boundaries. We are actively building an environment that nurtures creativity while stimulating and supporting learning and innovation across the university landscape.

The library is in a unique position to be able to leverage the wealth of learning and opportunities for knowledge creation that access to such technology can provide in a way that most individual departments are not. Because the library exists for everyone in the academic community, we are well equipped to provide open support for all. By its very nature the library is an active inter-disciplinary hub, where communities of practice cross paths regularly; rather than relegated to isolated departmental “silos” on campus, library technology explicitly enables learning and knowledge creation across disciplines. Science, Technology, Engineering & Math projects can be augmented by insights from the Arts and Humanities, and vice-versa. Regardless of academic discipline, “imagination begets fabrication, fabrication begets imagination.” (Doorley & Witthoft, 2012) 

Colegrove and student discussing the build process of the newest model.
photo by Nick Crowl

How is Rapid Prototyping a match for libraries?

Rapid Prototyping technology enables the active construction of new knowledge in a way that may be a good match for the library; beyond simply an opportunity to continue to be seen as leading the way technologically, the addition of the resource might enable your students and faculty to leverage the multidisciplinary skills and competencies needed to innovate and compete in today’s rapidly changing environment. In our case, liaison/outreach opportunities abound; currently identified needs that would be supported include:

• Chemistry Department – production of 3D chemical models and lattice structures in support of ongoing research being performed by graduate and undergraduate students working closely with teaching and research faculty. To date, the department has been required to outsource such production needs at a significant cost – both for the cost of the printing, and a lag time on the order of weeks to months for turnaround.

• Mechanical Engineering – development of custom piecework as-needed to support various projects throughout the undergraduate curriculum: from gears and structural work associated with robots and hovercraft to bridges and other structures; the students are already making heavy use of the equipment and software to meet unforeseen needs.

• Computer Sciences & Engineering – in addition to significant prototyping needs identified with several department flagship Senior Projects courses, more routine work will include the production of custom case enclosures to house prototype systems.

• Mining Engineering – production of 3D models of ore bodies and other mine structures immediately enabling learning on a level that is difficult to approach from a strictly two-dimensional print standpoint.

• Geography – structural modeling of geographic terrains, including 3D models based on traditional maps combined with other data to create tangible models of concepts being considered both in the classroom and as faculty research.

Planetary gear
Photo by Nick Crowl

Potential support could include:

• BioSciences – examples could include production of body parts models from CT or other scans; producing tangible 3D replicas of actual case studies. [ Editorial note: a research team from the Psychology department on campus has already announced their intention to print 3D models of each team member’s brain from MRI scans.]

• Business/Engineering/Physical Sciences – production of custom parts needed to prototype development in support of patent applications without overly costly outsourcing of work.

• Seismology – active production of 3D models of fault boundaries in an area of study as based on field sampling and collected data.

• Arts – need more be said? Imagine the creativity documented in Lawrence Lessig’s “Remix” extended to the world of 3D objects…

In short, rapid prototyping is a new multidisciplinary literacy that is poised to boost learning and knowledge creation across the Sciences, Engineering, and Arts across the academy. The need for rapid prototyping support is real, and the library is an appropriate place to maximize both the investment and return on the equipment.

So what kind of 3D printer to get?

As of this writing, RP publications hosts a pretty thorough comparison chart of “Comparison Chart of All 3D Printer Choices for Approximately $20,000 or less” at http://www.additive3d.com/3dpr_cht.htm. Its authors make the important points up-front:

• there’s no such thing as the “best” 3D printer, and

• the most important thing is to ask yourself what you and your community will be doing with the machine; balance current needs and future potential.

3D printing software
photo by Nick Crowl

What will we be doing with a 3D printer?

In identifying needs strongly in line with robust, droppable output; we needed to be able to print 3D models of gears, robot parts, and models that could be handled with a minimum of breakage. Stakeholders across the disciplines were quite clear that they would rather hand-paint a part made of “real” (ABS) plastic if need be than deal with pretty but fragile output.

We chose 2 printers for our maiden voyage along with supporting hardware and software:

  • Production 3D printer: Envisioned as the production engine for reliable output of precision parts, the Stratasys uPrint+/SE appeared to be the optimum choice given the demands of a production environment. The combination of reliable precision output, along with the relatively low cost of materials, promises to be a good entry point, at roughly $4.50/cubic inch of printed volume. Although the Stratasys uPrint/SE is somewhat less expensive, the “+” option adds the capability of printing in multiple colors – a feature that is likely to be key in the adoption and use of the equipment.
  • Hobbyist 3D printer: The 3DTouch printer was selected to serve both as an active display and an entry point for users experimenting with 3D print output; although the printer lacks the precision of the recommended production machine, the cost of materials with the 3DTouch are dramatically lower than for the production machine at approximately $0.60/cubic inch. The idea is that the 3DTouch can serve as a testing ground for first-round prototypes that would otherwise be printed at a significantly higher cost on the production machine.
  • Supporting hardware and software: Purchases include a single NextEngine 3D Laser Scanner, along with a single license of the supporting software RapidWorks. Capable of scanning extended real-world objects at up to 160,000 points per inch, producing a highly-detailed digital representation that can be immediately opened and manipulated in popular modeling software such as SolidWorks or AutoCAD. The educational lab license (30 floating licenses) of the Rhino 3D Modeling Tools for Learning was purchased to meet the needs of customers less comfortable with the SolidWorks software available through a partnership with Engineering on campus.

gargoyle
Photo by Nick Crowl

Connecting the Dots

It should be mentioned that the equipment identified for purchase already has a successful track record – it continues to be the choice for installation in high schools across the country for the same reasons detailed here.

The introduction of the new service already speaks loudly to the students and faculty as to UNR Library’s commitment to the continuing support of combining new with traditional technologies in support of the depth of learning that could not otherwise be obtained. In addition to directly supporting learning and innovation across disciplines at the University, the addition of rapid prototyping services may provide opportunities to introduce those that may not currently think of themselves as “library users” to the wealth of supporting resources that the library already provides. Production use of the 3D printers will build on the already well-established model of large-format printing support, developed over many years; the adoption of the new technology will not require substantial modification to existing procedures.

The great news is we are seeing both printers get use from students and faculty from a variety of departments, even through the summer. Many students have been early adopters, often spreading the news by word of mouth and bringing their work to their peers and faculty. Interestingly, the students are helping each other with the 3D scanning, manipulation and building using 3D software, as well as sharing files. The printer is available to all within the UNR community and we are also looking forward to working with a number of faculty as they add 3D printing as part of their courses and curriculum starting this fall.

Edited to add the official press release from University of Nevada, Reno: http://newsroom.unr.edu/2012/07/18/university-of-nevada-reno-library-first-in-nation-to-offer-3d-printing-campuswide/

 

References

Doorley, S., & Witthoft, S. (2012). Make space: How to set the stage for creative collaboration. (1 ed., p. 79). Hoboken, New Jersey: John Wiley & Sons, Inc.

Spraggon, M. and Bodolica, V. (2008). Knowledge creation processes in small innovative hi-tech firms, Management Research News, 31(11), p. 879-894.

 

About Our Guest Author: Tod Colegrove holds the degree of Master of Science in Library and Information Science with a concentration in Competitive Intelligence and Knowledge Management from Drexel University which complements additional advanced degrees held in Physics, including the Ph.D.; over 14 years experience as senior management in high-technology private industry. Actively involved in the academy across multiple scientific and engineering disciplines, and keenly aware of the issues and trends in scholarly communication in the sciences; active member of the Association of College and Research Libraries, Science and Technology Section (ACRL/STS), as well as the Library and Information Technology Association (LITA) division of the ALA. At the University of Nevada, Reno, where I served multiple years as manager of the Information Commons @One at the opening of the Mathewson-IGT Knowledge Center, and currently serve as the Head of the DeLaMare Science & Engineering Library.

 


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!


Glimpses into user behavior

 

Heat map of clicks on the library home page

Heat map of clicks on the library home page

Between static analytics and a usability lab

Would you like an even more intimate glimpse into what users are actually doing on your site, instead of what you (or the library web committee)  think they are doing? There are several easy-to-use web-based analytics services like ClickTale , userflyLoop11Crazy Egg, Inspectlet, or Optimalworkshop. These online usability services offer various ways to track what users are doing as they actually navigate your pages — all without setting up a usability lab, recruiting participants, or introducing the artificiality and anxiety of an observed user session. ClickTale and userfly record user actions that you can view later as a video; most services offer heatmaps of where users actually click on your site; some offer “eye tracking” maps based on mouse movement.

  • Most services allow you to sign up for one free account for a limited amount of data or time.
  • Most allow you to specify which pages or sections of your site that you want to test at a time.
  • Many have monthly pricing plans that would allow for snapshots of user activity in various months of the year without having to pay for an entire year’s service.

We’re testing Inspectlet at the moment. I like it because the free account offers the two services I’m most interested in: periodic video captures of the designated site and heat maps of actual clicks. The code is a snippet added to the web pages of interest. The screen captures are fascinating — watch below as an off-campus user searches the library home page for the correct place to do an author search in the library catalog. I view it as a bit of a cautionary illustration about providing a lot of options. Follow the yellow “spotlight” to track the user’s mouse movements. As a contrast, I watched video after video of clearly experienced users taking less than two seconds to hit the “Ebsco Academic Search” link. Be prepared; watching a series of videos of unassisted users can dismantle your or your web committee’s cherished notions about how users navigate your site.

Inspectlet video thumbnail

This is a Jing video of a screen capture — the actual screen captures are much sharper, and I have zoomed out for illustrative purposes. The free Inspectlet account does not support downloads of capture videos, but Rachit Gupta, the founder, wrote me that in the coming few weeks, Inspectlet is releasing a feature to allow downloads for paid accounts. Paid accounts also have access to real time analytics, so libraries would be able to get a montage of what’s happening in the lobby as it is happening. Imagine being able to walk out and announce a “pop-up library workshop” on using the library catalog effectively after seeing the twentieth person fumble through the OPAC.

Another thing I like about Inspectlet is the ability to anonymize the IP addresses in the individual screen captures to protect an individual patron’s privacy.

The chart below compares the features of a few of the most widely used web-based analytics tools.

 

Vendor Video Captures Heat Maps Mouse & Click Tracking Real Time mode Other Privacy Policy Pricing plan
ClickTale

Scroll maps, form analytics, conversion funnels, campaigns Privacy Policy Basic $99/month; limited free plan; month to month pricing; higher
education discounts available (call)
Crazy Egg  

  Scroll maps, click overlays, confetti overlay Privacy Policy Basic $9/month (annual)
Inspectlet

Scroll  maps, Custom API, anonymized IP addresses Privacy Policy Starter $7.99/month; limited free account.Can cancel subscription at any time.
mouseflow

Movement heatmaps, link analytics Privacy Policy Small: aprox $13 US/month; free plan.Can cancel subscription at any time.
seevolution

Scroll maps, visual tool set for real  time Privacy Policy Light: $29/month. Free plan, but very limited details.
userfly

Terms (with a brief privacy explanation) Basic $10/month; free 10 captures a monthCan cancel subscription at any time.

If you are using one of these services, or a similar service, what have you learned about your users?

Testing new designs or alternative designs – widely used web-based usability tools

After you’ve watched your users and determined where there are problems or where you would like to try an alternative design,  these services offer easy ways to test new designs and gather feedback from users without setting up a local usability lab.

 

Loop11 Create test scenarios and analyze results (see demo) Privacy Policy First project free; $350 per project
Optimalworkshop  Card sorting, Tree Testing, Click Testing Privacy Policy Free plan small project; $109 for each separate plan; 50% discount for education providers
OpenHallway Create test scenarios and analyze results Terms of Service Basic: $49/month; limited free account, Can cancel subscription at any time.
Usabilla Create test scenarios and analyze results; mobile UX testing Terms of Service Starter: $19/month. Can cancel subscription at any time.

 


Making Library e-Books on the e-Book Reader Visible

Browsing Experience in the Virtual vs. the Physical Space

However entangled our lives are in virtual spaces, it is in the physical space that we exist. For this reason, human attention is most easily directed at where visual and other sensory stimuli are. The resulting sensory feedback from interacting with the source of these stimuli further enriches the experience we have in the physical space. Libraries can take advantage of this fact in order to bring users’ fleeting attention to their often-invisible online collections. So far, our experience on the Internet, where we spend so much time, is still mostly limited to one or two sensory stimuli and provides little or no sensory feedback. A library’s online resources, often touted for its 24/7 accessibility anywhere, are no exception to this limitation.

Flickr - "augmented reality game bibliotheek deventer"

Think about new library books, for example. The print ones are usually prominently displayed at a library lobby area attracting library visitors to walk up and browse them in the physical space. By thumbing through a new book and moving back and forth from the table of contents to different chapters, we can quickly get a sense of what kind of a book it is and decide whether we want to further read the book or not. The tactile, olfactory, visual, and auditory sensory input that we get from thumbing through a newly printed book with fresh ink contributes to making this experience enjoyable and memorable at the same time.

Now compare this experience with reading a library Web page with the list of new online library books on a computer screen. Each book is reduced to a string of words and a hyperlink. It is hard to provide any engaging experience with a string of words and a hyperlink.

The Invisibility Problem of Library e-Books

Like many libraries, Florida International University (FIU) Library started an e-book reader lending program that circulates e-book readers. Each reader comes with more than one hundred titles that have been selected by subject librarians. But how can a library make these library e-books on e-book readers noticed by library users? How can a library help a user to quickly figure out what books are available on, say, a library Kindle device when those are specifically what the user is looking for?

Well, if a user runs a keyword search in the library’s online catalog, say, with ‘Kindle,’  s/he will find more than sufficient information since the library has already neatly cataloged all titles available on the Kindle device there. But many users may fail to try this or even be unaware of the new e-book reader lending program in the first place. The e-book reader lending program offers a great service to library users. However, the library e-books offered on the e-book readers can be largely invisible to users who tend to think that what they can see in a library is all a library has.

Giving Physical Presence to Library e-Books on e-Book Readers

The problem can be solved by giving some physical presence to e-books on the library’s e-book readers using a dummy bookmark on the stacks. This is particularly effective as it quickly captures users’ attention while they are already browsing the library stacks looking for something to read.

Users are familiar with a dummy book on physical shelves that marks a print title that is often looked for under different names or the recent change of the location of a title. Applied to Kindle e-books, a dummy bookmark is just as effective. A user can walk around the space where stacks are located and physically identify those e-books that the library makes available on a e-book reader in each subject section. By a visible cue, a dummy bookmarks create a direct sensory association between an e-book and something physical (that provides a visible and tactile feedback) in a user’s mind, thereby effectively expanding a users’ idea of what is available at a library.

When you pull out the bookmark, it looks like this. The bookmark includes the book’s cover image, title, author, and call number, which help a user to locate the title record in the library’s online catalog. But in reality, users are more likely to just walk down to the Course Reserves area to check out an e-book reader after reading this sign.

I tweeted this photo a while ago when I accidentally found out the idea was implemented while looking for some book in the stacks. (See the disclaimer below.)  I was quite surprised by many positive comments that I received in Twitter. Many librarians also suggested adding a QR code to the dummy bookmark next to the Call Number. The addition of the QR code would be an excellent bonus on the bookmark. It will allow users to check the availability of the title on their mobile devices, so that they can avoid the situation in which the e-book and the e-book reader device have been already checked out.

If you are running a pricy e-book reader lending program at your library, a dummy bookmark might be an inexpensive but highly effective way to make those e-books stand out to users on the library stacks. What other things do you do at your library to make your online resources and e-books more visible to users?

Disclaimer: I have suggested this idea at the E-resources group meeting where all FIU libraries (including Medical Library where I work) are represented. But the implementation was done solely by the FIU main Library for their Kindle e-book collection on their stacks. For those who are curious, I was unable to find the exact number of dummy bookmarks on the stacks. 

 


The Internet of Things meets the Library of Things

If the New York Times article The Internet Gets Physical is any indication, a sea change is approaching in just how smart everyday appliances are going to become. In theory, smart infrastructure will connect you and any appliance with an IP address to everything else.

For example: your car will talk to your phone. Appliances like your computer, and chair, and desk, interact over the web. Data will be passed via standard web technologies from every Internet-capable appliance. Everyday consumer electronics will be de facto networked to the Internet. The overall effect of these smart objects means the possibility of new library services and research environments.

According to the New Media Consortium’s 2012 Horizon Reportthe Internet of things is made possible by the IPV6 initiative, which essentially allows for the explosion of IP addresses across the globe and in your everyday life:

“with the advent of the New Internet Protocol, version six, those objects can now have an IP address, enabling their information store to be accessed in the same way a webcam might be, allowing real-time access to that information from anywhere… the implications are not yet clear, but it is evident that hundreds of billions of devices — from delicate lab equipment to refrigerators to next-generation home security systems — will soon be designed to take advantage of such connections…” (p.8)

What are the implications of the physical Internet in library settings?

Your smart phone interacts with the library building

The ways in which mobile apps can interact with the library building is not yet fully realized; for example, should your phone and the building be able to tell you things such as the interrelations among your physical presence and searches you’ve done on your home or office computer – or places you’ve driven past in your commute; or where you spend you leisure hours? Who makes the choices of suggesting resources to you based on the information in all of your life-sensors? Surely libraries will need filtering algorithms to control for allowable data referencing but where and how will we implement such recommender services?

Smart digital shelving units

What if a future digital shelf arrangement could be responsive to your personal preferences? For example – the library building’s digital smart infrastructure could respond to your circulation history or Internet searches in a way that shelves could promote content to you in real time. What would this recommendation look like for individual research, study, or browsing? And how would libraries be able to leverage such a service?

Digital library integration with physical objects

Smart objects allow libraries to consider how to make the virtual presence (databases, e-books, ILS data) physical. Many libraries would welcome a more physical instantiation of vended software products, since to a certain extent, users believe the library’s collection consists of only the things that they can see in the library.

The 2012 NMC Horizon Report indicates that smart objects are on the far term horizon. So it may be four to five years before they affect higher eduction — what is your plan for smart objects in the library environment?

Additional Resources

 

 


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.