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
- Apples
- Celery
- Sweet bell peppers
- Peaches
- Strawberries
- Nectarines – imported
- Grapes
- Spinach
- Lettuce
- Cucumbers
- Blueberries
- – domestic
- Potatoes
- Plus
- Green beans
- Kale/Greens
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
