

Entries tagged with ‘user experience’


  1. Early Reflections on Google Chrome

    Google Chrome screenshots







    The tab is king




    Oi, JavaScript, stop!


    Confined pop-ups


    Default tab page


    Site-specific Chrome






    One thing is…



  2. Collaboration at OSCON ’08

    OSCON 2008







  3. The Paragraph in Web Typography & Design

    Paragraphs are punctuation, the punctuation of ideas. After selecting a typeface, choosing the right paragraph style is one of the cornerstones of good typography. This is a brief inquiry into paragraph style for the Web.

    To collect my thoughts I put together a rough page of examples. I was interested in openings and texture more than font style, so they all share the same basic copy, typeface, size, and leading (line height). It was mostly for my own reference and will change over time, but you’re welcome to take a peek:

    Typographers use layout techniques like single line boundaries, indents, outdents and versals (drop caps etc.) to punctuate paragraphs in a stream of discourse. Block paragraphs are common to the Web, indented paragraphs are common to print. Browser vendors gave us a default block style of flush left, ragged right with a single line boundary, but there are many variants we can pick from depending on the context.

    In any project, the text itself will have its own tone, rhythm and meaning. It’s our job to provide it with a stage on which to sing. Typography serves the spirit of the text, bringing it before an audience, and then quietly fading into the background as the reader delves into the meaning. As Ellen Lupton says in Thinking with Type:

    Typography is a tool for doing things with: shaping content, giving language a physical body, enabling the social flow of messages.

    In the Web era, designers create narrative spaces made up of text, images, video, etc. We add context and legibility to those formats. We also create spaces where people express themselves. We work with enacted narratives where the content is already available, and emergent narratives to be created over time. Instead of just styling symbols, we’re styling bytes in fluid narrative spaces. We’re bytographers; literally, the writers of bytes, not just glyphs. Yet still, at the heart of this explosion in publishing, is the humble and beautiful paragraph.

    From paragraphos to paragraph

    Punctuation is a word derived from the Latin punctus, to point. Punctus is also the precursor of the period, or full stop. Punctuation was called pointing in English. It was used to indicate pauses or breaths until the 16th century. Punctuation as syntax didn’t emerge until the Renaissance.

    A paragraph was historically a punctuation mark. According to the Online Etymology Dictionary, the word paragraph has roots in the old French word paragrafe from modern Latin paragraphus or “sign for start of a new section of discourse”. That in turn is based on the Ancient Greek word paragraphos, a “short stroke in the margin marking a break in sense". The great reference of the 20th century, the Encyclopædia Britannica says:


    This fragment of a parchment scroll shows a paragraphos (a) indicating the line where the new paragraph starts with a break in the text (b).

    Source: The ‘Textual Mechanics’ of Early Jewish LXX/OG Papyri and Fragments by Robert A. Kraft (University of Pennsylvania), The Manuscript Fragments, s.5: parchment roll, ca 100 bce; Rockefeller Museum, Jerusalem.

    Parchment roll fragment

    Medieval punctuation employed a paragraphus—also known as a “‘gallows-pole’ or upper-case gamma, or § (later ¶)”— to separate ideas in a running discourse.

    White space did not punctuate paragraphs until the 17th century. This was the era of Ben Jonson’s English Grammar, where he recommended the use of syntactic punctuation. Around that time, the practise of indenting the first line of a paragraph became part of our standard syntax, along with the use of capital letters for the start of a sentence, and the use of a space between words.

    Technology & cost influencing style

    Materials and technology have always influenced calligraphy and typography. Papyrus was used from the 4th century BC. It was brittle, so papyrus was rolled instead of folded. Parchment codices became more popular in the 5th century AD. The finest parchment was vellum, made from the white skin of a calf. Next came paper: Invented in China in the 1st century, the first latin text was written on paper around the 10th century. By the mid-15th century it was becoming dominant. Johannes Gutenberg printed only 45 copies of his Forty-two line Bible on vellum, using paper for the remaining 135 copies because it was cheaper.

    During the industrial revolution in the 19th century, cheaper wood-based paper emerged along with steam-driven paper making machines. Intuition tells me that also influenced typography. By the turn of the 20th century paper was cheaper than ever before. The cost of inserting a single line of white space between paragraphs—the most common style today—would have reduced. The emergence of the consumer society and rise of advertising also encouraged a change in typographic style. “Fat face” display type was created for bills and advertisements; hyperbole became a style of visual layout. Before the 19th century, the insertion of a full line of white space between paragraphs would have surely been decadent. Perhaps that’s how it became commonplace. However, this is speculation; I cannot find reference to how it became prevalent, so would welcome further evidence.

    The single line boundary is the most common paragraph delimiter used on the Web today and the most common browser default style. Generally, the indent is still the most prevalent paragraph delimiter in printed books and publications. In some ways, the block and indent styles exemplify the divide between Web and print. Printing cost is still a consideration looking at some of the mistreated text in certain paperback books, but printing on a screen effectively removes cost as a factor. Usability is the only currency by which web typography is measured. That’s what we’ll explore next.

    Paragraphs in a narrative space

    The narrative space of a web site is where a story develops as a person navigates the site. This should not be confused with narrative as a text-type. However, in some cases, it does share some characteristics like a chronological order. For example, a blog is a narrative, no matter how broken. It has a chronological order (albeit reverse). Even though a blog has multiple entry points, it can still contain a chronological story. The chapters in that story (entries) may be any one or more of the traditional text-types {narrative; descriptive; argumentative; expository;} but they all form the narrative space of the site.

    The narrative space within a web site is made up of three components: content, layout (style and context), and information architecture.

    Further reading:

    1. Mark Bernstien writing in his mis-spent youth about narrative on A List Apart

    Web design narrative can be compared to architectural narrative: The design of an environmental experience from multiple viewpoints in time and space. Visitors experience a web site in much the same way.

    Web design narrative can also be compared to narrative in game design: both create the narrative space via a screen.

    In both comparisons, the experience of the narrative space is more than just style and technology. In fact, style and technology are tools to create the user experience. The experience of moving through a narrative space on the Web is complex. We understand that people may arrive in that space from any direction and context (referrer). They may be confronted when they arrive with any number of artifacts that convey narrative information (navigation, main content, calls to action, etc.). Any paragraph style must consider context as well as the meaning of the text.

    Thinking about paragraph style

    The way we approach the design of a narrative space on the Web is manifold. In most cases the content is not already available. If it is available, it may be subject to revision as part of a redesign process. The vision of the brand and the purpose of the site can seem clear, but may not be upon further investigation. Sometimes, our job as designers is to help refine both the vision and content. It’s during that stage that we explore layout and get a clue to the context in which the typography will live. We call it experience design. Only after that do we get down to experimenting with style.

    The context, meaning and tone of web copy should always determine typographic style. Reading the text in full—or at least understanding what the text might be before styling it—is a pre-requisite. A common mistake is to allow the design to dominate the text: Design for design’s sake, or even worse, fashion’s sake. The text is made subservient to the canvas that the designer wished to paint on the screen. This is exemplified by the proliferation of fun, but ultimately harmful, web design galleries. Once a user muscles past the gag reflex, or stops admiring the amazing graphical decoration, they can often realise the design is in their way. The content is obscured. The narrative space becomes broken into fragments, like pieces of torn parchment linked tenuously together by calls to action, or a nested index of links called a menu.


    One of the principles of durable typography is always legibility; another is something more than legibility: some earned or unearned interest that gives its living energy to the page. It takes various forms and goes by various names, including serenity, liveliness, laughter, grace and joy.

    When trying to energise paragraph text, meaning and context are the most important factors to consider. Meaning flows from the author. They are trying to share a message, a thought, an idea. Context belongs to the audience. They are trying to understand, extract meaning and find relevance. They’re doing so in the context of their own requirements, but also in the context of the page layout and the wider architecture of the site. A refined sense of empathy will help you find the right form for your paragraphs, if user testing cannot be part of your process.

    Choosing a paragraph style

    There are no hard and fast rules for paragraph style for the Web. Choosing a style depends on all the factors we’ve previously discussed. The 12 example styles I threw together are just a starting point and all paragraph styles need testing in context.

    You may find this place holder markup useful when testing styles.

    All browsers have good support for basic paragraph styles. However, complex treatments of versals and openings can be problematic. There are still browsers with immature standards support when it comes to using techniques like pseudo elements and adjacent sibling selectors. Our ability to specify fonts for body copy is also limited, and inconsistent rendering across platform and browser persistently frustrates creativity and precision. There’s still a lot to work with, though. Here are a few examples, some new and some that are aging beautifully:


      Rob Weychert used indents to wonderful effect in his Across America diary with text set flush left and ragged right. He also uses a deft combination of indents and small-capped openings in his blog posts. Both are a pristine example of using indents to compliment his particular style of writing. Truly a great example of bringing a love of print to the Web.


      Ed Finkler mixes a font stack of Palatino and Palatino Linotype with boundaries that perfectly suit his content. He publishes a mixture of material that’s often technical, so boundaries help delineate the technical writing for skim reading, while the larger size and typeface adds great texture to his site. For the technical material I might have defined sub-heads a little more, but his choice of paragraph style is instinctively good.


      Andy Rutledge treats paragraphs with love. On his home page, extracts from the three latest posts descend in a beautiful hierarchy of size and tone to indicate the chronology. Individual posts also cascade gracefully. Boundried blocks define his thoughts with great clarity. His material is often instructive, so this style perfectly suits the content.


      Cameron Moll indents paragraphs and uses boundaries. This could offend pedants in print but I find it wonderfully pleasing on the Web. His material is often educational so the division of points by boundaries helps legibility. However, one of the main reasons this style works so well is the font size: it could seem small but the indent with a boundary allows the text to breathe and adds great poise and texture.

    A note on indents

    If you choose to use an indent, stylistic tradition suggests that there should be no indent on a paragraph that follows a head or sub head. Tradition also suggests there should be no indent following elements like lists and blockquotes. You can achieve this without extraneous markup using adjacent sibling selectors. For example, if you have already set an indent on your paragraphs:

    p { text-indent: 2.5em;  }

    Then, to stop any paragraphs following a heading of rank 1–3 having an indent you can set:

    h1 + p, h2 + p, h3 + p { text-indent: 0; }

    However, I would caveat that with only if the blockquotes and indents are set flush left with hanging punctuation. Robert Bringhurst suggests: “If your paragraph indent is modest, you may for consistency’s sake want to use the same indent for quotations.” I agree, and I think the same can apply to lists on the Web. In both cases, a boundary is required to separate the list or blockquote from the surrounding paragraphs.

    A note on blocks

    If you choose a block style with no indent, but with boundaries between paragraphs, tradition suggests that there should be no indent on either lists or blockquotes. As you may have noticed from reading this article, I don’t always agree, especially on the Web. It depends on the content and the balance of elements. In certain instances, lists and blockquotes might be used to punctuate the running text, which can help people skim read on the Web.

    Web != print

    People experience the Web differently to print. The Web is not linear; in print people most often read sequentially, from front to back. They may flip, looking for something that catches their eye. After an initial look, they may skip back to interesting items using a table of contents or an index. On the Web this is reversed. Skipping to a certain page via the menu is habitual. This has been encouraged by bad design and web copy writing where inline links in the running text are sparse, if available at all.

    Skim reading is the norm on the Web. It may well even be the case that skimming is normal everywhere, it’s only when we become absorbed that we digest the meaning of the text linearly. It’s a way of filtering the noise in a page to try and get to the content of interest. However, this has become essential because of bad design; pages have been confused with intrusive advertisements, overbearing calls to action, and layouts that don’t serve legibility. It has forced people to skim, whether they want to or not. Better designers refuse such harmful techniques. Getting layout and content right in prototyping is essential.

    Careful choice of paragraph style (and other body text forms) can accommodate all of the differences in audience behavior and expectations. The optimal paragraph style you choose in summary pages may not be the optimal one for dense, detailed pages. A subtle change may well be necessary in different sections of a site. Choose judiciously, but most of all, designers should know why they are choosing a particular form; “because it looks good” is not a good reason on its own; “because it feels good” may well be.


  4. An Ephemeral Site: Denna Jones


    Screenshot of


    Introducing Denna Jones



    A Web 2.0 problem


    Web services, say hi to


    • Ma.gnolia is used for bookmarks.
    • Upcoming manages events.
    • Feedburner manages all feeds.
    • Google is used for site search.





    Visual design, typography & layout



    Information verbitecture


    HTML, JavaScript & microformats




    Parting shots


    “The designers of this website are happiness merchants.”

    Thanks Denna.


  5. A Site for Sore Eyes: OmniTI


    OmniTI index


    OmniTI Sketch mark

    Metaphors for the invisible








    Theme, copy writing & content



    Tiered detail








    Typography & palette


    Italic Baskerville ampersands in the byline



    Layout, functionality & accessible Ajax


    OmniTI contact Ajax



    Experience & narrative




  6. Web Design Craft & Boxwood Combs


    Tsuge gushi or boxwood comb

    Boxwood comb via















  7. Smoothing out the Creases in Web Fonts

    Stickman smoothing out the contour in a ligature.

    Designers often choose one of the core Web fonts for body text because they are widely available, but like all typefaces, they render differently on different operating systems.

    Apple OSX and Microsoft Windows have different ways of rasterising fonts and different text rendering engines. Apple’s text rendering engine is Apple Type Services for Unicode Imaging (ATSUI .) Microsoft’s text rendering engine is Uniscribe .

    Font Rendering Methods in OSX & Windows

    OSX tries to respect the anatomy of the type as far as it can using floating–point positioning — a combination of anti–aliasing techniques and sub–pixel rendering that does not lock glyphs to the pixel grid.

    Windows uses two methods depending on the version of the operating system, (Standard and ClearType.) Standard uses a combination of hinting (grid fixing) and anti–aliasing. ClearType also uses sub–pixel rendering — using LCD display technology to achieve better anti–aliasing. With both of them, it prefers to lock the letters to the pixel grid.

    Comparing fonts at 14px and 800% maginifcation in OSX and Vista.

    Fig. 1: Firefox 2 on OSX (left) and IE7 on Vista (right) font rendering at 800% magnification.

    ClearType is enabled by default in Windows Vista. In 2001, Windows XP had ClearType included but enabled Standard mode by default. Changing to ClearType requires navigating through the Control Panel to find the Appearance settings, then finding a button marked “Effects” to access the options. It’s the Windows equivalent of trying to change the accessibility options in browsers: Even if you know they exists, they’re a pain to find.

    The legibility of each technique is subjective, and also depends on factors like ambient light, resolution, viewing distance, visual impairment, screen type and colour contrast.

    Dave Shea prefers Windows’ ClearType method, as does Jeff Atwood and much of his commentators. For judiciously sized body text I mostly prefer the Apple method, yet previously in brand work I’ve also locked the letters to the pixel grid to get them as sharp as I’d like. Again, it’s subjective: How I see the individual font appear at a particular size and colour is the deciding factor.

    Core Web Fonts

    In August, 2007 Apple and Microsoft renewed the license for the core Web fonts. It was anticipated, but still, there was a collective sigh of relief that the fonts would still be common to all major operating systems. Matthew Carter, the designer of Georgia and Verdana said:

    “By agreeing to make these fonts available cross–platform Microsoft and Apple will support their customers, and confirm their respect for the standards of type–design.”

    Using the default Standard mode in XP, text is rendered with minimal (practically non–existant) anti–aliasing up to a certain size. The size at which text starts to become smoothly anti–aliased seems arbitrary. Good smoothing occurs at various sizes for each variant of each typeface. XP is still the most common platform used by our audience today, and this is how it displays Georgia in IE6:

    IE6 on windwos XP font rendering

    Fig. 2: Screenshot of Georgia displayed in IE6 on Windows XP clearly showing smooth anti–alias starting at 17px.

    For your bookmarks: The Web fonts test suite displays text from all the fonts in a range from 11px to 21px so you can compare and contrast yourself.

    Smooth Header Font Size for Windows XP

    The Web Fonts test suite was used to produce the following table that compares the core Web fonts, and the size in pixels at which good anti–alias starts to occur in XP by default. (Every browser except Safari.) Only whole pixel font sizes were used.

    Typeface Pixel size for smooth anti–aliasing
    Regular Bold Italic Bold Italic Small Caps
    Andale Mono* 18 11 18 18 21
    Arial 18 11 18 12 21
    Arial Black 17 17 17 17 20
    Comic Sans MS 16 11 16 11 18
    Courier New - 16 - 17 -
    Georgia 17 17 17 17 20
    Impact - - - - -
    Times New Roman 18 14 21 18 21
    Trebuchet MS 17 12 17 12 20
    Verdana 17 17 17 17 20

    * Andale Mono does not ship with Windows Vista.

    Noticeably, Impact is never smoothly anti–aliased, and Courier New only when embolded (perish the thought.) The font being rendered with smooth anti–aliasing at the lowest size is Comic Sans; a fact that might produce a wry smile from its creator, Vincent Connare, who never intended Comic Sans to be used outside of the speech bubbles in Microsoft Bob.

    Designers can choose to ignore the smooth anti–aliasing point in XP Standard mode altogether. My view is that headers look better when smoothed as much as possible, so a careful choice of weight for the font is important. Now there’s an added complication. ClearType in Vista seems worse in some circumstances to me than the Standard method, but that is a post for another day.

    Future Font

    Apple’s patent application for a system and method for displaying text—invented by Mark Zimmer—from June 14th, 2007 may make interesting reading for some. It includes references to grid fitting / hinting, specifically a method that, “increases contrast of tops of lowercase characters of the font family and preserves thickness at tops of stems of lowercase characters.”

    In the future, the debate around platform specific font rendering may all be moot, as displays move to ever higher numbers of dots per inch and pixels per inch (160 as per the iPhone.) For now, how a given fonts behaves on different platforms is still crucial to user experience. I’ll still be keeping an eye on XP for a while yet, and I have a funny feeling I’ll be getting good use out of the table for a while, too.

    1. Resources and further reading:
      1. Web fonts test suite
      2. Apple Type Services for Unicode Imaging (ATSUI)
      3. Microsoft Uniscribe
      4. Apple TrueType Reference Manual
      5. Microsoft TrueType Reference Manual
      6. Wikipedia: Font Rasterization
      7. Wikipedia: Anti–aliasing
      8. Wikipedia: Font hinting / grid fitting
      9. Wikipedia: Sub–pixel rending
      10. Microsoft ClearType
      11. ClearType tuner for XP


  8. Design vs Evolution

    I just watched a fascinating TED presentation on self–aware robots from Hod Lipson of Cornell University:

    It was inspiring to watch the spider–like bot trying to understand its own form and how to move forward. It was fascinating to see it not walk like a spider as we might have hoped for. Instead, it found a completely different way of propelling itself.

    Observing users in action within a user centred design (UCD) approach can also be surprising. They often do things we might not expect or be able to predict. As designers, we use our intuition to try and create empathetic experiences that transcend our own predilections. Jared Spool alluded to this recently at dConstruct when he described speaking to members of AIGA. He described how he talked about UCD and experience design to the audience who apparently promptly turned around and said, “that’s what we do!”

    In the article about narrative, I was thinking about developer versus user–generated narratives. The best social networks are platforms for expression. Users generate their own stories within the framework. To do this there is often a symbiotic relationship between the stage (the site) and the players (the users and audience.) The stage is literally set by the players and audience. They often find unique and interesting ways of using the stage to tell their stories. They create and pave new cowpaths which are then expanded upon by the developers. So the narrative being designed by the developers is only one of countless plots the users can follow.

    That’s what the robot was doing. With a reward at the end, it created its own story in order to understand itself and move forward. As Hod Lipson suggests, evolution rather than design may be a much more effective way of allowing robots to discover themselves. The same could apply to website users. Should we design experiences, or help them evolve? If it’s a balance between the two, how do we walk the line?

    The other fascinating portion of the presentation is what happens when rewards are removed. Instead of trying to achieve a task, the robots in the primordial soup of parts and power start to self–replicate. Self–replication becomes the task and the reward; amazingly like us, or any life form.

    You might compare that to certain social networks that exist without a goal as such, but to merely connect people. Users define their own rewards and tasks. Create their own narrative. Think about friends lists or popularity on Facebook. In a way that could also be considered self–replication, but of ideas and influence rather than genes. Conversely, on sites like Cybersocietes—a social networking popularity game where an algorithm calculates popularity based on activity—many users choose not to play a part in the designed narrative of the game. They choose instead to get satisfaction in other ways. They create their own narratives that still revolve around influence; not with the false measure of game points though, but in more subtle ways such as participation in public forums or private groups.

    Perhaps our job is not to design experiences in all cases, but to enable the audience to explore, play, and learn their way to a rewarding experience. Along the way they teach us a thing or two, and we all move forward together. Thanks to the Cornell Computational Synthesis Lab we can also let robots evolve on our computers as a screensaver (unfortunately Windows only) but fellow Mac users can evolve sheep instead.


  9. Copywriting, Experience Design, Daleks & Julio

    Feedburner heading: My feeds are with Julio down by the school yard

    Reading the welcome message from Feedburner made me laugh. Logging in was a treat. Can you name the song and artist? Googling is cheating by the way! How I knew it automatically, I will never know. It was published before I was born.

    Feedburner just endeared themselves to me by making my experience better. Even if my huge subscriber count goes from six to one, then back to six again the following day, I’ll be predisposed to cut them a little more slack, just for making me smile.

    Flickr resurrected good copywriting with the multiligual and colloquial welcome messages. After coming out of beta Flickr also loves me (and you). Ahoy me hearties!

    Flickr: Ahoy jontangerine welcome message

    Dopplr has taken forth the torch and does its own great things with copy. Simple but effective:

    Dopplr copy: Welcome, Jon. Your home city is Bristol. You can invite people to Dopplr to see your trips or look for travellers you already know.

    Great copywriting. Or, more accurately, great copywriting as part of great experience design.

    Copywriting as Part of the Product

    Copywriting is usually associated with advertising: The selling or promoting of a particular product, service, concept or person. Hold the dogma, though. The Web hasn’t made that untrue, but it has extended the definition slightly. Copywriting is integral to user experience. It’s part of the contract between the user and the site. The copy is part of the service, not just a means to sell the service.

    Darlek says: Log in sux sess full.

    Dalek image © Owen BillCliffe via Flickr.

    Once upon a time in a land too close for comfort, developers often did copywriting. They were often great developers but more often terrible copywriters. Everything looked like DOS or Terminal messages: Dry, terse and with the personality of a Dalek. Not any more, though. As designers, we should have an active hand in it, and if the project allows, work with a good copywriter. At Grow, we regularly get pedantic over language because the copy will effect the way we think and see. If the copywriter can move away from the trite self–promotion of corporate sites, or the stale techno–shorthand of developers, we’ll hopefully all think good thoughts and have our eyes delighted by what we see.

    Experience Design and Narratives

    Experiences, narratives, stories; simplistically, one and the same. Denna Jones is Designer in Residence at Central St Martin’s College of Art, and consultant for architects. When she introduced me to the phrase, “design narrative” over a Peking duck salad at Severn Shed in Bristol, we shared a smile together, mostly due to the awkwardness of the term. However, narratives are exactly what social websites are all about. We share, create and experience them through the medium of the site and that’s exactly what copywriting helps to encourage.

    The copy adds to the narrative just as much as the typography and graphic elements do. In the same way, the copy can also add to the personality of the brand. Brand personality is a carefully cultured message. Brands have characters, and as I discussed in a previous article, the house style is integral to it. The question is whether the site or brand is a Mary or a maverick. As Mark Bernstein said in his A List Apart article on narrative:

    The point is that the reader’s journey through our site is a narrative experience. Our job is to make the narrative satisfying.

    One way of looking at it, is to see the narrative we design as just one amongst many. Users will create stories and experiences for themselves. The context may also be created by the audience, too, and then reinterpreted by others as part of their own experience of the site. That leaves the interface, the framework or stage upon which the narratives are played out. That’s where I love to work. Web designer? No. Art director? Maybe. Stage hand? Definitely! On that note I think I’ll go back to watching my feed play with Julio in the school yard. Paul Simon has a lot to answer for.