2cultures.net(.au)

Learning to design is a never ending adventure, because learning to see, is, just like learning to speak, a wonderful voyage that never ends. A love declaration to my profession.

Our mind is not a camera. Seeing is not a passive act. We see what we expect to see, or, as Anaïs Nin put it so beautifully: “We don’t see things as they are, we see them as we are.”

The idea that our perception is as much a result of what we are able to know as of what we expect to find is not new. Immanuel Kant’s Critique of Pure Reason is based on this insight:

“Up to now it has been assumed that all our cognition must conform to the objects; but […] let us once try whether we do not get further […] by assuming that the objects must conform to our cognition.”

In the meantime, cognitive psychology has followed Kant’s “Copernican Revolution-in-reverse”. Our perception is defined by what cognitive psychologists call a “perceptual set”.

“Perceptual set is a tendency to perceive or notice some aspects of the available sensory data and ignore others. […] perceptual set works in two ways:
(1) The perceiver has certain expectations and focuses attention on particular aspects of the sensory data […]
(2) The perceiver knows how to classify, understand and name selected data and what inferences to draw from it […].”
— Perceptual Set, by Saul McLeod

The way expectation can influence our cognitive set can be illustrated quite easily:

Depending on how you read the diagram, you will read the characters in the middle as “B” or as “13”.

“The physical stimulus ‘13’ is the same in each case but is perceived differently because of the influence of the context in which it appears. We EXPECT to see a letter in the context of other letters of the alphabet, whereas we EXPECT to see numbers in the context of other numbers.”
— ibid.

The influence of past experience on perception can be demonstrated in the following puzzling experience:

In this case past experience of hearing or reading these common phrases can influence your perception, and make you ignore the errors that seem obvious once you have spotted them. Professional writers will probably still notice, but many have a hard time to spot the errors. If you failed the above test, and now see what you previously didn’t see, you will immediately nod to the following thought:

“…we don’t see that we don’t see.” —Maturana & Varela, The Tree of Knowledge

Our perceptual set can change short-term, for instance when we are hungry our sensitivity to the smell of food is strengthened. The way experience affects long-term perceptual sets can be studied by analysing the different perceptive sets of professionals that are strongly influenced by what they know.

• Cooks and sommeliers are able to more clearly discern what they taste because through constant exposure they have improved senses, and also the vocabulary to express and discuss their impressions.
• When doctors look at X-rays, they see more because they know anatomy and what to look for in the mix of light and shadow. Over the years they have learned to more clearly discern slight differences in shape and shade that to us look indiscernible.
• When an architect enters a building, they see through the walls, and they understand the building as a four-dimensional space-time continuum.
• When fashion designers look at your outfit, they don’t simply see stylish clothes, they see cut, seam, material. They imagine how your clothes feel.
• When I open a web site or an app, I see information architecture, interaction design, typography… and I imagine the conversations between business, design, and technology that lead there.

Just like in the second experiment above, professionals see things that, while they are physically there, not everybody will perceive, unless they are pointed out.

Learning to see

Learning to design is, first of all, learning to see. Designers see more, and more precisely. This is a blessing and a curse — once we have learned to see design, both good and bad, we cannot un-see. The downside is that the more you learn to see, the more you lose your “common” eye, the eye you design for. This can be frustrating for us designers when we work for a customer with a bad eye and strong opinions. But this is no justification for designer arrogance or eye-rolling. Part of our job is to make the invisible visible, to clearly express what we see, feel and do. You can‘t expect to sell what you can’t explain.

This is why excellent designers do not just develop a sharper eye. They try to keep their ability to see things as a customer would. You need a design eye to design, and a non-designer eye to feel what you designed.

“See with one eye, feel with the other.”
― Paul Klee

Claiming that you can’t see well if you are not a designer might sound condescending, or at least old-fashioned, but this is not a post about designer superiority. Designers are as superior in design as doctors in medicine, or hair dressers in cutting hair. Of course there are good and bad designers, doctors, and hairdressers, and most of us fall somewhere in between.

In reality, “designer” and “not designer” are not split into two separate groups. You can develop an eye for design without ever going to school or even having designed yourself, and you can pick up some serious knowledge about design from design books. There is no doubt that if your perceptual set is comparable to a web designer’s point of view, for example an architect or industrial designer, it will be easier for you to see design in the same way a web designer would.

However, as much as seeing mistakes is always easier than doing things right, you will always see more with practical experience than from passive observation. There is no better training that imitation. When you learn to draw you do not primarily learn to move your hand, first you need to learn to perceive light and shadow as they really are, not what you think they are.

“My approach to the artistic process is to trust my eyes, not my mind.”
— Ken Backhaus

What applies to Backhaus doesn’t apply to Picasso:

”I paint objects as I think them, not as I see them.”
— Picasso

Genius or mortal, you need to learn to discern what you see and what you think you see before you can paint either reality. The best way to learn to see is copying the masters. That applies to art as well as to any form of design.

By observing great examples of design with your own eyes, attempting to duplicate them with your own hand, you will feel, see, and eventually understand the invisible lines behind a great product at a deeper and deeper level. Some of these lines are more obvious, while others may be so delicate that the very designer that drew them might not consciously realize exactly why and how they happened.

I sometimes hear that once we know how things are made, we can’t create or enjoy them spontaneously anymore. As far as this concerns enjoyment, I completely disagree. For me the more I learn about the many ways of human expression — music, architecture, even sports, the more I enjoy observing the masters at work. How could one not enjoy observing functional beauty and the care for detail?

In the development of design skills, theory can get in the way of practice, but only until the theory becomes practice. With practice your intuition evolves, and the better you understand what you do, the deeper your intuition. Only once you do not consciously think about the theory anymore are you achieving mastery.

Design vs taste

Design as functional beauty is an expert’s view on products. However, for non-designers “well designed” tends to mean nothing more than “I like it” or “it looks good to me”. This likability comes from the visual appearance of the object, and is a personal expression of taste — a feeling, not an analysis. Feelings such as “I like it” (or “I have a headache”) are not debatable.

