Smart and simple does it.

Continuing on the thread of UI's from my last post, I thought I would take on the composition of UI's for usability. Now before I bore you with alot of web buzzwords, I want you to think back to successful websites. Digg.com, craigslist.com, slashdot.org, and of course google.com, just to name a few. What do these sites have in common? Well for one they are all popular sites that emphasize content over pizazz. Another thing they all have is a rather smart interface. To understand this completely, let me go over the different aspects of these sites.

• Digg.com
• No login required to view all stories and comments.
• Space between top of page and news stories is small.
• New stories are organized in a simple and easy to understand list.
• Clearly delineated sections guide your eye to the important parts.
• Bold colors are used sparingly and on parts that are actually important, so your eye doesn't have to dart around page to find important points and there are no visual tricks being used to fool you into looking at any specific section.
• Ads are clearly marked and not mixed in with the important parts.
• Craigslist.com
• No login required to view all stories and comments.
• All important info is right at the top of the front page.
  
• Although cluttered with links, the page gives a feeling of looking at a table of contents in a book, and is strangely familiar.
• No ads. (unique to this site)
• Everything is laid bare in front of you, not a lot of clicking to find what you need.
• Slashdot.org
• No login required to view all stories and comments.
• Space between top of page and news stories is small.
• New stories are organized in a simple and easy to understand list.
• Clearly delineated sections guide your eye to the important parts.
• Ads are clearly marked and not mixed in with the important parts.
• Google.com
• No login required to search web, news groups, news, products, maps and others.
  
• Very simple interface, click to results usually very small.
• Ads are clearly marked and not mixed in with important parts.
• Clearly delineated sections guide your eye to the important parts.

Obviously marketing, results and word of mouth play a huge role in why all of these sites are popular, not just their interfaces. But let's analyze their general similarities in interfaces for a minute, because if they were hard to use, people wouldn't be using them in droves, as they are.

I think it is interesting looking over popular sites, and although I am not a professional UI expert, I can make conclusions based on my own usage of these sites. What I know is that they are easy and fast to use. I don't like to waste my time with lots of clicking and searching, and the sites listed don't trick you into wasting your time with excessive advertisements and clicking to get at what you want.

I've looked over a few sites, and I can spot a winner simply by comparing it to existing sites in general use. Now what better thing to look and compare then something near and dear to my heart? I am a programmer, so I'm going to look at some code search engines, such as the recent Google code search and rate them as I see fit.

http://www.google.com/codesearch - 6/10
My first impression of Google code search is that the interface is exactly like the google web search engine, but since code is much more involved then just a simple link to a website, I am a little disappointed. In order to get what I want, I will need to click through a lot of different links to find what I want. This is made for someone who knows EXACTLY what they want, as the search box lets you use very advanced regular expressions to find what you want. This gains points simply because Google has a huge code base to draw from.

http://www.krugle.com/ - 8/10
My first impression of Krugle is that they put alot of work into making the interface usable, yet smart and full featured. After typing in one word and clicking once, I see that the interface is using full-screen ajax, which doesn't impress me at first, as I've seen this before with disappointing results. However, I find that each result opens a special tab that can be saved, and that a right-hand pane can be opened to show a directory view of the current item. Useful and very quick.

http://www.codefetch.com/ - 4/10 (slow server)
My first visit to this site, I am thinking immediately that this is a Google code search duplicate, but with room for delineation between different programming languages. Interesting, but still not enough to keep me coming back for more. So I try to use this search, and I am very disappointed in the speed at which the results return. The code is shown directly on the search results page, which is unique, but without a interface to view many multiple results in, this site is failing in the usability category.

http://www.snipplr.com/ - 7/10
At first glance, this site looks like del.icio.us for source code, which is a novel idea. Except that this site suffers what most new sites suffer from, a lack of content. I typed in the word encrypt and returned 0 results. The concept is good, the code display allows for comments, and a description before each code snippet. The code is displayed in the standard numbered list layout, allowing tags to be put on each snippet. However, the tabs at the top are laid out in a confusing way, and the search (which is the most useful thing) is too close to the top and right, where it is inconvenient, and you might miss it. The important stuff is there right on the front page displayed in a most recent/popular format like del.icio.us does. This site only loses points in it's speed, but to be fair, del.icio.us is about just as fast as this site.

http://www.koders.com/ - 7/10
Koders was one of the first code search sites I found. Although it's layout is similar to Google's minimalist approach, it is TOO minimalist. I want more options for searching. Although it gives an option to search for different licenses of code (something I haven't seen anywhere else), it doesn't give me any great new code searching features. It has another feature that lets you search for class and method definitions. This has the makings of a comprehensive code search site (the search by clicking function names is another example). The speed is definitely lacking, like Google or Krugle have going for it, but that may simply be a matter of infrastructure. This site does seem to have more codebase then any of the previous sites I found. The only drawback I found is that the "Koders" logo and bulky search box is at the top of all pages, which draws away from it's search.

http://labs.oreilly.com/code/ - 6/10
This page is simple, and it gives me something interesting, "recent searches" which is always useful for the casual code hacker. The search results are a little "bare" with a lot of whitespace that I would rather is used for displaying the important stuff. However, overall it is a satisfying search as the results display different books with code, and the code display is succinct enough to keep me interested. Although I feel a little biased here, seeing as I find many of O'Reilly's books useful to begin with.

http://www.codase.com/ - 8/10 (slow server)
When I first saw the home page for this code search engine, I thought wow, that looks detailed. It lets me search for code specific under certain situations, even variable names. It lets me delineate which language to search from, and gives me rather advanced options to use. However, I ran into problems searching, as the engine or server it is running on is incredibly slow. This engine impressed me with another very useful aspect though, it has a fully searchable API for Java, Windows, Linux and it looks like some other API's are in the works to be put online soon. Wow, not only that, but each function and other blocks of code can be toggled open and closed, giving this an advanced IDE feel. This one is by far the most advanced search engine I've seen, and it is too bad that it is running low-end hardware for what it has. I can't recommend this one simply because it is so slow it is practically unusable.

http://www.csourcesearch.net/ - 6/10
This site has a pretty horrible looking interface, and I would give it at least another point if it wasn't so bad looking. But other then that, it is an interesting ajax enabled search that lets you search by different programming characteristics, similar to codase.com, but this one is much faster. I do like the fact that the code is also color coded, and parts of it are clickable. This search is only for C code (if you haven't already guessed), but when you find results, it isn't readily obvious what each of the results are. So without some tweaking of their results page, this is not getting too far in the code searching arena.

Since I've been rating code search engines, I thought it only fair to include an open source open source engine software package here: http://gonzui.sourceforge.net/ Gonzui gives the means for anyone with a code base to let people on the web search through it. So, you can search on Google for Gonzui and you'll find many very similar websites. The Gonzui interface is just like a cut and dry Google search for code, which is what many other sites offer. Of course this has the added benefit of being customized, as it is open source. A few sites that use Gonzui: http://raa.ruby-lang.org/gonzui/, http://gonzui.cihar.com/, http://xen.begi.net:46984/

It will be interesting to see which code search will win in the end, but I have a feeling that many people will simply use Google regardless of which options are available because they trust it. I don't blame them, Google does a good job of giving you just the important stuff and no fluff. And I'll end with this, if you can make a site, give people the important stuff up front, don't make them click to get it, or else you stand to lose people's interest. That's right, I'm talking to you Soapbox (http://soapbox.msn.com/). You aren't going to kill Youtube or anyone else anytime soon by protecting your important stuff behind a login page.