Design

It’s not what you say… It’s what they hear

Long ago, when I set up this blog I read a few primers on blogging. One of them suggested that you have a picture of yourself on your blog. There were lots of good arguments for doing it, so I dutifully hunted among my photos for a picture of myself. Turns out that I didn’t have too many (I tend to be behind the camera rather than in front of it).

tpic.jpg

I did find one that I liked. It was on a nasty old fishing boat on the Prince William Sound (in Alaska). A friend of mine had bought the boat and invited a few friends for an multi-day cruise. There was no running water. The bathroom was a 5 gallon green bucket (I’ll leave it to your imagination how we “flushed” it). At the end of the trip, I was scruffy as hell, but I’d had an absolute blast tromping around the rugged islands of Alaska. That’s where the pipe picture was taken.

As my blog actually accumulated readers, there came a trickle of negative feedback about the pipe, which has increased to a steady stream. Some people feel like I was trying to look serious. Or academic. Or rich. Or that I was just clowning around. To me, the photo had a ton of meaning. To anyone else, not so much.

For some reason, this made me think of one of my favorite posts on product/UX design. Here’s a quote:

“When I started working on Wufoo, I was definitely a bad designer. I thought I was hot shit and knew all the answers. I saw the user as a wild beast that needed to be tamed. He got in MY way. Use the tool the way I designed it, fool—not the way you think it should work [emphasis added]. Thinking back, I remember being angry all of the time.”

One of the big lessons (which I continue to learn a little bit more every single day) is that it doesn’t matter a damn bit what you’re saying (whether you’re “saying” it to a user with design or saying it with words or pictures on a blog), it matters what’s being heard.

So I’ve pulled the pipe picture in favor of a more recent one. Some people suggested that I keep it as a “schtick”, but I’d rather be known as “that guy who kicks ass with RescueTime” than “that guy with the pipe” (who actually never smokes a pipe).

#1 Mistake by Coders who Are Doing UI Design

I think that common sense goes a long ways in UI design… But not all the way. It’s a learned skill like any other. I was reading up on calendar controls today (which I’m obsessed with, by the way) and caught a great post by the curmudgeonly Jakob Nielsen. Here’s the snippet I like best (he’s describing the top application design mistakes):

“Affordance” means what you can do to an object. For example, a checkbox affords turning on and off, and a slider affords moving up or down. “Perceived affordances” are actions you understand just by looking at the object, before you start using it (or feeling it, if it’s a physical device rather than an on-screen UI element). All of this is discussed in Don Norman’s book The Design of Everyday Things.

Perceived affordances are especially important in UI design, because all screen pixels afford clicking — even though nothing usually happens if you click. There are so many visible things on a computer screen that users don’t have time for a mine sweeping game, clicking around hoping to find something actionable. (Exception: small children sometimes like to explore screens by clicking around.)

Drag-and-drop designs are often the worst offenders when it’s not apparent that something can be dragged or where something can be dropped. (Or what will happen if you do drag or drop.) In contrast, simple checkboxes and command buttons usually make it painfully obvious what you can click.

Common symptoms of the lack of perceived affordances are:

  • * Users say, “What do I do here?”
  • * Users don’t go near a feature that would help them.
  • * A profusion of screen text tries to overcome these two problems. (Even worse are verbose, multi-stage instructions that disappear after you perform the first of several actions.)

When I tested some of the first Macintosh applications in the mid-1980s, users were often stumped by the empty screen that appeared when they launched, say, MacWrite. What do I do here, indeed. The first step was supposed to be to create a new document, but that command was not shown anywhere in the otherwise highly visible Macintosh UI unless you happened to pull down the File menu. Later application releases opened up with a blank document on the screen, complete with an inviting, blinking insertion point that provided the perceived affordance for “start typing.”

Why I Don’t Like Calling Myself a Designer

This Tuesday, I’m going to get a chance to meet Kevin Hale, who is the designer behind Wufoo and proprietor of ParticleTree. Kevin wrote a blog post last month that I think is one of the better summations of what it means to be a web designer. While I don’t want to dwell on the negative, Kevin has a pretty good description of why I hate to refer to myself as a designer (whether it’s “web designer”, “ui designer”, “interaction designer”, or whatever).

“For most designers, the relationships they care about most is the one they have with the design. They seem to only love the design and more often than not, they tend to love the design too much. These designers focus on their legacy at the expense of the audience. The user can suck it. You can hear it in the way they talk about the design and how they talk about their users. They’re arrogant and defensive.”

“…When I started working on Wufoo, I was definitely a bad designer. I thought I was hot shit and knew all the answers. I saw the user as a wild beast that needed to be tamed. He got in MY way. Use the tool the way I designed it, fool—not the way you think it should work. Thinking back, I remember being angry all of the time.“

Another great bit:

“On a web application, the design breathes and exhales through customer support. I’m so glad we have Chris on our team. He’s our customer evangelist. Through him, I’ve come to believe that there’s nothing more important than to monitor and man those incoming emails and respond as quickly as possible to every single inquiry, request and comment. It’s the pulse of not only the application, but the business as well. It’s in support requests that Wufoo lets us know when something isn’t working. It’s there that she lets me know when I’ve done something right.”

Give it a read.

Design’s Place in a Startup

A reader took the time to shoot me an email with a few questions about design and startups… His questions were interesting enough that I thought they might be worth blogging about. So here goes:

Question #1 – What is the priority balance between programming and design/UI?

In my opinion, it totally depends on your startup, and where the core of your innovation lies. Take a hard look at the problem that you’re attempting to solve and why the current solutions to that problem are inadequate. As Paul Graham says, there’s no shortage of things that suck… presumably, you’re setting about to make something suck less.

How? Are you going to make it faster? More fun? More reliable? Cheaper? Sexier? More powerful? More viral? More social? When you’ve got a match between how you propose to innovate and the skills that your founding team has, you’ve got an exciting opportunity.

I should point out that brilliance can (and often does) manifest outside of a person’s core skillset… I think a person with a background in marketing would never conceive of the viral marketing machine that is Feedjit (the person who did is a PERL coder with a background in systems engineering). I don’t think a person with a journalism background would think that Digg or Reddit were such hot ideas. Innovation can (and often does) come from people who aren’t familiar with the “common wisdom” that maybe shouldn’t be so damn common.

But assuming a big part of your innovation revolves around “creating a better user experience for X”, you need someone who can create great UI. And while people who don’t dream in pixels and CSS can have flashes of UI brilliance, there’s no substitute for a great UI guy on your team.

I’m not going to go into detail, but obviously there are about a billion scenarios where coding is AT LEAST as critical as design. I’ll leave that blog post to someone else.

2. Should we have a layout/ UI figured out before programming has begun? (this is actually in retrospect, because we’ve already begun programming)

I’m a big fan of agile/scrum style development and the iterative design that goes along with it. That being said, I think the idea of having a cohesive vision in the form of a visual prototype is a great guide to build off of (just don’t be married to it). Making design shoot-from-the-hip-agile from start to finish can oftentimes result in a bit less focus and a product that looks duct-taped together.

3. If we are planning to have Facebook app/ MySpace widget a la Slide or YouTube, would it be best to focus on destination site, or on the widget side first?

Joe Kraus recently spoke at a YCombinator dinner and espoused the virtues of chasing the trends. I’ve always referred to it as the idea of “finding a parade and then marching in front of it”. I’d want to know more about what you were building, but on the surface I think that jumping on the Facebook bandwagon is worth doing if you think Facebook users will sign up. A lot of things won’t play well on Facebook (you won’t see us building a RescueTime Facebook app any time real soon). That being said, I’m not real bullish on Facebook’s long term future (from a platform perspective). A lot of the top Facebook apps are down as much as 70% from their peak usage.

Bootstrap Design for Geek-Powered Startups

One of my brethren at YCombinator sent out a request to the 2008 Winter Founders list a request for information about design services for his startup. He and his co-founder, like many YC founders, are hackers.

In my career I’ve been a web designer (although I’m only moderately good at it), I’ve hired web designers (for a consulting firm I used to run), and I’ve hired contract resources for design services. Recently, of course, I’ve been doing all of the design work for RescueTime (Time Management Software for Lifehackers, if you’re new here!). In most cases, I was generally dealing with extremely tight budgets (by Seattle or Silicon Valley standards), so I figure I’m uniquely qualified to answer his question. Rather than keep the answer confined to a relatively small mailing list, I figured I might open it up as a larger blog post. So here goes.

First of all, I should stress that I think a UI designer should be baked into your organization as early as possible. Most startups are building software for “normal people”– and programmers are notoriously bad about empathizing with how normal people interact with software. Hell, most of the designers I know are bad about empathizing with how normal people interact with software. If you’re one of the rare startups that’s building products for geeks-only, then you might be able to get away with limited designer involvement. But for most, the idea of “slapping a coat of paint” on an ugly application is a recipe for confused users and poor conversion rates (whatever your conversion event happens to be).

Second of all, I should stress that usability testing should be baked into your organization from day one. Watching people in your target demographic interact with your software is a priceless experience (and doesn’t have to cost an arm and a leg). Most entrepreneurs get sensitive around their creation and find all sorts of excuses to avoid getting negative feedback about it– don’t fall into this trap.

Finally, let me emphasize that when I talk about designers, I am ALWAYS talking about UI designers, NOT graphic designers. Sure, pretty websites are nice… But artists are a dangerous breed, and are often tempted by the design equivalent to “guitar solos”: Swanky web forms that have so much CSS goodness that they no longer look like web forms, links that don’t look like links, buttons that don’t look like buttons, etc. Any chance to be unique is an opportunity to confuse users. At the end of the day, a lot of audiences don’t think web UI is actionable unless it’s a form element, a beveled button, or a blue hyperlink. You don’t want Jakob Neilsen designing your site, but you want a designer who will sacrifice aesthetics for usability if the need arises.

