Essential UI/UX Design Principles: A Comprehensive Guide
The browser and the book
1. 1
The browser and a book is the content of a presentation I first
gave at IDEA 2008, a gathering of information architects.
2. 2
TRENDS
Here are a few trends that I’ve noticed in today’s marketplace:
Mobility. People are just starting to get used to the idea that
the internet can be portable. It used to be that we had to go to
the internet – now we can keep it in our back pocket or wear
it around our necks.
A cornucopia of devices, led by the iPhone, seeks to capture
this mobility market. The traditional PC is exploding into a
fragmented set of portable devices with different goals and
uses.
Micro-content. As mobile devices fracture into multiple
categories, so does our collective attention. We are now in the
age where we share photos of what we had for lunch and
broadcast our current location and desires.
Social nets. We broadcast our location to our tribe, or
portions thereof: a group of friends who may be nearby, for
example.
Impatience. Along with our increasing desire to connect and
our fragmented attention comes impatience with any kind of
learning curve. We expect things to work instantly,
intuitively, and increasingly see a user’s manual as a sign of a
badly designed product.
4. 4
We can guess about the future but sometimes it pays to study
the past.
The book as we know it today is a very stable technology
which has survived with very little change for the past 500
years. The book at right was published by Aldus Manutius in
the 15th century. Perhaps we can still learn from the book.
6. 6
The challenge of capturing information from the world
around us is an old one. We’ve tried many approaches over
the years, and the web browser is merely the latest in a long
chain of approaches to information display.
The challenge is the same for any display technology:
Somehow to represent the complex, dynamic “real world” in a
meaningful and useful way.
7. 7
COGNITIVE DIMENSIONS
Any device or technology that is designed to help us capture
meaning and move it around can be considered to have two
primary cognitive dimensions:
The medium. You can think of this as the box or container
where we keep the information.
The content, which is the meaningful stuff, whatever it is, that
we want to move it around. Somehow we need to put the stuff
into the box, in such a way that we can find it, and get it out,
later, when we need it.
8. 8
Let’s start with the medium: the container or box we use to
move meaning around. Considerations include the physical
form factor or shape as well as the types of interactions that
are possible.
Think about all the things you can do with a book. First of all
it’s quite rugged. You can drop a book, spill wine on it and
read it in the bathtub. I have personally tested these qualities
many times.
A PC or PDA is much more delicate and requires careful
handling by comparison.
10. 10
PLEASURES OF THE BOOK
A book is a delightful object to hold and carry around with
you. It feels comfortable in the hand. It smells good. The
turning of pages is a pleasurable activity.
A book offers serendipitous access – it could fall open at any
point. It’s read-writable: You can write in it, underline words,
mark paragraphs, and even fold pages.
You can tell where you are in a book by changes in thickness
and weight.
12. 12
When papyrus was invented about 4,000 years ago, the first
form, not surprisingly, was loose leaves or sheets. We still use
loose sheets of paper today because they are portable,
lightweight, and flexible. Loose sheets are great for
transporting information that is small and self-contained, like
a receipt, a grocery list, a small sketch or a short note.
14. 14
Loose sheets of paper can be sorted, filed, arranged and
rearranged. Add a little glue and they become sticky notes
which offer even more possibilities, turning any window or
wall into a human-sized configurable display.
When the graphical user interface (GUI) appeared we called
them windows, but we manipulate them and use them more
like loose sheets of paper than windows.
16. 16
The scroll form emerged at almost the same time as papyrus.
A scroll was made by gluing loose sheets together to form one
long continuous sheet.
This allowed longer texts to be kept in a single document. The
major advantage this holds over loose sheets is that the order
of the text is kept intact. Loose sheets easily become scattered
and when this happens the original order is lost.
Most web pages today use the scroll form, which we invented
4,000 years ago. Surely there is still a long way to go.
18. 18
As early as 600 BC the wax tablet was used as a portable
reading and writing device. The tablets were usually made of
wood and tied together so that when opened they formed a
two-page display, and when closed the wax “pages” were
protected so they could be safely transported.
20. 20
Legend has it that Julius Caesar invented the book during his
invasion of Gaul, when folded his scrolls accordion-style in
order to use the “pages” as reference points.
Accordion-fold books were also made by the Mayans (image
at right) and the Chinese. Accordion-folding is still used
today for larger documents that need to be portable, such as
maps.
22. 22
The whirlwind scroll is a hybrid form, invented in China, that
combines attributes of the book and the scroll. It’s bound
along one edge and rolled up for storage and transportation.
Each sheet in a whirlwind scroll is slightly longer than the
previous sheet, so that a thin strip of every page is always
visible. The whirlwind form is relatively uncommon but all
known instances are reference works. You might say that this
was the first form of what we now know as folder tabs.
23. 23
The whirlwind scroll was made by
cutting a bamboo shoot in half
and stringing together loose sheets
of silk or paper.
When the scroll is laid flat, part
of each page is visible and can
be marked for reference.
24. 24
Codex is the name for the book proper, made of separate
pages bound together and given a cover. It was invented by
the Romans somewhere around 100 AD and survives to this
day in substantially the same form we know and love today.
26. 26
Girdle books were small, portable books carried by nobles
and the clergy, beginning in the 13th Century. The girdle book
hung from the belt, attached by a leather strap. This enabled
the book to be carried easily and also served as a visible
statement of wealth and literacy.
28. 28
When Gutenberg invented movable type in the 15th century,
the book had been in existence for over a thousand years, and
yet many of the elements we take for granted today – such as
tables of contents, page numbers and indices – had not
become standard features. You could think of these items as
metadata, because they allow you to reference specific pages
and sections within a book.
Perhaps not surprisingly, the adoption of metadata coincided
with the rise of classical scholarship and humanism, which
involved the study of ancient Greek and Roman texts.
29. 29
This page from the Gutenberg
bible has no page numbers and
no chapter or verse numbers.
30. 30
striking … passage(s)
should be indicated by
some appropriate mark
… not only must a variety
of marks be used but
appropriate ones … so
that they will
immediately indicate
their purpose.”
- Erasmus
“
HUMANIST AND THEOLOGIAN
1466-1536
32. 32
There seems to be a size for printed matter that is “cognitively
comfortable,” which is roughly equivalent to the two facing
pages in a modern book, which designers call the spread.
Even in ancient scrolls, where page width was not an issue,
columns were 2-4 inches wide and 8-10 inches high.
33. 33
Now that you understand a bit about the history of the book
as a medium, let’s explore the book from a content
perspective. By content I mean: What kinds of things do we
put into books? How do we get them in? How do we get them
out again?
34. 34
The book has significant advantages over the browser: It is a
complete and integrated package. The book designer knows
what the content is and can design the form to suit. The book
is then manufactured with a specific size and shape that is
appropriate for the content. The design and form of coffee-
table book is very different from a spy novel.
The browser must carry a heavier load. When someone
creates content for the internet, they have to somehow get it
“into” the internet, at which point the content then lives on
servers and can be accessed by anyone who has a device that
can “look at” the internet. The designer of internet content
must expect that readers could be viewing the content in a
multitude of different devices. In fact, the designer of web
content must anticipate devices that don’t even exist yet.
36. 36
To think about the content that the book contains, we need to
go back to the oral traditions that we developed in our earliest
societies. Perhaps the oral tradition is best exemplified in the
works of Homer, which still exist today in printed form.
A reading of Homer can never fully recreate the original
experience, which predates text. But if you read Homer you
will find a rich store of rhyme, meter, mnemonic devices and
repetition, which together serve to keep an audience aligned
with each other and anchored to an imaginary space.
38. 38
In his book, The User Illusion, Tor Norretranders describes
the “tree of talking.” When you turn a thought into language,
you must “pack” the concept into a short word or phrase. For
example, the simple word “horse” contains a rich set of
meanings that are specifically tied to your personal
experiences. If you had wonderful childhood experience with
horses and the person you are talking to had negative
experiences, you will assign different meanings to the word.
Every conversation is a complex interaction where many
experiences are continuously packed into tightly condensed
phrases and unpacked into experiences.
39. 39
Authors and artists have similar challenges, and they “pack
the box” in similar ways. Packing is not a linear, sequential
activity, even though the result may be a linear sequence.
40. 40
Any author will tell you that writing is not a simple sequential
experience. A first draft may flow quickly onto the page, but
this is only the beginning. Authors work by crafting bits and
piecing them together. Many authors use index cards, scissors
and tape, and their works are constructed by arranging and
rearranging elements until an overall harmony of
composition is achieved.
42. 42
The internet, and the web browser, in its current state, does
not support authors anywhere near as well as it supports
readers. The internet needs to improve its support for
imagination – it needs to support non-linear construction. It
needs to enable authors to compose the way they naturally do
things. Watching creators in their natural environments
would be a good start.
44. 44
Every composition, like every conversation, follows a path,
and every choice eliminates an infinity of other possible
paths. Every time you open your browser you follow a similar
path. With every click you choose a road, and with every click
the alternatives are left behind. Thus the internet browsing
experience parallels natural conversation in many ways.
45. 45
When we represent our world in all its complexity, we tend to
generate maps and stories. A map is a representation of
space, while a story is a representation of action or time-
based sequences. Nouns and verbs. Entities and events.
Objects and interactions. Things and things that happen.
46. 46
What happens when we think of the internet as a map – as a
landscape? Just as each person’s experiences are highly
individual, so is each person’s experience of the internet.
Because the landscape of the internet is represented digitally,
it’s possible to have an infinite number of realities, and thus
an infinite number of maps.
We shape the landscape as we move through it. Think of how
the physical landscape evolves: Paths become cattle trails,
cattle trails become roads, roads become highways. If we
imagine the internet as a landscape, each person’s browsing
activities give it shape and form.
47. 47
Today when we move through the internet we don’t leave
traces of our passing. Why not? These traces become useful
landmarks for those who follow, or for us, the next time we
visit.
48. 48
It would be nice if my browser sent me on a random walk
once in a while, just to get me out of a rut.
49. 49
Our browsers keep track of the sites we visit – we have the
option of opening any new thread as a new tab. This helps us
track multiple threads. So far so good. But sometimes, as
shown above, three or four threads emanate from a single
source. Current browsers don’t track this.
When you browse the web, you’re blazing a trail as much as
any author. Why should your efforts and explorations be lost?
Can’t they be mapped?
50. 50
In the 1700’s, it was common to buy a book unbound and
take it yourself to the bookbinder for binding. In those days
writing in books was something any educated reader was
likely to do, and so many readers would have books
interleaved.
Interleaving placed a blank sheet between every two pages,
so that the reader could take notes. When reading a left-hand
page the right page would be blank, and vice-versa.
51. 51
Imagine a browser page that’s interleaved. Every web page
connected to a blank page that’s your notebook. Imagine
content that can be clipped, dragged, arranged and annotated
as easily as you can do it with scissors and paper.
With the advent of tablet PCs , pen computing and touch-
screen interactive surfaces, we should see a new age of
interaction that’s fast, easy and intuitive. Will we? I hope so.