Categories
Online Marketing

How We Designed Chrome – Designer vs. Developer #20

What you want? It’s always they want more and more, but they never use those things, and it’s really hard and quite brave thinks they know we’re going to script stuff away. There was internal talk about how chrome is built, and I think back to that time, where Internet Explorer was the dominant browser, Firefox was just was fighting and like the developer, tools were becoming quite prevalent and Safari was was, was just released.

I believe and Google designs to build a browser. So how do you start in that environment? Where there’s so much competition chrome was released in 2008 yeah, but actually we started on it in 2006, oh wow and the team at Google that started on Chrome was actually we were all working on Firefox. When I first joined Google, the beginning of 2005. The idea was to work on making the web better. One way to do that is work on making browsers better.

So we started out as a team working on making Firefox better a year and a half into it. We made the switch to actually building our own browser, and that was a big, big, complicated decision right, because you know we had already. We had been going down a certain path right. So looking back, I think or a number of factors right. First off we thought we could do a really good job, so that had to be true yeah, but also you know there were a lot of things about browsers in those days that I think created, frustrating user experience.

Yeah you got to go about going back 2006. You know applications like Gmail, yeah Maps and YouTube, and so on. These things were becoming popular and other folks were building complicated web applications like this and your typical browser. In that day, if you were to leave Gmail running overnight, you come back the next day and your browser to feel pretty sluggish and bogged down because of just the weight of these applications and so way back then we we had the idea.

That would be really nice to split up the browser into multiple processes. Right operating systems had gone through a revolution from the days of windows, 3.11 to Windows, NT and so on. Yeah we’re pre-emptive multitasking was the thing OS 9 to OS 10. Could we use pre-emptive multitasking? Could we take advantage of actually multiple processes on these systems for web browsing and seemed pretty pretty pretty like, actually seem possible? If you are thinking about a browser from scratch? Yeah I mean in terms of like the UX of again is like going back to the beginning of like browsers or the browser’s of that time.

It reminds me a bit like search before Google’s like search was basically portal sites and the search input field was like almost the most least important thing, but then Google came along. It’s like Nana, that’s the wrong user experience with when chrome came about. It was quite radically different because I know remember this phrase is a Content, not crime, yeah um, so just making that kind of UX decision of like you know, because it was all toolbars and remember when you install anything everything.

It’s all fact you back, then, is very common to find a user with internet explorer and they had installed multiple toolbars. So it’s not just one tool: Bartlett, multiple tours and there’s it’s great absurd. Screenshots of people was, you know those browsers had like five toolbars and it’s not a lot of room for the content right. So one of the things with Chrome’s content now chrome idea was to really remember that the whole point is people want to engage with the web application of the website.

The web content and the browser site try to get out of the way just facilitate helping. You use the web, and so even when we designed the extension system, we resisted the idea of having a first-class way or proper way to do toolbars or sidebars. We really didn’t want extensions over you really. You know using up screen space when that screen space to users really want that for the content. So we designed things, like extension buttons.

That would be the primary access point tried to guide things in a way that would um preserve that notion and even the UI of chrome itself. We tried to keep it very minimalistic. We you know we spent a lot of time in the early days. Thinking, if we’re going to introduce another browser, it’s got to be so awesome right, it’s got it and what does that mean? It’s got to have like the most amazing features.

It’s got it like have a whole new take on browsers. It’s got to be radically different. Ui, surely that would be the reason why we’re doing this right yeah, but in and we tried many different things: putting tabs on the side. You know fancy user gesture kinds of things, Mouse gesture types of things I mean none of that really felt right, and we can do that process. We came to realize what what actually we were doing and what really would set chrome apart is that as a browser, just works better yeah like creating software.

That’s not frustrating is actually hard to do yeah, and I think users appreciate it and so started to think about it, and what does that really mean for us? It was like all products should be pretty simple right should try to try to come up with elegant UI choices. Keep it simple: it should be performant but, like I said, browsers, browsers, have a history of being janky and not well-behaved, and and and you, the user has an expectation when they click on something, especially when it’s the chrome of the UI and when it’s the the Browser UI, they click on it.

They say close this tab. It should close right away yeah, you know par for the course. Those days was. You click close that click to close that tab, and you see you might see a beach ball on Mac, os10, yeah or nothing happens on Windows. You start to see the application not responsive problem right, but in chrome, because we went with this multi-process architecture. We were able to guarantee that if you click close on the tab, it’s gone yeah and those are examples of like responsive UI that you know.

