Project C: Calibre Ebook Manager (Interface Redesign) by Anthony Moore

Project C: Calibre Ebook Manager Interface Redesign Lindsey Wilson College Professor Jason Occhipinti

Anthony Moore December 2014

Index Introduction

Origianal UI

Research

Sketches

Site Map

Low-Fidelity Wireframes

Medium-Fidelity Wireframes

Design Comps

Conclusion

Anthony Moore / Information and Interface Design / Dec 2014

Introduction

Calibre is a free and open source e-book library management application developed by users of e-books for users of e-books. It has a cornucopia of features. If you are a lover of eBooks, this is an indispensable tool. It allows you to transform PDFs into ePubs and eBooks that can then be viewed on the iPad, Kindle, Nook and more - and vice versa.

Problem

Due to its open source nature, Calibre has had many features added over a period of time. This has had led to a negative impact on the interface and it has become difficult, and for casual users, sometimes impossible to use.

Solution

The purpose of this project is to redesign the interface of Calibre and make it more intuitive for itâ&#x20AC;&#x2122;s users. The primary focus is to design the installation process and the main interface for the search and edit metadata screens. This design also removes or consolidates the confusing options and puts emphasis on the user experience. To provide context for the solution screenshots from the original software have been provided.

Anthony Moore / Information and Interface Design / Dec 2014

Original UI Main Page

Anthony Moore / Information and Interface Design / Dec 2014

Edit Metadata

Anthony Moore / Information and Interface Design / Dec 2014

Research The first step in the redesign was to discover and map out the functionality of Calibre. Following is a series of sketches that quickly identifies the breadth of this software.

Anthony Moore / Information and Interface Design / Dec 2014

Sketches After the scope of this project was assessed work began on the redesign of the interface. Sketches were made to provide a direction toward the solution. The first iteration of wireframes follow. The installation screens were consolidated from four screens into two. The first screen combines the various options from the originals screens.

Anthony Moore / Information and Interface Design / Dec 2014

Install Screens

Anthony Moore / Information and Interface Design / Dec 2014

In the original iteration of wireframes a three panel design was introduced. The left-most panel serves as the basic navigation for the system. The library section provides basic functionality for working with the library. Folder management allows the reader to control what folders on the computer are included in their library. As books are downloaded they are automatically added to the library. This was designed to consolidate the various ways Calibre allowed for adding books. Bookshelves were added as a means for the reader to organize their books. The middle panel is used to show details about the current operation e.g. listing books, editing data and searching. The right-most panel is used when a particular book is selected. The details for that book will show up here.

Anthony Moore / Information and Interface Design / Dec 2014

Search Screen

Anthony Moore / Information and Interface Design / Dec 2014

Search Results

Anthony Moore / Information and Interface Design / Dec 2014

Edit Metadata

Anthony Moore / Information and Interface Design / Dec 2014

Site Map Calibre has been greatly streamlined. Some features have been removed, while others have been consolidated to provide more value to the average E-book reader. The way books are added to the library is too confusing, news feeds have been removed and how books are removed has been greatly simplified. The book detail element of the site map denotes that book details that are displayed in the right-most panel (detail panel) of the UI when a book has been selected. Following is the sitemap that represents the redesigned functionality of Calibre.

Anthony Moore / Information and Interface Design / Dec 2014

Low-Fidelity Wireframes After receiving feedback on the sketches the “Cancel” button was removed from the UI thus allowing the user to close the dialog by clicking on the windows UI element to close the screen. The following screen allows the user to select the language, device from a select box that shows the allowable options for these two elements. The location element allows the user to use the windows UI to locate a suitable folder to install Calibre. Also, I renamed the “Next” button to “Install” since this has now become a one step process.

Anthony Moore / Information and Interface Design / Dec 2014

Install Screens

Anthony Moore / Information and Interface Design / Dec 2014

