How to Make 27 Million People Hate You
•Download as ZIP, PDF•
0 likes•963 views
A look back at the process of designing and implementing the Firefox 2 theme for Mozilla.
Recommended
More Related Content
Viewers also liked
Viewers also liked (12)
Similar to How to Make 27 Million People Hate You
Similar to How to Make 27 Million People Hate You (20)
Recently uploaded
Recently uploaded (20)
How to Make 27 Million People Hate You
- 1. Jay Goldman Radiant Core, Inc.
- 2. How to Make 27 Million Jay Goldman Radiant Core, Inc.
- 3. How to Make 27 Million People Hate You Who to Blame: Jay Goldman Radiant Core, Inc.
- 4. How to Make 27 Million People Hate You Lessons Learned from the Firefox 2 Redesign Who to Blame: Jay Goldman Radiant Core, Inc.
- 6. TH!NK
- 7. TH!NK Photo © Computer History Museum
- 8. DES!GN
- 10. (More Islands Here) (and more cowbell)
- 11. (More Islands Here) (and more cowbell)
- 12. 30,000,000
- 13. Eh?
- 14. Photo by nitot - http://www.flickr.com/photos/nitot/73722868/
- 16. “This project will make you the most hated design firm on the planet.”
- 17. “This project will make you the most hated design firm on the planet.” -- Mike Beltzner, 2006
- 18. 90%
- 19. I Hate You
- 20. Teh Awesome
- 22. 30,000,000
- 23. 30,000,000 * 90%
- 24. 30,000,000 * 90%
- 25. 30,000,000 * 90% 27,000,000
- 26. Eh?
- 27. OCT 2006 ™ PC Magazine Editor’s Choice Award is a registered trademark of Ziff Davis Publishing Holdings Inc.
- 28. Lesson One: Good design is hard.
- 29. © Life Magazine/Robert Doisneau.
- 31. Open Sourc ign
- 32. Open Source Software UX/Visual Design
- 33. rce Software UX/Vi
- 35. Lesson Two: Design is an ecosystem.
- 37. Photo by Marc Lostracco.
- 38. Photo by Marc Lostracco.
- 39. Photo by Marc Lostracco.
- 40. Lesson Three: Design for the world.
- 41. Internationalization Localization Globalization
- 42. I18n L10n G11n
- 43. RTL?!
- 44. !?LTR
- 45. tfeL oT thgiR
- 48. Lesson Four: Stand back and watch other people’s magic.
- 49. “You know you've achieved perfection in design, not when you have nothing more to add, But when you have nothing more to take away.”
- 50. “You know you've achieved perfection in design, not when you have nothing more to add, But when you have nothing more to take away.” -- Antoine De Saint-exupery
- 53. Lesson Six: The passion of the users.
- 54. The Home Icon Debacle
- 65. 24 px 22 px
- 66. 24 px 22 px
- 67. INTERMISSION Audio is © Monty Python’s Flying Circus.
- 68. The Changing Role of Designers
- 69. ______ Designer
- 70. Easy Button is © Staples, Inc. Photo by Ethan Trewhitt - http://www.hydrous.net/index.php?date=2005-10-10
- 71. e r Easy Button is © Staples, Inc. Photo by Ethan Trewhitt - http://www.hydrous.net/index.php?date=2005-10-10
Editor's Notes
- I’m Jay Goldman from Radiant Core, the company responsible for the official theme for Firefox 2. I’m going to talk a little about our amazing experiences working with the Mozilla crew, what we learned about Open Source projects, some really important stuff about design, and at least one cowbell joke. But first! NEXT SLIDE
- This is an important piece of computing history - where is this from? WAIT FOR ANSWERS, GIVE OUT A T-SHIRT
- The classic IBM "THINK" sign was said to be a permanent feature of IBM offices around the world until the 1970s. The "THINK" concept as company mantra originated with IBM founder Thomas J. Watson Sr. in the 1940s and was often parodied outside of IBM when this high standard went occasionally unmet. Today we’re not going to talk about THINKING, but rather about a very closely related skill. NEXT SLIDE
- Everyone in this room is a designer, although you may not consider yourself to be one. The word itself is so overused that it has become practically meaningless. Visual design. User Experience design. N-tier database system design. This isn’t a talk about design itself, which would go on until Web8.0, but rather a talk about how to do good design in the traditional, visual sense. On to the next question! NEXT SLIDE
- What is this? WAIT FOR CORRECT ANSWER AND GIVE OUT T-SHIRT How many Canadians in the house? We’re going to let you in on a dirty secret folks: we are in ur tech industry, slowly taking away your jobs. No, seriously. Canada is important for two reasons. The first is because (CLICK TO SHOW LOGO) it’s the home to Radiant Core. The second is because it’s also home to... NEXT SLIDE
- What is this? WAIT FOR CORRECT ANSWER AND GIVE OUT T-SHIRT How many Canadians in the house? We’re going to let you in on a dirty secret folks: we are in ur tech industry, slowly taking away your jobs. No, seriously. Canada is important for two reasons. The first is because (CLICK TO SHOW LOGO) it’s the home to Radiant Core. The second is because it’s also home to... NEXT SLIDE
- What is this? WAIT FOR CORRECT ANSWER AND GIVE OUT T-SHIRT How many Canadians in the house? We’re going to let you in on a dirty secret folks: we are in ur tech industry, slowly taking away your jobs. No, seriously. Canada is important for two reasons. The first is because (CLICK TO SHOW LOGO) it’s the home to Radiant Core. The second is because it’s also home to... NEXT SLIDE
- Thirty million people. Now, we’re still a little smaller than the US, but no matter how you look at it, that’s still a lot of people. NEXT SLIDE
- NEXT SLIDE
- Okay! Question #3. Who is this handsome devil, who may in fact be in the audience (but who is not allowed to answer)? WAIT FOR CORRECT ANSWER, GIVE OUT T-SHIRT. NEXT SLIDE
- Mike is the phen-o-men-ologist at Mozilla, which is a fancy word for User Experience. Mike is important to this story because we worked really closely with him on the redesign, but also because he very prophetically sat us down at the beginning and said... NEXT SLIDE
- All joking aside, he really wanted to hammer home the point that this was a pretty serious undertaking. It’s not every day that a designer gets to work on something that will be seen by 30,000,000 people EVERY DAY. In fact, in order to really break it down, he told us… NEXT SLIDE
- If we did better than a 90% rate on the … NEXT SLIDE
- I HATE YOU scale …
- That would be teh awesome. For the math challenged in the crowd… NEXT SLIDE
- 30,000,000 people CLICK times 90% CLICK FOR LINE DRAW THEN AGAIN is 27,000,000 haters. Which, no matter how you look at it, is a lot of haters NEXT SLIDE
- 30,000,000 people CLICK times 90% CLICK FOR LINE DRAW THEN AGAIN is 27,000,000 haters. Which, no matter how you look at it, is a lot of haters NEXT SLIDE
- 30,000,000 people CLICK times 90% CLICK FOR LINE DRAW THEN AGAIN is 27,000,000 haters. Which, no matter how you look at it, is a lot of haters NEXT SLIDE
- 30,000,000 people CLICK times 90% CLICK FOR LINE DRAW THEN AGAIN is 27,000,000 haters. Which, no matter how you look at it, is a lot of haters NEXT SLIDE
- So, how’d we do? Well, it’s easy in retrospect to look back on it and know that we really had nothing to worry about, but it was a pretty tense day when the first Firefox 2 betas shipped out with the theme in them, and an even tenser day when the actual release went out the door. In the end though, I’d say we did okay. NEXT SLIDE
- Firefox 2 won both CNET and PC Magazine Editor’s Choice awards. And with all due respect to our Microsoft colleagues in the audience, it was widely seen as being a significantly better upgrade than IE7. Some of the reviews even said nice things about our theme! Overall, we did substantially better than the 90% and the new theme was generally seen as a great evolution of the Firefox 1 design. So what did we learn? NEXT SLIDE
- Lesson #1: Good design is hard. It's not about pretty pictures and pushing pixels, although that tends to be the end of the process. Good design requires a lot of effort before even the first pixel gets pushed.
- There’s a famous story about Picasso, sketching in a sidewalk café in Paris. I have no idea if this story is actually true, but either way it has a great message. A woman was strolling along a street in Paris when she spotted Picasso sketching at a sidewalk cafe. She walked up, interrupting the master at work, and asked if he might sketch her and charge accordingly. Picasso obliged. In just a few minutes, there she was: an original Picasso. "And what do I owe you?" she asked. "Five thousand francs," he answered. "But it only took you three minutes," she politely reminded him. "No," Picasso said. "It took me all of my life." Despite what some of our clients choose to believe, good visual design doesn’t happen overnight, whether it’s Picasso sketching or icons for a web browser. Having eyes and an opinion doesn’t make you a good designer any more than It takes a lot of skill to do, and even more so, it takes a lot of SPECIFIC skills to do. Unfortunately for the Open Source movement, it takes a specific set of skills that’s quite different than a developer or a systems architect. As a result, and very generally speaking… NEXT SLIDE
- Open Source Software and good User Experience or Visual Design are often like… NEXT SLIDE
- Two ships… NEXT SLIDE
- Passing… NEXT SLIDE
- in the night. NEXT SLIDE
- We’ll come back to this point later on - and lest we upset anyone who has poured their heart and soul into their favourite OSS product, we’re not saying they’re mutually exclusive. Just rare.
- Lesson Two: Know they competition. The whole time we were working on Firefox 2, Microsoft was preparing Internet Explorer 7. It was a crucial part of our process to look at their preview releases and to read the reactions across the web. We particularly focused on places where they had changed their user interface in significant ways, or where they had duplicated a feature already found in Firefox, like tabbed browsing. NEXT SLIDE
- Your design work will always exist an ecosystem of other design. Thinking of your masterpiece in isolation as the platonic ideal of perfect design is a mistake as it will never be viewed that way in the wild. Once your work grows up and starts staying out late with friends and stealing the car without asking and stops talking to you and then moves out and never calls home, it will always exist in a world in which it is compared to everything else. Architects understand this problem very well as they are often charged with designing a building which will be built in amongst a collection of existing buildings. NEXT SLIDE
- This photo shows one of the commuter train stations in a suburb of the Greater Toronto Area, called Oakville. As the city around it has grown considerably, the Oakville station has expanded and re-expanded many times. This particular image shows two roofs, one belonging to the private-owned GO Transit and the other belonging to the publicly-owned VIA Rail. This particular problem is also known as Design by Committee.
- This photo shows one of the commuter train stations in a suburb of the Greater Toronto Area, called Oakville. As the city around it has grown considerably, the Oakville station has expanded and re-expanded many times. This particular image shows two roofs, one belonging to the private-owned GO Transit and the other belonging to the publicly-owned VIA Rail. This particular problem is also known as Design by Committee.
- Lesson Three: It’s a small world. Firefox is used by people literally around the world and is translated into TODO languages. Each one of those languages has its own particular set of requirements in terms of space in the User Interface, particularly languages like German which tend to have very long words with no place to line wrap. NEXT SLIDE
- The process of creating versions of a product for different markets is a combination of Internationalization, which is making sure that your application understands things like different currency and date formats or measurement systems like metric and imperial, and Localization, which is translation into different languages. These two things are increasingly becoming known as Globalization. We’ll save you some confusion should you ever hop on an IRC channel with the Mozilla dev team by telling you that they are also known as… NEXT SLIDE
- I 18 n, L 10 n, and, G11n. Now sometimes I18n includes much more complicated things, like RTL. NEXT SLIDE
- That’s pretty much what we said, the first time someone at Mozilla asked if the new theme worked in RTL mode. If you’re wondering what RTL is, and we certainly were, maybe this will help you to understand? NEXT SLIDE
- No? How about this? NEXT SLIDE
- RTL mode, or Right-to-Left, provides support for languages which are read in that direction, including Hebrew and Arabic. Windows can let the browser know that it should run in RTL mode based on the user’s current language selection. It’s not currently supported on the Mac or Linux platforms. Adding RTL to a browser theme is actually pretty difficult, because there are lots of unforeseen issues which pop up. For example... NEXT SLIDE
- When you’re laying out a user interface in XUL, the markup language which Firefox’s user interface is built in, you use CSS for styling and positioning in the same way that you do when building a website. For those of you who have done any web design using CSS, this will look very familiar. The problem is in the words “left” and “right”, which lose all meaning when your interface can flip around. Instead, you have to use… NEXT SLIDE
- “start” and “end”, which are relative to which direction the user interface is facing.
- Lesson Four: the user interface of the web browser has to step back and allow the content within the browser to shine. Some of the feedback we got on the first beta release of the theme was that people were underwhelmed - that they were expecting something a lot splashier. We saw it completely the other way: we needed to make an evolution of the Firefox 1 theme, not a revolution. The browser’s user interface should be in the background and should only draw attention when it’s needed for things like security alerts. A favourite quote and one that applies to almost any design… NEXT SLIDE
- It was really important to us that we achieved an almost zen-like balance between ease of use and non-obtrusiveness. We didn’t feel a need to provide a very intensive visual experience because Firefox has such great support for add-on themes. NEXT SLIDE
- A little plug for the great work Mike Shaver has been doing on the Add-ons site: you’ll find over 300 themes up there, as well as about 2200 extensions, 40 language dictionaries for Firefox’s spell checker, and 25 search engine plug-ins which extend the search box at the top of the Firefox window.
- TODO
- TODO
- Every project has at least one sticking point where the stop energy hits the brakes and there’s just no moving forward until it gets resolved. NEXT SLIDE
- For the Firefox 2 theme, it was the Home icon. Let’s take a closer look. CLICK FOR ZOOM IN. The home icon went through a lot of revisions before we got to where it is now - here’s a quick history of it. NEXT SLIDE
- For the Firefox 2 theme, it was the Home icon. Let’s take a closer look. CLICK FOR ZOOM IN. The home icon went through a lot of revisions before we got to where it is now - here’s a quick history of it. NEXT SLIDE
- For the Firefox 2 theme, it was the Home icon. Let’s take a closer look. CLICK FOR ZOOM IN. The home icon went through a lot of revisions before we got to where it is now - here’s a quick history of it. NEXT SLIDE
- We started with this cute little number, complete with siding, lawn, and curb. It was generally felt that it was too complex and detailed, so... NEXT SLIDE
- We dropped away the finishing touches and simplified it down. Then we noticed that it was the only icon in the set with this particular perspective, so we took a different look. NEXT SLIDE
- The perspective was better, but it still didn’t match the rest of the set. So we move to more of a head on look. NEXT SLIDE
- The lawn came back here, but it was still felt that the perspective was causing issues and that the complexity of the icon stood out compared to the clean lines of the rest of the set.
- At this point we moved into pixels - what you’re seeing here is actually an EPS icon done in square blocks in Illustrator, to make sure that we can shrink and grow it up or down to fit any size icon. We had the right perspective now, but the colour wasn’t working. NEXT SLIDE
- So we tried a blue door - and this is how it shipped in the first betas that had the theme in them. A member of the Firefox community opened a bug in Bugzilla, Mozilla’s open bug tracking system, to request more colour in the home icon so it stood out better from the toolbar background. I’ll come back to that bug in a moment. NEXT SLIDE
- And so here we are. This is the home icon as it shipped in Firefox 2. Let’s take an even closer look. NEXT SLIDE
- Let’s go back to the Bugzilla bug. While we agreed with the person who filed the original bug and added more colour, another member of the community responded to the bug with a follow up thought. More than anything else we encountered during this project, that particular comment drove home exactly how passionate Firefox’s users are. The concern was that the door handle on the door of the Home CLICK was too low, because real door handles are actually mounted above the vertical center of the door. Now, I can’t argue with that point, but I can point out that a 1024 x 768 screen has 786,432 pixels in it. The door handle is exactly 1 pixel by 1 pixel. That is real passion.
- Let’s go back to the Bugzilla bug. While we agreed with the person who filed the original bug and added more colour, another member of the community responded to the bug with a follow up thought. More than anything else we encountered during this project, that particular comment drove home exactly how passionate Firefox’s users are. The concern was that the door handle on the door of the Home CLICK was too low, because real door handles are actually mounted above the vertical center of the door. Now, I can’t argue with that point, but I can point out that a 1024 x 768 screen has 786,432 pixels in it. The door handle is exactly 1 pixel by 1 pixel. That is real passion.
- Show of hands: who in the audience considers themselves a designer of something?