“Good design is when I like it”
— Everybody

There’s nothing wrong with non-designers talking of “design” in terms only of likability and formal beauty. Indeed, it would be so much easier for everybody if good designs always looked nice and bad designs looked bad! Yet there are many ugly designs that work well. Look at Google, Reddit, Craigslist, or even iOS with a free aesthetic eye and you won’t find much that is formally sublime. But these interfaces work, so they are well designed.

This is because despite the more common use of the word, the technical term “design” is not primarily about the outside looks, fashion, superficial beauty, or personal taste.

“[Design] is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

We can draw two axes: the layperson’s version from “ugly” to “pretty”, and the designer’s version from “broken” to “works well”. This is not the only way to look at design, but it makes a lot of sense when we talk about user interface design:

There is plenty of good design that is ugly, and of course there’s good design that both works well and looks pretty. But a design that doesn’t work can never be substantially good — ugly and broken is just worthless crap, and pretty and broken is phony or kitsch:

“Was einer möchte und nicht kann, wird Kitsch” → Desire lacking ability turns to Kitsch — Jan Tschichold (my translation)

“No design” in the literal sense is never a good quality of a product. “No design” is the diametral opposite of “Beautiful Design”. Taken literally “no design” is, simply put, nothing but shit.

Still, some people use “no design” to mean “not pretty but functional”, which can still be “good design” for a design expert. I’d advise designers to avoid the confusing expression “no design” when you mean “functional design”.

The above chart also shows why I dislike the expression “minimal design”. If you take the expression “minimal design” literally and just do what is absolutely necessary, you end up in the Bold quadrant.

But you want to be in the Beautiful quadrant. How do you get there? Usually you move from the center to the upper left into bold. Because first of all you need to make it work. Once you are there, you need to move to the right. How do you get from bold to beautiful?

You don’t get there with cosmetics, you get there by taking care of the details, by polishing and refining what you have. This is ultimately a matter of trained taste, or what German speakers call Fingerspitzengefühl (“finger-tip-feeling”).

I don’t know of a more beautiful illustration of Fingerspitzengefühl than this iconic portrait of the typographer Jan Tschichold.

Personal taste vs sophistication

As we covered above, the everyday notion of “design” doesn’t say much about design as functional beauty. Personally (dis-)liking a colour, form, or image is not a matter of design, it is a question of personal taste. And as we all know, when it comes to personal taste there is not much to talk about there. But in addition to personal taste there is something that we can call “trained taste” or “sophistication”. Let me recapitulate:

• Whether I like pink or not, sugar in my coffee, red or white wine, these things are a matter of personal taste. These are personal preferences, and both designers and non designers have them. This is the taste we shouldn’t bother discussing.
• Whether I set a text’s line height to 100% or 150% is not a matter of taste, it is a matter of knowing the principles of typography.
• However, whether I set a text’s line height at 150% or 145% is a matter of Fingerspitzengefühl; wisdom in craft, or sophistication.

Obviously, beginners in design don’t have the same “finger tip feeling” as Mr. Tschichold. Also, while your intuition grows with training and experience, your need for conscious control over the design process gets smaller and smaller the better you get at it. It’s like dancing or playing an instrument — the more advanced you are, the less you need to consciously think about it. The less you think about what you do, the more virtuosity you will be able to achieve.

Typography is a great example there. A well-set book following the principles of typography is easier to read than a sloppy book that doesn’t. The experience of reading becomes measurably easier and thus definitely more pleasurable with good typography. The untrained eye won’t notice the quality of typography, good or bad, as long as we are not comparing extremes.

“If you really hate someone, teach them to recognize bad kerning” —XKCD

However, we will all enjoy reading a well-set text more, regardless of our typographic expertise. And the more typographic understanding you have, the more you’ll enjoy following the blueprint of a master’s trained taste. The same applies to well architected houses, finely engineered cars, and, to some degree, even to graphic design.

Form and so on

Now, despite our two axes above, there many links between visual and functional beauty. From Dieter Rams’ “Ten principles for good design”:

“Good design is aesthetic — The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.“

Visual and functional beauty are not completely independent. Why is that?

A designer who is able to find the functional essence of a product will also likely find it in the visual aspects — they are usually interconnected, sometimes almost inevitably so.

Don’t count on an inevitable visual beauty when it comes to products with a heavy engineering aspect, like computers, web sites, or industrial complexes. There the conditions can be harsh, with the materials and standards we have to work with being bereft of much aesthetic refinement. In this kind of environment even a product with merely bold functionality can be perceived as visually pleasing, after you’ve used and understood the necessity of its bold shape.

Functional design is not completely self-evident on the object, it shows itself in use and effects the aesthetic perception. This is even more pronounced with software, where the outside hardly gives any hint how well (or even if) it actually works. However, this doesn’t mean that software needs to be hard to use. On the contrary. Whether we talk about hardware or software, usability is key, because:

“Good design makes a product useful — A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it.”
— ibid.

Since professional designers focus on functional beauty and hard-to-spot detail, they can call things beautiful that may seem blunt, cold, or overly simple to a non-designer. This might explain why designers and non-designers sometimes come to like different things.

The more knowledge you have about a product’s inner workings, that is, if you can see the construction, the hidden mechanism, and glimpse the process leading to its current state, the easier it becomes to see its design. On the other hand, if the design process becomes too obvious, if the designer leaves too many traces on the object of a product that shout “DESIGN!” without fulfilling its promise, it moves to the lower right quadrant of “kitsch”. Dieter Rams:

“Good design is unobtrusive — Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.”
— ibid.

Whether the inner working shows or not is far from a clear, unique distinction between good and bad design. If you shell the core interface though, you are probably moving again into the lower right corner.

“Good design is honest — It does not make a product appear more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
— ibid.

