Design & UX
Article

What Can Boba Fett and Pirates Teach Us About UI Design?

By Alex Walker
Boba Fett's loved the distressed look

Boba Fett loved the distressed look

While the original Star Wars trilogy of films were revolutionary in many ways, the simple decision to portray a sci-fi universe that showed wear and tear was a surprisingly big deal at the time.

Until then ‘space’ in movies had been all shiny chrome UFO saucers and swishy kubrick-esque ship interiors. George Lucas’ universe had more than its share of slime and gunk, and scratches, dents and dings. It felt more familiar than it probably should have.

Church interior: Worn steps show the path followed.

In our real world, we often use those same wear patterns to guide us.

For instance, arrive at a big city train station, airport or church for the first time and, chances are, you’ll be able to find your way outside by just following the shiny path scuffed into the floor by millions of feet.

Who needs signage?

Or look at an old elevator panel to see where people have been going most often.

A well worn elevator panel

Even in a cafe or waiting room, you can probably pick today’s newspaper from the pile simply by the crispness of the paper. We instinctively know well before seeing the printed date.

By comparison, the web is a conspicuously clean place. Millions of people might pass through Google every hour without leaving a single scuff or fingermark. It’s super clean and clinical but even though we may have been there thousands of times, there’s no obvious evidence of our past journeys.

Is it possible to give users useful cues about the state of a system without adding extra text clutter to our designs?

Trello and the Age of Pirates

If you haven’t used it, Trello is a card-based project management system, and they’ve recently introduced a nice alternative approach to their UI. It’s a option in their settings that they call ‘card aging’.

Trello cards showing their age.

Predictably, all newly minted Trello cards have clean white backgrounds and sharp, dark text. You can almost smell that ink drying.

But as time passes, things begin to change. That once crisp ink begins to lose some of its contrast and the background becomes a little duller that it was. This effect becomes more pronounced with time.

The results of this effect are obvious: Your brain doesn’t have to remember and compare dates to understand their age. Like a bowl of fruit on a table, it’s clear to anyone at a glance which cards are fresh and which need your attention. You don’t seek this data – you simply can’t help noticing it.

Trello offers a more fun pirate version, where your cards accumulate sepia tones and water damage, but the simple adjustment of contrast conveys a lot of information in a shockingly digestible and convenient format.

Unfortunately if you want to see this nifty feature in action, it’s currently only available Trello gold users, and needs to be activated in your settings.

Nevertheless if you’ve ever accidently bought out-of-date bread or read an out-of-date blog post, you’ll see where this type of ambient UI information could be a very handy addition to our frontend ideas.

Originally published in the SitePoint Design Newsletter

  • Ralph Mason

    > you’ll be able to find your way outside by just following the shiny path scuffed into the floor by millions of feet.

    I love the way some universities don’t put in any paths until the students (and cows?) have worked out where they should be.

    As for us leaving no trace on the web, I think Google and the NSA might have a surprise for us. :D

    It would be cool if our web pages could behave like the picture of Dorian Gray, getting uglier by the day. C’mon CodePen mavens, this is a job for you!

    • Alex Walker

      Yes, I think it was Michigan U that is reputed to have done the cow path thing. I think I touched i=on it in a newsletter last year.

      As for us leaving no trace on the web, I think Google and the NSA might have a surprise for us. :D

      No path that’s useful for us ;)

      Though the next time your drive seizes up, it would be nice to be able to get the NSA to send you the backup.

      Sidenote: Kinda lame that markdown doesn’t work in Disqus..

      • http://pancakecreative.com/ John Buckingham

        what happens when you reply here?

      • Ralph Mason

        it would be nice to be able to get the NSA to send you the backup.

        I keep most stuff stored online these days (which probably means the NSA does have it stored away. :-(

        Re: sidenote—Yes, how did you get that quote to work? Markdown seems a natural choice for disqus.

        • Alex Walker

          Yes, how did you get that quote to work? Markdown seems a natural choice for disqus.

          blockquote works as a tag. It supports quite a few HTML tags, but why you’d want to encourage punters to use HTML is beyond me. I did a bit of googling and markdown support has been a big feature request, but Disqus isn’t really interested in adding it. ‘No short terms plans.. etc’

          • Ralph Mason

            Really odd. I’d have thought it would be top of the list.

            blockquote works as a tag

            Thanks! So it does. (I meant to use that before. Oops.)

  • http://www.licensekey.org Joseph

    For instance, arrive at a big city train station, airport or church for
    the first time and, chances are, you’ll be able to find your way outside
    by just following the shiny path scuffed into the floor by millions of
    feet. Powerarchiver

  • Manahil Khan

    I’m extremely pleased to discover this great site.
    I want to to thank you for ones time for this particularly wonderful read!!
    I definitely enjoyed every little bit of it and i also have you saved
    as a favorite to check out new stuff on your web site Uniblue

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.