MALE SPEAKER: I would like to introduce Veronica Liesaputra,
who is from the University of Waikato.
She is Ian Witten's student there.
She is working under a Google scholarship to study ebook
user interfaces, and she's going to present some work
that she just presented at the joint
conference on digital libraries.
Veronica?
VERONICA LIESAPUTRA: First of all, I want to say thank you
for giving me the opportunity to talk about my PhD project,
which focuses on simulating electronic documents using the
book metaphor.
For today's talk, I'm going to explain about how to turn the
pages of an electronic book.
The outline of my talk will be first, I'm going to explain
about the book metaphor, the evolution of the book, users
reading behavior, and techniques
to model page turning.
Then I will show you my book part of example that uses one
of these page turning mechanisms, and I will
summarize my talk.
So it will be a very short talk.
There are actually lots of debates on the
use of the book metaphor.
Some people believe that it is useful using the book
metaphor, because people are already familiar and have
experience with it.
But others believe that it's actually useless using the
book metaphor.
It actually limits the potential of
an electronic book.
It may even lead to awkward design.
They believe it actually doesn't matter how the new
representation looks like.
Once users are familiar with it, they will no longer rely
on the book metaphor.
And so they're saying, don't judge a book by its cover,
judge it by its content.
And those experts believe that only the text is important.
The physical properties of the document don't matter at all.
However this is not how humans are trained.
Our human brains are already trained unconsciously to use
the physical properties of the documents to tell us about the
document's age, usage and quality.
Using the right text format is important, because it
essentially tells how the knowledge is organized and
presented, which in turn affects how you serve reading
comprehensions and reading experience.
Through the 4,000 years of its history, the document format
has gone through a series of changes.
The main motivation for this change is to find a format
that is economical, portable and user friendly.
Surprisingly, we can also find the same evolution in the
development of the electronic document formats.
So the three main document formats are scrolls,
concertinas and the codices.
In the scroll format, a document is represented in a
long file, pages.
And the user needs to use--
so if it's electronic, then you have web pages.
The users have to use the scroll bars to basically roll
and unroll documents to search for a passage.
Another example of the scroll format is the
teletype roll paper.
The second format is the concertinas.
This is the intermediate format
between scrolls and codices.
It was preferred over scrolls, because when it is folded, it
resembles a book.
You can randomly access any page.
An unfolded concertina is essentially a scroll,
providing a backward compatibility.
An example of this format are the [UNINTELLIGIBLE] printing
papers at every Acrobat Readers and Microsoft Word
print preview, where users can either use the scroll bars or
the page up and down buttons to go to the next page.
A user study shows that for their short documents, users
prefer scrolls over the concertina format, because
they are already used to using scrolls longer than
concertinas.
However, for long documents, users actually do not prefer
to use scrolls, because they can easily get lost in the
flow of information.
Just moving the scroll bar slightly can change the screen
content completely.
That's why they always use page up and down buttons.
Where the concertina, although it helps the user gain better
understanding of the document's logical structures,
they still find it hard to know where they are on the
document and the length of the document itself.
So that brings me to the last document format, which is the
codex format.
This is the standard document format.
It was preferred over the concertinas, because it uses
less material, which means that it's cheaper, it's easier
to read and store, and it's portable.
And recently, many researchers tried to simulate electronic
document using the book metaphor.
They found that the user gained a better understanding
about the document's logical structures, and also the user
already understood the book metaphor, so they knew exactly
what to do, without saying, you need to turn the page or
something like that.
Adding functionality such as annotation, highlighting can
increase readers' engagements and fulfillment.
So I guess everyone has already seen this video.
So I'm just going to skip it.
Yes, or do you want to watch it?
OK, sure.
[VIDEO PLAYBACK]
[END VIDEO PLAYBACK]
VERONICA LIESAPUTRA: As you can see, the page turning is
the important application in a book.
A user study done by Katherine Marshall actually shows that
page turning is actually a combination of a complex
[UNINTELLIGIBLE]
applications, as I will show you in this series of
photographs.
Here we have a girl reading her favorite magazine.
And as you can see, she's already anticipating herself
to turn the page, while she's still reading the first page.
And then she partially turned the page.
And she said that it's because she wanted to look ahead, the
content of the next two pages.
She wanted to get more context of what's
happening with the articles.
Once she fully turned the page, she made the magazine
into a double page display.
Again she said that she wanted to get an overview of how long
it is the article going to go for and about the context that
she's going to read.
And when she's satisfied with that, she folds the magazine
into a one page spread, and then focuses herself reading
on the left page.
So while reading, users are always anticipating themselves
to turn the page.
The same behavior also can be seen when they're reading an
electronic document or using an electronic book reader.
They always place their mouse or their scroll bars near the
navigational buttons or the scrollers.
Although clicking a navigational button is
effective, users actually briefly lose contact with the
text, which means that they cannot subtly look ahead at
the content of what is the next page while they're still
reading the first page.
They always just have to go to the next page.
There's no middle bit.
This is why simulating a realistic
page turning is important.
When we want to simulate a realistic page turning, we
always have a trade-off between the
accuracy and the speed.
If you want our page turning to look as realistic as
possible, then it will be complex to compute, which
means that it slow to render.
There are two types of simulation.
Geometric simulations and physical simulations.
In the geometric simulation, the appearance of the page is
defined by a set of mathematical equations, which
means that it is simple and fast to compute, but it may
not be accurate and it's also restrictive.
The second simulation is the physical stimulation.
In this simulation, the appearance of the paper is
defined by the material properties of the paper and
the forces that we apply to the paper, which means that
the simulation is accurate and flexible, but it is complex
and slow to compute.
When we want to create realistic page turning, we
want to find a model that not only looks sufficiently
realistic, but it has also to be scalable to handle large
page counts and computable in real time.
AUDIENCE: What does accurate mean here?
VERONICA LIESAPUTRA: It means it looks realistic, looks like
a real page.
For this step, I'm going to explain about three page
turning techniques that I have investigated and implemented
during six months of my PhD project.
The peeling method, particle method, and the
finite element method.
But before I start explaining about the page turning models
that I implemented, I'll explain about the British
Library Turning the Pages project, because this is the
project that inspired me to actually find my own page
turning techniques.
So in the British Library Turning the Pages project,
readers sit on a touch screen display, a big
touch screen display.
And they can basically, metaphorically grab the corner
of the page and swipe their finger across the display to
turn the page.
And as you can see, that the [UNINTELLIGIBLE] is not three
dimensional and the binding moves in sympathy to where
they are when they turn it.
And I will show you a video of their promotional reel.
[VIDEO PLAYBACK]
-For many years, people have been asking to see more pages
than we can display in the exhibition galleries.
More access to those important books.
The British Library is committed to a digitization
program that will make our collections available to the
widest possible audience.
What Windows Vista allows us to do is deliver some of those
programs in very creative ways.
We're going to make the Turning the Pages tour kit
available to libraries throughout the world.
And they can quite simply put their collections on line.
Turning the Pages seems to appeal to everyone, and we've
had positive feedback from people from all over the
world, saying that this is exactly what the Internet
should be used for.
[END VIDEO PLAYBACK]
VERONICA LIESAPUTRA: So as you can see that Microsoft is
actually supporting this project at the moment.
And the way this simulation works is actually by taking
photographs at each intermediate page turn point.
So for example, if you have the book and you want to turn
this page, then they take a photograph on this,
this, this and this.
And essentially, what is shown to the user is not the
computer model of the book, but it's just a series of
images, which means that the turning part is predefined.
So the cost of creating your book into this Turning the
Pages book, if you have a thick book, then it's $200 US.
If it's a thin book, it's $2,000 US.
And you might think that that sounds reasonable, a thick
book, $200, but it's actually per page.
So Microsoft is willing to pay about $10,000
for a 500 page book.
So for my presentation, which is 32 pages, then it will cost
me $64,000.
And I don't have much money like Microsoft.
So I decided to create my own page turning models.
The first method is the peeling method.
This is the example of the geometric simulation method.
In this peeling method, the paper is
divided into three sections.
The visible part of the page being termed the green bit,
the crisp polygon, and the refill area underneath the
page being turned.
Because we ignore the translation in exact
directions, meaning that the crease polygon is the exact
reflection of the refill polygon, and it can be
computed by drawing a line that is from any clear
bisector to the line CP.
Because in this method we actually computed the model of
the book, that means that the turning part is not
predefined, which means that I can actually turn the corner
to the place like whatever.
It's not just one way, like in the British Library Turning
the Pages project.
However, because this is a geometric simulation model,
that means that for each different type of paper, I
have to create a new set of mathematical equations.
So for flexible paper, we can use peeling--
How do you right click this?
I'm serious.
So basically, it's become not universal.
In this simulation, we choose a physical simulation.
And the physical simulation, because we take into account
the material properties of the paper and the forces that we
apply to the paper, this means that it can be used for any
type of paper just using one formula.
It consists of four major components, the mesh
representations, the internal forces, external forces, and
the time integration.
So the first method is the practical method.
[AUDIENCE CONVERSATION]
I can show you the second one.
So if it's stiff paper, it will look like that, right?
So we are we using a sharing method, instead
of the peeling method.
In the practical method, we divided the papers into end by
end particles that are connected with three different
types of springs, stretched springs, shared spring and the
band springs.
For each of these types of springs, we can choose a
different spring constant, which means that we used the
string constant to stimulate the material
properties of the paper.
So for example, if you have a normal flexible paper, it's
not easily stretched and sheared, but this can be
easily bent.
Then you choose a high spring constant value for the
stretch, and sheer string with small constant
value for the band.
The second internal force is the damping force.
This is the friction force within the default material.
And the two external forces that apply to the paper is the
gravity force and the user force.
We can calculate the position of the paper at the next time
step by using oil or explicit time integrations, with just a
normal Newton's Law.
However, because we do not want to create the simulated
page being torn from the book, we have to use element
straining, which basically says that the paper cannot be
stretched or sheared more than 10% off its original length.
So if we have two particles, particles I and J, and then we
basically said that if the original length is one, and at
the next time stop the original length is two.
Then basically, we move both particles closer together, so
the length becomes only 1.1.
However, if one of those--
So basically, it that particle I, if it's in a fixed
position, for example, it's on the spine of the book, then we
move particle J closer together to particle
I. Can't see it.
Should we just refresh it?
This is how it looked like.
So if you can see there's actually the pink, which is
actually the force.
So this simulation looked more realistic
than the peeling method.
However, the paper still looked rather springy, because
we used a spring.
This is why I used a finite element method, the next one.
So in this finite element method, the paper is divided
into end by end elements.
And each of these elements is then
divided into three layers.
The bottom layer, the middle layer and the top layer.
For each of these elements, we then calculate the internal
forces, the external forces and the time integrations.
So the first internal force is the stress.
This is the force that we applied on each page.
If can be calculated by multiplying the deformation
metrics with the strength.
So strength is just the deformation of the paper.
And the deformation metric characterizes the stress
strain relationship.
This metric is the one that defines how the paper should
react under certain forces.
It is defined by three constants.
The young modules of elasticity, the
[UNINTELLIGIBLE] ratio, and the shear correction value.
So this four bit at the top is basically saying that if we
have a paper that is elongated on the x direction, even if
just a little bit, then you will be compressed on the y
directions.
but if you have favored a compressed next direction and
will be a long day on the y direction.
So the string is actually the spatial derivative of the
point displacement.
So instead of calculating every displacement on each
point in the element, we define eight reference points.
So we put the eight reference points on the middle layer.
And by doing this we can define the position x, y
position of any points in the element relative to these
eight reference points.
Then we define normal factors of the middle layers at each
of these eight reference points.
So by doing this, we then define the z positions of any
point in the element.
AUDIENCE: Veronica, if you're just using the middle layer,
[INAUDIBLE]
layers?
VERONICA LIESAPUTRA: So we have to use the middle layer,
because we want the x and y position, and then the
thickness is the z.
But that's why we use the normal factor.
Basically, it's using this formula, where the w is
actually the interpolation function and the psi eta zeta
is basically the x, y, z local coordinates in the element.
And because we can [UNINTELLIGIBLE], the
displacement is basically the position of the point at this
time step, minus the position of the point at
the next time step.
And because we can define the position of any points
relative to the positions of the reference points, that
means we can write the displacements of any points
from the displacement of any reference points.
We can write the stress is equal to k times q, where k is
the thickness metric and q is the displacement of the eight
reference points.
If you see this closely, it actually looks similar to the
spring force, only we use metrics
instead of spring constants.
So again, the two important forces will
be stress and dumping.
And again, we use our dumping metrics
instead of jumping constants.
Similarly with the external forces.
And so basically, you think, again, physics law.
Internal force equals external force.
And by doing this, we can find an acceleration using the
[UNINTELLIGIBLE] implicit time integrations.
This one looks more realistic than the particle method.
However, this is a [UNINTELLIGIBLE]
figure, right?
In real time, it actually takes about one hour to do
this page turning.
So it's not realistic to use it in the real world,
especially in just a normal workstation PC.
This means that out of these four page turning models, of
course, we can't use the British
Library, it's too expensive.
The finite element method is basically too long.
So we have a choice between the peeling and
the particle method.
While the peeling method looks not so realistic, it can be
done just by using a lightweight programming
environment, like here I used Flash.
It's because in peeling there's just one
mathematical equation.
While in the particle method, we have differentiation
integration, which means that we need a stronger programming
environment.
So we have to use something like Java or Flash.
And because the goal of making the book prototype is
basically to create a new document representation in
that load class, so people can feel it quickly, then we can't
use the particle method.
And this is why choose the peeling method, because I can
do it just using Flash, instead of Java output, where
users need to install more software.
Now I will show you my example.
Do I get an Internet connection here?
Internet connection.
What I showed you before was actually taken from Microsoft
Power Point presentations and then I
converted them into Flash.
So I can have animation and video.
My portable application also can accept a PDF file.
So if you have one PDF file, you tell me the file name, and
actually I will run a script to make it into a book.
So this is an example from the Internet archive collections.
The Rubin with one.
And then, the way that this loading works, not only
because Flash loads faster than PDF, it's also because
the pages that are loaded are only the pages that
users want to see.
So I don't look at the whole 1,005, it's just 4
pages at the start.
And when the user flips again, then there's another two pages
and it's all cached.
So users don't have to do it again.
Then you can zoom in and zoom out, as well.
And they can jump into any page.
As you can see in here, if you're in a PDF, you can
actually see where you are in the document or how big
exactly your document is right away, just by looking at it.
But in here, you can actually--
if you get through using the side edge of the book, and you
can tell exactly where you are in the document and how big is
your document.
So this is an advantage again to the PDF format.
And, if I go back--
it also can accept an HTML file.
So if I have one HTML file, this is taken from the
Greenstone Humanity Diplomat Library.
So this is like the HTML files.
And if I view source, then basically you have the
metadata of the section name and what's the
content of the sections.
And because I have this, then in my book I can have this
book marked and create an automatic table of contents of
where each subject and section started.
You can jump into a page, of course.
And they can go to the book mark.
And if you want to view where all the pictures are, then you
just change it, snap to pictures, and you know exactly
where all the pictures are.
So as you can see that this is really fast. That means I can
add more functionality to the book without any added
computational time, because it's all really fast. This is
my favorite example from my supervisor.
He's said that you can't change a real book from hard
cover to soft cover.
Let me change that to soft cover.
So this is like the advantage of having a digital book.
You can do more things that a normal book can't.
So if you want to play around, that's basically the URL.
You can play around with my books.
To summarize, page turning is an important navigation
feature in a book.
Although clicking navigational buttons are effective in
digital settings, users actually briefly lose contact
with the text, which means that it becomes interruptive.
This is why simulating a realistic page turning is an
important feature.
It's not only engaging users to start turning the page, and
look pretty as well, but it actually also allows users to
briefly look ahead at the content of the next two pages.
In this talk, I have presented three page turning models, the
peeling, particle method, and the finite element method,
where the peeling has become the chosen one, because it
required the lightweight programming environment.
And the finite element method is the one
that's the most realistic.
So my next step of my project is basically to add more
functionality to the book, just to make it more usable at
searching, annotations, bookmarking, highlighting, and
like Bill said, maybe adding some recommended reading,
stuff like that.
And then I will evaluate this prototype against the
conventional representations, which I have
to think about more.
Thank you.
Are there any questions?
AUDIENCE: Why is page turning important?
You showed a lot of examples.
You basically argued that it--
My question is really, you've argued that page turning is
really important, and I'm wondering what's the
evidence for that?
We've see a lot of videos of things, but what's the
argument that page turning is actually an important
functional part of the book experience?
VERONICA LIESAPUTRA: The first one is because people
actually, when they look at the page turning, they know
exactly what to do, unlike scroll.
So when I show it to users, this is not tech
savvy users, right?
They look at my book, they know exactly what to do.
They say, oh, I want to turn the book.
But if it's scroll, they're a bit confused what to do.
AUDIENCE: Do you have any evidence for that?
VERONICA LIESAPUTRA: I have done an informal user study.
I didn't bring it here, but yes.
I'm sorry.
And the other thing is also people love options.
So, for example, if you want to just efficiently, just
clicking the next button, you can.
So it will just go flip, flip, flip, flip.
Or if you want page turning, then you can-- it's just
another option for users, as well.
Because it doesn't add those overhead among them anyway.
AUDIENCE: So I guess what I'm really trying to get at is,
this is a lot of work for something that may not be
crucial for the user experience.
That's why I'm trying to get the sense of whether or not
it's really important.
And why you believe it's important.
VERONICA LIESAPUTRA: Well, when I did my initial informal
user study, it actually showed that they
want this page turning.
So that's why I did it.
AUDIENCE: Do you provide a way, when you do the page
turning, to turn multiple pages.
I see you turning just to the next page, but can you turn,
like pick through a little bit?
VERONICA LIESAPUTRA: So at the moment,
this is just a prototype.
So you mean like if you want to--
AUDIENCE: -- flip a few pages.
Like two or three, and see the content like three pages down.
Sometimes when you thumb through the corners of a book,
you're looking for something.
VERONICA LIESAPUTRA: I haven't implemented that
functionality yet.
But I will.
AUDIENCE: I was just wondering if you had thought about how
the user would do that.
How would you distinguish picking the very next page
from picking two or three pages down?
In terms of the UI.
VERONICA LIESAPUTRA: So basically, at the moment, I
use heuristic that if the pages are about like ten, five
turns, then it will do like those flip,
which I will implement.
But if it's like far, then it would just
straightaway go to that page?
AUDIENCE: Yes.
VERONICA LIESAPUTRA: So the users don't have to do it.
But of course, there's an option that the user can
change if they want to continuously flip, then they
can as well.
AUDIENCE: OK.
Thank you.
VERONICA LIESAPUTRA: Any questions?
Yes.
AUDIENCE: One of the things I'd love to see would be
[INAUDIBLE] equipment annotations, [UNINTELLIGIBLE].
VERONICA LIESAPUTRA: Yes.
So that will be my next version.
I will add annotations and highlighting and searching,
basically just to make the book more usable.
That will be my next step.
Any other questions?
Suggestions, maybe?
MALE SPEAKER: Thank you very much.