The best design journal... ever??

CSS and AJAX and Web 2.0 oh my

Monday, May 08, 2006

Bike boulevards: Ep 2

Most of the bicycle boulevards don't have special features, like I mentioned, but some of them do have some traffic calming measures. Milvia, between Cedar and University, is notable for its design to slow down traffic. It's distinctive for its curvy design:

I like this idea a lot, because a narrower street with a couple slight bends really provides an impetus to slow down. Constrained by the curbs and the bike lanes, drivers usually take it a little easier on this road, which is a pretty sensible thing for a residential street running by an elementary school. Bikers are subject to the same curves, of course, but aren't affected as much because bikes aren't usually screaming down the road anyway. (Actually, the city claims the bike lanes are actually "painted shoulders", but no one cares.)

I'm less enthusiastic about the speed humps on this road. They're sort of effective, but a little observation reveals that most drivers slow way down for them and then speed up again, so the bumps seem to afford inefficient driving that doesn't really make the road so much slower. They're also pretty ugly, and seem like a brute-force solution to a problem that could be solved more elegantly.

The final sort of obstacle is a total barrier to motor traffic that lets bikes sail through. This design certainly leads to less traffic, and it seems psychologically effective as well, in that I've never seen a car go around the barriers to get through. The overall effect is that the residential roads with these planters are ineffective as thoroughfares – through traffic is diverted to the main roads like Shattuck. It's convenient for me, at least.

Bike boulevards

In a gesture to cyclists, Berkeley has designated a bunch of streets as bicycle boulevards. The roads are mostly noted for having signs and markings everywhere so you know it's a bike boulevard, and don't you forget it. Seriously, there are a whole lot of reminders – purple street signs, purple "Bicycle Boulevard" signs, purple direction signs, and notices on the ground, perhaps to remind cyclists that they may become roadkill at any time.

The planners have generally tried to put these routes on calmer, slower roads when it's possible, but most of the roads are basically unmodified beyond all the signs. (The city notes that "[a]dditional bicycle lanes are not planned for any bicycle boulevard streets".) What's so great about these streets, if they don't have special features?

One reason to use them is that they are actually pretty good streets for riding. For instance, north of campus Virginia is designated as the bike route. This just makes sense, I think. You could take Hearst or Cedar to get up the hill, but both are steeper at points, and both are pretty busy. So you might as well take the advice.

There's a more subtle reason why the signage is important, as well. Basically, having reminders that the street is good for bikes affords biking. Seeing that the activity is officially approved makes cyclists more comfortable riding, and that goes further when they're joined by others on bikes. Moreover, noticing that the street is zoned for bikes and seeing lots of bikers tends to make drivers have a little more courtesy. A lot of people seem to think bikes belong on the sidewalk, and generally act like dicks when there's a bike in the road, despite that bikers have the right to the full lane. Of course, another issue is the morons who bike on the sidewalk and run stop signs with abandon, making us look like jerks in general. I think the bike boulevards do something to counter that.

No exit

Fun fact: there is no possible escape from the seventh floor of Soda!

Here's a helpful sign indicating this corridor leads to an exit – but which way is the exit?

Here we an exit sign helpfully leading to another exit sign.

From the inverted sign on the ceiling, it appears the exit is behind the viewer – but what's that on the floor?

I'd think all these useless signs were a weird attempt at modern art, but Soda already has a lot of that.

What were the architects thinking? From a design perspective, the point of these EXIT signs is quite clear: they provide an unambiguous route to safety in the case of an emergency. Interior designers probably aren't too fond of the idea, because they can be pretty garish and have to be in obvious locations, but the ones used in Soda aren't too bad – the text color and clear design mesh acceptably with the rest of the decor.

But whence this mad placement? The signs don't consistently point in any direction, and they're scattered all over the building. I got lost following the dumb things looking for a staircase – how could they function properly if there were a real emergency? I can only imagine this is some kind of architects' inside joke. "Haha, we really showed those building code guys!"

Snazzy web design: three!

Here's another step up on the fancy-site-o-meter: Trek's site.

Compared to the sites reviewed previously, this site is very slick. Clearly a lot of money goes to paying designers to make this site look nice. The pages are all heavily laden with photos of people using Trek's wonderful line of products and many of the features rely on Flash for a presentation about the great technology.

