Calibre Interface Final Design Doc

5303 PROJECT C:

Calibre E-book Manager Interface Redesign

Final Project Design Document

Lindsey Wilson College Professor, Jason Occhipinti December 11, 2014

by Venus M. Popplewell

5303 PROJECT C: 5303 PROJECT C: CALIBRE E-BOOK MANAGER

Calibre E-book Manager Interface Redesign Final Project Design Document

Index Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2 Content and Navigation Exploration . . . . . . . . . . . . . . .3 - 4 Refinement and Elimination . . . . . . . . . . . . . . . . . . . . . .5 - 6 Site Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7 Interface Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 - 10 Interface Refinement . . . . . . . . . . . . . . . . . . . . . . . . . .11 - 13 High-Fidelity Wireframes . . . . . . . . . . . . . . . . . . . . . .14 - 15 Final Design Comps Presentation . . . . . . . . . . . . . . . .16 - 25 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26

Introduction

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Problem Calibre is a free and open source e-book library manage-

ment application developed by users of e-books for users of e-books. It has a cornucopia of features. If you are a

lover of e-books, this is an indispensable tool. It allows you to transform PDFs into ePubs and e-books that can then be viewed on the iPad, Kindle, Nook and more.

Calibre is rich with e-book management features, but

these features are difficult to discover and use because of

a poorly designed interface. The content represented

lacks visual hierarchy and organization. The current inter-

face creates information anxiety because of the abundance of unorganized features.

Solution My solution begins with the exploratory phase of the e-book application. After learning the Calibre interface and feature options,

I proceeded to sketch and wireframe solutions to improve the usability of the manager capabilities. The final comp

presentation is a result of modifications based on peer feedback.

2

Content and Navigation Exploration 5303 PROJECT C: CALIBRE E-BOOK MANAGER

Calibre is an open source e-book management application available by free internet download. The first

phase of the redesign was an exploration phase. This

included acquiring an e-publication from the internet

and then adding it to Calibre; allowing the designers

to also become the test users. In this phase we were

to download the application and document our interactions with sketches and diagrams.

Interaction Experience Installing Calibre was intuitive and there were no

barriers to success. Once the application was downloaded I experienced information anxiety. The program lacked an obvious point of entry and the

information hierarchy was difficult to determine – my

eyes did not know where to focus or how to begin

the interaction. The aesthetic layout was dated and

was reminiscent of a database interface from the early internet days.

Calibre is a powerful management system, but as new user, I had trouble understanding all it had to offer. Many of the editing and

converting features seemed unnecessary; options such as ‘heuristic processing’ and ‘structure detection’ were too advanced for a

new user to understand. The settings within each feature offered no user tested default option which would have given a new user a

starting point. Overall, the application had too many features for a beginner with no clear path to results.

3

Content and Navigation Exploration 5303 PROJECT C: CALIBRE E-BOOK MANAGER

Thinking on Paper Sketches were to developed to document the experience and offer new site map solutions.

The abundance of information and the confu-

sion it created is evident in the end result of the

diagrams.

Sketch: Three flow charts reimagining the management features of Calibre.

Sketch: Initial Phase 1 exploration sketch allowed very little on the home page – three entry points (add books, get books and read books). This was an unrealistic reaction to the information anxiety experienced when reviewing the site.

4

Refinement and Elimination 5303 PROJECT C: CALIBRE E-BOOK MANAGER

Narrowing Scope and Direction A full redesign of Calibre would have taken more time than the semester allowed. Therefore, focus was narrowed to three operations: install, find/add books and edit metadata.

Low-fidelity wireframes were sketched to reflect a new direction with the application. These sketches represent a decrease in initial

content presented and better navigation due to a more sensible informational hierarchy.

Sketch: Three step, installation screens with intuitive usability.

5

Refinement and Elimination

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Sketch: Improved homescreen with fewer points of entry and quick access to recently used materials. The concern in Phase 2 was to present less without losing important options and create a system for any user. There remained much to consider and evaluate when this phase was completed.

6

Site Map

5303 PROJECT C: CALIBRE E-BOOK MANAGER

A) Exploratory Site Map

B) Final Site Map

A visual representation of the relationship between pages was

needed to gain a better understanding of the navigation. There are

two attempts at a site map. The first (A) is based on the homepage sketch from the refinement and elimination phase. It was found

some of the features could be combined. A second site map (B) has

been produced to reflect the changes.

7

Interface Solutions

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Low-Fidelity Installation Screens The presentation and structure of the site starts to

form as the digitally produced low-fidelity wireframes

are developed. The designs for the installation

screens are similar to the sketched wireframes.

8

Interface Solutions

5303 PROJECT C: CALIBRE E-BOOK MANAGER

C) Homepage

Low-Fidelity Home and Search Result Screens The real estate and the navigation on the

homepage interface (C) is not a large departure

from the sketch phase. However, a conventional

auto-complete search bar has been added to

search the Calibre library rather than the ham-

burger menu which provided no intuitive affor-

dance. The search bar also allows for a refinement

of the search categories: title, author, genre, tag

(changed to keyword), news and favorites.

The search bar results screen is represented on

screen (D). It’s an important diagram because edit-

ing and reading/viewing are possible from this screen.

D) Search Results

9

Interface Solutions

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Find e-books from the internet

Low-Fidelity Find/Add and Edit Screens The feature to Find and Add books is revealed by a

hover/roll-over affordance offered on the main menu

navigation. This is demonstrated in later diagrams. The

editing feature now includes the option to remove a title.

Edit Metadata Find e-books from directory

10

