Last week, Huned and I exchanged some emails about the future of the Web. Specifically, we were discussing the interfaces that will replace the current Web browser and client-side applications. Biased by the recent pain involved in deploying graphics-rich Swivel, citing the frequent practice of hiding rich data in PDFs instead of loading them directly into a browser, Huned argued:

In order to make information useful, you need an app that is well suited to the data…

Update: My blog ate the rest of this post. Bad blog!

I am always saddened to see plywood wheelchair access ramps retrofitted to multimillion dollar edifices. They’re ugly and incongruous, and shout “whoops, we forgot about you,” to a valuable minority of users. It leaves me hoping that the building owners sued the architects. Unless the building was designed before 1670.

Recently, I took over the completion of a functional spec/business requirements doc from a coworker. It was about 2 pages long and included about 8 wireframes. At the time, we figured it was “almost done”, just needed a little polish and it would be ready for engineering review.

A week later, the document was finally ready for review. It was 22 pages long, including 20 wireframes.

The Devil is in the Details

Corner cases, alternate flows, defensive design, and all those niggling UI details are your web app’s access ramps. They take a product from good to great. You can address them in the planning documents or you can deal with them in the code, but the Pareto Principle is alive in product design: 80% of a prodman’s effort is typically focused on these considerations.

Many users will never notice your attention to details, but it provides two potential benefits:

1. Like any excellent craftsmanship, it occassionally reaps big rewards amongst general users. By extending their menu buttons one extra pixel to a screen’s edge, Mac designers created interfaces that are about five times faster than Windows interfaces. Ask a Mac user why they switched, and they’ll say it’s just easier, or maybe they like the pretty case.
2. It rescues differently-inclined users. I’m talking about the access ramp riders, many of whom are overlooked by the competition. Look beyond the blog mavens and 18-to-34-Males. My Grandmother used Juno, instead of AOL because it was easy (I think Tog worked there too). Actually, look at the blog mavens too – the ones who use Backpack in spite of Outlook’s massive marketing budget, because it does all the right things, and does them well.

User Perceptions Scale Geometrically

Remember the Mac menus: one pixel, five times faster. A satisfied customer tells one person; a dissatisfied customer – the poor sap who stumbles into your unaddressed edge case – tells 11 people. Even in tight races like the new browser wars, Firefox and Safari stand out head and shoulders above Internet Explorer. In premium and emerging markets, the advantage is even more pronounced: iPod wins, Rio is a distant second, and there is no third place.

Quality is Addictive

It’s true, especially for users who care, whether because they’re mavens or face exacerbating challenges. Consider productivity guru David Allen’s argument for purchasing top-quality organizational products: if your file cabinet is difficult to open and you’re in a hurry, you’ll stack your papers instead. Ask a Whole Foods snob to join you in a local D’Agostino and watch their reaction. This is why New Yorkers love the Big Apple: quality blooms and survives in the Darwinian nooks and crannies of our concrete jungle – once discovered, it’s hard to ignore.

A fellow iconoclast recently admitted to falling in love with Flickr. They created an account on a whim, used it, and were delighted. Then they used it again, and were delighted again. And again. All those nice interface details and lovingly-crafted UIs just kept calling him back. In an increasingly disposable world, quality is a refuge.

Remember that “polish” is just one of several options for resource allocation. Limit scope, not quality. Keep your building small and it may not need that access ramp at all.

During the course of my recent search for a Junior Product Manager, I met some people who were interested in learning more about what it means to be a product manager.

Here’s a recommended reading list – these books got me through the early stages of my prodman career, and now live on my nightstand or workbench. They’re heavily skewed towards Internet product design (less low-tech, less marketing stuff, more design and usability). In my future “funnest job” rant I’ll talk about all of the disciplines that product management intersects, so all of my avid reader can better understand just how biased this list really is.

A Starter Product Management and Design Canon

Don’t Make Me Think: A Common Sense Approach to Web Usability (2nd Edition)
by Steve Krug

This is the “aha” book for good product design. I will always be grateful to Pete Steinberg for “strongly recommending” that I read this book during my time at Meetup. If you just got assigned to “fix” a website or web-based app, stop sweating: you can read this in a day and sketch out an improvement strategy that will finally earn you that corner office. It starts with solid guidelines and concludes with an easy-to-implement plan for conducting usability testing.

The Elements of User Experience: User-Centered Design for the Web
by Jesse James Garrett

This book is a great complement to Krug’s work. It’s a handy theoretical framework for thinking about web sites/applications. Garrett starts out by sketching a mental model on a napkin, then walks through the explanation, piece by piece, chapter by chapter.
Strongly recommended if you find yourself wanting to be more strategically organized in your thinking. I leaned heavily on this text during the NeuCo redesign, and it was one of my most successful projects to date.

