"Nobody's going to try to do that"

Someday I'll track down the quote that really describes this right. Something like:

If you try to anticipate how someone will use something, and design it specifically for that purpose, its general usefulness decreases.

It also means that if you design something just for what it is, then people will be able to use it in all the ways a designer didn't anticipate.

So here's my case study for today: working on a presentation that cites a bunch of articles. A typical word processor type task.

The fastest way to do the list of articles is to drag their titles in. Linked titles are no problem: drag 'em in and immediately they show up linked and unstyled. The unlinked ones in heading tags required some formatting and manual linking. I can deal with that.

But the folks who decided to use some sketchy "custom fonts using flash" solutions for this page had decided that having their font showing up exactly the same on all browsers was more important than it being copy-and-paste friendly. So theirs is the one title I have to re-type.

Now I remember getting into conversations with clients over this, back in the days of putting text in as an image. I'd say "people have to be able to copy and paste this." And every once in awhile, I'd hear "nobody is going to try to do that." Every time somebody decides that, they're actually setting a condition: "Anybody who tries to do that is going to be frustrated by our choices."

The more something submits to the user, the more it gets used. If the user has to submit to it, especially by doing extra work, it better not be for the sake of esthetics.

Here's another example. I really wanted to be able to copy and paste this list:

I knew it probably wouldn't work, but it might also be one of those happy occasions where I find something that's been made more usable through careful coding.

The list, when copied and pasted and de-formatted, looks like this:

Dirty Dozen Plus™
Buy these organic

1

Apples

2

Celery

3

Sweet bell peppers

Or if you paste it into a plain text email or comment field on the web, it also looks pretty bad, but more importantly it makes the user do their own extra formatting work:

5
Strawberries
6
Nectarines
– imported
7
Grapes
8
Spinach
9
Lettuce

That's a pain.

I solve these kinds of problems by using CSS and HTML in a more modern way, so you get a list that looks great and stylish in the web browser, but copies and pastes into exactly what you want it to:

Dirty Dozen Plus™
Buy these organic

1. Apples
2. Celery
3. Sweet bell peppers
4. Peaches
5. Strawberries
6. Nectarines – imported
7. Grapes
8. Spinach
9. Lettuce
10. Cucumbers
11. Blueberries 
12. – domestic
13. Potatoes
14. Plus
15. Green beans
16. Kale/Greens

+ May contain pesticide residues of special concern

I do it right by using two technique substitutions for menus and lists:

• background-image CSS instead of <img src=""> HTML
• HTML list instead of numbers in text form

It's important to think about how you want your layout to look when it's copied and pasted, and what format people might want to paste something 

The new one is slower!

Here's an easy usability mistake to make: you upgrade a thing, but the new version is a bit slower to load or use, and so you see a decrease in usage and people wondering how to switch back!

This is why realistic speed measurements need to be built into each round of testing, and a round of testing with each revision cycle. It's the kind of research you have to be able to do quickly to get away with.

Why NOT to Have a Website

For small business people and artists, maintaining a website, especially a traditional website, and especially a really slick one, is a big task to add to the to-do list. And even with a lot of initial effort and the regular content updates that make a site worthwhile, it's still not enough - in order to stay fresh and functional as things change, it'll need to be changed and redesigned from time to time. Most people have an easier time changing their signage and business cards than their website, and they end up wondering whether it's helping or hurting their goals.

For users who clearly don't need a custom site, I recommend blogging instead, because it serves most people's needs and doesn't cost them much. Web designers (like me) who previously had a hard time offering good value to small businesses are now finding ways to visibly re-brand Wordpress, Blogger and Tumblr accounts, making them more appealing to clients who don't like the idea of geeky logos appearing on their sites.

Most people, however, don't need to do any web publishing. They just need the equivalent of a business card and a sign - online. They need to communicate the basic format of what they're offering, whether it's great sandwitches or great dog photos, and how they can be contacted.

For people using the internet to find products and services, what matters most is being able to find the information they're looking for, and assess how fresh and accurate it is. They'll do a search, check whichever sources of information look promising, and then choose among them depending on which seems most accurate.

Let's examine a typical internet task:

1. Search for store name + city name
2. Scan the top results that look related, and open the official site, as well as a community business listing, in new tabs.
3. Since the business listing and the official site list different hours, get phone number off official site, as it's more likely to be accurate.
   At this point, having to make a phone call for information that should be available online may derail the task, especially if a competing business offers information with a recent date on the content.
4. The business has to deal with another extra phone call.

This is pretty typical on the internet. This business could improve their initial interaction with the customer in three ways:

1. Maintaining awareness of their own online presence, so they knew where their information would need to be updated, and take control over their third-party community listing, and
2. Indicating when the information was last changed, assuring web users that the information has been recently approved by management.
3. Providing a calendar of any closure dates - statutory and bank holidays for example.

Here are some advantages of using 3rd-party listings, social networking and media sharing sites instead of or in addition to an official website.

• Users trust and understand them already.
• It's easy to make it clear that the information is official and up-to-date.
• They're maintained by large companies with research & development budgets, so they can worry about keeping them up-to-date, on their dime.
• Even if their site is tacky, it only reflects on them, not your business.
• Listings sites index very well in search engines - usually better than private websites.
• They usually allow for user comments, which enhances credibility.
• They're well-supported because of their size, so if you need help with something, it's easy to find the answers.
• It's more reliable - less likely to go offline, get attacked, be accidentally blocked by Google, or suffer from traffic overload.
• Businesses benefit by being listed together, providing a context of competitive representation that attracts people's attention, just like stores benefit from themed districts in a city.
• It's much easier to prepare and present the content, because each listings or sharing site has a format that's easy to follow.
• Maintaining several different listings and accounts might seem like a repetitive hassle, but each of them serves a different kind of community in a way that suits them. Each site is an opportunity to present information in a way that maximizes that format and engages that audience.

