Well, I was accepted to Google Summer of Code 2009. This is my first time participating in GSoC. This is my first time working on open source software. This is also my first blog. It’s a summer of firsts, I suppose. More on my specific project in the next post. But I thought I’d use this post to talk about why I want to work on Camino.
I’ve been using Macs for a long time (since the Mac SE) and I’ve been using Camino a long time (since it was known as Chimera). When Chimera first came out, it was competing against browsers like Netscape and Internet Explorer for Mac. There wasn’t a Safari or Firefox yet, or any other of the many browsers out there now. While Netscape and IE have always looked and acted like bad Windows ports on Macs—especially OS X—Chimera was different from the start. It looked like a real OS X application and it was very fast. I remember if I ever needed to use a friend’s computer to do some work, the first thing I’d do was download Camino.
Part of the reason I was interested in working on Camino during Summer of Code is because I’ve always liked the browser. However, I have to admit that recently I’ve been using Safari 4. It’s very fast and it has some nice features. One thing I like about it most is the address bar. It has an updated look that really brings it into the world of Leopard, and the URL autocomplete works very well. It always seems to suggest exactly the site I’m looking for. However, more importantly, it presents the results in a way that is immediately readable. Here’s where I’m going to show some screenshots of various popular browsers and say what I like and dislike about each. At the end, you’ll get to see what I think the Camino address bar and autocomplete list should look like.
Firefox
Auto-complete popup list in Firefox 3+
This is what Firefox 3’s autocomplete popup looks like. First the good: it does a decent job of suggesting URLs. It matches keywords against page titles and URLs, and even tags that you can assign to pages à la delicious. Brains is good, but it’s not everything. Now the bad: if the list is so poorly presented that the user does not recognize the URL they are looking for among the results, it doesn’t matter how smart it is. This has happened to me before in Firefox. There are a few reasons I think the Firefox list is so hard to read:
For one thing, people generally don’t know the title of the pages they visit, yet this is the most prominent information in the list. Also, even if the user does know the title, there may be more than one page with that exact same title. For example, how many About Us pages are out there?
Overly complicated. Two lines, two font sizes, bold and underlined letters (once a search is started), favicons, little yellow stars. Some of these properties are nice features on their own, but when they are all combined, it is daunting and discourages the user from quickly scanning the results. This is probably the #1 reason why it’s possible to miss the result you’re looking for, even though the list is only six items long. The worst offender here is the two lines. Reading this list is like reading a newspaper article.
What’s the point of having scrollbars? If you have to scroll to see the result you want, you may as well spend the time to do a google search—it would probably be faster.
Overall, I think Firefox’s autocomplete list is poorly implemented, but I will look at the sorting algorithm (known as “frecuency” sorting) later this summer.
Safari
Auto-complete popup list in Safari 4 beta
This one is from Safari 4 beta. I’m not going to show the autocomplete list from Safari 3 because I don’t like it. But there is a lot to like about this one. For starters, my personal perception is that is does an even better job of suggesting URLs than Firefox. Apple doesn’t publicly document their algorithm like Mozilla does, so I don’t know how they do it. But there are very few times when the “Top Hit” is not exactly the website I’m looking for.
I think the design of the popup window is also spot on. Like I said earlier, the fact that it mimics the look of a Leopard menu is very clever. People are used to scanning menus to find the item they are looking for, even if it’s not at the top of the list. Many common menu items, such as Quit, Print, Save, Duplicate, etc. are often near the middle or end of the menu. Thus, I think people are much less likely to miss the result if it’s in the list. Important features of this design are the one line per URL and the menu-like dividers that separate Top Hit, History, and Bookmarks.
There is not a whole lot I don’t like about Safari 4’s autocomplete list. If it were up to me, I would switch the order of History and Bookmarks because I think sites that users have bookmarked are a lot more important to them than sites that they have merely visited before (and thus should be higher up on the list). I also miss favicons whenever I use Safari because they are often the easiest way to spot a site you are familiar with.
Camino
Auto-complete popup list in Camino 1.6.7
Finally, this is what the Camino autocomplete list looks like. It is very similar to Safari 3’s list in that it’s just a plain NSTableView, but with the addition of some icons to the left of each item. However, these icons don’t seem to be favicons—they always show up as little globes on my machine. The major problems I have with this design are:
The important part of the URL often gets cut off. The hostname can only get you so far. What if the path is several directories deep and what you really need to see is the file name? With this design, you’re out of luck. You have to rely on the page name, which you probably don’t know anyway.
Too crowded. All the text seems too close together, which makes it harder to read. Plus, the descenders on the bottom line get cut off.
Scrollbars.
New Camino
Redesigned URL autocomplete list for Camino
Here’s my current “mockup” of what the new Camino autocomplete list will look like. It’s actually mostly not a mockup—it’s taken from my working demo. However, my demo doesn’t currently fetch favicons, so that part is Photoshopped. I’m not sure at this point if I’m going to keep them or not (they look a little crowded to me). Here’s what else I’ve included in the design, based on my observations of the implementations in other browsers:
Menu-like appearance. Familiar interface that is easily digested by the user.
Separate sections for bookmarks, history, and popular bookmarks (history not yet implemented). The popular bookmarks section is pulled from delicious.com and is activated when a word is typed into the location bar that matches a tag on delicious. In the screenshot, “apple” was typed into the location bar.
Integration with delicious.com. In addition to the popular section, the new autocomplete list will also contain bookmarks from the user’s own delicious account. These are listed under “Bookmarks.” Matches are based on page title, url, and tags the user has assigned the bookmark.
Source icons. These icons—on the far right of the list—show where the item came from. The delicious logo indicates the item was found on delicious.com, while no icon means it’s local. Currently, only integration with delicious is implemented, but in the future other sources could be implemented as well.
Size 11 font used throughout. Controversial, I know. But I really don’t see the point of making the page title a larger font size.
That’s it for this post. I’m sure there will be changes to the design in the future and there’s still a lot to do in terms of coding. You can check out my current status in the sidebar in the upper-left corner of the page. I will try to keep it as up-to-date as possible.