In general, more advanced design is also less visible unless you’re looking for it. The customer doesn’t need to be bothered with the sketching and production of the object in order to use it. What the customer wants to understand is how the product is supposed to be used. There, the designer is should aim to be as transparent as possible. (Although there are a few exceptions, as we will see later.)

“Good design makes a product understandable — It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.”
— ibid.

This is why as a rule of thumb advanced design stays largely invisible to the untrained eye. However, while professionals are able to more clearly perceive and understand the logic of the design behind a product, anyone can assess the quality of design through use.

• You don’t need to see and understand the engineering of a car to know if it’s well designed or not. If it runs well, it’s probably well designed.
• You don’t need to see how and why your TV works as it does. If you can’t figure out how to use it, it’s crap.
• You don’t need to know the different layers of web design to find out if a web site works or not. All you need to know if it’s good design is if it works for you.

How well something works is the only obvious criteria of good design. To decide whether an everyday object works for us or not, we don’t need to be experts. We know it when we use it.

Again, this is a rule of thumb. That not everybody can sit down at a piano and play away like Glenn Gould is not the piano’s fault. Your skills need to match the tool you are using to assess its quality — you can’t test-drive a car if you haven’t learned to drive. But everyday objects should only require everyday skills. This is what makes web design so hard.

Obviously, good interface design — and all product design is to some degree interface design — needs to somehow indicate its purpose and use. This is often more a matter of dealing with standards and expectations than of innovation. This makes the first of Dieter Rams 10 rules for Good Design one the hardest:

“Good design is innovative — The possibilities for innovation are not, by any means, exhausted. Technological development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself.”
— ibid.

If designers get too adventurous with usability, the result is generally a mish-mash of quirky and hidden functions. When I say that good design is invisible, obviously I don’t mean obfuscating the use of a product by hiding the interface. Just like Dieter Rams doesn’t mean that good designers should be lazy when he states that good design is “as little design as possible”. Things that are hard to use by their intended audience are obviously bad design (I’m looking at you, adventurous “designer” faucets).

To make a product’s use obvious without distracting from the regular use is one of the the hardest parts of the design job. The solution is almost never in implicit or explicit instructions (I’m looking at you, iPad magazine apps), but of reducing learned interaction patterns into simpler, yet still common patterns.

The art of reduction is not just “cutting things”. The cutting is merely the reduction part. The art of reduction is cutting away what is not essential, and adding detail to what is.

“Good design is thorough down to the last detail — Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.”
— ibid.

Beauty in design is not found by adding prettiness to a bold, functional design, it’s adding detail to the essence, so the functional logic becomes more humane, refined, and clear. Or, as Edward Tufte said: “To clarify, add detail.”

User Interfaces

Seeing the design of all but the simplest user interfaces is about as hard as seeing the blueprints of a building only by looking at it from the outside. Why? Isn’t the interface just what I see on a screen? Hell no!

The confusion between the common and the expert definitions of “design” goes hand in hand with the general fuzziness we face when dealing with the term “interface”. While the common use for a computer user interface just aims at something similar to “computer graphics”, the expert’s definition of “interface” is not primarily what you see on the screen.

“The way that you accomplish tasks with a product — what you do and how it responds — that’s the interface”
— Jef Raskin

In every day language an “interface” is not “the way you accomplish tasks with a product,” but just the functional aspects of a product’s surface — the buttons and controls. When it comes to screen design, people often use the term “interface” to just describe the visible graphic elements of a screen.

And again, using “interface” in the sense of only what you see on the screen or on the machine side is not a bad or immoral use, it’s the non-expert use. As interface designers we need to be careful. Our definition of “interface” is, again, not just what you see, but, for better or worse, how it works.

As I mentioned before, computer user interfaces can look incredibly ugly, yet still be very well designed. This is because most of what we regard as interface is, alas, not visible. And you will not be surprised when, again, I say that a literal “no interface” is definitely not a good one.

The expressions “less interface”, “hidden interface”, “no UI” etc. are not literal. They are fuzzy rhetorical formulations that mix up the common and the technical term. What does this rhetoric aim at?

It aims at bloated, overblown input/output elements in the perceivable layer of the interface. What do these expressions try to say? They are trying to say the same thing as those who say “less is more”. Or, in Dieter Ram’s words:

“Good design is as little design as possible — Less, but better — because it concentrates on the essential aspects, and the products are not burdened with non-essentials.
Back to purity, back to simplicity.”
— ibid.

Less visual clutter leads to a more efficient interface. Technically speaking is not quite clear what “less interface” means when you take that expression out of context.

1. If by “less interface” you mean “harder to work with,” less interface will lead to a worse interface.
2. If by “less interface” you mean reducing visual and functional elements to the essence, you will improve the interface.
3. If by “less interface” you mean “hiding how a product works”, less interface will always lead to a weaker interface.

Bluntly speaking of “more interface” or “less interface” is prone to misunderstandings. While we have no right to tell people how to speak, as designers we have to make sure that we are clear. Here again, if in context it is clear what “less interface” means, maybe we should not be too pedantic about it either, and remember that

“The slightest mistake looks incredibly stupid, when others make it.” —Georg Christoph Lichtenberg

Conclusion

It is not the hand that makes the designer, it’s the eye. Learning to design is leaning to see. In consequence, what designers learn to see as they improve their skills is usually related to design. Doctors don’t see Web sites in the same way as Web designers, Web designers don’t see x-rays in the same way as doctors. Our experience sharpens our eyes for certain perceptions, our experience shapes what we expect to see and what we expect to see shapes our experience. Human reality is perspectival. That we can’t see what more experienced eyes see, more experienced ears hear, more experienced noses smell doesn’t mean that we cannot learn to perceive all these things. Not only can we improve our perception it is also very exciting and pleasing to do so.

