UX Design for Digital Books: Creating Engaging Digital Reading Experiences

This is my slide deck from TOCCon (Feb. 12-14, 2013).

As the publishing landscape stands at the precipice of change, authors are in a unique position to create not just “eBooks” or “screen-based books,” but holistic and integrated “digital reading experiences.” Building on Peter Meyers’ exploration of the “infinite canvas” in Breaking the Page and Craig Mod’s vision of “platforming books,” this session demonstrates why book creators (especially publishers and independent authors) need to integrate user-experience design principles into the creation of their digital publications, and how they can do so. Attendees will learn first-hand how to apply UX design strategies to the creation of “digital reading experiences,” and how to avoid some of the pitfalls. Participants will have ample opportunity to ask questions and connect with other book creators in this exploration of the future of the book.

The digital publication is a mode of visual rhetoric in which form and content are inseparable, and the creation of digital reading experiences should adhere to a modular, process-based approach that is rooted in the field of user-experience design. In the digital landscape, authors are no longer merely purveyors of content, but often must act as editors and designers as well. Authors (and their publishers) now have the opportunity to leverage web and mobile platforms, re-envision the book interface, and follow empathy-driven design principles that combine the simple pleasure of reading with multiple layers of interaction.

http://www.toccon.com/toc2013/public/schedule/detail/26747

Transcript

1. UX Design for Digital Books Creating Engaging Digital Reading Experiences Meagan Timney, Ph.D. Senior Product Designer, Blurb, Inc. mbtimney@gmail.com @mbtimney
3. What this presentation is not about:   Technical architecture and coding practices   Visual Design
4. What this presentation about:   Strategy   Bringing user experience processes to digital publishing
5. A spark.
6. If digital books are essentially websites and applications –- if we are designing software –- then it follows that digital publishing stands to benefit from UX design methodologies.
7. What is UX Design?  Understanding people and their relationship with computing  Understanding creators and their relationship with their audience  Designing based on both user and creator needs
8. Findable Useable Meaningful Seamless Beautiful
9. UX Design for the Web
10. UX is a Form of Narrative Freytag, (Technique of the Drama, 1863)
11. A Hero’s Journey Source: http://narrativestructures.wisc.edu/heros-journey
12. “Stories allow for the most complex of ideas to be effectively conveyed to a variety of people. This designed product/experience can then offer meaning and emotion for its users.” Francisco Inchauste, “Better User Experience with Storytelling – Part One.” Smashing Magazine (29. Jan, 2010).
13. Narrative Feature UX Deliverable Characters Setting Plot Tone & Mood Personas Mental Models User Flows & Scenarios Visual Mock-ups
14. Codex   ”Bound”  
15. “Print is a technology as much as desktop computers and tablets are technology. One of the qualities most natural to the user experience of print is the sense of potential completion, defined by the physical edges. It is a quality that is wholly unnatural to digital formats.” Mod, Craig. “How magazines will be changed forever” Special to CNN (October 21, 2012)
16. Digital Book   “Unbound”
17. What is a “Digital Book” Types: Reflowable Ebook, Fixed-Format Ebook, Enhanced Ebook, App Formats: EPUB, MOBI, AZW, KF8, .ibooks, PDF, HTML5 Platforms: Mobile, Desktop
18. Remediated  Mimesis  Skeuomorphism
19. Born Digital  Unbound  Segmented  Augmented  Adaptive
20. Hybrid “Augmented Reading” http://layar.com/  
21. UX is a Holistic, Non-Linear Process Diagram of the iterative design and critique process. Warfel, Todd Zaki. 2009. Prototyping: A Practitioner’s Guide. New York: Rosenfeld Media.
22. UX for Digital Books
23. The Characters   Author   Editor   UX Designer   Graphic Designer   Producer   Developer   Marketer   Distributor
25. RESOLUTION ORIENTATION EXPLORATION
26. Requirements: Project Goals  
27. The writer thinks of…  Audience  Genre  Narrative POV  Success Metrics Content Creator / Author Who am I writing for? What do I want them to get out of this experience?
28.  Business Goals  Audience / Users  Interactions & Features  Success Metrics The designer thinks of… Who am I designing for? What do I want them to get out of this experience? Designer / Producer
29. A solid objective is:  Easy to understand (avoid jargon)  Distinct (avoid vague statements)  Measureable (determine success using metrics) Setting Goals I want my cookbook app to reach 1m downloads by June 1st, with an average of 4 star reviews
30. Project Strategy  
31. Strategy / Approach  What are your goals for the project?  Why is your project important?  How will you determine whether it has been successful?  What approach or methodology will the project follow?  What are the major dates or milestones for your project?
32. Waterfall
33. Agile (Modular) Design   Release a single chapter, or section of a book, perform usability testing and user research, and then iterate as you learn more about what readers want and how they interact with your materials.
34. Perform User Research  Run User Tests  View Analytics  Fix usability issues  Improve and learn  Iterate
35. Information Architecture
36. Card Sorting Give users items printed on cards, and ask them to put them into groups that make sense to them. Open sort: Participants create their own categories / groups Closed Sort: Users group items into preselected categories
37. User Research: Content http://www.optimalworkshop.com
41. Interviews, Mental Models, Personas
42. Generative Interviews Starting Points:  “Tell me about…”  “Explain your process…” Who should you interview?   Roles   Demographics   Experience
43.  Delineation of user tasks, thoughts and beliefs   Use mental models to diagram user assumptions and processes Mental Models
44. Steps a user takes to complete a task Subtask User Task Features supporting the task Mental Models
48. User Research: Narrative Does the organization of content match your users’ mental models?
51.  Who is your target user?  How will they use your product and in what context?  What basic assumptions do they bring with them?  What are their goals? Personas
52. How would <this user> perform <this task>? What is <this user> going to look for in <this situation>?
53. Wireframes, Prototypes
54. A blueprint of the structure and interaction of your book. A “Visual Content Inventory” Wireframes & Prototypes
55. Wireframing Methods •  “Napkin” method •  Whiteboard •  Clickable Wireframes: – Balsamiq – Omnigraffle – Keynote •  Interactive Prototypes – Axure – Justinmind Protyper
56. Wireframes & Prototypes
57. User Research: Components
59. Do the design choices you make work for the message you want to convey, and the experience you want to provide?
60. Visual Design
61. Design is Visual Rhetoric Visual Rhetoric: A form of communication that uses images to create meaning or construct an argument.
63. http://www.realmacsoftware.com/clear/ Clear App
64. Aesthetics matter: attractive things work better. - Don Norman
69. UX is Narrative UX Design is Holistic Design is Visual Rhetoric
70. Findable Useable Meaningful Seamless Beautiful
71. Thank you! Comments, Questions? mbtimney@gmail.com @mbtimney