Let me start by first asking you a question, "What do you know about the origins of the humble breadcrumb visual indicator?"
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 Mr Breadcrumb first came about.
"I want my customers to know where they are on the website as they are browsing it."
The origin stories of the humble 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 look.
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 indicator. 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.
Mr 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 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 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???
Anyway, after the truly successful delivery of the project (we got very positive reviews and feedbacks from the client FYI...no errors, no bugs...they couldn't find a single one). And even during the live registration period, the portal never crashed either. NOT EVEN ONCE.
But that is not what I really wanted to tell you... 😅 (Sorry, blame it on my ADHD)
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 revolutionary 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 Mr. Breadcrumb. HE CAME FROM A FRIDGE STICKER. 😏😏😏😏😏
And from there, we have our...
- Form Wizards
- Step Indicators
- Flow/Process Charts
- Accordions
Sometimes, all you really need is one fridge sticker to change the world.
Top comments (0)