What makes the difference between bad, average and great design tends to happen in a sphere that only experienced people can perceive clearly. Yet, still, most will feel the difference between good and bad design. Typography is a great example to illustrate that. Very few people perceive the delicacies of great typography, and even fewer can set type, but most of us will feel that a well set book reads better than a badly set book. This feels like a paradox. But think about it: the aim of design is to facilitate use and take care of details that are tedious for the inexperienced person. What looks paradox from outside is perfectly logical from an inside perspective.

A lot of confusion arises from the fact that there are many ways to use the term “design”. The common term (being a matter of taste) is incommensurable with the professional term of design as a matter of functional beauty and care for detail. While everybody has access to the design quality of a product through use, no one has a determinate authority on design as a matter of taste. Still, and to hammer it in, by learning to design, you will evolve an eye for design, as well as a more refined taste to discern subtle design details.

Now, if you are a designer and all this makes you feel special, keep in mind: There are not distinct groups of “designers” and “non-designers” — it’s a continuum. And there is no such thing as the worst or greatest designer, since design requires a lot of different talents that are incommensurable with each other. Some have better imagination, some are better with the purely functional aspect, some will have more talent in polishing details, some will have excellent technical skills, and some will shine with an unbreakable will to ship. It is a long way from novice to pro, but what we all have in common is the trained ability to see what others don’t, to create what others can’t see but only feel.

The same confusion that leads to pedantic fights over what design really is arises when we mix the common term for interface in the sense of “computer graphics” with the more abstract technical term that involves the hidden workings on the machine side, the physical interaction and the user’s mind. It is possible to say a lot of cool shit about design or interface design by making a mess while meaning the right thing. So before we get into teaching and preaching mode we need to consider the context and try to understand what is meant before we get too glorious and berating with our own eternal infallible definitions.

Is easy to score marketing points by saying “No UI” is better than “a lot of UI”, even though strictly speaking this relies on imprecise language. If by “no UI” you indeed mean that hiding the UI is a great idea, then let’s hope that you are talking about designing child locks. Unless your purpose is to avoid unskilled users getting access to your UI, hiding interfaces is always a bad idea.

As with design in general, user interface design has to be assessed in terms of functionality and care for detail.

A UI that works is not a priori self-evident to everybody. Tools need to work for those who use them. That being said, everyday objects like faucets, hammers, and iPad magazines need to be considerably more self-evident than violins, airplane cockpits, or x-ray machines.

After getting lost in the labyrinth of design and aesthetics, I think that I have found a way out that doesn’t oversimplify, boss around, fuel complexes or scare people away from design, but invites to see more. I am pretty sure that there are shorter, easier ways, but I can’t see them-just yet.

The intention of this article was not to establish designers as superior creatures, or avoid criticism of designers or non-designers. This is why I’d like to give the last word to a non-designer:

“When everyone has the same Mac and the same internet, the difference between hackneyed graphic design and extraordinary graphic design is just one thing—the ability to see.
Seeing, despite the name, isn’t merely visual.”
— “Learning how to see”, by Seth Godin

I’m looking forward to hearing what you think.

Apple has been working on its file system and with iOS it had almost killed the concept of folders — before reintroducing them with a peculiar restriction: only one level! With Mountain Lion it brings its one folder level logic to OSX. What could be the reason for such a restrictive measure?

Classic folder systems don’t perform too well. One reason is that organizing folders is engaging in the tiring discipline of information architecture. Information architecture is hard brain work. Just like a chess problem, it seems obvious once done, but takes considerable mental energy to figure out a clear and simple information architecture. And mainly, you just don’t want to do it all the time. Tying folders to an app and reducing them to one level could solve a lot of these problems.

Folders-in-folders don’t work

The folder system paradigm is a geeky concept. Geeks built it because geeks need it. Geeks organize files all day long. Geeks don’t know and don’t really care how much their systems suck for other people. Geeks do not realize that for most people organizing documents within an operating system next to System files and applications feels like a complicated and maybe even dangerous business. Remember that autoexec.bat file?

Folders tend to grow deeper and deeper. As soon as we have more than a handful of notions, or (beware!) more than one hierarchical level of notions, it gets hard for most brains to build a mental model of that information architecture. While it is common to have several hierarchy levels in applications and file systems, they actually don’t work very well. We are just not smart enough to deal with notional pyramids. Trying to picture notional systems with several levels is like thinking three moves ahead in chess. Everybody believes that they can, but only a few skilled people really can do it. If you doubt this, prove me wrong by telling me what is in each file menu in your browser…

Folders-in-folders are hard to deal with. Just as physical folders-in-folders are prone to creating a mess, digital folders-in-folders represent a steep mental hurdle for most of us. Most people don’t want to bother with folder structures. They get confused when they’re forced to deal with settings in a text editing application. People expect things to just work.

Even geeks can’t handle folders in folders

I am a geek myself, and even a specialist in organizing complex clusters of information, but my own file systems always sucked. Picture this: I have a degree in philosophy and have worked for almost 15 years as an information architect. I enjoy playing chess, reading Kant, and thinking about the correct order and hierarchy of words all day long…

…and yet I hate, always hated, and always will hate thinking about organizing files. I just want them out of sight. I used to blame that on my laziness. But maybe it’s not just that. Thinking about how to deal with files prevents me from working. And this annoys me.

Some might argue that the reason why I hated naming and organizing folders on my computer was not in spite but because I am an information architect. As an amateur you might still believe in the perfect order of your words, the perfect philosophical system, the perfect file system.

The more experience you have dealing with notional systems, the more you know that there is no perfect information architecture, but only better or worse compromises. And making compromises is tiring.

Default folders help

I was relieved when Apple introduced default content folders in the left side Finder panel:

The default content folders are: Documents – Downloads – Movies – Music – Pictures. The choice of those categories, as obvious as it may seem now, are also based on a series of compromises (Do we need a texts folder? A “Work” or “Private” folder? Are Photoshop “documents” not often “Pictures”?), but they are all pretty good compromises and adding a folder is easy. I don’t know about you, but before Apple introduced the default folders my document filing system was not nearly as obvious.