Universal Principles of Design: 100 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design
by William Lidwell, Kritina Holden, and Jill Butler

I stumbled into this one while browsing Amazon, and was surprised to learn that the text lives up to the title. It’s an easy read (notice a theme?), with one lavishly illustrated-or-diagrammed and clearly defined principle per page. A nice mix of design, usability, and psychology. Reading it cover to cover is a little overwhelming, because it’s a list format, but you can open this book at any page and learn something new.

Getting Real
by 37Signals

Hey, remember those days in the late 90s when pundits predicted that ebooks would spell the end of paper? Well buy this book and print out all 177 pages – let’s kick ’em while they’re down!
First off, this book is a great case study in solid product management (solid sales with no overhead!). Secondly, it’s extremely well written – rather than trying to round out the page count with general blather, Fried and crew make their points and move on. The scope of the book is larger than simple product management, but the geniuses at 37 Signals built their rep on great product design, and this publication is a handy distillation of their sometimes annoyingly arrogant blog (when did they become Libertarians?).

The Non-Designer’s Design Book, Second Edition
by Robin Williams

Yup, another short reference. Even if you aren’t confident in your own design skills, this book will help you identify successful design, and (more importantly) figure out how to improve troubled designs.
Williams focuses on the “CRAP” prinicple (contrast, repitition, alignment, and proximity), explaining each component with plenty of examples, including before-and-after cleanups of bad designs. It’s a little heavy on typography (not so useful in the Web world), but generally a must-read if you want to build attractive, engaging products.
Williams has a companion piece that focuses on Web design, and a compilation volume, but I’m not convinced that they can add more value than this one.

The Visual Display of Quantitative Information
by Edward R. Tufte

Although Tufte’s prescriptions for Web UIs are generally off-base (sorry, his museum kiosk idea is terrible), the man is a genius about information presentations. Most Web site/applications mix content and information freely, so you should have a solid understanding of info design.
This one is not a quick read, it’s more of a hands-on example of great product design, with page after page of examples from throughout history (focus on printed information design). I’m a bit of a Tufte geek, so this one may not be as useful as the others, but it’ll still blow your mind and expand your thinking about product constraints.

The Elements of Style, Third Edition
by William Strunk Jr. , E. B. White

I’m a little embarrassed to say I haven’t read this book. Hey, back off – “skimming” and “referring to” are not the same as reading, Mr. Glass House! Nevertheless, language is the core of communication, and every good product manager should read this book – it will help you communicate requirements, write better UIs, and choose effective marketing copy. Let’s both promise each other we’ll read it, okay?

Update: I actually read this book, cover to cover (perhaps foolishly). Like anything by Ayn Rand, completing this book will turn you into a jerk for weeks afterwards.

Online Resources

Signal vs. Noise

The 37Signals blog, it’s mostly product observations, generally good, updated very frequently. It also attracts an intelligent readership, so the comments are nearly always a valuable addition to the conversation.

Jakob Neilsen’s Alertbox column

You’ll find yourself bookmarking a lot of these posts. More info on my favorite vanilla-ist in the next section.

Creating Passionate Users Blog

A little too touchy-feely at times, but this blog is generally very insightful and good for getting yourself out of a rut.

Vitamin

I’m still trying to decide if this one is useful, but it has a good pedigree. Seems like a more focused version of A List Apart, which I rarely find useful anymore.

Yahoo! User Interface Blog

I’m still warming up to this one, but it’s a good daily dose of UI thinking. Pretty technical.

Some Books I’m Planning to Read, One Day

When I’m done creating Amazon affiliate links…

Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points
by Matthew Linderman and Jason Fried

Not one of my strong suits (or anyone’s, I guess), handling the alternatively described “alternative flows” warrants more attention: they’re typically a user’s worst nightmare, and they can cripple an otherwise-solid product.
The 37 Signals products are famously easy to use, so I expect this is a useful read.

Prioritizing Web Usability
by Jakob Nielsen & Hoa Loranger

Last decade’s Jason Fried, Jakob Nielsen is a prolific, polarizing figure in the realm of Internet product design. Nielsen is Mr. Usability Guru, but he’s a bit… focused on usability over any other priority. Most prodmen will say “well, I don’t agree with everything he says, but he has some interesting ideas.” Translation: “His dogmatic attitude is a real kick in the pants, but I can’t think of a way to prove him wrong.” I expect that Nielsen’s garage includes a pegboard with outlines of all of his tools and little labels that read “Place hammer here”. The whole setup is probably screen reader compliant.
Before buying this book, I’d check out Nielsen’s Alertbox column and figure out how much you can stomach. I love the guy, but you may not agree with everything he says.

