Rebook | Design
Masters Capstone Project, Spring 2015
Teammates: Ian MacFarland, Paul Son
- How do you help readers form a mental model of an ebook?
Can we move away from the metaphors of physical books and create a digital-first reading experience?
- UX design for the reading experience
- UI design for reading experience
- No pages. Pages are arbitrary in a digital context, and change whenever you adjust anything like font size or margin width. Find other ways of subtly cueing readers to progress while reading and retrieving passages.
- Retain an immersive reading experience. Any progress indicators or features we add shouldn't detract from an immersive, long-term reading experience.
- Scroll to read. The reading experience on devices for everything but ebooks is scrolling, and ebooks should match.
1. Web first: the book is an API
2. Design for reader exploration and choice
3. Always put readers and writers first
Design Iterations for My Library
I worked with the metaphor of book spines, with the width of the books representing their length. The transparency for each title represents how much the reader has read. I realized that I'd need to add a textured background to distinguish between books that were solid because they had been read and books that were solid because they were unread (transparent).
In one of the next iterations, I flipped the "books" so that the author and title information was easier to read. I also added sorting. I made cosmetic adjustments to make the screen look more balanced, and ultimately ended up with the screen on the far right. The height visualizes the word count of the book, and the transparency visualizes progress within the book.
Design Iterations for the End of a Chapter
Reading experience: there are no pages. Instead, the user scrolls through each chapter and uses buttons at the bottom to progress to the next chapter.
The height of each bar at the bottom of the screen represents the word count for each chapter in the book. Filled in bars have been read, and unfilled bars are unread.
The far right screen shows the final iteration. It also demonstrates what would happen if a user tapped on one of the chapters to skip ahead. It brings up the chapter name, and would navigate to that chapter if the user tapped on the bubble.
Design Iterations for "Checking on Progress Mid-Chapter"
As above, the height of the bars is word length, and transparency represents unread text. These screens demonstrate how partially-read chapters would look.
The circle that appears in all of the screens would appear every 1000 words in the book and represents in-chapter progress. How many segments the circle fills in by depends on the length of the chapter.
If the user scrolls up, it brings up the menu bar. In later iterations, I moved all of the menu icons to the top of the screen and tried to make them more visually consistent