The eternal quest for the perfect spank experience led me back recently to the navigation menus on linkspank. People had suggested to me that the right menu of popular sites and categories was ugly. Also I felt the top menu and the left menu could stand for some beautifying.
Our philosophy along the way has been to focus on making something that works well and is easy to use and fast, with beauty trailing behind as a distant priority. Nevertheless, "little things can make a big difference," and I didn't want to alienate people who were trying out Linkspank just because we have ugly menus.
The easiest way to construct beautiful menus is to use images. This allows you to use any font that you want for the text. You can also create elaborate backgrounds for the images and use javascript to make the menu tags do neat things when you hover over them.
Some Menus on Well-Designed Sites
But a lot of big great sites that work well shy away from images. Some examples.
Gmail uses a text-based menu with very little formatting. It used to be even plainer, and over the last year or so they added the "more" menu and the line under the menu.
Pros: loads very fast. You never have the problem of an image failing to load on a page. Easily confused users can recognize that the menu elements are in fact links (which can be a problem). It's pure and simple.
Big pro: if you change the size of the text on your page, the menu gets bigger. (not really doable with an image).
Cons: a bit ugly.
Facebook's menu has similar pros and cons to the Gmail menu. It's actually a text menu with css formatting, but it is as attractive as many an image-based menu. It makes clear that links are links by using changes in color, rather than underlining.
YouTube has two menus: an ugly but very clear text menu, with traditional blue color and underlining; and a set of tabs. The tabs look like images but if you change the size of your text you can see that they are actually images with text overlaying them.
Casual Conclusions
You can get the hint from these quality sites that there are major virtues to text menus. YouTube uses some images, but in what is still a text-based menu, and employing wide tabs that wouldn't work if you had more menu items (and which take up a lot of vertical real estate as well frankly).
So, how do you spice up menus without images?
(1) gmail says, "you don't"
(2) facebook says, "use colors and css"
(3) youtube gives a mixed answer.
Linkspank's menu (For Now)
Gmail's menu and YouTube's plain menu is very close to where we are starting, which we have deemed a bit ugly. YouTube's vertical marks are interesting though - we stuck them in since our menu items have multiple words and the links are not underlined, leading to some link parsing confusion.
YouTube's tab method doesn't work for Linkspank's menus, once again because they have multiple words / are long.
The color / css style used by facebook is probably best for most sites. It doesn't work well in Linkspank's color environment though - it's more a minimalist design overall, much like Gmail.
We ended up using an old trick from the (paper) publishing world: just use a different font. Open up some books: you may be surprised at how often section headers, in addition to being a bold font, are also a totally different font (often a rounder font).
Gmail, facebook, and YouTube don't use the other font method. Fonts are generally tricky since there aren't many fonts that are supported by various browsers and computers. But I figure, hey, it must be ok to use TWO fonts, and in fact I think this would be an improvement on an all-Arial world. So we're trying a little Trebuchet and we'll get back to you on how it goes. If you have suggestions - or the font isn't showing up for you correctly - let me know ;-).
Posts
