Let me start by first asking you a question, “What do you know about the origins of the modern digital visual indicators that billions of people interact with multiple times in a day?”
I am pretty sure that by now, I would’ve gotten like a thousand different answers 😂.
But let me tell you the real story of how the very first early visual indicators came to be.
“I want my customers to know where they are on the website as they are browsing it.”
The origin stories of the navigational breadcrumb wasn’t what you would imagine. It wasn’t born in a multi-million dollar lab, or some university dorm room. Instead, it was born from something rather…ordinary. Something that you might not have even expected to notice if you were not really observing closely enough.
Back in 2006, I was working on an eCommerce website project for a client. And during the testing stages, she told me that she wanted her customers to have a sense of knowing where they are as they are browsing through her website. Now, back then, there wasn’t such a thing as a breadcrumb link yet.
So, I accepted the feedback, and went home to crack my brain 🧠 over how to help make that a reality. One night, I was going to the fridge to grab an ice cream 🍨 and as I was closing the fridge door, I noticed the sticker label that was still stuck to the door. You know how when you buy a new fridge and they would come with all these shiny little stickers??? Yeah, that one.
Right there, right at the bottom, I saw a row of arrow-like progress indicators. They were trying to use it to describe the different modes, or different features, honestly, I don’t remember that part well, I do remember seeing an arrow indicator that ran from the left-to-right. And it has slightly different colours, but used the same colour tone.
The Humble Navigational Breadcrumb was Born
And just like that, a light bulb went off inside my head. And when I finally got back to my desk with my ice cream and extreme excitement, I began sketching what would become the very first navigational breadcrumb visual indicator in the world. And well, everywhere that I look, I see him everywhere. Honestly, I am the proudest parent knowing that my little design inspiration is now being used by billions of people all over the world.
Here Comes the Step Indicators, Accordions & Yes, The Wizard 🪄
In the following year of 2007, I had a chance to work on an online student registration form. Now you must bear in mind that back then, these forms are looooonnnnnggg…sorry, I had to add that for dramatic effect 😅
Point being, these registration pages can span multiple pages and God were there many fields!!! Seriously..one page takes a student 10..maybe 15 minutes to finishing filling up. Anybody remember that experience in the early to mid-2000s???
From Breadcrumbs to Form Wizards
Having had some successful deployments under my belt and having had some practice of implementing the breadcrumb indicator across several web projects, I felt it was time to test my limits and abilities. So thinking about that recent online registration form project, I wanted to take it and experiment with an idea. And I thought 💭 to myself, “What if we can shorten the length of those forms/pages and then split it into steps?”
So, I began to test the idea out and it looks alright at first. But then I noticed something similar, the student wouldn’t know where or which part/section of the form they are filling up. So, I added section headers, and step indicators. And now, 20 years later, I see my work literally everywhere! I see them in checkout pages, I see them in flight booking pages, I see them in…oh yeah, Accordions, ever wondered how they started?? It’s right above.
True Innovation Can Be Found in Everyday Ordinary Things..Like That Sticker on the Fridge
And here’s where I really want to end my NUCLEAR TRUTH BOMB 💣 tonight. Most of the time, designers and engineers think that in order to create a groundbreaking, or experience a revolutionary design idea, they have to experiment for months and years, or even thinking that it might require some expensive equipment, hardware, or a lab.
Come on! Just look at our humble little navigational breadcrumb. HE CAME FROM A FRIDGE STICKER. 😏😏😏😏😏
And from there, we have our…
- Form Wizards
- Step Indicators
- Flow/Process Charts
- Accordions
- and then so much more…
Sometimes, all you really need is one fridge sticker to change the world.
(Note: This is a later copy/move of my original source material. I’ve also taken the liberty of making some improvements and edits along the way. You can read the original article here.)
Leave a Reply