A few hours creating a tiny image

Despite the spartan layout on Linkspank, some spankers are confused about where the menu is, or what they can or should do when they receive a spank from another (slightly savvier) user of the site.

a picture of the menu

I've tried various tactics to address this issue. For a while, the "spank" and other links were formatted as big red buttons. Some people liked that, but it started to drive me nuts with all the red on the page. I felt that red as a highlight color was being overused and abused.

Today I decided to try creating an image that would go at the left of the spank and call attention to the links. My first idea was to create a little icon with the hand in it. Some work led to this icon:

first stab at the icon (bigger size)

But when I shrunk the icon to 40 x 40 pixels, it looked crappy. I decided ultimately that it wasn't my lack of skill that was causing the problem, so much as the fact that the hand is a fairly intricate shape to be presented at such a small resolution.

After despairing briefly, I got the idea to use a caret-shaped image to call out the menu:

the spanky caret

This took me about two seconds to make, and I like it so far. All I wanted was something that says, "Yo! Look here. This is the spot," and the caret does a pretty good job of that. It also looks a little like a command prompt, or an arrow, both of which make sense in this context. It's also a use of red that seems to be in line with the usage of red on the rest of the page.

Finished product:

Drew Barrymore yech!

That is all. As for the Seal of Spankiness, I'm using it for the time being at the side of the page to promote the Linkspank Toolbar, which is getting high reviews so far.

I hope you have enjoyed this foray into random minutiae. Have a nice day.

Beers and the User Experience

This week we hosted an event where we gave people free beer to bring their laptops and Join the Spank. The objective was to test the user interface and user experience of joining the spank and trying out the site.

We had 6 or 8 people, which was about a perfect number. The event was hugely useful and easily worth the $70 bar tab. There were many comments and little discoveries. Here's a sample of some of the more interesting ones:

• Some of the Ajax (fancy technology) was prevented a couple people from joining, so a lower-tech (and faster, actually) process for Joining is coming soon.
• Multiple people, once they logged in, ignored the orientation page and went straight to "Start a Spank." Not what I expected but oh so reasonable in retrospect.
  
• After spanking or adding a link people wanted to see their Wall. Once you get used to spanking you don't look much at your own Wall (you know what's there!) but it's of primary interest initially.

All in all, lots of good improvements in the process for our upcoming launch. I shudder to think how many people have tried and failed Joining due to the first part above! Though the positive flip side is that our growth rate should increase.

It also goes to show that this method of learning gives different results from the pipeline of feedback from friends and users (though that pipeline is quite important).

the Pyramid Principle in the User Interface

The Pyramid Principle is a great concept in writing, which ought to be more widespread than it is. (The book is out of print and the creator, Barbara Minto, works it as a consulting business rather than spreading the word.) The gist is that your writing should have one main point, supported by a couple supporting points, each of which is supported. It's a simple idea, but deceptively difficult to stick to and deceptively powerful.

A great idea (as usual, from someone else) was, "How bout you organize your home page according to the Pyramid Principle?"

A step in this direction is a new right navigation:

I think it's way clearer than "Tools" and "Departments", the previous categories.

Linkspank is the greatest bestest way to share links because:

• Friends - You do it with your friends
• Spanks - There is a lot of good stuff to send and receive
  
• Winning - You can win stuff and achieve your way to glory.

Just a tidbit.

The Lost User, and Allegories of Gmail

What is Gmail's "value proposition"?

Try to tell me, right now, in ten seconds, what supposedly makes Gmail better than Hotmail or Yahoo!.

If you can do it, then in my opinion you are a rare individual. Because I have rarely heard Gmail's value proposition explained well. That would include Gmail's site:

Big list, little meaning

These four things about Gmail are not particularly unique, compared to Yahoo! and Hotmail (although some of them used to be).

Here's my answer: "Gmail, the first web service that allows a layperson to be as fast and efficient as an expert user of pine and other tools in a Linux environment."

It's a pretty simple idea, but it's hard to explain to people. Pine is very geeky:

Comparing something to Pine may not be desirable

Sometimes simple things are hard to explain to people, if they aren't familiar where you're coming from. And if you're coming from a different place from your users (and as the designer of a technical product for laypeople, that's always true), it's hard to know what will be clear to people.


Lost Features, Lost Users

I'm not picking on Gmail - I like Gmail a lot, and so I'm writing from experience. I have a lot of experience explaining keyboard shortcuts, search syntax, and filters to people in Gmail.

Also, I remember what it was like to first start using Gmail. It was a new environment. Yet now, it's so simple... to people who know it ;-).


Parlez vous Spank?