Writing Effective Use Cases
by Alistair Cockburn

A very wise man lent (loaned?) me a copy of this book. I read it on the train ride home, thinking “This seems useful, but it’s a bit arcane. And dry.” Then it sat on my desk until a project manager asked me if he could borrow it. I see the author’s name referenced fairly often, and I’m pretty sure this is an important book, but whenever I think of it, I can’t help remembering my days as a lightweight rower, spooning down a mix of lite cottage cheese and yogurt so I could make weight.

Persuasive Technology: Using Computers to Change What We Think and Do
by B.J. Fogg

Another cheese-and-yogurt book, loaned to me by Scott Heiferman. (I promise I’ll get it back to you!) I actually think this one is pretty good, so I’m hanging on to it. It focuses mostly on HCI, but it gets referenced a fair amount.

Well, that’s it – I hope it’s useful. If you have any suggestions for additional books, drop me a line, especially if they deal with topics beyond product design. I’d like to keep the list trim: for every book here, I considered and dismissed a couple of also-rans. I think the list needs a good marketing resource, but I’m having a hard time finding one.

If you buy any of the books, use the links above – I’ll get some green in my Amazon account, which I’ll use to hunt down more good reads.

On Saturday, 9/23 my brother Wil’s band Dubconscious from Athens GA will be playing at the Lion’s Den in the Village.

Dubconscious has been touring nationally, putting on shows with the Wailers, Burning Spear, and other big reggae names. If you’ve met Wil then you know he’s a cool guy, incredible guitarist, and the man who named and raised Mystery Dogg.

Know anyone else who likes reggae, dub, jam bands, or has a large mailing list? Please forward this invitation along.

Citing a report by eROI, MediaPost published interesting information today about email open and clickthrough rates. The findings? Weekends get the best open rates (37-38%, which seems extremely high to me).

I noticed that Monday also performed well, and that surveyed users preferred to receive email on Monday. I’d wager that the weekend open rates are primarily personal addresses, whereas the Monday open rates are primarily business addresses. Good data for product information as well as marketing – if you’re going to tell a customer about a new feature or release, make sure you send the message at a time when the recipient is likely to read it.

“Greek” text is filler copy used during the design process. While it’s always ideal to work from real text, there are a number of cases where this isn’t possible, such as cases where a design will hold dynamic content, such as a blog template or a message board page. It can also sometimes be useful to dissociate text from visual design in order to limit the variables in a problematic layout, or to focus an approval process.

In the past, I’ve always grabbed the old school Latin from sources like lipsum.com. It can become tiring to explain the role of

A hole would be something. No, it was nothing.
Rock Biter, The NeverEnding Story

After countless hours, days, months, or even years of work, your social-networking-slash-content-management application is complete. It’s scalable, it’s rich, it flashes pretty lights and makes every comment sound witty. You throw the launch party, break the bottle across the bow, and send the final check to the offshore development firm. You open the doors to eager users who pour into your site and fill it with …nothing.

Welcome to reality: most users are mostly lazy.

Icons, avatars, and thumbnails are great for previewing a larger, more detailed content item; they invite interaction and self-expression. While the dedicated core of users within an online community might be happy to personalize and enhance their data with photo images, the larger population of casual users rarely has the time or the inclination to upload one more image. So how can you handle those cases where no image is available?

Option 1: Prevention

Make it required

One simple, rather heavy-handed solution is to require an image, either when a user creates a system account or uploads their media. This can be extremely useful in cases where imagery is critical to the success of the system, such as a dating site, where user behavior is heavily influenced by photos of other users. In other scenarios it adds a potentially onerous step to a valuable process – registered users and live content are often far more valuable than anonymous users. It may be more useful to ignore metadata like thumbnail images until the user has completed the task and you can make a compelling case for the value of additional information. Get them in the door first, and then make the pitch.

Display a Default Image

Probably the most common solution to the problem of missing thumbnail images is to display a default image as a placeholder. This kind of functionality is easily implemented and can include a message or image encouraging the user to upload a custom image.

Default images seem to fall across a spectrum: at one end, there’s the textual “No photo yet” message. At the other end is branded imagery like Vimeo’s monkey head icon. Default images can be a great place to inject humor, reinforce a brand, and cajole users into getting more involved.

If you use default images in your site, be sure to make them look like default/placeholder content: do not try to trick a user by displaying an image that mimics likely site content. If the image doesn’t clearly read as default data, users will become confused and frustrated, thinking the image is the result of an error.

Use an Image Library

Some interfaces up the ante by providing a library of default images. AIM allows users to select a buddy icon from an image a library or upload a custom image. iChat follows suit, as does the Windows OS.

