Unemotional Design: the new Scottish Parliament building at Holyrood

After seeing some photos of it on Alister Black’s blog, I felt inspired to visit the new Scottish Parliamant building at Holyrood, and the four of us trundled down there yesterday morning. It’s a truly extraordinary building. The architecture is lavishly unconventional, and almost every lower-level design feature, from the window frames to the chairs in the public gallery of the debating chamber, look like they could have been plucked straight from an modern art gallery. There isn’t a building like it in the whole of Scotland.

But.

Extraordinary doesn’t necessarily mean good, or appropriate, or worth what we spent on it (about £500 million–some ten times its initial budget).

In his book Emotional Design: Why we love (or hate) everyday things, Don Norman talks about three levels of design: visceral, behavioural, and reflective. Visceral design is all about plugging straight into the emotional centres of our brains. It’s about making things look, sound, and feel so good that their first impression has emotional and instinctive impact. From Emotional Design:

Because visceral design is about initial reactions, it can be studied quite simply by putting people in front of a design and waiting for reactions. In the best of circumstances, the visceral reaction to appearance works so well that people take one look and say, “I want it.” Then they might ask, “What does it do?” And last, “And how much does it cost?” This is the reaction the visceral designer strives for, and it can work.

Behavioural design is about using design to guide people’s behaviour, both consciously and subconsciously. It’s about functionality: making sure that people can use a thing to carry out the tasks it is intended to do. It’s where usability comes into play.

Finally, reflective design is about message, meaning, and perception. It’s the aspect of design that appeals to the intellect rather than the emotions. This can be tied to cultural factors, for example, knowing when a particular outfit will be right for a particular occasion. Or it can be tied to cleverness, for example, by subtly obscuring the purpose of a thing until an “oh!” moment of insight kicks in. Don Norman again:

Whether we wish to admit to it or not, all of us worry about the image we present to others–or, for that matter, about the self-image that we present to ourselves. Do you sometimes avoid a purchase “because it wouldn’t be right” or buy something in order to support a cause you prefer? These are reflective decisions. In fact, even people who claim a complete lack of interest in how they are perceived–dressing in whatever is easiest or most comfortable, refraining from purchasing new items until the ones they are using completely stop working–make statements about themselves and the things they care about. These are all properties of reflective processing.

The biggest mistake the Holyrood Building makes, in my opinion, is that its designed is wholly reflective. When I look at it, I find it beautiful because it is intricate, precise, modern, different, and amazingly clever. Take, for example, the design of the bicycle stands outside the main entrance:

Scottish Parliament bike rack - side view
Scottish Parliament bike rack - front view

From the side, they just look like oddly twisted tubes of steel that you could chain a bike to. It’s only when you line them up and view them from the right height that they themselves resolve into the shape of a bike. Clever!

What I don’t feel when looking at it is, well, anything, really. It’s a purely intellectual appreciation. I don’t feel any kind of national pride stirring in my breast when I see it. There is no sense of majesty, or awe. No feeling that I’m looking at at an edifice with historical stature or permanence. There is no visceral component to it. I don’t think I’ll ever love it.

I think this is partly because of the location of the building: tucked away right down at the foot of the High Street, squeezed in behind a phalanx of offices and apartments. You don’t get anything more than a tantalising glimpse of it until you’re right there. Because all the land around it is built up, you can’t walk back a hundred yards to get a better view. (Or rather, you can, but you have to climb half-way up the Salisbury Crags, the hill that rises to the South in Holyrood Park. There’s no good view at ground level.)

Also, the building has no single front to it. Because it is so architecturally intricate and clever, it presents an interesting and totally unique face to each of a dozen different viewing angles. It has no identifiable silhouette. It has no single feature with souvenir potential. In a way, it feels like a hypercube: a shape that mere 3-dimensional beings are fundamentally unequipped to perceive as a whole.

This is a particular problem in Edinburgh, which is, in visual terms, dominated by the castle at its heart. I know that the parliament building was never intended to rival the castle for grandeur–especially as it’s Scotland’s parliament, not just Edinburgh’s. Still, leaving aside questions of what the money would have been better spent on, I feel that for half a billion pounds we ought to have got something magnificent in return.

Rosenberger Image Replacement

I’ve been playing around with Stewart Rosenberger’s excellent Dynamic Text Replacement technique lately. It’s a simple and elegant technique, and it works beautifully well with TrueType fonts. It gets a little bit more tricky if you want to use PostScript fonts, though. On the ALA discussion, Stewart says that “you could change the PHP script to use PS fonts very easily”. Well….

  • It’s not as simple as replacing the ImageTTFBBox and ImageTTFText calls with their PostScript counterparts ImagePSBBox and ImagePSText. The PS versions take different parmeters in a different order, and they return a different results array. Read the documentation carefully.
  • …and you’ll need to explicitly load the PostScript font before using it, and dispose of it when you’re done.
  • …and once you’ve done all that work, you need to make sure that your web host has compiled PHP with support for Type 1 PostScript fonts, using the --with-t1lib option, because otherwise you’ll get nothing but errors when you try to deploy.

Nuts. Maybe I should have checked that last step first.

