By Google Design
On September 8, 2008, Google took the wrapper off Chrome. “Nobody expected to wake up and experience an internet game change today,” wrote Wired, in praise of how much engineering hummed behind the browser’s simple white screen and the blank Google search bar. That’s still true more than a decade later: The Chrome team works constantly on design tweaks that make the browser easier and easier to navigate, while still giving its one billion-and-more users fast and safe access to their entire digital lives.
To celebrate Chrome’s 10th birthday, the browser got its biggest redesign to date: Simplified URLs, a streamlined layer for syncing user identity and passwords, a more expressive Omnibox (the combined search and navigation bar underneath your tabs), and rounder tabs that use icons more prominently, freshened up to scale for tab-hoarders (i.e. all of us). Here, five Google designers talk about how they pulled this off, and what they think about when they think about Chrome.
Chrome is designed to stay almost invisible …
Alex Ainslie, UX Lead, Chrome: What you can do on the web now is dramatically different from what you could do in 2008. It’s a lot of work to keep something simple. But we don’t chase simplicity in the abstract. For developers or publishers, to really let them shine, we want Chrome to be an almost invisible frame. To that end, on iOS we’re using some transparency and blur to feel more like an iOS citizen, and on Android, we use site-specific theme colors. We re-skinned the Chrome UI to make it feel more in sync with the site that you’re visiting. At the feature level, we have to constantly negotiate to make sure that we don’t end up with this awkward average of all things, but are instead fairly opinionated in how we present.
Hannah Lee, Visual Designer, Chrome for Android: Our browser’s meant to be invisible, right? When you look at the omnibox in the browser, it’s just a box within a plain old box. It’s very simple at face value, but in that box is the world’s most sophisticated, secure search and rendering engine for the web.
Chris Lee, Interaction Designer, Chrome for Android: We’ve explored so many wacky concepts for future-oriented features or UIs—we regularly do vision exercises where we suspend our reservations. But then we have to put ourselves back in the mindset of serving over a billion users with this thing. We often come back to, our browser really needs to start with simplicity.
… while keeping its users safe
Alex: At the same time, there are moments when our product can take center stage. We’ve done a lot of work on safe browsing, to protect people from malware phishing and social engineering, so at times we take over the whole content area to say, “Hey, we’re not going it’s to let that site be fully expressive right now, and here’s our recommendation to go back to safety.”
Hannah: In the past, we didn’t mind if people couldn’t pick out Chrome from other browsers; we didn’t really want to draw a lot of attention to our brand. But now that we’re starting to think about security, and a lot of sites out there are trying to mimic Chrome, we’re questioning our need to be less invisible and finding more ways to be more distinct. We’re using things like our toolbar, which no site can draw over, to show users a trusted UI. We’re using some of our surface areas to draw more attention to elements that can’t be mimicked. We spent a lot of time thinking about the security lock and how to make the URL more apparent, so that it’s not buried in all this technical junk—something a lot of malicious sites will do to seem legitimate. With everything that we do, we have to constantly ask ourselves if what we’re designing is something another website can fake, to pretend that it’s trusted, to steal the user’s information?
Creating a more articulate Omnibox
Alex: Another question we have to ask is, why should someone choose Chrome—how are we different from other browsers? Part of the big desktop UI refresh included adding entities and answers in the Omnibox. In the past, we didn’t take credit for the Google-powered magic we provide in the Omnibox, where search suggestions appear as you type.
Alan Bettes, Visual Designer, Chrome Desktop: Those Omnibox suggestions now come with pictures and rich images. You’ll also see that your existing tabs will appear through the Omnibox, which is one way of using the functionality of the box for getting you where you want to go and helping you navigate across the web. We’re trying to play with bringing a bit more of that knowledge goodness from Google higher up so that people can get their search answers more quickly but in an elegant way.
Joel Beukelman, Interaction Designer, Chrome Desktop: Our motivation was to make it a more human launching point to different parts of the web, rather than just this technical entry point for a search.
Rethinking tabs
Alan: Over the course of 10 years, Chrome’s tab shape has generally stayed the same. When we thought about changing them, we had to think about usability. How does the shape scale down when there are too many tabs open (a problem for a lot of Enterprise users) and how does it scale up for hybrid, touch-enabled laptops?
We started our design exercises for the redesign around June 2017. (We launched the redesign in September of 2018.) Throughout the second half of 2017, I was toying with the idea of putting your tabs on the side of your window. We had evidence that totally convinced me that showing your tabs as a list was the way to go—similar to how you view folders and files on your desktop.
Alan: We ultimately realized that by doing that, we’d be solving the use case for a really vocal minority, but that this was not going to be a game-changer for the majority. And Google as a whole thinks about how to make technology more human. So instead, we focused our design efforts around the Omnibox and tabs. We thought a lot about what we do with the details, to stand out from both Google products and amongst other browsers as well.
Syncing user identity across the Chrome-sphere
Joel: The goal of the user identity update was to illustrate that the person that’s browsing is actually the user that Chrome is syncing. If you are truly Person A, the things you’re doing in the browser are also the things you benefit from saving: your credit cards, passwords, browsing history. We want to make that process seamless, and to appropriately present that in a somewhat neutral browser UI. We are constantly trying to evaluate how invisible we are, and I think that’s something that we did well here.