So, assume we're a user with a fast connection, modern browser, and Flash. Further suppose we want to learn about Trek's mountain bike selection. From the main page, we select "USA". Then it prompts for a language for some reason – are there lots of "FRANÇAIS" speakers in the States? The main page has a lot of options, but we find "MOUNTAIN" eventually, despite the Flash ad blaring above the site. So we make it to the mountain bike page, and the Flash box blinks white and there's some cool guy jumping through the dirt. That's nice, but we want a bike. Dragging over "HARDTAIL" makes the guy flicker away without warning, replaced by a loading bar- wait, now we moved the cursor away, and the guy's back! That guy sure is stubborn!


See, this is not an good design. This site is doing a great job of presenting lots of people kicking ass on Trek products. There are other ways to navigate besides this Flash disaster: I could pull down the list and try to navigate to a good-sounding mountain bike model. Unfortunately there are ~200 bikes in this list and it's hard to find mountain bikes when there's no particular organization. The page also has a zillion other links, including several screens' worth of columns and other stuff I don't care about. But if I'm perceptive, I'll notice the links to bike types, and click, say, "Hardtail". (Many curious users don't know what a hardtail is, but we'll ignore that for the moment.)

This is great progress: we're nearly at the part where they tell you about the bikes! But this part is really pretty lousy for browsing. It's great at listing the ultra-specifics of a certain model, but for someone naive to Trek's line it's trouble. You can click "OVERVIEW" but it's pretty useless, only telling you the price ranges of each line of bike. What if you want to learn more about the models in general? You can click on each model line, which is organied by the material used to build the frame, but each page says basically the same thing, "This line is has great bikes!"

All the individual bike pages will tell me is the specific parts in each bike. And it's good that I can learn all about the shifters and headsets and lug nuts, but how important is that for the causal browser? Especially for someone browsing the low-end models, some information about its strengths, or a link to a review, or anything would be good. It's a shame there's really nothing for this type of user, who should have been considered more carefully by the team working on this site. If the user gets curious enough to click on Technology > Hardtail, he is treated to a big choppy animation about how great hardtails are, and a lot of power chords. Actually, that brings me to my last point.

This site really, really, really does not need to use Flash. Designers love it because it allows for all kinds of fancy animations and slick transitions; neither one of these things enhances the website's usability at all. Flash is used on this site for insulting the user with promotions on top of hyperbolic blathering about everything Trek makes. It dramatically reduces flexibility – oh, you wanted to open that link in a new tab? – and generally gets in the way, as in the rotating ads on the mountain page discussed earlier.

The people who designed this website shot themselves in the foot. This is a very flashy site with a lot of attention paid to showing off people being cool and saying Trek bikes are awesome. But that doesn't really do anything; as studies show, consumers are increasingly immune to advertising, especially via such blatant means. Despite the fancy technology and the huge amounts of work that went into it, this is still a poorly-designed, frustrating site. The casual user isn't going to slog through this giant site to find what he wants; he's just going to look up the competition instead.

Snazzy web design: Two!

Now consider a fancier-looking cycling site: the Berkeley Bike Club. This site is a more souped-up than the GPC's. It uses CSS, Javascript, and an image-heavy format including adjusted margins so the site looks pretty much the same for everyone. In my opinion, this site is poorly designed despite all that nice stuff. One might say that this is because the BBC is a bunch of insufferable gear nerds who are more interested in nice shifters than nice scenery, so of course they wouldn't have any idea about what's good. But that would be a little glib, so we won't say that.

A lot of work has gone into this site's graphics, but it's still uglier than sin. The loudest element is the thousand or so logos of sponsors, each with its own garish colors and badly aliased lines. More than anything else on the page, this catches my eye – and the damn sidebar is on every page! Supposing we put duct tape over the ads, the site is still pretty ugly. The overall color scheme is black, blue, and white, which looks OK. But some pages have a healthy smattering of red, which does not go well at all with the others. The header above the content is also poorly designed: the navigation bar is deemphasized because it is relatively dark and in a light typeface.

The site is also problematic to navigate. Because every page links to every other page, more or less, there are several broken links. Try clicking "Rides" twice, for instance. In addition, navigation links appear in confusing pages. Some of the content areas, like "About Us" have links to subpages in the top-left corner. But in some cases the text in the top left (which is really an image) is unclickable and all the content is in the text box!

Technically, this site is pretty clumsy. It uses mysterious JavaScript functions to swap around the photos, forcing you to redownload the same photos you should have had cached. It uses a table-based layout and CSS at the same time. The webmaster is partial to long stacks of <br>s. The point is it doesn't really work.