If you have access to a copy of Windows NT4 (how quaint!), you can convert a Type 1 font into a TrueType font by dragging it into the Windows\Fonts folder. (NT generates a .ttf font because it doesn’t have native PS support. Later versions of Windows do have native support, and so they don’t do the conversion when you install a PS font.) The quality of the generated TrueType font leaves a lot to be desired, however, and even aside from the licensing issues, I wouldn’t consider it as a source for Dynamic Text Replacement.

So what next? Well, I could rewrite Stewart’s script to use ImageMagick for generating the images. Alternatively, I could try Shaun Inman’s Flash Replacement technique. (I’d prefer to stick with images instead of Flash, though. The text isn’t selectable, and you end up with a bigger download, but images are faster to render, have fewer flickering issues, and fewer cross-browser/standards niggles.) Or I could splash out and buy a TrueType version of the font I want to use. Or…I could just use a font I already have in TrueType format. Such a wealth of choice!

I think I’ll be taking the easy, cheap option.

Update (Thu 8 Sept 2004)

Mike Davidson’s Scalable Inman Flash Replacement technique (sIFR) is looking like a glorious alternative.

Dynamic Text Replacement with PHP and Javascript

Holy . Cow.

Most sites that replace text with images do so using hand-made images, which isn’t so terrible when there are a set number of headings, but it quickly becomes unmanageable on a site that is updated several times per day. However the replacement is performed, each image needs to be bound to the text it is replacing. That binding usually manifests itself as an <img> tag, an embedded style sheet, or a custom id attribute. And over time, through layout changes and redesigns, that binding needs to be managed by someone.

We can forget all that nonsense. No more <img> or <span> tags, no more id attributes or wasted time in Photoshop, and no more messy CSS hacks. Using JavaScript and PHP, we can generate accessible image-headings using any font we like. And we don’t have to change the structure of our HTML or CSS at all.

And again: Holy. Cow.

Watch as the download size for all your favourite design blogs increases by approximately 15% over the next couple of weeks as they all start using custom fonts for their entry titles.

For that matter, I’ve been dying to use Papyrus here on Sunpig for some time now…

Hugo Awards 2003

Around this time each year, the World Science Fiction Convention (“Worldcon”) takes place. It touches down in a different city each year. The last one we attended was Bucconneer, in Baltimore in 1998. Before then, we went to Intersection in Glasgow in 1995, and I attended ConFiction in Den Haag in 1990. This year, the event was called Torcon 3, and it took place in Toronto. (We didn’t go. We were visting friends and food in the South of The Netherlands instead.)

Worldcon is also where the Hugo Awards are announced. The Hugos are the “audience awards” of the science fiction world. Publishers like to tout their Hugo-winning authors. People who have not heard of an author might pick up a book that has “winner of the Hugo award” splattered over its cover. For people who didn’t attend the conference itself, the awards are one of the biggest pieces of news to emerge from it. You’d think that they’d maybe put the results up on the front page of their web site, wouldn’t you?

Okay, say they didn’t put up the results on the front page. Say the results are stuck on a page somewhere deeper in the site. Surely they’d have a link to it right on the home page! Surely?

Hello–2003 calling Torcon! Anyone home? Anyone heard of content management systems? Blogs? Personal publishing tools?

The SF community has embraced fanzines and mini-publishing totally. SF fans love getting together for cons. We love hanging out on the Internet in chat rooms, on Usenet, IRC and bulletin boards. Given the sheer volume of geeks and netheads involved in SF fandom, how is it possible for Worldcon web sites to be so uniformly rubbish?

I complained about this last year as well, and nothing has changed in the intervening period:

  • 2002: ConJosé. (Okay, so they did eventually put a link to the Hugos on their front page.)
  • 2003: Torcon 3. (Framesets…argh.)
  • 2004: Noreascon 4.
  • 2005: Interaction. (Ooh, pebble texture background…very 1997!)

At least Noreascon 4 has a blog. But do you notice any difference between the main site and the blog? Something to do with clarity of design, readability, timeliness of information? Is there some kind of WSFS rule that says you’re not allowed to use a graphic designer to put together a set of page templates? Some bizarre bylaw that makes information architecture and user testing a punishable offense?

The simple, old-fashioned HTML isn’t about accessibility, either, as the frameset design for Torcon 3 does a great job of preventing useful navigation for anyone without a frames-capable browser.

Yet it’s perfectly possible for sites to be accessible, well-structured, and good-looking–all at the same time! Good visual design isn’t child’s play, but it’s not rocket science. Usability testing can be done simply and quickly. Simplicity of design can be combined with depth and breadth of information and interaction.

It’s not too much to ask, is it?

(Oh, and about the actual results for the 2003 Hugos: Robert J. Sawyer’s Hominids won the award for best novel. I haven’t read it yet, but some of the comments about it make me ambivalent about starting.)

Rounded corners with CSS

I can’t remember where I found the link to this, so please forgive the lack of attribution. Bullet-proof rounded corners gives an excellent guide to making cross-browser compatible rounded corners using just CSS markup instead of old-fashioned tables.

I’m planning a couple of design changes to this blog, and rounded corners may well make an appearance in the new version. Certainly they’re going to appear in the next version of the AmphetaFrames templates. (Which are being worked on, albeit slowly and irregularly.)