Sometimes, when we talk about performance speed, we mean like how did welded perform on a benchmark, but a lot of times. It comes down to like was experience, smooth, responsive to the user input. Did it actually do what the user wanted it when the user wanted it, that kind of thing, so, simplicity, speed. We also put a big focus on security and stability, so we had these four s’s yeah, and that was the thing that we just repeated to ourselves: if you’re not sure what to work on work on one of those things.

Yes, work on making a simpler design work on making a more performant work on making it. You know more secure so and really with security we mean making it so users feel safe on the web. I feel in control of their privacy. They understand what’s going on, but also that it’s the system is protecting you from malware and so on and again our multi-process architecture not only helped us make something more performant, but also something more secure, a browser more secure and, finally, it helped a lot with stability.

We knew that starting from scratch, with a browser that might actually be the biggest concern, is it going to just crash? Is how do you? How do you exercise enough of the browser in your testing to know that you’ve got it right? We based the browser on not on Firefox, and we based it on WebKit, which is what, at those days that was Safari 2.0 Safari, 3 had just come out and WebKit Safari was known to not necessarily be the most compatible with the web right.

Modern web standards, driven by Firefox, were just becoming a thing. Internet Explorer has had a lot of quirks about it. Internet Explorer 6.0. A lot of quirks, especially thinking about like flowed yeah, that with the flow, though we had a box model. All these things were very impactful to like how web pages were built. If a developer was testing a lot with Internet Explorer, there would be the quirks that they would code to if they were testing.

A lot was Firefox we’d, see that and the Safari it was like. Well, probably, they weren’t testing with Safari, and so it was a big challenge in a big fear. When we launched Chrome, is it going to just crash all the time yeah? How are we going to? How are we going to manage that? So we put a lot of effort and in fact that same issue in forms like our choice of the user agent string. If anybody’s seen the user agent string of Chrome, it’s kind of hilarious because it mentions ever every browser ever since chrome came along.

And that was part of navigating this whole like does it work conundrum we always taught in software development and UX, add more features, because more features means more value, so I mean: was there ever pushback or was there like a fair, maybe we’re taking away too much From the browsing UI, we certainly ugly launched, and it originally chrome, without an extension support, and even the bookmark manager when was was, was revised quite a bit.

I’m going to post the initial beta things like this, so we we intentionally went with a very minimal approach, but we also really encouraged the team to try a lot of things with the idea that, knowing going into it that we would probably throw away things that Aren’t good yeah, that was the I don’t know the mantra if you will like. Let’s just try a lot of stuff and if it doesn’t work it’s okay, we just throw died, it’s not the end of the world.

We don’t have to ship everything we dry. I think that was really liberating and really helpful, because there were a lot of folks on the team who had different had had interesting ideas and and it’s empowering for people to try stuff. But it’s also, you know appropriate that we, we don’t just say because we built it, we should ship it looking back. What would you say were the best decisions you made and also for two part.

What would you regret in terms of like oh yeah, things that you did, that you’d wish you hadn’t? I mean you can also I’m an engineer. I was definitely an engineer at those days and I feel really good about some of the decisions we made. As an engineer from an engineering focus, you know we really put a lot of. We talked a lot about how important was that we were building a product, not building a platform.

I mean ultimately is a product that carries the web platform, but what I mean by not building a platform is that sometimes there’s a temptation as engineers to go off and build framework and and tools for creating the product that you’re actually there to create you. And we really resisted that a lot tried to make sure that we focused all as much of our energy on like actually building a browser which was very helpful to make sure that that that’s what we did so, for example, we said first we’re just building a Windows browser – and that meant, let’s just use win32 straightaway, all the Microsoft API is not looking for any cross-platform toolkit framework to build our UI.

Yes, one day we’ll bring this to Mac one day, we’ll bring it to Linux. You know, and so on, but like for now we’re just building a Windows application and when we went to finally build a Mac product a product for us 10, we told some of the engineers at Google. We said hey, you want to come work with us. We’d love for you to build the best browser for OS 10, and we want you to approach it. The same way that we approached building for Windows, which is all the UI, should be cocoa.

