About → User Interface

The best sites on the web give the user everything they want, and nothing they don’t. No amount of flashiness, graphic design, or confusing links will ever trick the user into thinking they’re getting a better deal than they really are. Since the cost of switching sites is usually close to zero, if a site provides something your users want, and it’s easier to get to the information than on your site, your user will disappear in droves.

Let’s take a look at why computerworld.com is a terrible news site:

The first image is a miniature of the site itself, and the second is the same image with all the ads and extraneous information marked with red. Note also, there are two pages to this article, so you have to wade through two of these.

Not only are the ads ridiculous, but the article itself is about an image. Why is there no picture included? If you really care to see what images they’re talking about, you then have to turn to Google and search for it yourself.

Full article here

Javascript:
>>> a = [1, 2, 3]
[1, 2, 3]
>>> b = [4, 5, 6]
[4, 5, 6]
>>> c = [7, 8, 9]
[7, 8, 9]
>>> a+b+c
"1,2,34,5,67,8,9"

Who knew arrays were strings?

I needed to format some dates in the same style as Microsoft Outlook in JavaScript. Basically the dates get grouped into the following groups:

• Beyond Next Month
• Next Month
• Two/Three/Four/Five Weeks From Now
• Next Weeks
• Saturday
• [the rest of the week]
• Tomorrow
• Today
• Yesterday
• [rest of the week]
• Sunday
• Last Week
• Two/Three/Four/Five Weeks Ago
• Last Month
• Older

The library is MIT Licensed.

humanizedate_v2.js

Apple released the Safari 3 Public Beta today. It is the “SDK” for the iPhone. However, as a web browser, it’s crap.

Here we have a nice view of Safari completely ruining all the fonts: the ordinary text is too dark, and the monospaced text is far too light. The titlebar is centered, and I realize that’s a Mac thing, but it makes the title confusing and leaves a strange empty space on the left. The window can only be resized by dragging the lower right corner, and the rest of the window’s edge is just useless.

This just highlights that you can put “Preferences” under anything. Maybe I want to File my preferences? What if I want to View my preferences? I need some Help with preferences. Hey, does this Window have any preferences?

Here is the Safari preferences dialog (which apparently got cut off through some neat trick of layers). It is here to contrast against the bug report form:

Here’s the bug report form. This form pops out from the titlebar in the cool squishy Mac style, so why does preferences get a plain ole dialog instead of the usual Apple polish?

Note the inconsistency even with iTunes. iTunes doesn’t have anti-aliased menus, and it has a completely different scrollbar. Did two different teams design even the look and feel for these applications? I expected more consistency.

Bonus unfeatures: no five button mouse support, unfamiliar shortcut keys, no extensions, also:

Some neat things to check out: ctrl-f find is really awesome, textboxes are resizeable, you can drag a tab into a new window (with a nice animation), plus the obvious benefit of being able to develop Safari apps without actually needing a Mac.