User Interface of the Day #7: BeFunky.com

Design UI Design Fundamentals

BeFunky.com, another of this year’s TechCrunch40 winners, is a private beta site that enables you to create “funky ways to express yourself.” If you have some time to kill, create a personal avatar of yourself dressed in plainclothes, or get fanciful and use one of the the costume options to turn yourself into a beer maid (as Lauri has done), superhero or other fantasy character. You can even give yourself a Burmese or Persian cat, or add a celebrity such as Woody Allen. Because it’s still in beta phase, you have to request an invitation to use BeFunky. Don’t worry — the process is painless and quick. But is it worth the effort to register? Read on.

Atul Varma

What’s Cool: I like the basic idea of the site, but …

What’s Not Cool: … I found the photo-manipulation tools for cartoonizing images to be difficult to learn how to use. After using the interface for a few minutes, I couldn’t tell if I was going through a process that was divided into steps, as some controls were “prerequisites” for other controls. I also couldn’t figure out how to undo my last action, if it was even undoable — I could only see how to revert my image to its original state.

So? The general concept is interesting, but it needs more work in terms of adding more features and improving usability.

Jono DiCarlo

What’s Cool: When I first logged in, I was taken to an introductory page briefly explaining what the site was about, what I could do there, and how to get started. That was helpful, and I appreciated it. Also helpful was that the “cartoonizer” featured buttons for the two most likely options: to upload an image from my hard drive, and to input an image from a web cam. In fact, uploading an image was exactly what I wanted to do, so the default option was quite helpful. There’s an “undo” and a “clear undo history” above a slider… for one second I thought that it might be Aza’s favorite non-existent feature, the undo-history-slider-bar! But no, the slider bar adjusts the size of the warp brush, and there’s multi-level undo but no redo, and the “clear undo history” button actually resets the image to its original state. A pity. But at least it has multi-level undo; most web-app interfaces don’t even have that.

What’s Not Cool: However, the helpfulness backfired when I clicked “colorize” and the application informed me that I first had to do “sketch” (edge detection) to turn the picture into an outline, then choose a colorization level. Only then would I be allowed to click “colorize.” This is dumb. Forcing the user to click buttons in a certain order is bad; making them figure out a process by trial-and-error is something I expect from a “Myst”-style game, not from an interface for software that is designed to create something. I’m assuming there’s some implementation reason why BeFunky requires the sketch before it can colorize — a data dependency, for example. But in that case, when I click “colorize,” BeFunky should automatically generate the sketch — invisibly, behind the scenes, if necessary — and then store and use that data.

So? There’s a lesson here: Anticipating the steps a user will want to take to create something can be good or evil. Anticipating the steps and making them prominently available, as with prominent “upload” and “webcam” buttons, is great! But anticipating the steps, and then forcing the user to take those steps in a certain order by locking out the other possibilities, is evil. Show me a helpful default, but let me do things in the order I want!

Lauri Apple

What’s Cool: You can instantly start using BeFunky after logging in, which is convenient. Also, the ability to tag your work so that others can see it adds a social aspect that is neat, if you’re into that sort of thing.

What’s Not Cool: On first glance, the graphic icons at the bottom of your uvatar are not at all clear as to what they do; it’s nice that you can scroll over them and then find out, but I would prefer to have text instead of mysterious symbols. Also, I had lots of trouble figuring out the cartoonizer. The interface doesn’t actually provide any instructions explaining how to turn your image into a cartoon. I turned my photo of 80s funk band Reason to Live into a cool-looking graphic, but I never figured out how to add movement to it.

So? I’m almost 15 years out of high school, so I can’t imagine ever using this site. A cartoon version of myself dressed as a beer maid isn’t really something that I (or the world in general) really need.

@Jono: You wrote that you liked the introductory first page. Favicon.cc put the application itself on the first page, which was also neat. I guess that each alternative of what to show on the first page is justified under different circumstances. What criteria would you use to decide which to use?

Hi Andreas,
That’s an intriguing question. Indeed, reading back over what I wrote, I seem to have contradicted myself: I said it was good to get directly to the webapp on the first page, but then I also said it was good to have an introduction to explain what the page was for. Hmmm.

After thinking this over, I’d say it’s because I already knew what favicon.cc was for as soon as I saw it, whereas BeFunky made me say “Huh? What’s all this about?” until I saw the intro page. If I had not been familiar with the idea of favicons (as many people aren’t) then a short introduction the first time I visited (only the first time, mind you) would have been appreciated.

Where this gets hard is that of course you don’t know whether the user is familiar with what you’re offering or not. It’s a common problem you run into when trying to design for both beginners and experts.

I think the best compromise might be to have a short introduction of the basic concept at the top of the landing page, with a link to more info for those who want it. Then present the main web-app interface further down on the very same page.

If virtual real-estate (my favorite oxymoron) is scarce, then you could have the page omit the intro paragraph when it detects a known user who has already created something with the webapp.

Hi Jono,
That sounds like a good guideline. Thank you for sharing.