Curious to see how well they worked, I dropped my intricate file structure and tried to just use the defaults (with the additions of “Sites” and “Dropbox”). Putting everything into “Documents” freaked me out — it took some bungee jumper’s deep breathing. I’m not even sure if I can find my files quicker now, because I’ve been using Spotlight for this so my workflow didn’t change. However, what matters is I don’t need to think before putting a file away anymore.

Not having any more deep folder structures is generally a big relief. But it still makes me nervous. Enter Document Library.

The Document Library

With the introduction of Mountain Lion, Apple is about to make a major change to its file system. Your files will be tied to the app they were created in. Each application comes with its own little file browser, the Document Library:

The Document Library has its pros and cons, and, like so many tech people, I was quite skeptical at first. Not about anything specific, just skeptical in a general, dickish way. Geeks think in our own little boxes. If one comes up with a new pattern for a common interaction, others will naturally be generally skeptical. That’s usually a healthy attitude for usability issues. But that’s not the real reason why geeks are skeptical. It’s because we are smart asses. We are the people that put salt and pepper on the pizza before trying it, because we just know best.

My self-justification was I was convinced that the Document Library is going to be like those annoying templates we never use in Word or Creative Suite. Template choosers feel like old Flash splash screens: nothing but an annoying hurdle for noobs.

But not in this case. What makes the Document Library better than a template chooser is iCloud, with its one level folder structure. The problem is that the concept is not obvious enough. Yet. We know Apple — they will substantially invest in explaining how to use it with ads. They’ve been doing this for years now, and it’s one of the reasons why Apple products are perceived as easy to use.

I am not sure I’d like the Document Library and iCloud’s new file system paradigm if I hadn’t been forced to understand it. I had to as part of developing iA Writer. Getting our heads around how iCloud is supposed to be used, the following three arguments killed my skepticism:

1. I don’t need to type file extensions into Spotlight any more. In general, documents belong to an app. While there are often several apps that can use the same document, we usually have a preferred app for each document type.
2. I don’t need to drag documents into the app. I can navigate from app to app, and handle the documents right there.
3. I don’t need to put files away. The OS does it all for me, and my documents are always at hand in the app that they belong to.

These are all simplifications in the file handling that might go unnoticed to the amateur, but they are substantial simplifications—as long as the user accepts the new paradigm.

That paradigm change alone would not suffice to make file handling easier, because there is still a major problem: getting files from one device to all your devices. Enter iCloud.

iCloud

iCloud makes sure that my documents are always on all the devices I use. In real time.

Having all documents accessible without sending them via e-mail gets rid of a stressful question: where is the latest version and what is it called? This, in combination with the OS X Versions feature, is a giant leap forward in cross-device file management.

iCloud is mind-blowing. Or more accurately: iCloud would be mind-blowing if it worked 100% of the time. Which it doesn’t. It’s more like 99.9% of the time. This is not good enough for a core part of a new file system component. With over 400,000 customers, this keeps me awake at night. 0.1% of 400,000 is 400.

Now, if you scale that to the total number of Apple users, you’ll see why Apple does not yet fully support iCloud on all its own software. I fervently hope that Apple squashes these bugs.

In Apple’s defense, this is a brand new, highly complex technology, and it is continually getting better. We’ve found the latest “one level folders” change to be a major improvement.

On the surface it’s only a file system with folders, and technically they’re not even real folders (but that’s besides the point). But in practice, it is real-time syncing of files and folders across all your devices, and technically this is a big deal. Here’s an example to illustrate why this is tough:

Imagine that you have a document open on both your iPhone and your Mac. Now change the name of the document and put it in a folder. Let’s up the ante and rename the folder. How is the Mac going to know that the open document now has different name, and is in another place which also has a different name? Yet somehow it works (most of the time).

1-level Folders in iCloud

As a developer of iCloud-powered apps we had to quickly work out why on iCloud we are only allowed one level of folders. Why the restriction? If you’ve made it this far it’s quite clear. They wanted to avoid the folder in folder conundrum and guide the user to use a simple structure.

Folders are not a feature that beginners muddle through but pro users require. No one can deal with deep folder structures. Our brain is simply not built for them.

On the other hand, a reduced one level structure is very easy to handle. Here is what I came up with for my own folder structure in the iCloud Document Library:

1. Notes
2. First Drafts
3. Edits
4. Archive
5. Trash

For me these are:

1. Quick thoughts, funny things, random sentences
2. More detailed sketches of thoughts
3. Texts that I am currently working on
4. Published texts
5. Things I’m not ready to fully erase yet

Having a long list of files per app works well enough, if you have good search and sort functions. So, pragmatically, you don’t really need folders. But…

Having a basic structure that mirrors our mental model, such as (for me) the editorial stages documents go through, is still a big help. With a basic file structure, the files always seem in the right place. And that is the real benefit of folders in an operating system.

Conclusion

Realizing that deep folder systems only create chaos, I went with Apple’s default folder structure, and located files via Spotlight using document extensions.

The Document Library removes the need to narrow your search using extensions, and the need to think about where to put your files.

The ubiquity of iCloud and the Versions feature removes the need to manually version files using different file names.

The iCloud Document Library folders, restricted to one level, guide us to use a simple hierarchical system that mirrors our mental model. This makes them easy to understand, and gives us peace of mind that the files are in the right place.

We need folders. More for our peace of mind than for pragmatic reasons. We like to know that things are in the right place. Few people can think three chess moves ahead, and maybe even fewer people can picture notional hierarchies that are deeper than one level. In spite of the outraged geeks that will hate Apple for being this authoritarian, it makes a lot of sense to restrict the folder depth to one level for geeks and casual users alike. We need folders, and we need folders in the cloud, but we don’t need folders in folders.

All this will be for naught if Apple doesn’t succeed in explaining why the new file system works like it works. But if Apple is good at one thing it’s marketing.