It should all be native, and we want you to have the freedom and flexibility to both embrace the native operating system primitives, but also move quickly as those primitives change, as the iOS evolves. So, let’s build a Mac focused product again with this idea that it’s we’re building product on a platform for building browsers, but what ends up happening as you do this and we did the same thing with Linux.

What ends up happening as you do this? Is you know we start to realize. We were coding same thing three times, yeah right and later on. Things like Android came along and iOS and Chrome OS, and so our world got a lot more complicated and what we ended up doing is, or is this arc from the singular I’m building a product to I’m starting to build platform things that helped me build that Product across and different platforms, yeah and that came afterwards – and I think that was actually somewhat healthy in a bit it.

To a certain extent. I kind of have some regrets that we built Chrome so much as a monolithic product. So while there is some code structure, that’s healthy and good, and – and there is somewhat of a layer cake, if you will there are – there – are some cuts that some some extra layers in the cake that should have been there. And now we have a lot of complexity because we didn’t make some of those cuts earlier.

We didn’t modularize necessarily as much as we should have. But again I think that came from that that focus some were just building this product and he does. I don’t need to be extra. We don’t need all that extra modular modularity, and now we find ourselves wishing he had a maybe done a little more, a little more forethought on that. What would you say, the decisions that were made that were actually really good to the success of a break, yeah yeah, so design examples in engineering examples.

There was this one one concept that was came up very early, which was – and we wrestled with this a bit. So the content area of a tab right, we started with the idea that there are some. We will actually have some browser UI that lives in the tab. So, for example, when you open a new tab, page there’s there’s some content shown to you, suggestions about things. You might want to do yeah. We started out building that natively and we started to find ourselves discovering an uncanny valley, because development users have this expectation that things inside the tab behave like web pages.

But building that not using web technologies meant that some things were subtly not right: yeah selection, behavior, wasn’t there context menus? Not there and the same. You know just things were subtly different, and so we scrapped that and we built the new tab page using web technology, and now it fit better everything we didn’t have all those little niggling little bugs you just felt natural. It felt natural it fit with the product.

On the flip side, we had some dialogues and some of those dialogues, mostly they were built natively, but a few of them were built using web and they never felt quite right, and so then we came to this. Discover that, like, let’s be opinionated about this, if it’s a dialog, it’s done natively and if it’s in the content area, it’s done with the tab, and then we avoid this sort of uncanny valley situation.

When chrome came out, there was a designing for best viewed in Internet Explorer, 6 yeah, and it’s interesting. You say like at the time. Webkit was not the priority of web developers. Now, we’ve shifted 10 years later, we’re seen best viewed in chrome or best viewed in WebKit browsers. So there’s this constant fear that we’re possibly entering back to the past, where, if, if, if development stops, then users and like the web technology becomes like a stagnant, oh yeah, that’s a great question.

I think that oh there’s a couple different things that happen with ie6 right, so, first off Microsoft stopped evolving the guys and we’re not stopping evolving api’s. We our mission, is to make the web better, and so it continued invest in that and the way we invest in that is, it’s very important to work with the standards community, the other browser vendors in particular and web developers, so that we get it right.

One of the dangers of shipping an API, if you’re the only one, only browser shipping it is that you might come to find that there’s a better way to do that. Api, yeah, a better design and then the end result is we’ll be tempted to ship. The new design as well the better design, but we won’t we’ll – have trouble leaving behind the old design so now we’ll ship, two ways to do something yeah or in the worst case three ways to do something.

If you look at CSS gradients, you will see. There’s multiple ways: yeah – and this comes from this – this this phenomenon. Where browser ships it early, then they learn that oh gee. I wish I’d done it differently and then they ship it that way too, and then oh yeah. I wish they would do it differently and they ship it that. Finally – and so you end up with a multitude of ways to do things in the web platform, gets really complicated and we don’t want the bad develop web developer to be thrashed by all of that.

Right, we want to keep it simple and make sure the api’s work well, so we want to do our do a good job, and that means spending time with other browser, vendors spending, time with web developers, learning understanding all the use cases and being very deliberate in The standards process, but we should still be able to ship something. Finally, and sometimes we do have to take some calculated risk yeah right.

Sometimes we are the first browser to ship an API, but we hope to do that in a way that stands the test of time, you’re looking for pain, points and you’re, trying to understand the why it is that people have these problems so that you understand their Mental model and you avoidable, designing in that way again.


 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.