Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future Reading — New Reading Spaces and Emerging Patterns for Information Architects

Donovan Vandi
September 27, 2013

Future Reading — New Reading Spaces and Emerging Patterns for Information Architects

Grandin Donovan and Claudio Vandi talk at EuroIA 2013 in Edinburgh.

Although the end of the book has been long since been announced, the new reading spaces that may supplant or replace are in flowering development. Interaction designers and information architects will have a key role in creating these new spaces, in maximizing the new opportunities for experiencing text and media, and in defining new grammars of touch interaction with medium and long-form content.

Donovan Vandi

September 27, 2013
Tweet

Other Decks in Design

Transcript

  1. New Reading Spaces and Emerging Patterns for
    Information Architects
    @vandicla @grandin
    Claudio
    Vandi
    Grandin
    Donovan
    Flipbulbs
    Future Reading

    View Slide

  2. What we will talk about
    Today we’re going to talk to you about WHAT IS CHANGING
    in the SPACES where we read, particularly in TOUCH BASED
    applications for reading and enriched e-books.
    Along the way we'll have some RECOMMENDATIONS on what
    we think is useful, and what we consider could use
    IMPROVEMENT.

    View Slide

  3. I. What is reading
    The first question is, “what is reading?” It’s a diverse act...

    View Slide

  4. Reading as activity
    ...not limited to books...

    View Slide

  5. Reading as activity
    ...and magazines...

    View Slide

  6. Reading as activity
    ...or the web...

    View Slide

  7. Reading as activity
    ...but to dealing with day to day headaches...

    View Slide

  8. Reading as activity
    ...and just getting around.

    View Slide

  9. Reading as activity
    Users read about 20% of the text on the average page.
    http://www.nngroup.com/articles/how-little-do-users-read/
    We know that when it comes to web people read only 20 - 28% of the content...

    View Slide

  10. So this is why we will concentrate on apps and devices that are
    dedicated to reading, because there is a difference of intention
    between reading on the web and reading for oneself.

    View Slide

  11. Reading as sense and technique
    What we have to remember about reading is that most of us
    consider it “natural”, as a banal way of getting information as
    seeing and hearing.
    But reading, which we do every day for any number of reasons,
    isn’t quite NATURAL. It’s ACQUIRED. It’s a TECHNIQUE that rests
    upon the technology of the written word - “seeing speech”, to a
    degree. Sounds magic, right? Reading is, in a very special way,
    learning how to use a tool.
    What’s the physiology of using this tool?

    View Slide

  12. Reading physiology
    Fixations: ~ 250 ms (silent) | 275 ms (reading aloud)
    Saccades: ~ 8 characters (silent) | 6 characters (aloud) ~ 20 ms
    CLAUDIO: To master this technique we develop automated behavior
    Eye movements: fixations and saccades
    Saccades are the fastest movement the human body can do.
    Strongly automated.
    Silent reading is quicker than reading aloud: that’s why it’s dumb to
    read slides.

    View Slide

  13. What you actually “read”
    IMAGE Reading Blur (dropbox)
    What you actually read are no more than 7-9 characters, what
    falls in the center of the eye, the fovea. So that if I make the text
    around these characters disappear you wouldn’t notice (this was
    actually an experiment).

    View Slide

  14. Kinesthetics & kinetics
    Feel of space and time
    Spatial coding (Kennedy, 82; Baccino, 94)
    Page 1 Page 2 Page 3
    When we read we don’t simply collect words’ meaning but we have a spatio-
    temporal representation of what we read.
    Have you ever found yourself looking for something happened some 50 pages
    before, on the lower left corner of the right-hand page?
    That’s called spatial coding - the eyes know where they meet information so
    that we don’t need to memorize everything, but can find it when we need it.
    It’s both a spatial (top / bottom in the page, depth in book) and temporal (read
    10 minutes ago) way of keeping track of thing.
    That’s why “scrolling” feels uncomfortable for non expert users: words move
    around the page. Reading needs STABILITY. That’s why the CODEX evolved to
    become a standard object with fixed line heights, pages for supporting NON
    EXPERT SILENT READING.
    >>> Reading also implies some strategies: skimming for a quick sense of the
    page, scanning for particular content, extensive reading for pleasure, intensive
    reading for memorisation.

    View Slide

  15. Kinesthetics & kinetics
    Feel of space and time
    Spatial coding (Kennedy, 82; Baccino, 94)
    Page 1 Page 2 Page 3
    When we read we don’t simply collect words’ meaning but we have a spatio-
    temporal representation of what we read.
    Have you ever found yourself looking for something happened some 50 pages
    before, on the lower left corner of the right-hand page?
    That’s called spatial coding - the eyes know where they meet information so
    that we don’t need to memorize everything, but can find it when we need it.
    It’s both a spatial (top / bottom in the page, depth in book) and temporal (read
    10 minutes ago) way of keeping track of thing.
    That’s why “scrolling” feels uncomfortable for non expert users: words move
    around the page. Reading needs STABILITY. That’s why the CODEX evolved to
    become a standard object with fixed line heights, pages for supporting NON
    EXPERT SILENT READING.
    >>> Reading also implies some strategies: skimming for a quick sense of the
    page, scanning for particular content, extensive reading for pleasure, intensive
    reading for memorisation.

    View Slide

  16. Digital Readability

    View Slide

  17. Digital Readability
    Pocket Bookmarklet
    Web and mobile reading spaces are increasingly optimized for the
    readability. We have content shifting services that move text...

    View Slide

  18. Digital Readability
    Pocket Desktop App
    ...where you want it.

    View Slide

  19. Digital Readability
    Safari Reader
    We have reading modes in our browsers.

    View Slide

  20. Digital Readability
    The Great Discontent
    And layouts increasingly inspired by Print

    View Slide

  21. What we gain
    And of course, lots of new potential with new technologies and
    standards.

    View Slide

  22. ...but back to books...
    So we could say there are trends to “bookify” the web. And as readers,
    that’s great. But getting back to books. In the real world, books as a
    container format aren’t “endangered” - at least we don’t think so. But
    there are things that we lose when we shift to digital reading spaces,
    and we shouldn’t forget them.

    View Slide

  23. What we lose
    Reliability
    velvetyne.fr
    We could go on about the SMELL of paper and old glue, the crackle of
    turning pages, the feel of old pulp. We won’t, but we don’t deny that the
    physicality of the books is important, and is certainly something that
    we’re losing.
    There are other things we lose that we haven’t yet resolved, for
    example:

    View Slide

  24. What we lose
    The cover question
    The Cover Question: Real objects, real edges, real closure: You don't
    pick up "a" book. You pick up "the" book that you are reading. Even if its
    only for a certain amount of time... until you are done, of course, and
    you see that back cover as you put it down on the table beside you, sure
    that it is "done".

    View Slide

  25. What we lose
    Thickness and Depth
    The z-dimension: Just as we can spatially code within a page, we retain
    a sense of “closer to the front” or “closer to the back” when
    remembering a favorite passage or quote.
    Thickness and depth are transparent evidence of a book’s length. Clear,
    absolute. Likewise, we handle more substantial books differently than
    we do trade paperbacks. There is a reverence for scale. Think of a big
    bible, or a big Taschen edition.

    View Slide

  26. What we lose
    The bookshelf effect
    The Bookshelf effect: Spines and shelfspace make books social signals.
    Not just to others, but to ourselves - for many readers, the home library
    represents an extension of themselves, their tastes, their knowledge,
    and their personal histories. Pulling out a book (that book!) you loved as
    a child, or a student, can be as evocative as Proust’s Madeleine.
    As a sidenote, all your books go on any shelf...this isn’t the case with
    the competing platforms today.

    View Slide

  27. The problem
    • Find new models for spatial organization that are coherent
    with both content and user expectation
    • Reintroduce, replace or re-invent what we lost
    • Find meaningful ways of integrating media
    • Be humble
    Our jobs will be to find new models for spatial organization that
    communicate structure, that are coherent with the content they
    represent, and which match a users expectation regarding content.
    We need to find solutions that replace some of what we have lost in
    moving to flat digital books from thick paper ones, without relying only
    on that old model for inspiration.
    So even if the web is getting easier to read, and e-ink books are
    increasingly stable, the new generation of ebooks is something of the
    wild west. Remember, the codex took a long time to stabilize, and
    we’re just at the beginning.

    View Slide

  28. II. The Page is Dead, Long
    Live the...?
    As physical boundaries between pages and chapters disappear, new ways of
    segmenting and organizing content appear.
    WHAT is a page, HOW do you move from PAGE to page, across chapters or
    through the text ?
    HOW DO YOU VISUALIZE POSITION when book thickness is no longer an
    indicator?
    The book had solved most of these questions as it evolved over centuries to fit
    our way of reading.
    The digital book is a flat object but with more potential dimensions that can be
    used to organize the book and guide the user in moving around and
    understanding the object’s spatial model.

    View Slide

  29. How do I move ?

    View Slide

  30. center fold card, as on
    flipboard
    Pages, the standard card
    stack, pages are turned or
    pushed to the left.
    This is what we have on
    Kindle, Readmill, iBooks,
    etc
    scscrollable card, with or
    without snap-to-page.
    Common on Adobe DPS
    flippable card, as on Citia
    How do I move ?
    What’s the unit
    You may remember the debate around “Card sharks” and “Holy Scrollers”. The
    jist was: for fixed layouts or longer unified texts, prefer cards; for shorter text
    and aggregate spaces, scroll.
    After years of scrolling on the web, Cards have come back with the rise
    of mobile reading.
    To a degree they improve stability and adopt paper book conventions,
    but they are less adaptable.
    Scroll is good when you need two dimensions (object within whole), but
    at the end of the day the whole question is a bit of a red herring, and
    you end up with scrolling cards...

    View Slide

  31. Seamless scroll
    Snap to cards
    How do I move ?
    Smooth vs snappy
    Page 1
    Page 1 Page 2 Page 2 Page 3
    Page 1 Page 1
    One dimension to take into account when choosing your spatial model is the
    degree of control you want to have on the layout
    and the display within a frame. You can have smooth scrolling to facilitate
    scanning and discovery, or snappy breakpoints between fixed layouts to assist
    extensive reading.

    View Slide

  32. How do I move ?
    Snappy
    Time

    View Slide

  33. How do I move ?
    Smooth
    Le Monde
    journal tactile

    View Slide

  34. How do I move
    Across aggregates
    One dimension with or without item breaks
    Section A Section B
    Movement within unified texts remains straightforward and hasn’t evolved
    much since the Codex,
    but for AGGREGATE reading spaces (like periodicals, reference books, etc.)
    enriched ebooks offer new opportunities to spatialize the text over more
    dimensions that can correspond to section or article breaks, and thus guide the
    user terms of position and organization within the whole.
    One solution is to stick with the a uni-dimensional model, like the book (albeit
    vertical or horizontal) which mark breaks in sections.

    View Slide

  35. How do I move ?
    Continuous scroll
    Le Monde chose a visual solution representing article breaks as folds and
    sections by color.
    Everything is part of the same continuous scroll. No snap to pages, no breaks
    within sections.
    Pure decor, no haptics.

    View Slide

  36. Scroll
    Control
    How do I move ?
    Snappy scroll
    Inkling
    In Inkling you scroll through subchapters that are segmented in scrollbar. When
    you reach the end of each subsection you snap to the next one, when you reach
    the end of a section you have to push even harder (or click) to move to the next.
    This is something new.
    What we lose with the thickness of the book we get it back in visual
    reproduction and haptics.

    View Slide

  37. How do I move
    Across aggregates
    Two dimensions: sections and articles breaks
    Section A
    Section B
    Another solution is to use two dimensions, using one axis for reading articles
    and another for moving through articles or sections.

    View Slide

  38. Sections
    Articles
    How do I move
    Two dimensions
    New York
    Times
    A useful practice to convey the spatial model through navigation
    gestures is THE OLD NEWYORKTIMES.
    Vertical: Sections
    Horizontal: Articles
    Click - Overlay: images
    It provides a simple way of building the mental model through
    gestures. Within sections a long swipe on the last page of an article
    moves to the next, so the horizontality of the “section” subnav is
    maintained at two levels.

    View Slide

  39. Text
    Articles
    Wired
    (Also : New Yorker, Flipboard
    How do I move
    Two dimensions
    Here in Wired, with the Adobe DPS Model that you will find in other Condé Nast publications like The
    New Yorker.

    View Slide

  40. Design gestural navigation to reflect the spatial model of the
    text, and to reveal how its components are organized.
    Exploit touch-native affordances to go beyond what you can
    do with a codex, but only when you need to.
    How do I move
    Summary

    View Slide

  41. Where am I?
    To understand WHERE I AM (and “where can I go”, as we will see later),
    the reader needs to have a clear model of her POSITION WITHIN THE
    OBJECT.

    View Slide

  42. Cardo body text
    Where am i ?
    The flat book problem
    Paper books have both explicit ways of signaling position, like page numbering
    and running heads, and implicit ones like thickness, which lets the user “feel”
    their place within the whole.
    In a paper book we know not just "how long a book is", but where we are in it,
    by looking at it - the Z-axis of thickness we mentioned earlier. There is no
    relativising or thought necessary. We are either close to the beginning, or close
    to the end.

    View Slide

  43. Page Location
    Where am i ?
    Absolute Position
    10 / 240 740 / 3450
    Page is what were habitutated to. It’s generally within a certain range
    100-1000, but it becomes unreliable in reflowable texts.
    Location might be reliable, but its inscrutable - no one know’s what it refers to.
    How big is a location?
    So we see that, except for completely fixed layout formats, the page is no
    longer the ideal, and location, well - have you ever really tried to remember
    that?

    View Slide

  44. Absolute Position
    iBooks

    View Slide

  45. XI
    Space
    Where am i ?
    Relative Position
    Another option is using relative position in the scrollbar to give an idea of
    where you are in the text.

    View Slide

  46. Inkling
    Also: Color App ...
    Position
    In the structure
    We still haven’t found a really good solution for creating that “I am here”
    feeling, but sticky scrollbars help. In Inkling, we benefit from a variably-
    segmented scrollbar to show where we are in each section.

    View Slide

  47. 30 %
    Where am i ?
    Relative Progress
    Part of whole
    Another way to show position is to represent relative progress. This shows “how
    much I have read and how much I have left to read.” Percentage is one way of
    doing this, but even when the progress bar is sized to the book, percentage
    remains opaque and unreliable.

    View Slide

  48. t
    Progress
    How far I am ?
    I am at 10% of
    Crime and Punishment
    At around 40% it starts
    getting better, you’ll see ...
    Here is a typical example of why book lovers hates e-readers. The Kindle’s 10%
    is a cold, technical way of showing where one is. It reminds us of more of a
    hung download than of reading.
    On a broader scale, we could say that dots reveal that Kindle was made with
    fiction books in mind. It’s friendlier than percentages insofar as we understand
    how much is left to read within a longer or shorter whole - an absolute
    representation - against the relative position of percentage, but it still leaves
    much to be desired in terms of clarity.

    View Slide

  49. Story
    Where am i ?
    Relative Position
    .
    .
    .
    .
    .
    Event
    Event
    Event
    Event
    Event
    Another, rarer option is using one’s position relative to the narrative.
    While this is certainly the most opaque regarding progress within the
    reading space, it can be instructive in fiction and non-fiction. It doesn’t
    always need to be visible, however...

    View Slide

  50. Atavist
    Position
    In the history
    Here in Atavist the sectional interactions don’t have a persistent access
    point in the chrome, but appear as contextual links as the action
    develops.

    View Slide

  51. Where am i ?
    Relative Progress
    Time
    15
    minutes
    left
    Word count and reading time are other ways to tell the reader how
    long he will have to read. They have been adopted as ways of dealing
    with mobile reading (snorkeling, quick bits of text) and with commuter-
    oriented time-based readers like ReadTime, which select content based
    on how much time you tell it you have.

    View Slide

  52. timereader.fr
    Progress
    Quantified reading
    Reading time is another unreliable, or at least non-transparent, way of
    indicating size and position: we don't know where they're cooking up
    this number. Is it for us or the other guys? With speed readers, it’s a
    little more mathematical (words-per-minute by time), but when apps or
    sites talk simply about reading time, it places the onus on the reader to
    decrypt or trust the duration they are presented with.

    View Slide

  53. A reliable solution for an intuitive feeling of place needs to be
    found.
    Different content and different use contexts require different
    levels of precision: the novel in bed vs the reference book at
    the library vs news in the subway.
    Exact location and how much is left are just options.
    Pages and page numbers are no longer hard constraint,s and
    could be used creatively.
    Where am i ?
    Summary
    It is not about needing an exact location at a given time, or how much is left,
    but about providing these indicators in a way that either doesn’t require the
    reader to work for it, or that is so appropriate to the content that they don’t
    really care. Knowing where you are in the linear axis of a reference book is
    essentially irrelevant - what you want is the content you have come for. Perhaps
    abandoning position indicators in an detective novel could be a way of
    elevating suspense?

    View Slide

  54. III. Beyond the Codex
    Spatial and organizational models
    “Where can I go?”
    The next question a reader asks is “Where can I go?”
    Since we deal with digital content the answer could be “ANYWHERE”. The Web is
    your oyster!
    However, we know that when reading, especially in spaces that are not oriented
    on story and that can be consulted non-linearly, guidance and wayfinding can
    be useful.
    Learning and memorizing are improved when you’re able to chunk and organize
    information. That’s what sections and chapters are about.
    Digital texts offer new ways of moving through the text either linearly or across
    multiple dimensions or axes.

    View Slide

  55. Where can I go
    Table of Contents
    II
    I
    III
    IV
    Classic model
    There is a difference between unified text and text collections or aggregates: in
    unified texts, knowing where to go isn’t problematic - you move forward, so
    “where can I go” is equal to “how do I move”; for aggregate and or non-linear
    text, this demands more complex models of the reading space.
    A TOC of a novel has chapters, but the progress is linear. The TOC of a linear
    text is a standalone object: a page that gives you access to the othesr.
    “Tables of Content” are a vestigial holdover from the codex. As with indices, we
    don’t have to use them. The text can be completely non-linear.
    A magazine editor could easily propose a graph based structure instead of the
    classic bound linear model.

    View Slide

  56. Unified texts
    Table of Contents
    Readmill
    (iBooks, ...)

    View Slide

  57. Where can I go
    Structural depth
    I 2 3 4 5
    Pages Chapters
    Simple structures
    One and Two level sub-nav
    Materializes the DEPTH in the digital book

    View Slide

  58. I 2 3 4 5
    A B C D E
    Pages Chapters
    Sections
    I
    II
    III
    IV
    V
    Complex structures
    Where can I go
    Structural depth

    View Slide

  59. Colour
    (Inkling, ...)
    Ribbons
    1 level

    View Slide

  60. 2 Dimensions
    You Mag
    Inkling
    Ribbons
    2 levels
    Or here in Linking on 3 levels: Sections - chapters - pages

    View Slide

  61. Ribbons
    2 levels
    Magic of
    Reality

    View Slide

  62. Where can I go
    Content specific
    Top level Middle level Bottom level
    Zooming User Interface
    Althoug ZUIs have a host of usability considerations, we think they could be
    useful when dealing with very specific types of hiearachically organized
    content, like fonts, or species, or even the bible. When done well they can
    convey a real sense of depth that really let you feel the parent-child relations of
    the content.

    View Slide

  63. Where can I go?
    ZUI
    Font Book

    View Slide

  64. Where can I go ?
    ZUI
    Glo Bible
    The Zooming User Interface model is the third one:
    You literally dive into content
    Works with IN/OUT or continuous zoom in one direction. Stops being good if
    levels contains heterogeneus content with multiple dimensions (Biblion, Glo
    bible)

    View Slide

  65. Geolocalized texts
    Where can I go
    Content specific
    Geolocalized texts offer a structure predicated on the reader situated in space,
    as opposed to his position within the body of the text.

    View Slide

  66. Where can I go?
    Geolocal
    pasoliniroma.com
    (Silenthistory,
    viaggioincalabria.it, ...
    We get a literal interpretation of “where” in content with an emphasized
    geographical dimension; we can navigate the book by navigating the map it’s
    based on (Pasolini Roma, Silent History).

    View Slide

  67. Where can I go?
    Summary
    Tables of content are good for linear text. There are
    other ways of navigating aggregate texts that are worth
    exploring.
    Use gestural navigation to visualize and communicate
    the document’s structure: pages, sections, chapters,
    volumes.
    Use content specific navigation to leverage the
    experience when appropriate.
    ● Provide tools that match the organization of the object: sections /
    chapters / volumes.
    ● Think of navigation as a way to show the spatial-logical model of
    the book. Direction should be linked to cognitive operations : read
    more, change section ...
    ● Consider the reader’s reading history as a specific way of navigating
    a content
    ● Use ad hoc navigation system if that can improve the content
    experience (isomorphism between content type and mode of
    access)

    View Slide

  68. IV. Through the Text
    We’re all familiar with text search, and it’s sure that one of the greatest
    advantages of digital reading spaces is their ability to become transparent. With
    search we are able to access, and even understand them, in ways that are
    onerous or impossible in paper books.

    View Slide

  69. 124
    301
    340
    301
    Text triggered search
    User input search
    Results Go to page
    Through
    Search
    Search can be of two kinds
    > User triggered: string input
    > Text triggered: tapping a word for finding references

    View Slide

  70. Through
    Characters
    Marvin Deep View
    Marvin Deep View allows you to find all the pages a character appears on, and
    proposes auto-extraction so you can build a collection of all the pages a
    particular character appears on.

    View Slide

  71. Through
    Concepts
    Kindle X-Ray
    Amazon’s X-ray reveals a text’s internal structure by showing instances of
    people, characters, key concepts, ideas or other topics distributed on the
    “timeline” of the book (though in this example we just have characters).

    View Slide

  72. Cardo body text
    Would put this closer to HOW DO I MOVE
    Through
    Big Corpus
    On an even higher level there is distant reading, which is remains a largely
    academic field but which permits machine-leveraged insights into a text, text
    corpus, or wider swathes of press and literature. Google’s N-Gram, for example,
    relies on the massive Google book scanning project to reveal changes in usage
    and vocabulary over time

    View Slide

  73. Cardo body text
    Would put this closer to HOW DO I MOVE
    Through
    Social
    social highlighting can provide another way of moving through text. It can
    either serve as signposting - social proof of what people find important - or as
    a way of rapidly accessing “the good stuff” without having to wade through the
    rest. On the one hand social implies chance, as in some instances its open and
    anonymous, but there are experiments with more active, closely linked reading
    communities, who can be more goal-oriented and selective. There’s a lot to
    watch in this space right now.

    View Slide

  74. V. Text and Media
    Ratios and Genres

    View Slide

  75. Text and Media, Ratios and Genre
    One of the most common complaints about enriched ebooks and the evolving
    forms of multimedia storytelling we find on the web is “just add video to it”.
    There is, of course, no need to add rich media to a text...except for when there
    is. Or when the story, or the article, or the instructions or whatever would be
    well served by it.
    So the question becomes: when is media useful? It’s a matter of content and
    context, but we’ll get to that shortly.
    First, we'd like to observe that the ratio between text and media lies across a
    spectrum, from all text to all media, with gradations between. So there’s the
    form, but what about the function?
    The function of a reading space is, in a way, it’s genre - the general nature of
    the content. So what content is best served, is frequently found in, and dare I
    say should be expressed using, each of these ratios?

    View Slide

  76. Full Text
    1
    To start with, you have full text, text which, ideally, speaks for itself. That's
    pretty straightforward.
    Full text can be everything anything, but we usually associate it with...
    traditional literary forms from poetry to short stories to genre fiction...academic
    texts such as history, philosophy and political science, and many breeds of
    long-form or narrative nonfiction.

    View Slide

  77. Literary
    genres
    Kindle
    For full-text we’re typically looking at traditional literary forms from poetry to
    short stories to genre fiction

    View Slide

  78. “Academic”
    texts
    Kindle
    ...academic texts such as history, philosophy and political science, and many
    breeds of long-form or narrative nonfiction.

    View Slide

  79. Full Text
    1.Traditional literary genres
    2.“Academic” writing
    So pretty straightforward - no mystery there. This is the kind of content that is
    easiest to consume on a typical e-reader. Aside from poetry, it’s generally
    reflowable and doesn’t stand to gain enormously from rich-media interactions.

    View Slide

  80. Text-centric, media-supported
    1
    1
    Text-centric, media supported: Here we find many types of content...

    View Slide

  81. Pedagogy
    iBooks
    Here we’re looking at textbooks and other texts oriented on transferring
    knowledge...

    View Slide

  82. Non-fiction
    Skulls
    Non-fiction books...

    View Slide

  83. Periodicals
    Astronaut
    ...too everyday journalism and reportage.

    View Slide

  84. Reference
    Encyclopedia
    Britannica
    And of course, what would an encyclopedia or reference book be without a little
    bit of backup media?

    View Slide

  85. Text-centric, media-supported
    1.Pedagogy
    2.Non-fiction
    3.Periodical
    4.Reference books
    Generally speaking, they are oriented around learning, reporting, and better
    understanding something that still is best using text as the principal form of
    information, but where showing can really help with the telling.

    View Slide

  86. Media-centric, text-supported
    1
    Next we have reading spaces where media is primary and text is complementary
    text. The more media becomes central, the more the heterogenous the
    applications become. In media-centric reading spaces, you find a broad range
    from:

    View Slide

  87. Children’s
    Books
    Dr. Seuss
    ...children’s books...

    View Slide

  88. Photography
    Once
    ...photobooks and photoreportages...

    View Slide

  89. Instructional
    Marabout
    ...instructional genres like cookbooks and technical manuals, where we can see
    how something is done. This is where we often see lots of activity-oriented
    interactive features, like timers, or code samples, and various exercises
    depending upon the subject.

    View Slide

  90. Digital
    Collections
    Hopper, RMN
    ...and collections of digital objects, to facilitate access to digitized cultural
    holdings, whether art or artifact.

    View Slide

  91. Facsimiles
    Miniatures Flamandes
    facsimiles of manuscripts or rare books that can’t otherwise be handled (and
    may require degrees in paleography and medieval latin to understand). This
    book from the French National Library has spoken commentary for each page.

    View Slide

  92. Comics
    But this media-text ratio also implies comics (where as with marvel we really go
    after the filmic effect)...

    View Slide

  93. Interactive
    narrative
    and the rarer forms of interactive narrative like Mr. Morris, where the book is
    essentially transformed into a film.

    View Slide

  94. Media-centric, text-supported
    1.Chidren’s Books
    2.Photobooks
    3.Instructional/Activity Oriented
    4.Digital Object Collections
    5.Rare book facsimilies
    6.Comics
    7.Interactive narrative
    So media-centric reading spaces privilege showing, but back it up with telling.

    View Slide

  95. Getting in and out
    Now that we’ve seen what sort of genres tend to heavily employ media for
    appropriate reasons, lets look at how you get in and out of that media. Here
    we’ll principally be looking at summoning and dismissing visual media, which
    naturally takes up screen space, but there’s audio as well.
    The main assumption is that media is disruptive to reading as typically
    understood.

    View Slide

  96. Placement
    Contextual Links
    click to
    show
    media targets
    displayed
    media
    deployed
    First let’s look at where that media is placed, because placement has everything
    to do with getting in and out. Contextual links with modal detail is good for
    when you want to favor the text without losing underlying rich content.

    View Slide

  97. Atavist
    Atavist has a two step way of doing this, which is a bit fiddly, but demonstrates
    a strong design conviction about how its users will want to stay closer to the
    text.

    View Slide

  98. Activate
    thumbnail
    Detail
    view
    Media small
    Placement
    Inline Embeds
    There are inline embeds, where the media is on the page as a persistent
    corollary to the text content. This is what we see often in text-centric, media
    enriched content mixes.

    View Slide

  99. Placement
    Inline embeds

    View Slide

  100. Placement
    Inline embeds

    View Slide

  101. Text hidden below media
    Placement
    Inline Fullscreen
    The easiest way to get into it is to have it at the top. This model eschews modal
    access and puts the media front and center, with text in support. This is great
    for photo books.

    View Slide

  102. Placement
    Inline Fullscreen

    View Slide

  103. Placement
    Inline Fullscreen

    View Slide

  104. Media integrated
    in content column
    Placement
    Inline auto-play
    Media launches
    when centered
    A more recent approach has been to bring content to the front automatically,
    according to scroll position. This is used rather successfully in the BBC’s
    application “The Wonders of the Universe”. It is likewise used on the New York
    Times Jockey feature. Here, on the open web, the approach has more risks,
    especially when audio and video are concerned. Without “caveat lector”, this
    approach can be frustrating or annoying - image audio blaring out
    unexpectedly while you’re reading on your iPad in bed next to your spouse.

    View Slide

  105. Placement
    Inline autoplay

    View Slide

  106. Placement
    Inline autoplay

    View Slide

  107. Getting in
    Tap Double Tap Push into frame /
    Scroll to auto-play
    Spread
    There is a lot of variety on how content is invoked and dismissed. That’s good
    insofar as there’s always an alternative to clicking target, but it can be bad
    because to interaction grammar is too varied
    You need to choose if you use something as simple as, a tap or you make them
    work harder - with a two-finger gesture, for example - for a reason. How you
    decide to handle media invocation will have a broader implication within your
    overall gestural navigation, and can make certain interactions more or less
    complex.

    View Slide

  108. X
    Getting out
    Tap on cross Tap outside Swipe out
    Pinch Push out
    Let’s say you use horizontal swipes to manage multilevel navigation. When it
    comes to getting rid of a detail view what happens when you swipe on an object
    that can be also be swiped on itself - like a slideshow or a rotatable 3d model?
    What then?
    Keep in mind that choices you make on the larger structure can have impacts or
    limits further down the lines, or you’ll have gestures doing double-duty that
    end up conflicting with each other.

    View Slide

  109. Getting out
    Swipe out

    View Slide

  110. Getting out
    Swipe out

    View Slide

  111. A silent, text only pursuit, or...
    Something that should imply multiple formats of visual
    information, in addition to text ?
    What if tomorrow all “books” were multimedia and
    multimodal experiences?
    What if reading on the bus implied wearing headphones?
    So what is reading becoming?

    View Slide

  112. VI. Conclusions
    In trying to bring back what we lose we find solutions that reinterpret the classic
    ways of interacting with text, others that introduce new dimensions to reading.

    View Slide

  113. You lose the depth and thickness of the Codex but you gain three potential dimensions.
    Haptic feeling is lost but you can use new affordances like stickiness, friction, ....
    When you think "where" the reader can go, try to think beyond the Table of contents and
    footnotes.
    Moving around a Book is not just flipping pages, is moving around a story made of
    events, places, characters. Content-tailored navigation modes can bring back the book
    its individuality.

    View Slide

  114. While you lose the depth and thickness of the codex, you gain
    three potential dimensions. When Use them and use gestural
    navigation to materialize the spatial model of the text.
    You lose the depth and thickness of the Codex but you gain three potential dimensions.
    Haptic feeling is lost but you can use new affordances like stickiness, friction, ....
    When you think "where" the reader can go, try to think beyond the Table of contents and
    footnotes.
    Moving around a Book is not just flipping pages, is moving around a story made of
    events, places, characters. Content-tailored navigation modes can bring back the book
    its individuality.

    View Slide

  115. While you lose the depth and thickness of the codex, you gain
    three potential dimensions. When Use them and use gestural
    navigation to materialize the spatial model of the text.
    You lose the depth and thickness of the Codex but you gain three potential dimensions.
    Haptic feeling is lost but you can use new affordances like stickiness, friction, ....
    When you think "where" the reader can go, try to think beyond the Table of contents and
    footnotes.
    Moving around a Book is not just flipping pages, is moving around a story made of
    events, places, characters. Content-tailored navigation modes can bring back the book
    its individuality.

    View Slide

  116. While you lose the depth and thickness of the codex, you gain
    three potential dimensions. When Use them and use gestural
    navigation to materialize the spatial model of the text.
    Physical haptics are lost, but new virtual affordances like
    stickiness, friction, physics and acceleration can provide
    “body”.
    You lose the depth and thickness of the Codex but you gain three potential dimensions.
    Haptic feeling is lost but you can use new affordances like stickiness, friction, ....
    When you think "where" the reader can go, try to think beyond the Table of contents and
    footnotes.
    Moving around a Book is not just flipping pages, is moving around a story made of
    events, places, characters. Content-tailored navigation modes can bring back the book
    its individuality.

    View Slide

  117. While you lose the depth and thickness of the codex, you gain
    three potential dimensions. When Use them and use gestural
    navigation to materialize the spatial model of the text.
    Physical haptics are lost, but new virtual affordances like
    stickiness, friction, physics and acceleration can provide
    “body”.
    You lose the depth and thickness of the Codex but you gain three potential dimensions.
    Haptic feeling is lost but you can use new affordances like stickiness, friction, ....
    When you think "where" the reader can go, try to think beyond the Table of contents and
    footnotes.
    Moving around a Book is not just flipping pages, is moving around a story made of
    events, places, characters. Content-tailored navigation modes can bring back the book
    its individuality.

    View Slide

  118. While you lose the depth and thickness of the codex, you gain
    three potential dimensions. When Use them and use gestural
    navigation to materialize the spatial model of the text.
    Physical haptics are lost, but new virtual affordances like
    stickiness, friction, physics and acceleration can provide
    “body”.
    When you think "where" the reader can go, think beyond
    pages, tables of contents and endnotes.
    You lose the depth and thickness of the Codex but you gain three potential dimensions.
    Haptic feeling is lost but you can use new affordances like stickiness, friction, ....
    When you think "where" the reader can go, try to think beyond the Table of contents and
    footnotes.
    Moving around a Book is not just flipping pages, is moving around a story made of
    events, places, characters. Content-tailored navigation modes can bring back the book
    its individuality.

    View Slide

  119. While you lose the depth and thickness of the codex, you gain
    three potential dimensions. When Use them and use gestural
    navigation to materialize the spatial model of the text.
    Physical haptics are lost, but new virtual affordances like
    stickiness, friction, physics and acceleration can provide
    “body”.
    When you think "where" the reader can go, think beyond
    pages, tables of contents and endnotes.
    You lose the depth and thickness of the Codex but you gain three potential dimensions.
    Haptic feeling is lost but you can use new affordances like stickiness, friction, ....
    When you think "where" the reader can go, try to think beyond the Table of contents and
    footnotes.
    Moving around a Book is not just flipping pages, is moving around a story made of
    events, places, characters. Content-tailored navigation modes can bring back the book
    its individuality.

    View Slide

  120. While you lose the depth and thickness of the codex, you gain
    three potential dimensions. When Use them and use gestural
    navigation to materialize the spatial model of the text.
    Physical haptics are lost, but new virtual affordances like
    stickiness, friction, physics and acceleration can provide
    “body”.
    When you think "where" the reader can go, think beyond
    pages, tables of contents and endnotes.
    Moving around a books means engaging a space made of
    events, places, characters and ideas. Content-tailored
    navigation can bring individuality back to the book.
    You lose the depth and thickness of the Codex but you gain three potential dimensions.
    Haptic feeling is lost but you can use new affordances like stickiness, friction, ....
    When you think "where" the reader can go, try to think beyond the Table of contents and
    footnotes.
    Moving around a Book is not just flipping pages, is moving around a story made of
    events, places, characters. Content-tailored navigation modes can bring back the book
    its individuality.

    View Slide

  121. Try new ways of going through the content: characters, concepts, … you
    have all the power of the hypertext but in environments in which people
    are willing to read!
    Conceive for the reader and their context: where and when will he read,
    with whom. What other tools will he need? What wouldn’t he want?
    When you think "where" the reader can go, try to think outside the Table
    of contents and footnotes.
    Integrate media if its adds value, but aim for the appropriate balance
    between text and image. Consider "media gestures" as part of the
    book’s interaction grammar, and plan for it.

    View Slide

  122. Remember that you have all the power of the hypertext, but
    in an environment in which people are willing to read.
    Try new ways of going through the content: characters, concepts, … you
    have all the power of the hypertext but in environments in which people
    are willing to read!
    Conceive for the reader and their context: where and when will he read,
    with whom. What other tools will he need? What wouldn’t he want?
    When you think "where" the reader can go, try to think outside the Table
    of contents and footnotes.
    Integrate media if its adds value, but aim for the appropriate balance
    between text and image. Consider "media gestures" as part of the
    book’s interaction grammar, and plan for it.

    View Slide

  123. Remember that you have all the power of the hypertext, but
    in an environment in which people are willing to read.
    Try new ways of going through the content: characters, concepts, … you
    have all the power of the hypertext but in environments in which people
    are willing to read!
    Conceive for the reader and their context: where and when will he read,
    with whom. What other tools will he need? What wouldn’t he want?
    When you think "where" the reader can go, try to think outside the Table
    of contents and footnotes.
    Integrate media if its adds value, but aim for the appropriate balance
    between text and image. Consider "media gestures" as part of the
    book’s interaction grammar, and plan for it.

    View Slide

  124. Remember that you have all the power of the hypertext, but
    in an environment in which people are willing to read.
    Design for the reader and his context: where and when will
    he read, with whom? What other tools will he need?
    Try new ways of going through the content: characters, concepts, … you
    have all the power of the hypertext but in environments in which people
    are willing to read!
    Conceive for the reader and their context: where and when will he read,
    with whom. What other tools will he need? What wouldn’t he want?
    When you think "where" the reader can go, try to think outside the Table
    of contents and footnotes.
    Integrate media if its adds value, but aim for the appropriate balance
    between text and image. Consider "media gestures" as part of the
    book’s interaction grammar, and plan for it.

    View Slide

  125. Remember that you have all the power of the hypertext, but
    in an environment in which people are willing to read.
    Design for the reader and his context: where and when will
    he read, with whom? What other tools will he need?
    Try new ways of going through the content: characters, concepts, … you
    have all the power of the hypertext but in environments in which people
    are willing to read!
    Conceive for the reader and their context: where and when will he read,
    with whom. What other tools will he need? What wouldn’t he want?
    When you think "where" the reader can go, try to think outside the Table
    of contents and footnotes.
    Integrate media if its adds value, but aim for the appropriate balance
    between text and image. Consider "media gestures" as part of the
    book’s interaction grammar, and plan for it.

    View Slide

  126. Remember that you have all the power of the hypertext, but
    in an environment in which people are willing to read.
    Design for the reader and his context: where and when will
    he read, with whom? What other tools will he need?
    Integrate media as appropriate, but seek balance between
    content and reader expectation. Consider "media gestures"
    as part of the book’s interaction grammar and plan
    accordingly.
    Try new ways of going through the content: characters, concepts, … you
    have all the power of the hypertext but in environments in which people
    are willing to read!
    Conceive for the reader and their context: where and when will he read,
    with whom. What other tools will he need? What wouldn’t he want?
    When you think "where" the reader can go, try to think outside the Table
    of contents and footnotes.
    Integrate media if its adds value, but aim for the appropriate balance
    between text and image. Consider "media gestures" as part of the
    book’s interaction grammar, and plan for it.

    View Slide

  127. Remember that you have all the power of the hypertext, but
    in an environment in which people are willing to read.
    Design for the reader and his context: where and when will
    he read, with whom? What other tools will he need?
    Integrate media as appropriate, but seek balance between
    content and reader expectation. Consider "media gestures"
    as part of the book’s interaction grammar and plan
    accordingly.
    Try new ways of going through the content: characters, concepts, … you
    have all the power of the hypertext but in environments in which people
    are willing to read!
    Conceive for the reader and their context: where and when will he read,
    with whom. What other tools will he need? What wouldn’t he want?
    When you think "where" the reader can go, try to think outside the Table
    of contents and footnotes.
    Integrate media if its adds value, but aim for the appropriate balance
    between text and image. Consider "media gestures" as part of the
    book’s interaction grammar, and plan for it.

    View Slide

  128. New Reading Spaces and Emerging Patterns for
    Information Architects
    @vandicla @grandin
    Claudio
    Vandi
    Grandin
    Donovan
    Flipbulbs
    Future Reading

    View Slide