I've been thinking about the old "Gmail challenge" because I keep discovering how many Linkspank users - even people who obediently, regularly check their inboxes - don't understand what a spank is or how to do it.

(So if you're among them, don't feel bad.)

As I always do, I'm blaming it in part on UI issues, and a solution is in the works. But the challenge does not disappear with a good UI. (After all, Gmail's UI is pretty good.)

It's really a new concept, which savvy UI and tutorials can educate on, but which is still new... even if it's very simple.

My new mission: get people to understand what a Linkspank is.

Like I said, new UI is on the way. Until then, the best way is to try :-), and maybe refer to our primitive tutorials (especially the first two):

How to Spank

How to Spank Faster

How to Earn Points

More Fun with Menus

Lao Tzu writes:

Governing a large country
is like frying a small fish.
You spoil it with too much poking.

Spank Tzu may have written:

Governing a small startup
is like playing with a large pinyata.
Beat the crap out of it.

In other words, I am often pushing changes too quickly to be able to measure their effects scientifically, or let things take their course fully. :-)

Today's experiment is a further push with menus. I am proud (so far) of some of the recent menu changes described in this previous post, but I still faced a problem: the browse menus on the right weren't being noticed by people.

The problem seemed to be that the menu was located to the right of the page:

Browse menu at the right of the page

... where spanker eyes were not travelling to.

So let's try the menu on the left side...

Browse menu at the left of the page

Along the way, this inspired a shortening of the dark gray box at the top left, which was probably warranted anyway. (With regards to the other post, note the formatting of this menu somewhat like Facebook.)

The main trade-off of putting the browse menus on the left is that they have eliminated the "random profile" listings and the Spankathon/contest reminder. But I want to experiment with more sophisticated ways of sharing information about people and the contests in the context of the home page anyway... hence the experiment is underway! I'll get back to you on whether people browsing behaviors change.

This Ain't Your Daddy's Search Function

A dorky and slightly technical post today.

As just mentioned on the super-official blog, we have put up a new "quick search" feature for testing. (This was the "small but cool" feature I was excited about in last week's post.)

This feature is interesting to me for three reasons:

1. It gives a new perspective on search
2. It is an interesting topic to discuss the use of "AJAX" vs. web 1.0 programming
3. It is the latest chapter in an interesting story about the design of linkspank's user interface


1. Can Search be Improved?

Google rules the world of search (image courtesy of google earth). I remember when I first tried Google (sometime around 1998) and immediately felt, wow, this is something truly new and special. The rest of the world agreed, and since then lots of people have asked, Can search be improved? What is the future of search?

To me, search is not a sensible place to compete as a little startup because it's a bloody "red ocean" of competition.

But there are two kinds of "searching" that I feel are being underserviced right now: searching for "new stuff" (including news articles, but also new websites!), and searching for or organizing links that we view, share, and receive.

Linkspank quick search is a little step towards addressing these consumer needs. Even at Linkspank's young age, I already think the quick search does a great job of helping to find new stuff and keep track of quality links.


2. On the use of "AJAX"

The quick search feature allows you to search for links and browse results without opening a new browser window. I think it's a pretty cool use of ajax technology.

Fact: Stuff that loads or processes right in the page is cool for the user, because it's so fast. But that fact stops being true when the thing in the page takes a long time to load and it would actually be faster just click a normal link.

So the challenge in making an ajax feature is whether it will be (and stay) fast enough. One interesting thing is that ordinary web search like google is generally not fast enough for ajax, whereas searching for new links IS fast enough (or at least way faster). I'll leave the argumentation as a puzzle for the technically minded. :-) If you're not familiar with ajax and you want to read about it, see this wikipedia article.


3. An Interesting Story about User Interface (UI) Design

In December 2006 I developed a very strange-looking, very slow prototype of Linkspank. (It was called "stuffmoo" at the time!) Part of what made it so slow was that I wanted people to be able to view screen of links without loading a new page in their browser. (In the terms of the last paragraph, I was using too much ajax and it was too slow.)

I hung onto this design concept. When I gave up on it for most of linkspank, I still tried to use it for searching for links within linkspank. I was foiled again: searching for links and viewing page after page of links within one page load was way too slow...

...and in fact, the "normal" search function (as an ordinary page load) was itself way too slow.

But this problem turned out to be an opportunity - through rethinking the way to format the search and display results, it was possible to make a search engine using ajax that was faster than the "normal" way we had it implemented.

Lesson to self: hang on to the design concepts you believe in - technical problems can foil them in the short term, but they may eventually sidestep, or even solve, those technical problems.

On the Fancy-ness of Navigation Menus

Mission: Make Menus Prettier

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 ;-).