the exhibit
This document creates a blueprint for the web site and fill out some of the initial structure. The thinking and terminology is heavily influenced by the 1998 paper “Designing Navigable Information Spaces” by Mark Foltz1. In particular, the entire structure is modeled as an “exhibit,” using the concepts of “regions” and “signs” to help facilitate wayfinding and imageability.
1 layer
1.1 the exhibit is a layer
The exhibit is a layer that helps us find our way around the documents.
#document-layer <after>
<div id="exhibit" class="active scroll-layer" tabindex="1" />
</after>
We put it “physically” after the documents—why? When a document is open, we consider it to be the most relevant content. We don’t want the exhibit—or anything else, really—to preëmpt that.
Also, because we’re making the exhibit the scrolling layer right away, we have to make the HTML not the scrolling layer.
html <class add="not-scroll-layer" />
1.2 scrolling
The exhibit layer is initially active.
This must be a getflow thing. The exhibit already has active when you create
it. But sometimes you have to add classes in this way in order for them to be
reversed properly in pageflow.
Also, I think what does “active” actually do? I think it’s just for the “keyboard” hack, which we don’t have in place yet.
#exhibit <class add="active" />
1.3 the parallax trick
The exhibit is a structure with its own layers. We use parallax scrolling to
help enhance the sense of depth and space within the exhibit. This technique
creates a nice effect where the signs in the entryway scroll more slowly than
the content being scrolled into view. If the preserve-3d property isn’t
supported, you simply don’t get the special effect.
This is not taking effect anywhere right now, even without the @supports
condition.
transform-style preserve-3d
@import parallax
+parallax()
perspective 1px
/#entryway
transform-origin center
transform translateZ(-1px) scale(2) // Scroll half as slowly as main body.
1.4 inside the exhibit
The exhibit does not actually contain everything in the site, so much as it helps you find it. Most of the detailed content (as we indicate elsewhere) comes in the form of documents. Structurally, then, the exhibit occupies one layer in the overall space, while the documents reside in another, which “take over” the space when visited.
@import layers
@import order-of-main-layers
#exhibit
scroll-layer()
z-index $exhibitLayer
transform-style preserve-3d
@import parallax
+parallax()
perspective 1px
/#entryway
transform-origin center
transform translateZ(-1px) scale(2) // Scroll half as slowly as main body.
Recall that the physical order of the content is based on what makes sense for the “plain” view of the site. Dividing the content into layers allows us to use a spatial arrangement that is independent of the document order.
We define the regions as being the foremost layer of the exhibit:
$entrywayLayer = 1
It seems counterintuitive that the entryway is thus in the “rear” of the exhibit. The reason has to do with how movement within the exhibit should feel. The entryway is a single place that is supposed to feel stable; whereas the regions lay in all directions and that traveling between them involves movement. In that sense, the entryway feels “farther away” than the regions.
2 the entryway
Pray you, come in. Othello 3.1
The entryway is the first thing you see when you arrive at the exhibit. By this I mean what you see immediately upon entering, before taking a single step (i.e. scrolling or following a link). This coveted place is called “above the fold,” a term taken from the newspaper business. Since there is so much wonder and delight in store for those who venture further, it is tempting to crowd the entryway with all manner of enticements. And with space being so limited—even to the size of one’s hand—choosing what attractions to promote is a difficult matter.
This difficulty drives many exhibitors to a paralysis of indecision, which they then project onto their visitors in the form of a “carousel"—those vertiginous spotlight rotators that notionally reduce all content, past, present and future, to a single form (viz, the picture and caption). Meanwhile, one could say that giving “pride of place” to so many candidates rather robs the place of its pride. But one would digress.
A “news” site, or a “feed” would wish to put first those things that change the most often. To my mind, this subverts the notion of an hierarchy. Thus, willshake always puts foremost whatever will change the least. And what will change the least about willshake? Shakespeare.
Choosing requires emotional energy. Visitors may feel too indimidated by the aura and prestige of “Shakespeare” to make choices right away. Well, the first one’s free.
2.1 space for the entryway
The entryway is part of the exhibit. Insofar as we expect it to consist of
minimal, navigational content, we put it physically up front (with prepend):
#exhibit <prepend>
<div id="entryway" />
</prepend>
(As such, this might be considered like a header.) The
@import docking
@import order_of_exhibit_layers
#entryway
hug-parent() // The entryway fills the viewport. Always.
pointer-events none
z-index $entrywayLayer
overflow hidden // don't reflow in Gecko when children are translated
Because of the z-index (and other things, I think?) a compositor layer is
created. The contents of the entryway cannot be gone-between by other layers.
The point of the pointer-events none rule on the entryway (and all of the
“reset” rules on its children) is to allow click-through to the ground. Without
this rule, the entryway itself would act like an invisible wall blocking pointer
events to anything behind it (even where it is empty). However, this behavior
is currently unused, as the ground doesn’t recognize any user actions. So if
that continues, I’ll get rid of said rules.
2.2 signs in the entryway
The only thing in the entryway are signs. I’m tempted to say the only thing allowed in the entryway are signs, but why set myself up to be forsworn?
2.2.1 acknowledgement of the possibility of other signs in the entryway
There’s only one essential sign in the entryway—the one that says “Shakespeare.” Maybe you’ve seen it. (There’s also the beacon, but that’s part of the firmament, not the entryway.)
#entryway <prepend>
<nav id="entryway-signs">
<<the-Shakespeare-sign>>
</nav>
</prepend>
That <nav/> element
@import docking
#entryway-signs
hug-parent()
2.2.2 the Shakespeare sign
This sign is front-and-center in the entryway. It’s almost ridiculous.
In document terms, it’s mostly significant as a header.
<header id="shakespeare-sign">
<h1 id="shakespeare-sign-heading">
<a id="shakespeare-sign-link" href="/#Shakespeare">
<span class="text">Shakespeare</span>
</a>
</h1>
</header>
The Shakespeare sign is basically the central affordance on the site. It sits just above the center of the entryway.
@import thumb-metrics
@import responsive
#shakespeare-sign
position absolute
top 40%
left 50%
transform translate(-50%, -50%)
sign_size(thumbs, font = undefined)
width $thumbRems * thumbs
height $thumbRems * thumbs
font-size font if font != undefined
sign_size(thumbs: 1.5, font: 150%)
scale_sign(min, thumbs, font)
@media (min-height min) and (min-width min)
sign_size(thumbs, font)
scale_sign(20rem, 2, 200%)
scale_sign(25rem, 2.5, 250%)
scale_sign(30rem, 3.0, 300%)
scale_sign(35rem, 3.5, 400%)
That’s just the positioning container; the actual “thing” is a link.
// IT DOTH APPEAR that this h1 is just for semantics.
@import docking
#shakespeare-sign-heading
hug-parent()
margin 0 // beat h1 default
font-size 100% // beat h1 default
@import colors
@import arrows
@import pointing
@import centering
@import signs
#shakespeare-sign-link
// The link fills the sign.
hug-parent()
pointer-events auto // reset from parent layer
// Doing this here means it also applies to the down arrow.
font-weight 200 // beat h1 default
line-height 1.2 // Not really needed, just being explicit
// Round, like a globe
border-radius 50%
// The first two box shadows help soften aliasing effects on some parts of
// the circle.
//
// Note that the large shadow does extend the area repainted by hover
// effects. You can get around this (at least in Chrome) by putting the
// shadow on a pseudo-element, but I don't find the extra painting to be
// detrimental, since the event is infrequent.
box-shadow \
0 0 1px $worksColor,
0 0 3px rgba($worksColor, .6),
0 .25em 1em -.125em #111
// Sign stuff
sign-text-color()
// IS THIS kind of a general thing?
// Works sign stuff
background rgba($worksColor, .8)
+user_pointing_at()
background rgba($worksDarkColor, .8)
// Down arrow, below text
+arrow-after-pointing(down)
horizontally-center()
top 70%
> .text
position absolute
// Center horizontally and (almost) vertically
top 50%
left 50%
transform translate(-50%, -50%)
margin-top -7%
letter-spacing -.04em
2.3 the end of the entryway
What happens if you keep going? It’s worth asking, because some people will. It’s kind of like the “back door"—the thing you reach if you walk past everything. Restrooms may be found there, or utility closets that say “staff only.”
In document terms, a “footer” is a section, usually at the end, that implies a gentle return to the broader context. Maybe I’ll want something like that later.
#exhibit <append>
<footer id="entryway-footer"></footer>
</append>
In space terms, the footer is just some “breathing room” at the bottom of the entryway, just as we have at the top.
#entryway-footer
transform translateY(400vh)
height 100vh
3 regions
A region is a set of documents.
But it’s more than that.
It’s also a way of thinking about those documents.
3.1 region messages
.region-message
hyphens auto
color rgba(#EEE, .8)
font-weight 200
box-sizing border-box
padding 0 2em
text-align center
@media (min-width 30rem) and (min-height 25rem)
font-size 150%
@media (min-width 50rem) and (min-height 30rem)
font-size 200%
a
font-weight bold
@import signs
$regionHeadingLineHeight = 1.25
$regionHeadingFontScale = 3
$regionHeadingPadding = .5
$regionHeadingHeightRems = unit(($regionHeadingLineHeight + $regionHeadingPadding) * $regionHeadingFontScale, rem)
region_heading()
margin-top 0 // beat h1 default
margin-bottom 0 // beat h1 default
// Apply to exit link as well
sign-text-color()
font-weight 200 // beats h1 default
font-size $regionHeadingFontScale * 1rem
region_heading_link()
display block
padding-top unit($regionHeadingPadding / 2, em)
padding-bottom unit($regionHeadingPadding / 2, em)
line-height $regionHeadingLineHeight
text-align center
letter-spacing -.02em
3.2 region colors
These colors will be used throughout the site, so we write them to a library.
$worksColor = #8D7454
$worksLightColor = lighten($worksColor, 35%)
$worksDarkColor = darken($worksColor, 35%)
$resourcesColor = #579
$resourcesLightColor = lighten(desaturate($resourcesColor, 35%), 30%)
$resourcesDarkColor = darken($resourcesColor, 55%)
$aboutColor = #111 // also nightSkyColor
Move these to the appropriate location (but you’ll have to split the colors
library).
$skyColor = #DDD
$nightSkyColor = #111
// NOT SURE how much of the following is used
$contextColor = desaturate(red, 50%)
$highlightColor = desaturate(#FFA, 20%)
// general
interpolate(n1, n2, t = .5)
min(n1, n2)
n1 < n2 ? n1 : n2
min(n1, n2) + t * abs(n1 - n2)
blend(color1, color2, t = .5)
rgba(
interpolate(red(color1), red(color2), t),
interpolate(green(color1), green(color2), t),
interpolate(blue(color1), blue(color2), t),
interpolate(alpha(color1), alpha(color2)), t)
$contextual
background $contextColor
4 the Shakespeare region
See the works.
5 quotes from Foltz
Using geography to place information creates an analogy between navigation along a path through knowledge and navigation along a path through a place in the real world. This creates an interesting cognitive economy: by reusing a viewer’s geographical knowledge of an area, the organizing principle of the exhibit is known before he even steps inside, and a mental map of it is already available.(47)
The main message. This is the one, central idea that every visitor should learn and take home from the space. It is the one-line “story” that the space tells. It should be able to be stated concisely in one sentence, and every piece of material in the space should support this main message in some way. Every visitor to an exhibit should be able to recall this central idea after leaving.
I love this guy:
Information should be placed in the space should according to an organizing principle, and this principle should be communicated explicitly to the user. It is this crucial property that permits the user to form a conceptual map of the space: a correspon- dence between its spatial organization and the semantics of the information it contains
Seriously, this makes me giddy:
An information space that fulfills these requirements can solve the problem of being lost in hyperspace. The user will always know his location relative to other information in the space and can effectively construct routes to search for the information he needs. The user can also browse through the space in a more undirected manner to look for information of interest, /or take an instructive tour through the space that reveals the depth and breadth of its contents/. [emphasis mine]
I can’t get enough of this:
And, since the space is designed around a principle reflecting its content, his mental map is a conceptual map: a map of the ideas, concepts, and material within the space. Multiple wayfinding episodes will reinforce his conceptual map, improving his knowledge of the space and what it contains.
But note,
Information spaces do not need to be three-dimensional and Euclidian in nature, but should be constructed so that users can apply the navigation skills they use in the physical 20 environment. The basic elements mentioned earlier – landmarks, paths, and maps – will each play an important role as features in these spaces.
The web version is here, but head tags indicate it is derivative of the \TeX version. A PDF version is here.