PS: Why not just use Dropbox?

For those who prefer Dropbox and cite it as an example of how to Do Things Right™—Dropbox is great. At iA, we use it as our internal file system. An amazing service, but…

1. Dropbox does not allow you to access the same document from different devices. This makes syncing a lot easier.
2. Dropbox is a couple of versions ahead of iCloud
3. The Dropbox API has its own (sometimes quite bad) hiccups

Remember that if you have problems with iCloud (or Dropbox for that matter) it doesn’t mean that everyone is having the same problems. We are pretty sure that Apple is going to find and fix the remaining problems. Why? Because they have to. Without iCloud the whole new file system paradigm goes down the drain. The clock is ticking.

PS2: Folders on iA Writer for iPad and iPhone

At first it seemed iCloud wouldn’t have folders at all. So we built iA Writer’s file system around the initial no folders concept. Then Apple introduced folders, but only one level deep. When this happened, we put all of our energy into implementing that strategic change into our iOS apps as soon as possible. Why?

1. The Document Library in Mountain Lion allows you to create folders. These folders need to be mirrored on iOS, or the folder structure is destroyed every time you access iCloud using your iOS device.
2. Folder syncing between OSX and iOS needs a lot of debugging. If you don’t have folders on your iOS app the files in folders will not be visible.

In other words: The Document Library on OSX is almost useless, if your mobile iCloud apps don’t support folders.

If you are interested in trying the latest versions of iA Writer, they are currently on a 50% discount.

Get iA Writer for Mac for $4.99 and iA Writer for iPhone and iPad for $0.99.

How do you deal with erroneous tweets? Not any erroneous tweets, your erroneous tweets. The tweets that you misspelled or, worse, that contain information you later discover is false, or a late night knee-jerk response you regret in the morning. What do you do when the retweets start and people correct you, and then people react to the reactions even though you deleted it right away?

It is extremely difficult to catch up with a bad tweet. One mistake, and you’re that guy that disses women in tech, hates his clients or tortures chihuahuas, and then a campaign starts against you — an evil sinner that needs to be brought to justice by the social media avengers. An error on Twitter can easily turn into twitterror.

Bad luck? Pay more attention? Humans make mistakes. Some mistakes happen in good faith. No one knows everything, and no one is so considerate they can avoid ever hurting anyone.

That errors get spotted and corrected quickly is one reason why I like Twitter. That errors get frozen in screenshots on other people’s websites like Han Solo in Carbonite… I’m not a big fan of that. My factual and ethical mistakes are spotted and corrected within seconds. And that’s great! If there only was a way to acknowledge my errors without deleting tweets and making a mess in the conversation that followed my errors!

Twitter is fast, and that speed is part of its charm. But the faster the pace the easier it is to make mistakes. Of course, a single error will rarely cost your career, marriage or professional reputation, but even small errors can be quite painful to deal with. If English is your second or third language, the chances that you misspell or miscommunicate are high. And even if you are a very careful native speaker, you won’t escape the URL-error devil:

The above is a completely harmless case, but there are plenty of other examples. Just deleting the tweet doesn’t solve the problem either. Deleted information can be perpetuated in quoted retweets or look-at-this-stupid-asshole screenshots.

A missing tweet also doesn’t explain why it’s missing. Excuses might be posted after the mistake happened — but they might also never be seen. The only format that clearly states a mistake is a fat strike through. It is a strong answer to any interpretations and accusations that follow. It clearly says: “Don’t read this. This is all wrong. I take it back. I’m sorry.” Deleted tweets don’t say that — they smell like a cover-up and often make you look suspicious. And apologetic follow-up tweets don’t have the power to neutralize that screenshot of you screwing up.

The most obvious way to deal with erroneous tweets would be to add a feature to redact them, but editing tweets would:

• be technically unfeasible
• work against the core concept of a status streaming service
• make it difficult to hold people accountable
• bloat the interface

So instead of making a metaphysicaltechnical mess by allowing to edit tweets I proposed a comparatively simple solution. Add a new status to tweets called “Error.” This is how the Error status could look:

This is how it could work (there might be other, simpler ways, but hey, I don’t get paid for this):

The idea is simple. If you make a mistake, instead of deleting the tweet you choose “Mark as Error” and write a follow-up tweet that corrects your mistake. A strike through means: “This is just wrong, ignore it and look for a follow-up of this if you’re interested.” Unlike the deleted tweet that leaves a black hole ripe for interpretation, the strike through hints at a follow-up down the stream that corrects the mistake. A stupid idea? Fuck yYou might be right, but you have to agree that information that is struck through has a funny magic that might spice things up.

With a little bit of imagination you can also see how people could use this in creative ways, which would no doubt invigorate some debates.

What are the chances?

I made the suggestion on Twitter to Twitter twice. The first time some favored it. The second time Josh Brewer liked it. Creative Director Doug Bowman is still not a big fan:

The most influential designer at Twitter didn’t like it and the scariest designer on Twitter didn’t like it either:

So I decided to write this post to illustrate to the most influential designer at Twitter how easy and likable it could be if done right. And to kick the scariest designer on Twitter in the balls.

But hey, wait, I’m a non-native speaker with terrible spelling and a quick “bad tweet” finger that regrets his spelling mistakes, sloppy fact checking, and Cuba Libre-powered tweets all too often and too late. So this is all very biased. Still… How awesome would it be if in a couple of months that screenshot looked like this:

I’m curious to hear what you think…

In the heat of the relaunch I wrote a quick blog post on responsive typography, focussing solely on the aspect of our latest experiment: responsive typefaces. Without knowing the history of iA, you’d miss some key aspects to the responsive typography and design in our relaunched site. Instead of mashing up all our articles on the matter, I decided to start from scratch and explain everything step by step.

At iA, when we built websites we usually started by defining the body text. The body text definition dictates how wide your main column is, the rest used to follow almost by itself.

