/docs/virtualshelf
Type: /type/page
body: value: <div class="contenttext">
<p>
This document provides an overview of the features and use practices of the Virtual Shelf visualization.  The Virtual Shelf was created to allow users to engage in Open Library browsing that more closely resembles the physical experience of browsing a library, as well as offering tools for personal collection building and sharing.  The Virtual Shelf is currently in the prototype stages and will be continually developed based on user feedback and testing.
</p>

<p>NOTE: Much of this document is out of date. You can see slides of the visualization <a href="https://slideplayer.com/slide/3915649">on slideplayer</a>.</p>


<p style="padding-left: 224px;">
  - <a href="#concept">Concept</a><br>
  - <a href="#appearance">Appearance</a><br>
  - <a href="#interaction">User Interaction</a><br>
  - <a href="#properties">Visual Properties</a><br>
  - <a href="#prototype">Current Prototype</a><br>
  - <a href="#nextsteps">Next Steps</a><br>
 </p>

<br clear="all">


<a name="concept"></a>

Concept
-----------
The Virtual Shelf renders a collection Open Library materials based on those resources' metadata.  We envision these collections being built in four basic ways:
<ol>
<li> Users can choose to see a book's place in the general shelf - it's placement within the Open Library's collection as a whole.  This would show a book as it would appear if found in a physical library (perhaps sorted by Dewey, LC, or OCLC numbers, for example).</li>
<li> Users can view search results as a shelf.</li>
<li> Users can browse subject headings as a shelf.</li>
<li> Users can select individual books to create custom shelves which can be saved and shared.</li>
</ol>

https://www.ischool.berkeley.edu/projects/2009/virtual-shelf https://slideplayer.com/slide/3915649/

<a name="appearance"></a>

Appearance
-----------------
The Virtual Shelf display has two parts: the resource page area (labeled "Book Details") and the shelf visualization area (labeled "Shelf View").  The Shelf View is populated with virtual spines of the books in the collection being browsed. The spines are dynamically rendered based on the metadata of the book in the collection.  While the system is currently designed to display books by showing representations of their spines, it can be easily updated to include other types of collection items.


<a name="interaction"></a>

User Interaction
-----------------------
When the user moves the mouse over a book's spine, that book grows and a translucent tooltip appears, providing details of that book's record information.  When a user clicks on a spine, that book's Open Library page is displayed in the Book Details panel and the spine icon is replaced with an open book icon.  

The name of the current shelf being viewed is displayed on the right of the Shelf View panel.  The Shelf View can also be collapsed so that the user can view the Book Details panel in the full screen.  The Shelf View panel is collapsed and restored by clicking on "Shelf View (Click to Collapse/Restore)". A dropdown menu just above the book spines allows users to sort the shelf collection by various fields.

![Virtual Shelf basic appearance](/static/images/shelfview/appearance.jpg "Basic Appearance")

Once a user has selected a book, she has more interaction choices. The user can create personal notes for a book by typing them into the "Add Book Note" field and hitting Enter or clicking the "Submit Note" button.  Notes appear in yellow boxes at bottom of the Book Details panel for the book they have been added to.  For resources that the user has added notes to, a small yellow post-it icon appears on the spine. Notes are not part of the Open Library book page itself and only appear for the user that created them.  However, they persist until they are removed and appear whenever their creator views that book's page.

![Virtual Shelf adding notes](/static/images/shelfview/interaction1.jpg "Notes")

Once a book is selected, the user can also click the "Save to Book Bag" button to add this resource to their custom "Book Bag".  The Book Bag is a temporary collection that allows users to keep track of books that interest them over the course of a browsing or searching session.  Resources that have been added to the Book Bag have a bright blue border. Users can view their Book Bag by clicking on the "View Book Bag" button.  (The number in parentheses on this button shows the number of items currently added to the bag.)  The users' Book Bag is then loaded into the Shelf View.  The user can then return to the original shelf being browsed by clicking on the "Return to Shelf" button.

![Virtual Shelf bookbag](/static/images/shelfview/interaction2.jpg "Bookbag")

<a name="properties"></a>

Visual Properties
------------------------
Currently the basic visual properties of the Virtual Shelf are as follows:
<ul>
<li>Spine thickness is calculated based on dimension metadata for books that have it or number of page scan images.</li>
<li>Spines display as much of the book's title and author that will fit on the spine.</li>
<li>A resource currently being viewed is displayed as an open book icon.</li>
<li>Resources that the user has added notes to have a small yellow post-it icon on the spine.</li>
<li>Spine color is currently randomly selected from ten possible colors.</li>
</ul>


<a name="prototype"></a>

Current Prototype
--------------------------
We have created a current [functioning prototype](http://people.ischool.berkeley.edu/~breity/bin-release/ShelfView2.html) of the Virtual Shelf.  This prototype displays the books in the [Internet Archive's Great Books Collection](http://openlibrary.org/collections/greatbooks) and is meant to be a functionality preview.  We welcome comments, concerns, and suggestions from the community and encourage users to provide [feedback](mailto:breitbart@ischool.berkeley.edu,d_blong@ischool.berkeley.edu)!

<a name="nextsteps"></a>

Next Steps
---------------
<ul>
<li>We will continued user testing and iteratively redesign the Virtual Shelf.</li>
<li>The Virtual Shelf will eventually be integrated into the Open Library system and will be linked to user accounts. We will explore various feature for sharing and collaboration among users, including allowing users to save their custom shelves and assign privacy settings to them, as well annotating shelves and adding tags, and sharing custom shelves with other users.</li>
<li>The Virtual Shelf prototype is currently built in Flex and runs in a Flash applet in the browser.  Subsequent iterations will be written largely in Javascript for increased integration and openness.</li>
<li>We will also explore possible features for re-use and repurposing of custom shelf collections, including providing feeds and exporting functions for shelves to allow users mash up the shelves they build in the Open Library with other applications or on other sites.</li>
</ul>
</div>
has_fulltext: true
title: Virtual Shelf Prototype Guided Tour