NOTE: While still useful and fun to read, this essay is outdated. I have a new essay and new design in an essay entitled Is Mozilla Bleeding Away Users?
[This is a rather lengthy essay around 5000 words, including a full-fledged design coded in HTML/CSS. While I have tried to edit it down, this essay tackles (and I believe fully solves) an underlying problem that cannot be said in fewer words. It is very much worth the time to read every word.]
Ah, Mozilla's products are now for endusers. Internet Explorer's security problems doubled the download count that might have added a 1% of total web users to the Gecko camp. As Mozillians eagerly await the release of Firefox 1.0, the Firefox team is supposedly making the website user-friendly and creating a grassroots button campaign. There's even talk of an Apple-type switch campaign. The download.com reviews project surpassed its goal of 1000 reviews in about half the time alotted.
It seems as though everything is going well for the Mozilla Foundation. Ah, but Mozillians are quite unaware of the bigger picture, mistaking the trees for the forest.
Anybody figure out why the Apple switch campaign was moderatly successful? It begins with symbol $ and ends in the letters TV. Ever wondered how a 1% rise might be accomplished without a wave of Internet Exploder hatred? Since it was a US govermental organization that recommended ditching Internet Explorer, isn't it more likely that downloads came from other governmental and educational organizations and not "average" people who don't read govermental security advisories or nerdy online webmagazines? However, the hidden problem is not in these fancy boyish ideas and speculations on the part of Mozillians, but a myopic attitude that turns a blind eye to the real problem: the Mozilla website's (lacking) ease of use and practicality.
Even if an Apple-type switch campaign, IE's security breaches, or a buttons campaign could attract millions and millions of average users, they'd find themselves on a site full of potholes. (If you're protesting that Mozilla.org and the Firefox site are now awesome, this essay is especially for you.)
In fact, the entire website is completely user-unfriendly. In certain parts, it's as if the web designers went out of their way to fail splendidly. When a user first goes to the main Firefox page (or gets redirected from a Firefox button), they are greated with a huge-ass logo and a huge-ass picture of a car, yes a car. Then, they might notice a bit of text that goes something like this: "Firefox 0.9 is the award winning preview of Mozilla's next generation browser." What's a preview and what's next generation? These aren't brillant catchwords that will lead the user to read on, but they are downright boring phrases that will make the user leave. There's no reason to imitate big corporation-style phrases: the only reason their slogans "work" is because their ads are shoved down our throats day in and day out. Oh and remember, most people don't know what a browser is: they mix it up with a search engine. Why not say something to the effect that compares Firefox to Internet Explorer? By using that name (Internet Explorer), people have a mental image of what Firefox is: a replacment of Internet Explorer.
But let's scroll down and read quotes: "...nothing short of a revelatory experience." Wow, how unspecific. So by now the user thinks Firefox is kinda like Google, but more revelatory: whatever that means. But wait, there's more: "...a breath of fresh air... Microsoft should be worried." Oh oh, Microsoft's in the picture, that means Firefox or Mozilla or whatever is probably a computer thing as well... Even though Firefox has had little press, I'm sure non-vague quotes that directly mention Internet Explorer are available.
Let's look at the Download Now! box on the same Firefox page. Hmmm. Download now or get a CD thru the mail. Thru the mail obviously means money so is the download for free? It doesn't say free anywhere... Why should I pay for a revelatory Google thing computer experience... I don't even know what it does.
Oh, finally, here's some list of what this "preview" does: popup blocking... oh I know what that is. Tabbed browsing, huh?, I don't understand, skip, no clue what it does. Smarter Search... skip, no clue, bad examples, why isnt there a picture or some graph or something... Privacy and Security... what's malware or ActiveX, I don't need that feature, it's not like I look at porn... "Files you download are automatically saved to your Desktop so they're easy to find.." HUH? As opposed to...? "Most customizable..." cool... like colors of the program right... Sounds cool. Is there a link I can find more info about this at? I cant find one... Oh well... "powerful JavaScript and CSS error/warning console"... whoa there, this really isn't for me, since I don't even know what the hell JavaScript is or what consoles are. Hmm... Im confused... I saw a bunch of menus on the right side... I'll look there... Firefox On CD... money... Firefox Gear... money for stuff I dont want... Donate... NOT... AHHHHH!! Extensions and Themes, I think I remember that... I'll go to "Get Extensions"... wait this isnt mozilla.org no more, is it... completely different layout... HUH?... different stuff.... where do I click?...Security Update - ShellBlock... what is that? 100 extensions... click click click... you know what, fuck this...
And that's a minute in the life of a frustrated potential user, who got tired of the website's crap and left. (While most of it is improvised, I've gotten similar responses when I asked friends to try to see if they wanted Firefox.)
The general reason as to why the Mozilla.org page and main Firefox page are user disasters is simply that both pages try to be all to all, and end up being not enough to anyone. (The problems of the website can be likened to the fiasco of the late 90's when search engines tried to be portals. Guess which search engine came out on top?)
The design of both, but especially the Mozilla.org page, shows that prettiness was concocted before anyone even asked the question, "What needs to be the functions of the frontpage?"
Albeit a bit late, let's try to set the goal for the frontpage: to make sure as many people download Mozilla products as possible. Thus as a corollary, we can see that anything that doesn't help in increasing the number of downloads needs to be bloodily bludgeoned into oblivion and replaced. After defining the goal, we can see which functions help and which do not.
But before specific functions of a good website can be discussed, I must ponder if anyone ever grasped any goal for the frontpage. Sometimes the suite is on top, now it's the preview release of Firefox. And some other programs are haphardly thrown in at the bottom. There's barely any description of the products, which in and of themselves are overly vague. The frontpage seems to me like a pretty mirror site.
What's the focus? The frontpage can only maximize the number of downloads if it's settled on what is actually to be downloaded. The Mozilla Suite doesn't fit into this scheme because it's a bloated program that's clumsy to use. Anyone who doesn't like it for that reason will not bother to download Firefox. I don't recommend completely getting rid of the suite because I'm not familiar with the precise development process. I simply want it in a location where it doesn't detract attention from the two deserved stars: Firefox and Thunderbird.
So now we have a goal: The frontpage needs to maximize the number of downloads for Firefox and Thunderbird.
The Mozilla Foundation's two premier products by themselves have no future unless they are supported by appropriate resources. That's complicated jargon referring to specific or even generalized functions in a design that show endusers that Firefox or Thunderbird is truly for them. Such functions need to be persuasive to successfully convince endusers to download either program.
Unlike today, the frontpage needs neither to overwhelm the enduser with reasons (and poorly written ones at that) nor provide absolutely no information. I believe a balance between the two absolutes (the Mozilla.org and Firefox page) is in order. Just two or three top features is enough on a new frontpage. Since it's very hard to visualize something like an integrated search bar or tabs without seeing it, why not have a short Flash clip of the feature? The demo doesn't need to be overly splashy or lengthy: it just needs to make the enduser understand what exactly the feature does.
Since the frontpage with its few reasons could only convince so many people right off the bat to download either Firefox or Thunderbird, a condensed Top 10 (or so) page needs to be created for each product. Each feature detailed there needs to have a concise (short yet meaningful) description, quick flash demo, and pertinance. By pertinance I simply mean the feature needs to be picked with the enduser in mind. Thus, headings like "A Developer's Best Friend" on the main Firefox page are a no-no.
Hence the basic core of a new Mozilla.org homepage needs to have this basic outline:
While the frontpage is missing something pivotal that will be discussed next, the simplicity speaks for itself. On such a new design, there wouldn't be a million links here and there. This new design would be completely focused on convincing users to download Firefox or Thunderbird.
Assisting the core's goal of maximizing downloads, the Three Pillars would be free support, customization, and a visual tutorial. While seemingly post-download concerns, all of these pillars are actually in the area of marketing.
If people realize that Mozilla is dedicated to providing free support, then they will be confident enough to try out the products. As of now, neither the Mozilla.org page nor the main Firefox page mentions this useful resource in any detail.
While the Mozillazine forums could be the envy of any company that spends money on such help services, there still are minor problems with the current forums. If linked from Mozilla.org, Mozillazine's layout is not complementary or even similar to Mozilla.org's. That and the fact that there's too many forums on Mozillazine (some that don't pertain to enduser help) can make an enduser feel nauseous.
The fix is very easy: integrate the two designs, segregate a few forums specifically on a single page for endusers, and make sure a search bar is on top of that page, while retaining the advanced search feature. Once again, this Mozillazine Enduser Forums page would be rather simple, just like the frontpage.
The second pillar of the new website needs to be customization which would simply serve as the home for extensions, themes, and any other plugins. Just like free support forums, customization too needs repair. Just like help forums, an enduser who fully knows that Firefox and Thunderbird are customizable, tends to feel more confident. An organized grouping of plugins certainly aids in that.
When I last counted, there were no less than four Mozilla.org created or endorsed pages that fall under the umbrella of customization. There's update.mozilla.org (the design of which is just atrociously ugly), the mozdev search bar engines page, the mozdev plugins page, and texturizer.net/firefox (which seems to have been castrated of any real function).
None of those pages are geared towards endusers. Anything that isn't for endusers but still belongs to any sub-section (extentions, themes, search bar engines, plugins,) of the cutomization pillar needs to have a link at the bottom alerting everyrone with links like "Extentions for Advanced Users" or "Plugins for Advanced Users". It's simply not enough to include enduser content on the page, but a successful design needs to segregate content specifically for endusers.
What the hell happened to the great extensions list on texturizer.net/firefox? Unlike the update.mozilla.org debacle, the David Tenser creation allowed people to casually browse through the extensions. Sure, the texturizer extensions list had problems, but a lonely enduser could look through such a list and see what the extensions did without having to click click click click click. An enduser not sure about Firefox will feel less confident after looking at the overly complicated extensions page.
The problems of such a list were minor in that I would recommend grouping non-buggy, enduser-in-mind extensions on the first page of extensions, then with a link at the bottom alerting "Extensions for Advanced Users". (This "Advanced Users" link is to avoid debacles like having the Web Developer extension on the top 5 list on update.mozilla.org. No offense, I love that extension, but it doesn't belong if the name of the game is Firefox for Endusers. Interestingly, the fact that such a non-enduser extension is one of the most popular speaks plenty on who is actually doing the downloading of extensions: certainly not average people.)
Plugins (like Flash or Java) and the search bar engines also need seperate, non-crowded pages geared toward endusers in a manner similar to the extensions page. As far as themes, they are all for endusers.
The fix in fewer words: integrate the design with the core, segregate the content for endusers, with Advanced Users links where needed.
Even if the user possess the vocabulary to explain his problem and is brave/determined enough to post his question online, the limitations of non-visual text-based forums are obvious. Perhaps it's just a cry from my own previous failure, but a tutorial series that explains key features through a visual medium seems like a great idea.
A tutorial could explain an encompassing concept in whole such as tabs: not only the function (as in the frontpage linked demo clips) but the keyboard shortcuts, options, and tricks, etc. While this pillar is not contructed in any way to date, it certainly would reinforce to the enduser that help is easy and just a click away.
The three pillars need to be integrated in design and their content segregated for endusers. The three pillars need to be hinted at on the frontpage so the enduser feels confident that Mozilla.org has free support, customization, and animated tutorials. People need to trust Mozilla.org before they abandon the only way they know to the Internet. The current designs that the Mozilla Foundation uses fail miserably. Therefore, a completely new design needs to be created based on this core + integrated/segregated pillars mentality.
But where oh where can we find such a design, already-made that highlights the functions of the core and gives a template for the three pillars? Well... I, Andkon, might have made one when I was bored. Before you go to the new design, please realize that even though it's in a "ready" state, it's nonetheless conceptual. Like concept cars, this design reflects the main ideas/functions rather than the bells-and-whistles, though there's a few of those included as well.
There's no need to check but go ahead: no tables, valid HTML 4 Strict, valid CSS 2. The size is a marvel: the entire page with its style sheet and images is only 27KB, smaller than the warped image you clicked to get to it.
I'd like to explain the reasons behind the practical specifics of the design. As expected, the list is in approximate order of how a person would first look at the different parts. (As in the rest of the essay, Mozilla.org page refers to the Mozilla homepage and the Firefox page refers to the main Firefox product homepage.)
As anyone who tried to write HTML/CSS before has experienced, there's a few discrepancies between different browsers and versions. I have so far tested the design in winIE6, winIE5, winFF0.9.2, winOpera7.52, and only miniscule problems have reared their heads. Since Firefox is standards compliant across all systems (and same with macIE), I do not expect extra problems with those versions. The problems are listed in order of importance:
As we can see from our eyes and the list, there's only small cosmetic problems that most people would not even notice, affecting only a tiny population.
It's perhaps time to compare my design with both the current Mozilla.org page and the current Firefox page in the area of function. The table is rather one-sided, though I still think my design is far more practical than either current designs combined. The table also reiterates the strengths of my design.
Where applicable, the browser tested was winIE6, since that's what most people will use to access the site. "@ first glance" means "on the first page that is loaded on the given screen resolution without scrolling."
| Criterion | Andkon Design | Mozilla.org page | Firefox page |
|---|---|---|---|
| @ first glance on 800×600, user can see that Mozilla has free support and its products are customizable. | YES: links are fully visible on sidebar | NO: not even after scrolling | NO: only vague link on side. |
| @ first glance on 800×600, user can see that Mozilla is not an evil money-whore corportation. | YES: "The non-profit Mozilla Foundation..." | NO: even the .org is dropped from the top left's logo. | NO: the fact that Firefox is completely free is not even mentioned. The "Get Firefox on CD" blurb leads one to think that Firefox costs money. |
| @ first glance on 800×600, lots of valuable space wasted due to overzealous padding and margins. | NO: neither too airy or too condensed. | NO: but design only allows a single product to be in the spotlight. | YES: a big logo, a huge image, and a few words are the only things visible. |
| @ first glance on 800×600, user can see a real reason why the Mozilla product(s) are better. | YES: First item of Top Three List is visible. | NO: only one product can be in the spotlight and crap like "award winning next generation browser" is rather poor. | NO: hardly anything can be seen, "empowers you to browse faster" doesn't cut it. Scrolling reveals way too much info. |
| Color scheme cleverly focuses eyes on products. | YES: a signature of the design. | Colors are everywhere, focus is nowhere. | Color scheme is paltry and focuses nowhere in particular. |
| Color scheme creates/reinforces brand image. | YES: yet another signature of the design. | NO: what, Mozilla.org has a brand? | NO. |
| Design works (without horizontal scrollbar) on even 640×480 and lower. | YES: thanks to the fluid columns. | YES: probably the only thing the design does well without a hitch. | NO: fails a few pixels below 800×600. |
| Design created with "function first, prettiness second" mentality. | YES: a key feature. The design illustrates key functions. | NO: "oh look, what a pretty website we've made... oops it's useless" | NO: A+ on trying, but F for functionality. |
| html + css + images + etc | 27KB/~5 seconds on 56K modem: amazing feather-weight | >75KB/~11 seconds on 56K | >85KB/~13 seconds on 56K |
| Design uses idiotic or meaningless catch phrases like "reloaded" or "next generation browser." | NO: only catchphrase tells people Mozilla.org is non-profit. | YES. | YES. |
| Page soaked full with links, some are not even for endusers. | NO: only 10-15 links. | YES: 50-60 links. | YES: 30-35 links. |
| Design has heavy reliance on images. | NO: try to turn images off and the design still communicates the same message. | So-so: though it's not as if it has a message to begin with. | YES: @ first glance on 800×600, there's virtually nothing but images. |
| # of pages on 800×600 (counted via vertical scrollbar length) | ~3 pages | ~3.5 pages: communicates barely anything. | ~5 pages: communicates so much in such a scatter-brained manner that the information becomes disorganized and hence useless. |
| Word count | ~350 words total: clear and concise. | ~450 words total: mostly links, useless news that's boring to an enduser, etc. | ~575 words total: "And then like he was like 'Yeah duh, I'll take you to the movies tonight' and like I was like 'Yeah dude thats cool man anytime.'" |
| Created by a "non-professional" who started his first site on Anglefire almost exactly three years ago. | YES: proudly. | NO: designer (while still good) fails to grasp the connection between marketing for endusers and appropriate design. | NO: tries hard at realizing there is a connection, yet still fails miserably. |
I believe that this new design is timely possible to coincide with the launch of Firefox 1.0, scheduled officially for sometime in September. Obviously, the tutorial in no way could be ready, but perhaps it could be for the as-of-yet unannounced Thunderbird 1.0 release. However, what exactly could be done in time for the Firefox 1.0 release?
If it took me less than a 24-hour period to write this essay from scratch and about four days to do the design, I'm rather confident that all of this can be worked out in a matter of a few weeks.
[One last thing:] Apart from Mozilla.org, there's tons of foreign (non-US) sites that have completely different designs. Even under the current scheme of things, this chaos does nothing to reinforce brand image. Webmasters and editors should be asked to make a replica of the new design and simply translate the site to their language.
I am available for comments concerning this essay and its design via | mozilla @at@ andkon .dot. com |. I would really appreciate suggestions for improving the design, as I know it's a bit plain. If you are really enthusiastic, please download the zip file of the design and improve it yourself. Because I hate getting attachments, I ask you to upload the improved design on your website and then simply email me the link. If you like the ideas presented here, please let others know about it as well.
One thing that would really make my day is the creation of a few flash demos. If you go thru the trouble of making the short movie, try to consult with me beforehand so I can give you ideas.
As I've come to discover as of writing this, the design presented here was indirectly influenced by Stephen Poley's page. (I'm the quoted person who said on 26 Feb 2003 that a "1 fixed 2 (percent) fluid layout is impossible in CSS.") Oddly, I was then plotting an independent enduser-oriented redesign of the original black border Mozilla.org...