Search Results The search results screen below displays the results from the reader’s search. In this case the reader searched for the word “nutrition.” The title bar in the application captures the latest search phrase and the back arrow appears so that the user can navigate back and search again. The book The China Study has been selected by the user and is highlighted. The details for the book are displayed in the detail panel of the UI. From here the user can learn about the selected volume and may add it to her library by purchasing the book.

Anthony Moore / Information and Interface Design / Dec 2014

Bookshelves The following screen demonstrates the usefulness of the bookshelves and the menu when the user right-clicks on a book. Bookshelves allow users to organize their books by topic allowing them to quickly navigate to books that relate to a certain topic. In the screen below the user has selected the Interactive Design bookshelf. Note again that the title bar has captured this userâ&#x20AC;&#x2122;s selection. From this bookshelf, the user has selected the book Interdisciplinary Interaction Design (reflected in the detail panel) and has right-clicked it to reveal more options.

Anthony Moore / Information and Interface Design / Dec 2014

Edit Metadata From the previous screen, the reader selected Edit Metadata which resulted in the following. This screen allows the user to edit the bookâ&#x20AC;&#x2122;s metadata or download the data. The book cover can be changed as well and comments can be added to the book. Note the icons on the toolbar that allow the user to undo and save their changes.

Anthony Moore / Information and Interface Design / Dec 2014

Medium-Fidelity Wireframes Install Screens

Anthony Moore / Information and Interface Design / Dec 2014

Search After receiving feedback from the low-fidelity wireframes the right-most panel was removed and is only introduced when the detail for the book is needed. The typography in the left-most panel changed as well to create textual hierarchy.

Anthony Moore / Information and Interface Design / Dec 2014

Search Results In the panel where the list of books is viewable, such as the search results and bookshelves, functionality has been added to switch from a grid view to a list view. The books have been resized to make the covers more readable and created more white space.

Anthony Moore / Information and Interface Design / Dec 2014

Bookshelves

Anthony Moore / Information and Interface Design / Dec 2014

Edit Metadata By removing the right-most panel more real estate has been created for the Edit Metadata screen. The multiple buttons to edit the cover have been removed. To clean up the Edit Metadata screen, the buttons from the panel were removed and icons are introduced (download metadata, edit cover) to perform the task that was associated with the button. Also, this keeps the interface consistent by having all the action UI elements together as opposed to having some as icons and others as buttons. This also creates more negative space in the design.

Anthony Moore / Information and Interface Design / Dec 2014

Final Comps Install Screens

Anthony Moore / Information and Interface Design / Dec 2014

Search Results

Anthony Moore / Information and Interface Design / Dec 2014

Bookshelves

Anthony Moore / Information and Interface Design / Dec 2014

Edit Metadata

Anthony Moore / Information and Interface Design / Dec 2014

Conclusion After receiving feedback and going through several iterations of design the final design provides many improvements over the original design. Aside from the improvement in the UI elements attention was given to usability. Following is a list of key enhancements that focus on the user experience for the screens that have been redesigned. 1. Manage Folders – Unlike the original design of Calibre where there were multiple ways to add books to the library I have created a way to manage the folders that are included in the library. When books are downloaded they can be stored in any folder. As long as this folder is in the list of folders that make up the library, the books will automatically appear in Calibre. 2. Bookshelves – I have created bookshelves as a way to organize books. This is similar to putting tags on a book. Books can be added to multiple bookshelves; for instance, you may want to have a book placed on the Sports and History bookshelves. 3. List and Grid Views – When viewing books the user has the option to toggle between list and grid view. The original version only allowed for books to be viewed in list view. 4. Detail Window – The detail window of the UI is added to provide details about the book selected. At first the window was static but in my final revisions it only appears when a book selected by the user. 5. Menus – I have muted some of the commands that the original version of Calibre represented with icons as part of the UI. Right-clicking on a book allows the user to edit metadata or convert books to other formats.

Anthony Moore / Information and Interface Design / Dec 2014