CALIBRE EBOOK MANAGER INTERFACE REDESIGN
Professor Jason Occhipinti Information and Interface Design LC4D @ Lindsey Wilson College
Atif Nagi
M.A. Interactive Design
TABLE OF CONTENTS PROJECT BRIEF 3 RESEARCH 6 PERSONA 7 COMPETITOR ANALYSIS
8
EXPLORATION 9 EVALUATION 10 SITEMAP 13
SKETCHES 14 INSTALL SCREENS 15 FIND BOOKS BOOK META DATA
16 18
SOLUTION DESIGN 19 DESIGN PRINCIPLES 20 WIREFRAMES 21 INSTALL SCREENS 22 INSTALL SCREENS FIND BOOKS BOOK METADATA
23 24 27
HIGH FIDELITY 28 BRANDING 29 INSTALL SCREENS FIND BOOKS BOOK METADATA
30 31 34
CONCLUSION 35 22
PROJECT BRIEF
3
PROJECT BRIEF
44
Calibre is a free and open source e-book library management application
PROJECT BRIEF
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.
These represent screens captured from Calibre. Calibre is a fantastic open source program with lots of power, but its branding, interface and overall aesthetic needs improvement. I am going to redesign the interface (selected screens) and user experience. My goals are to:
IMPROVE THE OVERALL USER-EXPERIENCE • • • • •
EASIER TO USE MORE INTUITIVE SIMPLIFYING PROCESSES AND TASKS IMPROVE AESTHETICS INCORPORATE A VISUAL HIERARCHY
55
RESEARCH
6
PERSONA PRIMARY TASKS 1. Import eBooks 2. Organize eBooks 3. Edit eBooks metadata
GREG SMITH AGE OCCUPATION STATUS LOCATION
MOTIVATIONS
32
Chef
Incentive Fear Achievement Growth Power Social
Single Calgary, AB
TIER Professional ARCHETYPE Explorer Ambitious
Admired
Focused
GOALS
Keep his customer happy by serving them healthy and innovative recipes.
4. Search online for eBooks
FRUSTRATIONS
5. Export eBooks for multiple devices.
Greg tried multiple applications in the past but could not find the one which actually works. He likes Calibre’s powerful functions but it’s not easy to use, intuitive, simple and visually attractive.
A Project by Atif Nagi
PERSONALITY Extrovert
Introvert
Sensing
Intuition
Thinking
Feeling
Judging
Perceiving
TECHNOLOGY IT and Internet Software Mobile Apps Social Networks
BIO Greg is a professional chef in a restaurant. He enjoys watching cooking shows and participating in the shows. He collects recipes from all over the world. He reads about his industry and enjoys nightlife with friends and family.
“If I had a better way to organize my cooking books, pull it quickly and convert them for all of my devices more efficiently, that would make my workload so much easier to manage.”
Motivation: Happy customer and creating new recipes. He is also planning to write his own book in near future. He buys cooking books from all over the world and he wants to access them through multiple ways. He reads them on his computer, Tablet, and Smart phone.
77
COMPETITOR ANALYSIS
EXPLORATION
I researched multiple competitor eBook readers including Kindle, iBook, Kobo and Google docs. Analysis navigation, labels, features and options. Then I borrowed common knowledge, concepts, features and UI patterns from most industry leading applications. Simplify, customized and tweak them to utilize in Calibre redesign as per persona needs. 8
EXPLORATION
9
EVALUATION
EXPLORATION
Calibre have some cool features but its layout, organization, navigation, look and feel gives a feeling of information overload. As a first time user it is hard to understand the features due to poor organization, language and graphics. If we combine and split few screen and use smart feature then we can almost make features available and invisible simultaneously. Also need user centered design and language approach. Need to convert tech terms to day-to-day simple language. It lacks basic design principles i.e. Simple, Clear, Focus, Proximity, Forgiveness, and Wayfinding. My goal would be to resolve these issues in Calibre redesign.
10
EXPLORATION
Calibre have some cool features but its layout,
From organization, layout perspective I might use aa navigation, look and feel gives combination of horizontal and vertical feeling of information overload. As a first time user menu. I could only fully understand the it is hard toof understand the features due intro to poor functionality software through video.organization, There is alanguage need to andintroduce graphics. stepby-step instruction for first time user. Help should be more accessible for user. If we combine and split few screen and use smart
To explore it further I would use feature then we can almost havelike maketo features a library and/or a physical bookstore available and invisible simultaneously. Also need experience metaphor to connect it to the centric design and language Need user. Iuser would also explore otherapproach. forms of librarytobased iTunes,language. iPhoto, convertsoftware tech terms like to day-to-day iVideo and iBook etc. Adobe bridge is also a good resource to study metadata It lacks basic design principles i.e. Simple, Clear, and output process. Focus, Proximity, forgiveness, and Wayfinding. My goal would be to resolve these issues in Calibre
11
EVALUATION
EXPLORATION
12
SITEMAP
EXPLORATION
I simplified the hierarchy information of the application by focusing on basic tasks i.e. Import, Organize, Edit, Download and Export books. 13
EXPLORATION
SKETCHES
14
INSTALL SCREENS
EXPLORATION | SKETCHES
SCREEN A, B & C
I wanted to make install process simpler from current Calibre screens so I combined A and B screen together. Used search drop down with commonly used default setting for intuitive experience. I kept screen C for feedback and learn more by watching demo or launch Calibre. 15
FIND BOOKS
EXPLORATION | SKETCHES
SCREEN D 1 4 1 2
2 3 4
3
4
I applied basic principle of “simplicity” 20-80 rule to simplify navigation, features and options. I “focused” on primary tasks of my persona i.e. add Books, get Books, contextual menu to edit book metadata, organize through filters and rating. Applied pattern affordance through search box pattern. 16
FIND BOOKS
EXPLORATION | SKETCHES
SCREEN E
1 3
2
1 4 2 3
4 5 5
I cleaned up the “Get a Book” screen by applying consistent visual hierarchy approach from My library Screen D. I used Linked-in style hamburger search with drop down search option for a clean look. Introduce compact store filter and bold CTA to download along with details of the book. 17
BOOK META DATA
EXPLORATION | SKETCHES
SCREEN F 1
2
2
3
3
Applied 20-80 rule to cut down the unnecessary options and focused on persona needs. User can edit basic book metadata, add comments, download and restore metadata. The edit icon will let user edit specific text area.
18
SOLUTION DESIGN
19
DESIGN PRINCIPLES
SOLUTION DESIGN
CLEAR
AFFORDANCE
CONSISTENT
The information of the application is straightforward & understandable with clear navigation, simple language (labels), and icons.
I used Explicit Affordance signalled action buttons by language, Negative Affordance in side menu and contextual menu, Metaphor Affordance by using a real-world book & menu icons as a metaphor.
The consistent use of navigation, labels, language, colors, icons and user interface patterns
FOCUS
PREDICTABILITY
WAYFINDING
The UI is singular and focused. It is intuitive because it focuses on basic tasks of persona e.g. Import, Organize, Edit, Download and Export books.
Users can determine the effect of future actions based on past interaction history i.e. Familiarity of UI pattern from other applications and consistent use of them throughout the application screens.
Users can find their way by landmark icons, well-structured paths, and less choices. They know where they are, what they can do, where they are going and where they’ve been through navigation.
20 20
SOLUTION DESIGN
WIREFRAMES
21
INSTALL SCREENS
SOLUTION DESIGN | WIREFRAMES
SCREEN A, B & C (ITERATION 1)
1
2 5
3
4
LAUNCH PROTOTYPE 22
INSTALL SCREENS
SOLUTION DESIGN | WIREFRAMES
SCREEN A, B & C (ITERATION 2)
1
2 4 3
I converted sketches into digital wireframe by using Axure. I simplified the screen A+B by removing “Library Location” & moved it to the preferences. Now its just easy 3 step install process. I also removed the progress bar from iteration 1. 23
FIND BOOKS
SOLUTION DESIGN | WIREFRAMES
SCREEN D - MY LIBRARY 1
2
4
3 1
Expandable menu.
2
Hamburger search menu (Linked-in Style). Search by Author, Title, and Keyword.
3
Filter; sort by Recent, Title, Author and Format.
4
Contextual menu, shows options to Import Metadata, Edit Metadata, Convert book format, Delete a book or format.
LAUNCH PROTOTYPE I converted sketch into digital wireframe and start adding more details e.g. filters and contextual menu options. I also played with rating and book format, reversed their order from initial sketch. 24
FIND BOOKS
SOLUTION DESIGN | WIREFRAMES
SCREEN E - GET BOOK 8 5
5
Expanded menu.
6
Suggested books; the application suggests books based on collection, previous behavior patterns, and new arrivals.
7
Store selection filter.
8
Filter; sort by Price, New Arrivals, Best Seller, Title, Author, Format, Store, and Country.
9
Auto generate content on scroll down.
6 7
9
LAUNCH PROTOTYPE
I added few more details in book area i.e. title, author name, source, review, rating and format as compare to concept sketch. I also added a sample button, removed pagination and replaced it with auto generate feature. 25
FIND BOOKS
SOLUTION DESIGN | WIREFRAMES
12 10 11
SCREEN E - LIST VIEW 13 10
Expanded menu.
11
Store selection filter.
12
Filter; sort by Price, New Arrivals, Best Seller, Title, Author, Format, Store, and Country.
13
List preview button.
14
Search result list preview.
15
Auto generate content on scroll down.
14
15
LAUNCH PROTOTYPE
I created an extra wireframe of list view to show how book feature will appear in list view. I summarized book details in a row by removing thumbnail but kept most of the features. 26
BOOK METADATA
SOLUTION DESIGN | WIREFRAMES
SCREEN F - METADATA 14
14
Edit text field; once user click edit icon. It will change it to edit able text field.
15
Add comments.
16
Download metadata.
17
Restore metadata to previous versions.
15 16 17
LAUNCH PROTOTYPE
Metadata wireframe is same as concept sketch. 27
SOLUTION DESIGN
HIGH FIDELITY COMPS
28
BRANDING
SOLUTION DESIGN | HIGH FIDELITY COMPS
LOGO DEVELOPMENT
ALIBRE Calibre logo Logo ideation
I started my research by exploring books and library symbols. After multiple iterations I used “C” as a book cover and text “alibre” as book pages to create a new Calibre logo. 29
INSTALL SCREENS
SOLUTION DESIGN | HIGH FIDELITY COMPS
SCREEN A+B & C
I used neutral grey color tones so that user can focus on primary tasks. I also Introduced brand personality through wood texture inspired by traditional wood library bookcase. I used pattern affordance for search box, drop down filters, and view buttons. Also used metaphor icons with explicit text for side menu options and applied consistent branding to “My Library”, “Get a Book”, and “Book Metadata”. 30
FIND BOOKS
SOLUTION DESIGN | HIGH FIDELITY COMPS
SCREEN D - MY LIBRARY
1 2
5
4
6
3
1
Designed new “Calibre� logo.
2
Introduced wood texture in expandable menu for wood library texture metaphor.
3
Introduced icons for intuitive user experience.
4
Hamburger search menu (Linked-in Style). Search by Author, Title, Keyword
5
Filter; sort by Recent, Title, Author and Format.
6
Toggle button to switch view i.e. thumbnail and list view.
7
Book detail; Book name, author, rating and formats.
8
Generic book cover (Incase book metadata does not have cover image)
9
Contextual menu; Download Metadata, Edit Metadata, Convert book format, Delete a book or format. Introduced icons for intuitive user experience.
7 8
9
31
FIND BOOKS
SOLUTION DESIGN | HIGH FIDELITY COMPS
SCREEN F - GET A BOOK 1
2
3 4
5
1
Thumbnail view button.
2
List view button.
3
Search result area. By default it will show recommended books based on user’s previous searches.
4
Book detail; Book name, author, origin, reviews, rating and formats.
5
Sample preview button.
6
Download the book.
6
32
FIND BOOKS
SOLUTION DESIGN | HIGH FIDELITY COMPS
SCREEN E - LIST VIEW 1 3
4
5
2 6
1
Thumbnail view button.
2
List view button.
3
Search result area. By default it will show recommended books based on user’s previous searches.
4
Book detail; Book name, author, origin, reviews, rating and formats.
5
Sample preview button.
6
Download the book.
33
BOOK METADATA
SOLUTION DESIGN | HIGH FIDELITY COMPS
SCREEN F - BOOK METADATA
1 2
6
7
1
Selected book title.
2
Preview of selected book.
3
Edit rating & formats of the selected book.
4
Download latest online metadata.
5
Restore to original and/or last saved version by showing user version option.
6
Edit text fields icon.
7
Add comments text field.
3 4 5
34
CONCLUSION
35
USER CENTRIC DESIGN PROCESS
1. Initial Research
4. Competitor Analysis
2. Ideation
Concept sketches
5. Sitemap
Understating the depth of system
CONCLUSION
3. Persona & Task Analysis
6. Concept Evolution Multiple iterations
36
CONCLUSION
7. Design Evolution Multiple iterations
8. Interactive Prototype Usability testing
9. Visual Evolution Multiple iterations
A full UX interaction design process was explored in the Calibre Ebook Manager project from research, ideation, exploration, define, design, and prototype. Result: Easier to use, more intuitive, simplified processes and tasks, improved aesthetics and incorporated a visual hierarchy. I improved the overall user-experience, effectiveness, efficiency and satisfaction through user flow interactions, intuitive UI, labels, and icons of the application, based on user-centric design principles, standards, and heuristics. 37