Other applications automate the process. I haven’t ever noticed randomly-assigned default images, but some message boards vary a user’s avatar according to the number of posts they’ve made. Linking display information to metadata or member activity can create simple incentives for valuable behaviors.

Find a Related Image

An alternative to using a static default image or library is to use a related image. Meetup allows members to use an event photo in place of a group photo.

Option 2: Treatment

Perhaps none of the above examples fits your needs. Perhaps most of your users aren’t uploading images and you’re not comfortable studding your interface with default imagery. Embrace the nothing: don’t replace missing images. This option can be valuable for interfaces designed to minimize extraneous data, such as applications that target mobile devices or are bandwidth-sensitive. If the default imagery isn’t really adding value to the user experience, why include it at all?

If you decide not to show anything, you’ll have to decide to handle the display space. Do you preserve the empty space or is it more useful to flow the other page elements into the space? Probably the most relevant factor here is the role of the design grid: in cases where many member listings or content items are listed together, preserving the empty space may facilitate visual browsing. In other cases (such as a single content display) it may be more useful to increase data density by moving the other UI elements into the space.

While working with Lacy to build, test and debug the KickApps UI, I was able to show him how Firefox is a web designer’s best friend. Beyond being standards-compliant, it offers several tools that make Web development a lot snappier.

Here are four designer-oriented extensions, plus some built-in features get the job done.

1. The Web Developer Extension

https://addons.mozilla.org/firefox/60/

The holy grail of useful extensions. Install it and take a moment to click through each menu – there’s a goldmine of functionality in there. My favorites are:

• Disable all CSS (Ctrl+Shift+S) – at the end of the day, it’s fun just to see how totally rad your semantic markup is modified by your rockstar CSS
• Display Element Information (Ctrl+Shift+F) – this is a nice, stripped-down version of the old Mozilla DOM inspector. Lounch it and mouse over an element to see it’s position, size, styles, and position in the DOM. Great for figuring out why your CSS is turning that span red.
• Resize. Nice for designers with huge monitors. You can set new sizes in the Options menu (Tools > Web Developer > Options > Resize tab). Add 1024×768.

Huned showed me the simple trick of hiding the toolbar when I’m not using it:

• Right-click your toolbar
• A context menu will appear. Select “Customize…”
• You’ll see a menu of icons. Scroll down to a little gear image – it’s the web developer icon. Drag it up to your toolbar, somewhere near the home icon.
• Click Done

Now, you can click that little gear icon to show/hide your web developer toolbar. Yay!

Update: Alternatively, Ctrl+Shift+T toggles the web developer toolbar on and off. I prefer this method, because it saves time and UI space.

2. Colorzilla Extension

https://addons.mozilla.org/firefox/271/

This is great for quickly figuring out the hex color of an image or HTML element, but it’s also good for:

• Quicky DOM inspection – click the eyedropper and mouse over any element in your page to see it’s class(es) and ID. Move around some more to find parent and child nodes. It sometimes has trouble detecting tightly-nested elements though.
• Click the eyedropper and then click on a webpage. Now, click on the eyedropper again and mouse around the page. Watch the X and Y coordinates – they’re plotting relative to that first click. It’s a great way to get a rough measure of a rendered element’s height or width.

3. IE Tab Extension

https://addons.mozilla.org/firefox/1419/

Install it and you get a handy button to view any tab as though it were rendered in IE. I don’t trust it completely, but it’s a nice preview of all the ways MS will mess up your CSS layouts.

4. View Source Chart Extension

https://addons.mozilla.org/firefox/655/

Another tip from Huned. This one shows a chart of rendered source, which is useful for AJAX-driven pages where a standard view source doesn’t always show all of the DOM elements. I don’t use it often, but I’m always glad it’s there when I need it.

5. Tabs

Hey, they’re build in. Neeto! Some handy Windows shortcuts:

• Ctrl+T to open a new tab
• Ctrl+L to highlight the location
• Ctrl+click on a link to open it in a new tab
• Ctrl+W closes a tab
• Ctrl+Tab toggles to the next tab (to the right)
• Ctrl+Shift+Tab toggles to the previous tab (to the left)
• Group your tabs: Click on a tab and drag it to the left or right to change your tab order.

I usually have 4-8 tabs open at a time, they’re just so darn addictive.

6. View Source

An oldy but goody. If you’re coming from IE, get ready for some upgrades:

1. Shortcut key. Ctrl+U pops up a window.
2. Built-in text search (Crtl+F) is perfect for digging around in your HTML.

The Bad News

Firefox has a memory leak. Some people are calling this a feature, which is a stretch. I find that I have to reboot FF every day, sometimes more often if I’m opening a lot of tabs or viewing pages with a lot of AJAX or Flash.

Well, I’m sold. Get Firefox now!