Some online directories, such as online yellow pages, are open-ended, and some are specific to an industry or a niche, like TripAdvisor.

The real meat of engaging with one's online presence is researching these opportunities, and they're different for everyone and every business. With a little research, anyone can find out where they belong online - and then it's just a matter of keeping things up-to-date, responding to comments, and continuing the research as the landscape changes in reaction to their efforts.

So as usual, the message is, you don't need to spend a bunch of money or waste a bunch of time to look good and get things done on the 'net. It just takes a bit of patience, like everything else about doing business.

Even if you are maintaining profiles on 3rd-party sites, it's nice to have an official site to "anchor" and connect all the online profiles. And it's a good reason to develop an internet presence before creating a private website. But if it takes time away from responding to comments and keeping your profiles and listings fresh, and especially if it doesn't contain content that's not available elsewhere and couldn't be presented better elsewhere, then it's slowing things down.

Setting up a proper web development testing environment using VirtualBox and Windows on Linux or Mac

First off, it's best to be able to do your web development on a Mac because

• Coda, by Panic Software, is a great app and it's not for Windows or Linux
• It's harder (maybe impossible) to set up a Mac emulator on Windows or Linux than it is to emulate those operating systems on a Mac. So if you want it all, get a Mac. What I personally prefer is to have a physical computer for each of the main user groups in your target market.

I do my development on Ubuntu Linux, and have Macs around for testing. I need to be able to test with all the popular web browsers on Mac and Windows. That means:

• Chrome for Linux and Windows
• Safari for Mac and Windows
• Firefox for Linux, Mac and Windows
• Internet Explorer for Windows

So on my Linux computer, I use VirtualBox, a great free emulator from Sun Microsystems, and I have a Windows XP install that I use in a 1024 x 768 window. I have Chrome, Firefox, Internet Explorer, and Safari installed on it.

Because Chrome has the best DOM Inspector (the "Inspect this element" function in the right-click menu), and because Chrome uses the Webkit engine which also powers Safari, and because those are the two fastest-growing browsers in terms of active user base, I use Chrome as my main development and testing environment. Once I get something working in Chrome, I verify that it works in Firefox and Internet Explorer. I try to do this verification as frequently as is convenient, so that I don't end up having to backtrack and use Firebug in Firefox, which is kind of clunky, or Internet Explorer's absolutely hellish DOM inspector, to debug a webpage.

In Internet Explorer 8, you can use the Compatibility View and Developer Tools to inspect how a page would perform in earlier versions of the browser, but it's a good idea to have a Windows2000 install with IE6 as one of your VirtualBox machines, if IE6 compatibility is a requirement for your projects. As a side-note about IE6: I exercise due diligence in using industry-standard best-practices, which dictate that, at the very least, the site should work in all browsers, and look as good as it can in each, even if that means looking different in each. If a client demands that their site be identical in all browsers, and especially if there's anything even somewhat cool about the site, it can double or even triple the budget. Web Designers rarely present this information to potential clients, because we're embarrassed about how helpless we are to accomplish this task efficiently. We all blame the software.

Anyway, here's how to actually look at your files in emulated Windows without having to post them online:

In VirtualBox, you can set up shared folders to bridge the gap between your Windows browsers and your Linux or Mac filesystems. Your shared folders are accessed through your Windows network places, and function like mounted network folders. Sometimes I have to copy files over in order to get them to work properly, because of network permissions problems created by my Linux host. Host means the OS on which I'm running the emulator.

Setting up a Windows install in VirtualBox on a Mac is very similar to setting it up on Linux, and it's also an easy way to access Linux development tools on your Mac desktop.

When expensive sites fail

Here's a fun case study for you: I'm really into Burger King and their daily burger deals. You get a burger for like $2 and they're rad. So I figured I might be able to check which of their burgers is $2 today, and thus decide whether it'd be worth the walk.

First thing I notice: their front page is titled "Burger King - Splash." Now, "splash" not being part of their advertising strategy as a slogan, what an oversight. This can totally happen even if you put hundreds of thousands of dollars into a site, as Burger King did. Unfortunately, their site doesn't seem to have been put through any user testing (or search engine optimization), because having "splash" as your splash page title is fully ridiculous.

Feb 2011 note: this has since been fixed!

In fact, splash pages are ridiculous. A prominent "Francais" link on the main english homepage is a much better idea. I won't get into why 'cause I'm hungry and want to bang this out before I go over there.

So, their site mentions their daily deals but not which ones happen on which days. So I have to waste time finding their contact info to call and ask them (I know, it's going a bit far but at this point I'm determined), and it wastes their time because they have to actually answer the phone.

Another Feb 2011 note: now they have an obnoxious flash sliding thing to show you which burgers are on which days, one day/burger at a time, and it continues to make swooshing sounds when you're in another tab. Looks great though!

The Mars exploration site's got problems? Holy moly!

It's hard to believe that somebody would make this kind of mistake on the Mars Exploration website, but yeah, the flash thing totally doesn't do anything when you click one of the "click to view" something links. This shows how even when loads of money is thrown at a web design job, massive problems can still slip through the cracks, without proper testing. In this case, the cheapest of usability tests or a heuristic audit would have revealed the problem.

The moral of the story? Don't make it slick if you can't make it click.

UPDATE: Sometime between 2011 and 2013, this problem was solved, because the interactive thing I was referring to was removed. It was replaced with a virtual tour that's so ghetto, you'd have to travel with it back in time at least a decade to find someone who'd be impressed by it. But it does seem to work.