Interface Refinement

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Medium-Fidelity Installation Screens Medium-fidelity wireframes begin the refinement phase of the Calibre interface redesign.

Breadcrumbs were added to the installation screens to provide users forgiveness and a sense of space and location.

A new logo has been redesigned to strengthen

the overall aesthetics and brand of the application.

11

Interface Refinement

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Medium-Fidelity Home Interface The home page interface provides the user with

intuitive points of entry in an easy to scan interface. The

recently added titles and books rotate on a carousel left

and right, and provide immediate gratification based on

recent behavior. The successful interface concepts of simplicity, user empowerment and clarity of communication have been considered in this interface presentation.

Medium-Fidelity Search Bar Results The auto-complete search bar results screen had one alteration in the medium-fidelity iteration. A scrolling

arrow was added in the event there are more titles to be viewed.

12

Interface Refinement

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Medium-Fidelity Edit Metadata and Find/Add E-books

Add e-books from the internet

Iterations remained predominantly the same.

The edit interface was improved by adding forgiveness

with a clear button. Removing a book is also possible

from this screen as part of the edit feature. Titles can be

selected as a ‘favorite’ and become of part of that

refinement category.

Edit metadata

13

Add e-books from directory

High-Fidelity Wireframes

5303 PROJECT C: CALIBRE E-BOOK MANAGER

High-Fidelity iterations were provided to the Interaction Design

graduate co-hort and professors for peer review.

Home

Installation

Search Results

14

High-Fidelity Wireframes

5303 PROJECT C: CALIBRE E-BOOK MANAGER

15

Find/Add from web

Edit Metadata

Find/Add from directory

Hover/roll over main navigation affordance

Introduction

Introduction

5303 PROJECT C: CALIBRE E-BOOK MANAGER

5303 PROJECT C: CALIBRE E-BOOK MANAGER

High-Fidelity Final Design Comps Presentation 5303 PROJECT C: CALIBRE E-BOOK MANAGER

User feedback directed the final phase of the Calibre redesign project.

I considered the comments made by my peers and professors and implemented some of the suggestions in the following final high-fidelity screens.

Aesthetically, all screens have been improved with a typography update and further refinement of the logo.

16

High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER

Calibre Final Comp: Installation Screens The installation screens were improved by removing the bread-

crumbs. This navigation feature was added in the medium-fidelity

phase and became irrelevant with the addition of the installation

status bar and the navigation arrows.

17

Final Install Comp: Location

High-Fidelity Final Design Comps

5303 PROJECT C: CALIBRE E-BOOK MANAGER

All installation screens have been refined with small but significant aes-

thetic modifications. Colors have been improve and icons have been

changed. File open, close and minimize buttons have been added.

Final Install Comp: Device

18

High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER

All installation screens have been refined with small but signifi-

cant aesthetic modifications. Colors have been improve and icons have been changed.

19

Final Install Comp: Success

High-Fidelity Final Design Comps

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Calibre Final Comp: Find/Add and Edit Metadata A new search bar UI element improved the home screen. The pull down arrow was moved to the left.

Because of the option to pull down a refinement category, it was more intuitive for those options to appear next to the arrow. For example – Genre (category): UX Design (Keyword)

Final Home Screen: Search Library

20

High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER

All remaining screens have been refined with

small but significant aesthetic modifications.

Final Find: Search Library/Search Bar Results

21

High-Fidelity Final Design Comps

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Find/Add books from the web: the DRM availability

icon was moved to a more visible location.

Final Find: Search Web

22

High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER

Final Find: Search Directory

23

High-Fidelity Final Design Comps

5303 PROJECT C: CALIBRE E-BOOK MANAGER

Pattern affordance added and user empowerment was provided

with an underline on the "Change Cover Artwork" element.

Final Edit: Metadata

24

High-Fidelity Final Design Comps 5303 PROJECT C: CALIBRE E-BOOK MANAGER

This high-fidelity comp addresses the flow of the homepage – the screen demonstrates the roll-over reveal

of the possible actions under the main menu items (ADD, EDIT and SHARE). The pattern affordance of a roll-

over action is used frequently in interface design and users will intuitively understand how to proceed.

Final Home: Hover/Roll-over Reveal Example

25

Conclusion

5303 PROJECT C: CALIBRE E-BOOK MANAGER

The opportunity to reimagine a feature rich, customizable ap-

My solution accomplished the objectives without sacrificing

introduction to the fundamentals of user experience. The key

homepage with intuitive options based on user behavior.

plication like the Calibre e-book manager offered a hands-on

concepts of a successful interface were considered as the role

of a test user was assumed during the exploratory phase.

Our task as designers and test users was to examine the pro-

gram in-depth and document our interactions. Once the ex-

ploration was completed, we were to take what we learned

and improve the overall user experience.

Calibre violates many of the fundamentals of user experience

design. The absence of visual hierarchy and the abundance of

information and options creates anxiety as new users attempt to function inside the application. The aesthetic appearance

application features. My first challenge was to create a simple From that point, my focus turned to simplifying the important features of searching, adding and editing books. Elimination

and refinement were key to a successful Calibre interface re-

design.

Aesthetically, the design was improved with a new logo,

scannable typography and clean UI elements. User feedback was a critical component in the high-fidelity phase and re-

sulted in an improved presentation. Overall, I consider the

new Calibre interface presented to be usable, without fear of failure, resulting in repeat users.

is not a barrier to use but its outdated design results in a

dissatisfying experience.

When developing the new solution following objectives were

addressed:

1. Make Calibre easier to use 2. More intuitive

3. Simplify processes and tasks 4. Improve aesthetics

5. Incorporate a visual hierarchy

26