Used to. Until recently, screen resolution was more or less homogenous. Today we deal with a variation of screen sizes and resolutions. This makes things much more complicated.

To avoid designing different layouts for every possible screen size, many web designers have adopted the concept of Responsive Web Design. In a nutshell this is the idea that your layout automatically adapts to the screen definition. There are different ways to define it. I like to put it this way:

1. Adaptive layouts: adjusting the layout in steps to a limited number of sizes
2. Liquid layouts: adjusting the layout continuously to every possible width

While both have advantages and disadvantages, we believe that adaptive is the way to go, because readability is more important than having a layout that is always as wide as the viewport. Optimal readability requires a certain amount of control over the measure (column width) of the text, and in this regard a liquid layout creates more problems than it solves.

Note: Responsive design already incorporates a lot of macro typographic issues (type size, line height, columns width). So responsive design already incorporates responsive typography in many ways. What we focused on in our first post on the responsive typography on our own site, mainly referred to our use of graded fonts. I’d like to talk about grading in the next post and dive right into the basics of responsive macro typography on the screen now.

Choosing a typeface

The right tone

Sooner or later, you need to decide what kind of typeface you want to use. The choice of your font is mainly a matter of tone, but, as every typeface has it’s own qualities and demands (or forbids) certain treatments, the choice of type has a lot of visual and technological consequences. With web fonts you now have a big choice of typefaces, so finding the one that fits has become yet another challenge.

We designed our own typeface for this website to experiment with graded fonts. We chose a serif because it fits our tone, and mirrors the refinement of our content (or at least that’s what we think). For iA Writer we chose a monospaced slab serif. Because the primary purpose of our program is helping you getting a first draft out, we specifically chose Nitti — a typeface that feels strong and careful at the same time. The decision to use a monospaced typeface also came about because the first iPad’s Operating System didn’t auto-kern proportional typefaces. Instead of using a proportional typeface that would be rendered poorly, we decided to go for a monospaced typeface right away.

Serif or sans serif?

Usually the choice falls between serif and sans serif. This is in itself a complex matter, but there is a simple rule of thumb that might help you: The serifed typeface is a priest, the sans is a hacker. One is not better than the other, but, for various reasons, a serifed typeface has a more authoritarian touch, whereas a sans serif feels more democratic. Remember, this is five thousand years of typographic history wrapped in two sloppy lines, so don’t take it too seriously.

A lot of people still think that for screen typography the question “serif or sans serif” answers itself. Actually, it’s not that easy. Against common beliefs, both serif and sans serif can perform equally well, if you choose a body text size above 12 pixels. Below 12 pixels serifed typefaces don’t render sharply enough, but (and this brings us to the second point) on contemporary monitors 12 pixels is definitely too small anyway.

What size?

The size of your body text doesn’t depend on your personal preference. It depends on reading distance. Since in general computers are further away than books, the metric size of a desktop typeface needs to be bigger than the sizes used for printed matter.

The illustration below shows that the further away your body text, the bigger it needs to be. The two black and the two red A’s have the same metric size. But since the right pair is held further away, the optical size is smaller. The red A in the right image has the same optical size as the black A in the left image:

The further away you hold the text, the smaller it becomes visually. You need to make the text size bigger the further away the text is read, to compensate for a larger reading distance. How big is, again, a science in itself. If you are inexperienced, a useful trick is to hold a well-printed book at a comfortable reading distance while looking at your website to compare.

Graphic designers without Web design experience are surprised how huge good body text on the web is in comparison to printed matter. Mind you, it’s only big if you compare it side to side, not if you compare it in perspective.

If, after increasing the size of your body text to match, the new size irritates you in the beginning, don’t worry that’s normal. However, once you’ve gotten used to it, you will not want to go back to the “standard” small sizes.

We’ve been promoting these “perspectively proportional” font sizes since 2006. Initially, our claim that Georgia 16px was a good benchmark for body text sizes provoked a lot of anger and even some laughter, but now it’s more or less a common standard. With higher resolutions, that standard is becoming slowly obsolete. But more on that later.

Line height and contrast

While body text size can be evaluated with that perspective trick, line height needs some adjustment. With more reading distance and (what we call) pixel smear, it’s wise to give screen text a little bit more line height than printed text. 140% is a good benchmark, but of course, it depends on the typeface you use.

Today it’s a given that you make sure that the contrast is not too weak (e.g. grey text on a light grey background) or too garish (e.g. pink on yellow). Since screen typefaces were designed to be displayed black on white, using dark backgrounds is also somewhat difficult, but these can work if done right. With contemporary high contrast screens it’s also preferable to choose either a dark grey for text or a light grey for the background, instead of a hard black on white. But that is, again, not the most important question.

iPhone vs iPad

When we designed iA Writer for iPad we invested weeks to find the right typographic definition. At the time, the high resolution screen of the iPad was a completely new challenge, and it took quite some time until we understood how it works. When Apple introduced Retina displays for iPhones and later for iPad, everything changed again. We could write a whole book to explain how we got to the iconic look of the iA Writer typeface, but there is still so much to say about more general matters so I’ll cut to the chase.

If you compare our current version of Writer for iPhone with the version for iPads, you will notice that the type size is not the same.

Why different type sizes for iPhone and iPad? If you read the above explanation attentively, you might have already guessed.

1. While the distance is not always the same, in general you hold the iPad a little bit further away. Whether you use your iPad on the breakfast table, on your knee sitting on your sofa or right in front of your face lying in bed gives a variety of reading distances. This was an entirely new challenge, because the reading distance on desktop and laptop computers doesn’t vary that much. In order to make it work in all instances we chose the furthest reading distance defining the type size. This might result in a slightly bigger than usual type size when you read it in bed, but it’s not uncomfortable, and generally you don’t use a writing application lying on your stomach in bed.
2. You have less screen estate on an iPhone so you are forced to make adjustments.

Luckily, the iPhone is held closer to the face so being forced to use a smaller type size works out perfectly. From an average reading distance, both iPhone and iPad have a similar optical type size.