So, onto the resources.

Logo Design

As a startup, the first thing that you’ll need is a logo. I am a bit of a logo nut (and designed the RescueTime logo myself). I do believe that a good logo can be powerful, but when money is tight and time is scare, here are a few ways to get an interim logo:

LogoMaid – LogoMaid is a collection of 4400 watermarked logo templates. You can get non-exclusive logos for $25, and exclusive logos for $199 and up.

LogoMarker – If you’ve got to have a unique logo, this is your cheapest option. It’s basically an online logo construction kit– you can try it for free. $99 gets you the logo in a high-quality vector format.

LogoLoft and LogoWorks – Not custom enough for you? Well, LogoLoft and LogoWorks are trying to commoditize custom logo design. Presumably they have an army of underpaid designers ready to design to your specifications. Packages start from $99 and go up from there. The more you spend, the more designs you get to chose from, the more different designers get involved, and the more revisions you get… Basically, by spending more money you can reduce risk that you hate what they give you.

Custom development by a designer of your choice – Of course, you can always hunt up a designer of your choice… I’ve seen identity packages range from $1500 to $500,000, and your value mileage will most certainly vary (read up on the history of the Nike swoosh– quite a bargain there!).

Web Design Templates

Web design can be a bit spendier than logo design, depending on what you want to build. A lot of startups will need custom application design, but many might be able to get away with (or at least start with) a web template. Purchased templates usually consist of a layered Photoshop document, an HTML file, a CSS file, and maybe (god help you) a couple of SWF (Flash) files. Some will come with all of the necessary template files to play nicely with Blog/CMS systems like WordPress or Joomla.

TemplateMonster – TemplateMonster is the big boy on the template block, offering almost 13,000 templates that are searchable and sortable. Like LogoMaid, they offer a cheap version if you don’t want exclusive rights to the design ($50-70) and they also offer exclusive rights (which can cost you thousands).

Open Source Templates, Open Design Community and OSWD – These guys have quite a few fewer templates, but heck– they’re free… Yay for Open Source!

Custom Web Design

Custom web design work can range from cheap to ridiculously expensive. As programmers who are hopefully fairly familiar with web technology, you can probably get the most bang for your buck with an individual consultant rather than a firm. Of course, the more you need (graphic design, HTML/CSS, usability analysis, SEO, copywriting, etc), the less likely you are to find a single person who can TCB. If SEO is a big part of your marketing plan, make sure your designer knows enough about SEO to not paint you into a corner (send ‘em to SEOMoz for a primer).

Individual web designers with some experience under their belt can cost you $35/hr to $95/hr on a contract basis. If you are organized and can find a resource with vouched-for work ethic and responsiveness, you can do very well finding resources in secondary markets (midwest or southern USA) or offshore (eastern Europe or India). However, if you can afford it, a designer who is local and can/will meet with you is valuable. As a rule, the cheaper they are, the busier they are. You’ve got to sling a LOT of pixels at $35/hr to make a good living in most major markets.

Make sure you find someone who has experience doing what you need. If you need a complete application flow/design, finding a freelancer who has only built “brochureware” web sites is not your best bet.

SitePoint MarketPlace – The SitePoint marketplace is an excellent resource to find hungry freelancers. For $10, you can post an ad describing what you need and you’ll be buried in responses. The last time I did this for a designer (XHTML/CSS), I got 5 good responses for ridiculously low rates, and about 30 responses from people who either had higher rates than I wanted to pay or had crappy portfolios. Of course, I had two different designers flake out on me (one for a legitimate reason, one just fell off the map). That’s another risk of cheap individual consultants… They are oftentimes not very businesslike.

XHTMLized – If you find a good designer who has lackluster XHTML/CSS skills, these guys are a godsend. For $249 (assuming you can wait 7 days), they’ll take a Photoshop doc and turn it into GREAT front-end code. You can have them do more than one page, but it’s oftentimes good enough to just take a design that has most of the styles/elements you’ll be needing and turn them loose on it. There’s lots of competition in this arena, and Smashing Magazine has an excellent writeup about the alternatives.

Elance and Guru.com – These sites allow you to post a need and get a bunch of quotes from hungry designers and design shops (oftentimes offshore). There’s no obligation. It’s VERY important to clearly define what you want and what deliverables you expect to receive to make sure quotes are accurate.

Design Employees

This is the area where I have the least experience (at least in terms of markets like Seattle and Silicon Valley). From what I can tell, a FT web designer (Photoshop, xhtml, css) can run anywhere from $45k to $95k per year. Obviously, this can flex if you’re generous with stock options, which might be worthwhile for some startups.

I hope that helps some fellow bootstrappers out there. I’m a firm believer of taking the shortest path to testing your startup idea in a real market– these resources should get you there faster if you don’t happen to be a pixel-slinger. But at the end of the day, there’s no substitute for having someone on your core team be passionate about great user experiences.

1 2 3  Scroll to top