UI lessons from urban design

UI lessons from urban design


Which part of this street is the most dangerous for the average pedestrian?

  1. The area with the bold, diagonal red lines
  2. The parallel, double yellow lines
  3. Or the path marked by the faint, blue dashed lines

The blue dashed lines mark out a slightly twisting cycle path which cuts across a pedestrianised shopping area. It can be joined from the road without going up a curb or through a barrier, meaning cyclists can hit the path at speed.

I’m an enthusiastic cyclist myself (trust me, this isn’t about being anti-cyclist), but if you walk down this street, the dangers here are obvious: all it would take is a pedestrian or cyclist not paying full attention, and you’ve got a collision. Both have just as much right to this space as the other, but poor design is creating a recipe for conflict.

As a piece of UI design, it is all wrong: the usual hierarchy of colours – at least in London where this street is to be found – would dictate that red would correlate with the highest danger. If you travel on public transport all the emergency alarms are red. If you drive, ‘no entry’ signs are red. In British culture, red is almost always a high priority, high consequence colour.

Yet in this piece of street design, the boldly demarcated red area merely indicates a bay where you’re not allowed to park or stop. Similarly, the yellow lines are a zone of the street where you can’t leave a car.

In this way, it is a physical example of a classic virtual design mistake – basing the UI around things important to the service provider rather than the service user.

The real world consequences of a car stopping in the bay with the red lines are minimal – but clearly something the provider (in this case, presumably the local council) wants to prevent. However, the real world consequences of a path where bikes can move through pedestrian crowds at speed are serious for both of those groups.

These lessons transfer to digital. Consider the paths people take through digital experiences and whether the UI aligns around the user’s reality and the things of consequence to them rather than to the service provider’s objectives or branding priorities. Consider also whether the colours and visual conventions are a cultural fit across different markets. Most of all, consider moments in the digital experience where clear demarcation – either visual or through another kind of cue like audio – could prevent unwanted outcomes. Use these elements sparingly – just like on the street in the photo, once you’ve assigned red to ‘no stopping’ and yellow to ‘no parking’, you might end up with this low contrast, low visibility combo of blue on grey bordering something much more important.

1 comment

Add yours
  1. 1
    Garuda

    Hi Marek, thanks for the insightful article. As a usability person myself, I often find that there are no easy answers in complex systems… some thoughts on this below.
    Clearly, the stakeholders in this environment are not just cyclists, but also pedestrians, car drivers, municipality, store owners, etc. Would you say that the volume of cyclists in this area is high enough to warrant a cyclist first approach ?
    It seems to me that the current system assumes cars and pedestrians to be the majority users in the area, and so it reserves higher impact signals for them.

+ Leave a Comment