Since the iPhone is held closer, the line height could also be tighter, which again is a necessity because of the smaller screen:

Not everything always works in your favor when you design for the screen. Interaction design is engineering: it’s not about finding the perfect design, it’s finding the best compromise. In our case we had to reduce the line height, and also the gutter and the spacing between characters:

The adjustments were so delicate that if you don’t know it, you won’t notice how small the gutter is. Why didn’t we just get rid of the gutter? The gutter is not an aesthetic matter, it lets the text breathe and helps the eye to jump from line to line. If you think that this all sounds esoteric: no, so far we’ve just covered the basics.

What about desktop computers?

Some people complain about the big font size in Writer for Mac. Just like we had to go for the biggest minimal size choosing the font size for iPad (which is held at different reading distances), we went for the biggest minimal font size on Mac as well. At the time our benchmark was a 24 inch high resolution iMac, where the optical size is more or less the same as on all other devices.

Since the variety of Mac computers that run iA Writer is finite, we could determine the different possible resolutions. We looked at every possible configuration to make sure that the type size was the best compromise for most machines.

You might ask “Why not just allow the user to choose the type size?” Well, adjusting type size is not a matter of taste, but a matter of reading distance. Since most websites and applications have an overly small type size, new customers would initially choose a type size that they are used to, that is: too small a size, and never experience the full pleasure of our writing app. The main reason is not that we want to force a certain look upon all users: what we want is that iA Writer works without settings without fumbling, that the only thing you can do with it is write. This has been the open secret of its success and changing that would messing with its core.

Okay then, why not adjusting to the device’s resolution automatically? Wouldn’t that be true responsive typography? That’s right, but in adjusting to the resolution, you also have to choose the right optical weight to make sure that the typeface really works as intended with every size and resolution. With the type size and the resolution optics of the font change as well. That’s why iA Writer for Mac, iPad 1/2 and iPad3 all have different grades as well. To explain the full logic behind grading digital fonts, I need a little bit more tome and space. So, stay tuned for Part II!

Promising to make you look wired and magically promote your content in social networks, the Like, Retweet, and +1 buttons occupy a good spot on pretty much every page of the World Wide Web. Because of this, almost every major site and world brand is providing free advertising for Twitter and Facebook. But do these buttons work? It’s hard to say. What we know for sure is that these magic buttons promote their own brands — and that they tend to make you look a little desperate. Not too desperate, just a little bit.

No need to remind me of Twitter

The user doesn’t come out of nowhere. We don’t land on your page and then head happily to those social networks to promote you, just because you have a button on your site. We find content through Facebook, Twitter, Google+, Pinterest etc., not the other way around.

• Whoever uses social networks to find content, usually begins the web journey there and goes back naturally. We don’t need to be reminded of what network we use on the way. We know. We came from there.
• For those who don’t use social networks the social media buttons are completely useless.
• If readers are too lazy to copy and paste the URL, and write a few words about your content, then it is not because you lack these magical buttons.

Some people probably do use those buttons. Maybe even a lot of people. And maybe you do and think I’m dead wrong about this. Maybe I am. And maybe someone needs to do some serious research to know for sure out. I won’t deny all that. What I know for sure is that most people who know how to use social media also know how to share URLs:

“We removed FB buttons and traffic from Facebook increased. Reason: instead of ‘liking’ articles, readers share it on their timeline.” —@smashingmag

If you provide excellent content, social media users will take the time to read and talk about it in their networks. That’s what you really want. You don’t want a cheap thumbs up, you want your readers to talk about your content with their own voice.

What’s the harm?

What does it mean that every Mashable article has thousands of retweets and likes? It’s not like the number of tweets shows how interesting an article is. It more likely shows the strength of their social media profile.

Don’t worry. These buttons will vanish. The previous wave of buttons for Delicious and Digg and Co. vanished, Facebook and Twitter and G+ might vanish or they might survive, but the buttons will vanish for sure. Or do you seriously think that in ten years we will still have those buttons on every page? No, right? Why, because you already know as a user that they’re not that great. So why not get rid of them now? Because “they’re not doing any harm”? Are you sure?

• Did you know about the spying?
• Are you okay with slower loading times and bumpy scrolling?
• If you’re unknown, social media buttons make you look like a dog waiting for the crumbs from the table. You might have magnificent writing skills and a lot to say, but you will still only get a few retweets and likes. Yes, it’s not fair, but that’s the way it is. If you’re known, you will get attention, even for the mediocre. If you’re not known, no matter how good you are, initially you won’t. That button that says “2 retweets” will be read as: “This is not so great, but please read it anyway? Please?”
• If you’re known and your text is not that great the sleaze buttons can look greedy and unfair (yes, people are jealous). “1280 retweets and you want more?—Meh, I think you got enough attention for this piece of junk.” When I started writing this article I was looking forward to cite a courageous piece by 37signals explaining why “it’s the content, not the icons”—only to find that they now have added a Like and a Retweet button.
• In a medium full of advertisement and self-promotion, every unnecessary pixel of noise and “click-me!”-begging should be avoided if it can be. The less noise, the less begging, the less secondary advertisement means the easier it is to focus, and the more likely it is that people will actually read your content.

Social media buttons are not a social media strategy, even though they’re often sold that way. Excellent content, serious networking and constant human engagement is the way to build your profile. Adding those sleazy buttons won’t achieve anything. Social media is not easy — there is no simple trick. Usually, what most people do is not the winning strategy but the safe strategy, and safe rarely wins. Is there a better solution? Why don’t you just post the best reactions on the bottom of the article? Like this:

First Reactions

“@iA would you please stop telling people that they need to do put effort to get good results, instead of relying on cheap magic tricks?” @fariska

“@iA Also to point out one actual harm the buttons do: slower page load times. Especially, but not only, Facebook buttons.” @ojt [Completely forgot about that, updated the post right after the tweet.]