I don't mean to take cheap shots at the BBC, even if I happen to think they should get a life. Their club is smaller than the GPC and probably doesn't have the same resources. But why not scale back the operation a bit? They don't all the silly crap this site has to effectively promote their club, and they could make a better site if they didn't use so many cool features. It's another reminder that technology is no substitute for sound design.

Snazzy web design

Let's check out the Grizzly Peak Cyclists site. This is the sort of page I remember from surfing around in 1994. Nearly every page is static HTML without any frames, images, or even newfangled Netscape features like <font>. The pages have a very simple layout and format. The site is not eyecatching.

But that's OK - it's not snazzed-up, but it's designed well. The site practices excellent logical design. On the front page, for instance, the different areas of the site are grouped cleanly into headings. The current ride schedule also shows this off. In addition to listing the rides for this month, the page also links the rides that take place every week, which a user looking for a ride would be interested in, and links to a page explaining some of the club jargon in the listings. This sort of thoughtfulness makes the site very nice to browse, because the designer has considered carefully what a user would be interested in finding.

Further investigation reveals that this site isn't due to laziness or inability to create a site with flashier features. The site is plain-looking, but has some advanced features built in, such as a DOCTYPE declaration and an embedded mailto address. The site also uses the pedantic tags <em> and <strong> rather than the more common <i> and <b>, which are technically preferable in most situations. These sort of things are not options that a novice web designer uses or even knows about. It's clear that the simple presentation of this site is a deliberate decision.

I wanted to close with some words about the downsides of this design, but I'm having trouble thinking of any. It seems like a natural evolution to start adding photos of the members or maps of the bike routes, but I don't see that that would really improve things. I must admit a certain bias toward the simplicity at work here – I don't see why newer is better when it comes to many sites, and as we'll see thoughtful design is really more important than technological wizardy. The worst I can say about this style is that it doesn't scale forever – for instance, I can't imagine a big e-commerce site done in text with logical markup. However, it's worth noting that this is a site for a popular bike club, not some dinky homepage, and it's nice to see a webmaster who isn't just "upgrading" for no reason.

Electric kettle

Boiling water on the stove to make tea, I notice a few problems:
  • Pretty slow
  • Big trouble if you don't turn it off (fire hazard!)
  • I need a clean pot (this is sort of a problem in my kitchen)
Using this electric kettle is a whole lot nicer. This kettle has the basic features you get from some fancy Swiss firm - the little meter to tell you how much water's in there, the sleek design, the website with everything in lowercase. It's also a pretty quick heater, because the water is heated pretty directlyBut that's not really the point.

The key to this kettle's awesome-ity is the heating mechanism. The power comes from an electric element that the kettle nestles into:

This part is really well designed. Unlike most ranges, this part will simply not work at all without the kettle on top. (I believe the kettle is required to complete the circuit, so there is simply no power used when it is not present.) This is really nice - you can't leave it on accidentally, which is a big hazard.

Futhermore, the switch mechanism seems to be magic. There's only one control on this device: a switch to filp to boil the water. It lights up when it's on, and once the water's pretty steamy it flips off. It also automatically shuts off when the kettle is removed - the switch flips down and turns off when the heating is off. This means you can't really do anything unsafe, because it will switch off after a couple minutes at any rate, and won't run without the kettle set properly in the base. It also fulfils the design goal that the internal state of the system is obvious to the user quite nicely. This all adds up to a very impressive little appliance.


This is my wallet:

Here's the inside:

You can see some bills sticking up from the pocket on the right. The left pocket contains change. Behind each of these pockets, there is some space for credit cards, etc.

This design has some nice aspects to it. It's very convenient in some respects - it's slim and allows me to quickly flash ID because of the clear pocket. The material is also pretty good. Canvas is inexpensive, but still looks fine and is fairly light and durable.

Such a simple design is appealing, but turns out to not really meet my needs. The basic issue here is access to the stuff in the wallet: whether it's bills, coins, credit cards, or ID, everything in the wallet is severely crammed together and hard to access. I have to really work to get into the pocket sometimes, and because everything is all packed together I have to rifle through everything in the wallet to find what I want. The upside of this, if you like, is that it encourages users to carry less junk in their wallet – which is a known problem with some people, whose wallets balloon to dangerous sizes with reciepts, photos, etc. (I prefer to put these other objects in my pocket and then forget about them, picking them out of the laundry weeks later.) But this is a rather hostile attitude for a designer to take. Nielsen argues that design should accomodate advanced users, but be accessible to everyone, and forcing users to conform to a standard of wallet organization doesn't follow that principle.

There's a less philosophical problem with the simple design, too:

Note the emerging coins. When you turn the wallet the wrong way, stuff in the pockets (for instance, money) is likely to fall out. This has led to some embarrassing situations for me, so I've basically learned to carry the wallet the right way up. But there's no indication to anyone else that handling it the wrong way will spill change all over the floor. Sacrificing a modicum of simplcity by adding a zipper or even a couple snap buttons for a change pocket would make this wallet a lot less of a hassle. Of course, I'm too cheap to get a new one.

Sunday, May 07, 2006

BART maps

Another example from the thrilling world of transit signage!

The recent BART extension saw trains running south to SFO and Milbrae, where it connects with Caltrain. This service has had trouble, and the scehdules have been shifted around a lot so it won't lose so much money.

In some cases, the schedules have become rather complicated. At peak and non-peak hours, there may be different lines available from Daly City to Milbrae and SFO. One problem that arises is visually representing these schedules in a simple, descriptive format. My photos of maps on the trains didn't come out too well, but I cribbed some details of the various iterations of the maps off the Web:


The initial version shows an example of a variable-length line: only during peak hours does the red line extend past Daly City. This doesn't seem like a big impediment to usability, because the information is clearly presented, and the information is also presented in other formats, such as the signs in the station indicating which destination each train is headed for.


Number 2 extends that concept to two lines, which trade off service during peak and non-peak hours. This isn't too, too confusing, except the user has to recognize that only the routes marked by the diagonal lines are affected by the peak changes. What's more confusing about this presentation is that it implies there's a big loop in the BART tracks. In fact, as far as I can tell there is no such loop, nor is there any direct route from San Bruno to Milbrae that does not go through the SFO station. This does not make the map unusable, but it's sort of problematic to misrepresent the track this way.


The third iteration has a different approach to modeling the track. Unlike any of the others seen here, this map accurately reflects the fact that the tracks do not gracefully loop through SFO – instead, they take a sharp detour into the the station to get there, and take another sharp turn out. This makes the conceptual model implied by the map more accurate than the second map – but is that really any use? Really, it doesn't seem to me that the user gains from knowing more details about the track alignment, so this is a seemingly irrelevant change.

This iteration does away with all the peak/non-peak rules, which is nice because it means less information on the map. However, it adds a new purple route for some reason, which tends to increase the overall complexity. There's also the matter of no one ever riding the stupid thing, but that might not be a design issue so much.

4) (current configuration)

Unlike all the others, the final version shows basically a conventional line, with no special features. The extension has been simplified, and switched to a less busy line, so the system will stop hemmoraging money. I think this model feels more natural than the others, because it doesn't have a bunch of weird rules and complicated networks. It also doesn't misrepresent the track layout too much, though it fails to reflect the fact that Milbrae is actually very close to SFO. Overall I'd argue this is a pretty good combination of realism and comprehensibility.

Pedestrian crossings

While waiting for the next train, I had time to think about another issue: pedestrian track crossings. At the stations, it's pretty common to have to get across a track to meet a train heading the other way; this can be a dangerous situation in which people may meet the train a little too closely. The Milbrae station uses the simple solution of a bridge over the track, with a heavy fence preventing people from just running over the tracks:

This works, but is expensive to construct, especially with the silly modern- art canopy over the walkway. It also has the disadvantage that it takes a long time to go up and down stairs.

I'm sort of partial to the spartan solution used at the Amtrak station in Richmond, which is just a paved ramp cutting across the track and a sign noting "Hey, there are trains on these tracks! Try not to get hit by a train!" This seems simple enough, and it's not really that hard to not get hit by a train. You could even add a whistle and light to show when a train's coming, so you shouldn't cross. Unfortunately this would probably motivate people to sprint across just in time and then there'd be a lot of lawsuits.

Here's the system used at the smaller Caltrain stations:

Crummy picture, but the point is that the cute little bar comes down when the train's a-coming. The rest of the station has a fence between the tracks, so you have to cross at this intersection. It's not perfect – in case of a mechanical failure the track could be blocked or the safety mechanism might be ineffective, but it seems like the least clunky method. It doesn't require a big bridge, and people can still get around it, but at least they can't do so without realizing it's a stupid idea.

Caltrain/BART station, Milbrae

Taking Caltrain from Milbrae to Palo Alto led to a little design-related confusion. I got into the BART/Milbrae station with a few minutes to catch the train south. Unfortunately, I had some difficult locating myself in the station, and got little help from this confusing station map:

This map accurately presents a lot of information, but has trouble presenting it in an appropriate format. One obvious problem is that the map has a ton of little notes such as "Paid Area" and "Stairs/Escalator to Concourse". These are very informative but not all that useful. The designer could have served users better by considering that most travelers are mostly interested in getting to their train, bus, or car easily. Knowing which obstacles on the map are "Fare Gates" does not help me much – I know them when I see them, and I am more interested in the big picture.

An appropriate response to the problem of information overload on details maps is to make different sorts of information available for different users. Someone who wants to find a less commonly-used service like the ticket agent can look at a map; others can just look for signs to the common destinations. And the station has those – they're just not too well-implemented either:

If the map was too verbose, this sign's too terse. Here, the writer means "Up [stairs] to [BART connection to the SF] Airport", but that's really too much to deduce, unless one is specifically trying to go to the airport, which presumably does not apply to most commuters through this station.

I made my way from the BART area to the Caltrain tracks with little time to spare. Unfortunately, reaching them presented me with another information- processing challenge, similar to this one:

This was a very frustrating sight, because it forced me to do a lot of extra work to decide which side of the tracks to position myself on. The sign makes it clear which way it is to SF and SJ. But it doesn't make it clear which track an SJ-bound train runs on – and this is a big deal because I have to run up a flight of stairs to get to the other side! In order to use this sign effectively, someone must know that trains generally run on the right-hand track (which does not seem to apply consistently to BART trains) and then figure out which track is the northbound one. I managed an 800 on my math GRE, but this task proved to be too much for me, and I missed the train.

Moffit study dungeon

This odd structure is one of a series of little study alcoves on the first floor of Moffit. The cubicle is really pretty oddly designed. I'm not too sure why a lot of the design choices were made, because they don't seem to do anything for the users.

This one is part of a long chain of cubicles, some less weirdly shaped than this one. For instance, some of them don't have the wall that partially partitions this one. That's good, because I'm struggling to come up with a way this half-wall would be of any use, ever.

The partition divides the room in half, but only extends partway into the cubicle. So you can move from one side to the other if you squeeze by the desks. What good would this do anyone? If you want to collaborate, you can talk across the divide (which is OK, given that this floor is pretty noisy. It's near the Moffitt Microcomputer Facilities and some other space used more for group meetings than individual study.) But you can't really move around to work on anything, and you can't comfortably accomodate more than two people. Why not just individual study cubicles? In this design, there's no good way to collaborate on a project. Other facilities, such as the study rooms in the Main Stacks, are much more conducive to group work, because they provide privacy, whiteboards, and more work space.

Also, note the materials used in the structure. Against the back wall, there are two large panels of glass. To me, this indicates that there was some conception of privacy already, via glass doors between the study room and common area. But even if this were implelmented, it might not be too useful, because there's no roof on the cubicle so sound would escape. The ugly exposed metal you see on the outside was not designed that way – I think a panel fell off. But the most interesting is the green stuff used on the walls:

The walls are some kind of stucco-like stuff intended as a permanent installation. But they're pockmarked all over with holes from pushpins. The bumpy texture resembles a bulletin board, affording posting things on the walls, even though this damages the walls! That's bad. From any perspective, these cubicles are a disaster.

Saturday, May 06, 2006

Thai steel wool

click for more big

This a bundle of steel wool. I picked it up at a Thai grocery today because I needed some and it was cheap. But it's also notable for its unusual packaging. This package is made of flimsy cardboard and plastic with nothing printed on the back, which is a perfectly suitable package for something that costs less than a dollar. I suspect this package was not originally intended for export, because most of it is in Thai and the price is apparently in baht. Well, it still works fine.

Note the perforations on the side on the package. The striking feature of the product was that it was part of a big sheet of these; I detached it before purchase. This is a good idea. Displaying the stuff vertically saves space in a tiny store. It also helps to catch one's eye, though that doesn't seem necessary - steel wool is neither an exciting impulse buy nor a big moneymaker for the store.

Moving to the package itself, I think I'm partly drawn to it because I can't read all the great things about it. While the labeling is a lot more muted than typical American fare, it still (presumably) has a lot of raving about the superior quality of the stuff, which I don't think anyone really believes. The trick in selling this sort of simple product is to make a professional-looking package that doesn't make too many wild claims about how much better it is than any competitor. (Then again, I do wonder what "SUPER-SLIM" refers to, and why it could possibly be a good thing.) I like the pictures of pots for this reason: they indicate "this is good for cleaning pots" without making any silly claims. I don't think steel wool is a very interesting thing to sell, but this seems like a pretty good way of selling it.