Designing Google Chrome

Nick Baum 1

2 How we organize teams at Google to create products. How we actually went about designing Google Chrome.

Process + Philosophy 3 Two components to a successful design: Repeatable process to maintain a design philosophy.

Idea 4 Generally, a Google project starts when some engineers have an idea. They use their 20% time to build a prototype.

5 First prototype of Google Chrome. Multi-process: faster, more secure, more crash resistant. Ideas also come from UX, customer support ... even sometimes PMs :)

Idea Implementation 6 Next, project gets staffed full time. Most important thing is to iterate with data.

photo by sethwoodworth (ﬂickr) photo by barkbud (ﬂickr) 7 Qualitative data: usability studies Quantitative data: opt-in aggregate statistics, anonymous logs

Idea Implementation Launch 8 Finally, launch, marketing, PR, etc.

“Content, not Chrome” 9 Our design philosophy: “Content, not Chrome”. Speed isn’t just about technology, it’s also about UI design. Going to present 5 ideas that support this philosophy.

10 Let’s go back to our ﬁrst prototype.

11 Realized that all the buttons related to the tab. Logical visual unit...

12 ...several tabs...

13 ...and combined. But this is ugly.

14 We generated 40 different combinations of rounded corners...

15 ...and picked the one we liked most.

16 Here with the frame...

17 ...and with multiple windows. But now there’s no way to drag the window around.

18 We could put the title bar back in, but that wastes a lot of pixels.

19 Instead, we picked a middle ground.

20 And here it is with multiple tabs.

21 We also tried it with the native styling, but we didn’t like it.

22 Here’s what we ended up with.

23 We think it looks rather nice.

Idea 1 Don’t waste pixels. 24 This might seem like a lot of work for little gain, but on a netbook screen it makes a big difference.

25 Next, notice that there are very few buttons in the toolbar.

26 This is because we noticed that most buttons aren’t actually used.

Idea 2 Only show features that are actually used. 27 We did put the home button back in, after people asked for it.

28 Most browsers today have two text boxes, one for addresses and one for search.

29 But we notice that many people type site addresses in the search box...

30 ... and we can do cool things like offer spell-correction ...

31 ... so we decided to try to merge them.

32 When the user types something, we ﬁgure out if it’s a query or an address.

33 Mostly this is based on analyzing the text...

34 ... which isn’t always easy.

35 We also added Google Suggest.

Idea 3 Use data and algorithms to make the UI simpler. 36 It actually took a while to perfect the behavior of the Omnibox. Sometimes you need to iterate a lot before something feels right.

37 We’re working on a better version of Autofill. When you first fill in a form, we’ll ask if you want to save the info.

38 And we’ll trigger the autoﬁll when you start ﬁlling in the form.

Idea 4 Make features discoverable. 39

40 Most browsers warn the user when closing a window with multiple tabs. But most of the time, the user actually wants to close the window.

41 Instead, we implemented “undo” on our new tab page. This is similar to how we handle drafts in Gmail: “Draft discarded - undo”.

Idea 5 Don’t get in the way of the user. 42 Avoid modal interfaces at all costs.

Content, not Chrome Don’t waste pixels. Only show features that are actually used. Use data and algorithms to make the UI simpler. Make features discoverable. Don’t get in the way of the user. 43 These are just a few of the rules of thumb we use in designing Google Chrome.

Now it’s YOUR turn. 44

• Design • Usability test • Iterate • Discussion 45 We’re going to design some features for Google Chrome together.

• Tab overﬂow • Session-restore • Multiple proﬁles • Your choice! 46 Here are some areas that we’ve haven’t solved yet.

Thank you! http://www.google.com/chrome http://nickbaum.com 47

http://planningness.com	214
http://www.slideshare.net	5
http://trendspotting.posterous.com	3
http://www.levidepoches.blogs.com	2
http://spotatrend.blogspot.com	1
http://levidepoches.blogs.com	1

Designing Google Chrome

by lewisusauk on Oct 22, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 226

Statistics

Designing Google Chrome — Presentation Transcript