I use the <aside> tag a lot on this blog. It’s a handy new tag in HTML5 for sidebars and other accompanying content, which is fantastic, semantically. I display my <aside>s next to the text and use them as marginalia.
The problem comes in when I try to display them. I want the aside to appear to the right of the paragraph it’s talking about, so people who are reading can glance over and see I have more to say on the topic. I use the following code to do this:
Fits nicely into my golden ratio grid. Everything is happy.
Except, for this to line up properly, I have to put my aside before the paragraph it’s referencing. Otherwise, the floated aside will render starting on the bottom edge the paragraph, instead of the top—as you’d expect if you know CSS. But, to someone reading in the Tumblr feed, or in an RSS reader, it’s out of place and jarring.
Is the problem RSS readers and Tumblr, or is there a better solution in HTML5?
I think I bought this on my other computer! So I should just be able to download it again, right? Hmmm…
That says it’s $9.99! But I thought I already bought it. Maybe not? Or maybe it just always lists the price? I’ll just click.
*click*
I’m sure I bought it.
That says “your credit card will be charged for this purchase” and the big button says “Buy.” I guess… I didn’t buy it? Oh well. I do want to play…
*click*
I knew I bought it!
The iPhone’s App Store does the same thing.
I wonder how many people give up, rather than re-downloading an app they’ve already purchased, because they’ve been lead to believe they will be charged for it again.
I can’t quite shake this concept of avoiding directness and simplicity in design to arrive at a better product—counterintuitive as that ought to be. Along comes Barry Schwartz (who I still regret never taking a class from) with another angle on the issue.
Schwartz talks about societal reliance on rules and incentives “to spare us from thinking.” Overreliance on rules and incentives prevents disaster—but they do so by ensuring mediocrity. Incentives shape the way we think about questions, and encourage us to think in particular ways—usually ways that are self-interested.
Using incentives to shape behavior is a key area of thought and research in politics and economics, and also in design. We’re instructed to make our interfaces as clear and obvious and navigable as possible, because that’s what the user wants—as Steve Krug puts it, the user is screaming It’s the title of Krug’s book. “Don’t make me think!”
That doesn’t seem right to me. Surely we do want our users to think. We don’t (usually) want them to think about the interface—rather, we want them to think about what we’re selling (or what we’re saying). Is the “don’t make me think” model of design promoting a culture of users that gloss websites rather than engage with them?
We already know that users See, e.g., “How Little Do Users Read?”skim rather than engage content on the web, they gloss text instead of reading it, they bounce off to other pages quickly, following hyperlinks, advertisements, and any of the other distractions our designs (not to mention the browsers they sit in) provide. I’ve always thought (and I think it’s a common perception) that the best way to combat the myriad distractions of the modern web is by keeping the design from getting in the way of the content.
Maybe, instead, we should be placing the design squarely in the way of the content. Rather than simplifying the experience, we should make it more involved, drawing the user in through more complex interfaces. Such an interface must work not by staying out of the user’s way, but by engaging the user in a way that delights and fascinates without annoying or frustrating.
Aarron Walter discusses one way of approaching this with his talks on Emotional Interface Design—going beyond mere usability to create interfaces that are playful and fun. It’s not the only way. It may be as simple as For example, Thinking For A Living. breaking the flow of the text, or it may require more complicated arrangements.
An interface that gets out of the way of its user is not a bad interface. But let’s agree on on this: a design that’s so usable that its users are free to ignore the content it’s presenting, though not a disaster, is still a failure of design. Let’s make our users think.
I’d say to avoid having the same person coding the project design the project, because they’ll compromise the design to make it easier to develop… unless they’re a saint. I was certainly never a saint when I had to wear both hats. If you can’t avoid that, avoid thinking about the implementation while you design. Imagine somebody else is doing all the hard work and it’s your job to make the user experience as wonderful as possible.
I’m no saint, but I am exactly the opposite. When I know someone else will have to do the code up the hairy bits, I make the interface simpler because I often don’t trust they’ll get it right. When I’m doing the coding, I design something that pushes my development skill to the absolute limit. After all, I know what I can do and I’m only inconveniencing myself. Where do you fall?
This is more of a stream-of-consciousness musing than it is a considered post. I’m giving a talk on typography next week and this is what I’ve been thinking about.
Here’s one way to think about it: Typography is about relationships.
There’s two sorts of relationships we’re talking about here: internal relationships and external relationships. Internal relationships connect different parts of your content to one another; external relationships establish your content within a larger context.
Before I go any further, I should touch on the other leg of typography: making your text legible. Understanding the basic rules that define how to set a measure, choose sufficient leading, and the like are also part of typography, but these are the most fundamental rules, engrained in us by the literate culture we’ve grown up in. These rules are mutable, but over decades and centuries. Generally, they can be thought of as constant. Think of them as proper spelling.
Internal Relationships
The next level of typography is like grammar: indicating how different parts of the content relate to one another. There’s a wide array of ways to indicate relationships (this list is probably not exhaustive):
size
weight
style (e.g. italic)
color
typeface
position (i.e. negative space)
capitalization
Depending on your medium and the nature of what you’re doing, you may not have all of these options open to you—but you’re virtually guaranteed to have at least a few, even if you’re using a typewriter.
There are conventions at work here, too, but they tend to be more flexible than those governing basic legibility. Larger text is more important than smaller text. Bold text denotes emphasis. All capitals are more important than mixed case. Italics denote emphasis, or asides, or internal monologue, or… well, italics are used all over the place. A fully indented paragraph is a block quote. (Bringhurst’s third chapter focuses on these conventions.)
The exact way these relationships play out in the text is up to the typographer, and she should choose with respect for (but not necessarily strict obedience to) these conventions. This is especially true on the web, where new relationships between content proliferate.
This is (I think) what Cameron Moll refers to when he talks about “text as user interface”: well-set text guides a user through the content gracefully, using typographic cues to indicate how different parts of the text relate to one another. (A standard telephone book is a great example of this. A typical page uses only three weights and simple indentation to make a dense table so clear it requires no legend or further explanation.)
External Relationships
Typography also places text within a larger context. If legibility is spelling and internal relationships are grammar, the external relationships are a writing style. A typographer establishes context by adopting (or rejecting) the conventions of other works, styles, or eras. This is where font selection comes into play, but it also informs the ways in which you establish your hierarchies and internal relationships, and perhaps even what you consider legible.
In its most basic form, context manifests as a respect for conventions of the past: a Renaissance text will not use italic for emphasis (or bold text at all); a modernist one will adhere to a strict, modular grid; a contemporary one may deploy a wide diversity of styles from a massive type superfamily.
Typefaces carry their own message, and so do the various styles a typographer may choose and the way that she deploys them. Generous whitespace may bring a serene austerity to a text while Garamond confers upon it a stately grace; a ragged right may bring a lively, dynamic feel to a page but broken baselines add an uncomfortable tension.
This level is typography at its most artistic and subjective, and it’s an opportunity for the design to reflect and reinforce the feel of the text. It’s a crucially important part of the craft—typography without style is filing—but it’s nothing without the other two.
Typography is first and foremost about relationships, so it’s no surprise that typographers named anomalies after the abandoned and the isolated. They are dramatic terms: who would want to make a widows of a line or orphan a word?
A widowed line is one left to fend for itself, independent of the rest of its paragraph that hangs behind on the previous page. The orphaned word dangles precariously off the tail of a paragraph, set on a line of its own with only a period to defend it from the void extending off to the edge of the paper. Both are to be studiously avoided.
Of course, on the web, typographers have given up: the variability of devices and screens and the gross imperfections of our tools mean that controlling such things as where the end of a paragraph might lie is well out of the question. In print, the designer carefully eliminates imperfections with minute adjustments in tracking, subtle shifts in the size or placement of text on the page, or slight tweaks to the margins—all aimed at eliminating larger distractions by introducing smaller ones.
This sort of attention is beyond anomalous on the web, and not just because of the imprecision of CSS and HTML. I think the very idea is antithetical. There are not enough designers in the world to look after the widows and orphans of the web (much less the myriad other type crimes that occur here every day). The nature of the web, and of tools like this one (tumblr) treat text as an end in and of itself, and design as a mere shell in which to drop it. We design generically.
How different things were a century ago, when movable type was still common, and the most efficient means of publishing meant a small phalanx of men arranging a legion of sorts (thin metal bars each bearing a letter) into a page of text. Every letter was selected and placed and spaced individually. The idea of laboring over the spacing of individual letters wasn’t painstaking, it was necessary.
There’s something terribly appealing to me about spending that much time on mere text. It’s part of why I’ve revamped my website to demand such attention. If people put as much care today into what they printed as movable type required, perhaps we’d find that, though we said less, we had more to say.
