Information Architects http://ia.net iA designs and builds digital products. Fri, 05 Sep 2014 07:34:20 +0000 en-US hourly 1 Information – Entropy http://ia.net/blog/information-entropy/ http://ia.net/blog/information-entropy/#comments Tue, 05 Aug 2014 02:49:06 +0000 http://ia.net/?p=10722 Will information technology affect our minds the same way the environment was affected by our analogue technology? Designers hold a key position in dealing with ever increasing data pollution. We are mostly focussed on speeding things up, on making sharing easier, faster, more accessible. But speed, usability, accessibility are not the main issue anymore.

The main issues are not technological, they are structural, processual. What we lack is clarity, correctness, depth, time. Are there counter-techniques we can employ to turn data into information, information into knowledge, knowledge into wisdom?

Oliver Reichenstein’s design-philosophy comedy act at Smashing Conference NYC, June 2014.

]]>
http://ia.net/blog/information-entropy/feed/ 0
Putting Thought Into Things http://ia.net/blog/putting-thought-into-things/ http://ia.net/blog/putting-thought-into-things/#comments Tue, 22 Jul 2014 15:33:41 +0000 http://ia.net/?p=10693 To get a good perspective on our clients and their users, we start our projects with research. We go mobile first because it naturally gives prioritization, and we want all the content first so we can design in the browser.

The process is so clear in conference speeches and weblog posts that it is already a stereotype. “If everyone followed this path, web sites would all be top quality!”, we say. If. Unfortunately, for most of us who do it on a daily basis, the reality of web design follows a different stereotype:

  1. Make a tree structure
  2. Photoshop the Home, Section, and Article pages
  3. Hack on WordPress or one of its cousins
  4. Fill in the content
  5. Complain that people are stupid, or evil, or both

Do web projects fail because everybody except us is stupid? Or evil? Or both? Is it because small agencies get small budgets and no time? Because established web designers lie a lot? Because while the layout is great, the content sucks? Because the content is great but the layout sucks?

Or is it because we have 22 drawers full of of comfortable tools, fantasies and excuses to avoid the pain of sitting down and thinking?

Quality

Life and work would be so easy if a lack of quality could be explained in a sentence, and fixed with a better technique. If a website (or any artifact) lacks quality, it is not just one aspect that needs improvement and then it’s all good. Quality is not just the method, just the form, or just the content. The lack of quality doesn’t cumulate in a spot, it is fundamental. Quality is what holds form and content together.

Quality — as in “fitness for purpose” — lives in the structure of a product. A lack of quality is a lack of structure, and a lack of structure is, ultimately, a lack of thought. One does not find a solid structure by following some simple method. We deepen the structure by deepening our thought on the product. Our role as designers is to put thought into things. And that’s why most websites, clients, and jobs suck, and will always suck. Everybody hates to think, because everybody hates to listen, everybody hates to reflect, and we all hate to use our imagination.

Structuring websites is painful because thinking is painful. It is less painful to just rely on a technique. It is less painful to blame the client, the method, or the organization. You can wail about this and make snarky comments as much as you want, but no technique or technology is going to solve a lack of thought. On the contrary! Adding stronger, faster, more technology is going to amplify our thoughtlessness. And that’s why the plastic soup of data we’re fouling our online oceans with is not making us any better at solving tangible problems.

Thought

We avoid the pain of thinking like a medical examination. We’d like to believe we’re too smart to think. Thinking is stressful. While stereotypes click together sweetly, thinking comes in bitter flavors. We recur to clichés rather than reflection, because they make us wise without listening, bright without reasoning, and smart without taking the risk of being imprecise, boring, annoying, wrong. And just like McFood they’re easily bought and quickly swallowed, zero intellectual calories. Just as instinctively as we avoid listening, reflecting, and using our imagination to achieve clarity in writing, we avoid thought when we design websites.

“Wait a minute! Listening is easy, reflection is a great occupation to be paid for, and imagining stuff seems like fun!”, I hear you say. Yes, just like writing seems, romantically, a great occupation, until you sit down and ask yourself: what do I have to say? Once you start seriously listening, reflecting, and trying to use your imagination, you are willingly sitting down for slow, repetitive self-torture:

Listening

Listening is a masochist endeavor. To do it right you have to put everything down. Not just your phone, even pen and paper. There is nothing to hold on to when you just listen. You have to use your full attention, registering everything that you see and hear. You have to slow down your self-perception and focus on the outside, on what you do not understand. Compared to how we usually operate, listening means focusing on pain, diving into boredom. In order to see the other in slow motion, you need to stop the camera of self-perception that makes you the star, and speed up the camera that records the outside.

Listening requires the patience to recognize your feelings in other people’s words, no matter how trivial, dark and empty their language may seem. It requires you to become someone else while you listen. The fog of boredom and emptiness when listening to people you don’t sympathize with can be a sign that they are boring, empty, or not making sense. It can also be a sign that you do not understand. Listening requires that you accept the nuisance of not understanding, of feeling deaf, blind, numb, and still pay attention. Listening is the first step of deep thought. It is painful to give yourself up, but it is highly rewarding. To fill the glass with fresh water, first empty it.

Reflection

Listening, we make ourselves empty and let an outer voice that may torture us with nonsense and banalities take over our mind. Thinking, we follow the same procedure with our inner voice. Thinking is similar to listening. The less we control the voice forcefully, the more it will reveal to us. And yet we have to keep it in check. To think clearly, we make this voice repeat the same annoyances over and over again, at the slowest possible pace. We reflect it upon itself. The first results of our mental milling are raw. We want to believe we intuitively understand things from the start, but this is laziness masquerading as self-flattery. Sharp thinking relies on the logical and linguistic skills, and the intuition that grows with the practicing of these skills. An experienced chess player will ultimately choose their moves relying on intuition. But to win a game, professional chess players need to think several moves ahead. This costs energy. In the 1984/85 World Championship between Kasparov and Karpov, Karpov lost 10kg over the course of 48 games. In extreme situations, grandmasters can think 10 full moves ahead. Most of us amateurs can barely manage four half moves.

A passionate thinker is a chess player that gets more focused the greater the complexity on the board. A thinker is a lunatic that continues to reflect until the inner voice says something familiar. Usually, what you find thinking hard is no different to what other people have said before, but in slightly different words. Thinking helps us to more deeply understand what we believed we understood — rarely do we find something truly fresh. It seems silly to spend so much time to achieve almost nothing. That is why people that avoid thinking often believe that it is, if not directly stupid, definitely not a smart pastime (compared to, say, making money).

Imagination

While very few people commit to improving their listening and reflection skills, even fewer have interest in using their imagination. Using our imagination is harder than we’ve been led to believe. The problem is not that it quickly “runs wild”, or that we have “too much imagination”. The problem is that our imagination is so crippled by the fear of making mistakes, it quickly runs after easy patterns, and jumps on stereotypes. Rarely do we give in to stereotypes as happily as when pushed to imagine different ways to see and do things, believing all the while that we’re super-original.

Using our imagination requires the vision to look into the dark, fully awake. It requires the patience to reflect on what we might feel, again and again, until we feel it more clearly. It requires resisting jumping onto the next big idea, the easy way out. It requires concentration, slowness, even madness to dig deeper and deeper, without knowing if you will find anything. It requires us to be relaxed enough to let association grow new ideas, yet master association so it doesn’t take over and deliver us to dreaming.

Using your imagination, as opposed to the common perception of it being an act of happy dreaming, is walking from dusk into absolute darkness. You have to be ready to stumble, fall, bump your head, and still get up, again and again. And the progress we make from using our imagination is so tiny that it seems hardly worth it. And there is no other way to improve thoughts and things. Innovation comes in nano-steps.

Conclusion

What happens when we create an interface: one mind builds a way for other minds to interact with a thing. To lay the foundation of human-machine interaction you need to put thought into things and that requires that you put things into thought. This is why most interfaces suck, and most interfaces will continue to suck. No model, method, or tool will change that. Thinking is painful.

And there is no best practice, no tip or technique to sort thoughts, to build knowledge systems, and to structure human interaction except for a curious, conscious, vivid mind, guided by a strong will, that resists the temptation to fall back onto fast-thought stereotypes. When building knowledge systems, avoiding thought is a common mistake, and it is programmed failure. Design has little to do with solving a Rubik’s Cube — we don’t work on predefined puzzles.

To move beyond the routines of stereotypical web design, you need to become adept in a wide array of tools and methods, and use the right one at the right time. The more experience you have, the better you will be in choosing your tools. And that includes the decision of which new tools, models and techniques you feel ready to learn. Newer is not better and more is not smarter. But whatever you do, no framework, technique or technology will lessen the pain of thought.

The essential tool with which to build things is your mind. Using and strengthening it hurts as much as using and strengthening other parts of your body. And as you progress, the stretching pain of improvement will stay. Listening costs nerves. Thinking is painful. Using your imagination is walking backwards into a dark and darker tunnel. The ease of following protocol comes with the disappointment of running in circles. The bittersweet pain of progress comes hand in hand with the heartache of making mistakes.

Building structure requires serious listening, serious reflection, and serious imagination. All this requires experience, and no matter how experienced you are, it costs you. We spend our time and nerves to save the user their time and nerves. Well-designed things give us the invaluable present of time. Well-designed products do not just save us time, they make us enjoy the time we spend with them. They make us feel that someone has been thinking about us, that a nice person took care of the little things for us. This is mainly why we perceive well-designed things as more beautiful the longer we use them, and the more used they become. A trait that websites lack completely. But that is another story…

]]>
http://ia.net/blog/putting-thought-into-things/feed/ 14
iA Writer Pro http://ia.net/blog/writer-pro/ http://ia.net/blog/writer-pro/#comments Fri, 20 Dec 2013 11:48:59 +0000 http://ia.net/?p=10607 After four years and over 1 Million downloads of iA Writer, we’ve introduced something new. iA Writer Pro is a writing suite that boldly goes where no other writing app has gone before.

The reception has been phenomenal. iA Writer Pro is dominating the App Store Rankings around the globe. In order to cope with the amount of questions, we’ve written about how and why Writer Pro works.

1. Workflow

1.1. How does it work?

Inspired by Hans Blumenberg’s mind-bending book “Sources, Streams, Icebergs” (Quellen, Ströme, Eisberge), we referred to the writing process through the metaphor of a river while designing Writer Pro. A river grows when multiple sources (Note) join into a stream (Write), which spreads into a delta (Edit), before flowing into the ocean (Read).

river1

We assumed that the kinds of documents and document states a writer works with could be categorized accordingly:

  • Sources (notes): notes, ideas, quotes, structural scribbles
  • Streams (drafts): first and revised drafts
  • Deltas (edits): edits, and final edits, and final final edits
  • Ocean (published): finished documents

While a river provides a powerful metaphor, in practice writing resists a strictly linear process. A single note doesn’t transform smoothly into a draft, and from draft to editing is more of a Tango than a March. The common process is blurry, dynamic, and in many ways circular.

river2

In earlier versions we attributed writing functions to writing states, making them modal. Note was focused on structure, Write had Focus Mode helping you to just write away, Edit had Syntax Control™ exclusively, Read had no functions at all. That was a mistake.

We discovered that this strict approach does not match the modus operandi of a writer. It becomes annoying when you have to switch modes to perform syntax functions. So we changed editing functions to work at all stages except for Read, where the file is locked. Now, Workflow states work as environments to focus on a specific task, and they’re integrated into Writer Pro for iPad and iPhone.

  1. Authors want to have more than one note document per project. They need to be able to add many note documents easily, independent from the draft document they will contribute to later. Some notes might turn into drafts, but most notes stay notes. iA Writer Pro’s “Note” is your Notebook.
  2. The move between Note and Write is rare and significant, but it has to be possible to promote a note to a draft and vice versa. Some have wanted Note to be sort of a back side of a draft in Write, but that would lead to all sorts of issues, like not being able to refer to several note documents associated with one draft (which should be an option in the future).
  3. The progression between Write and Edit, and from Edit to Read, is gradual, and for Write and Edit often cyclical. Write is your typewriter. Edit your scribbled-on printout. Read is your published article.
  4. The Read state is useful for both your own finished text, and longer sources. In some ways, Read does not mark the end of your personal writing process — it can work as a vessel for the end of someone else’s work. Read can be your file cabinet and your library.

1.2. How does the workflow function with different devices?

The typical use cases our beta testers had were as follows:

  1. Mostly, the iPhone was used for taking notes. Whenever you encounter anything of relevance to a current or potential writing project, whenever you encounter any text, idea, or concept that you want to keep, you add a note.
  2. In direct opposition to that popular “consumption device” claim, the iPad is a relentless drafting machine. If you think that typing on glass is painful, then try typing on a mechanical typewriter. The hard part of writing is not the typing speed, it is organizing your thoughts. While it is not fun to edit text on the iPad (at least for those of us with large hands), in return this pushes you to just write.
  3. Editing requires a lot of precision in handling text — it works better with point-and-click. While it’s possible to finish a long form text on a mobile device in Writer Pro, the ideal environment to edit is the computer. Editing functionality like Syntax Control will prove most useful on a Mac.

Add sources, citations, ideas, and sketches in Note, work on your drafts in Write, then switch between Write and Edit until the job is done. After that, move your document to Read.

iA Writer Pro works best if you sync your documents to all your devices over iCloud. And yes, since iOS 7.04 iCloud on Writer Pro has worked fantastically.

1.3. Why do you change font and color?

The font and color changes indicate at a glance what kind of a document you are working on. We took great care to choose the appropriate typeface for each category. (Warning: Effusive type geek alert!)

  1. We stayed true to our popular Nitti font for Write. Nitti is a custom monospaced font by Bold Monday. It has been a core component of iA Writer from the beginning. It is monospaced because writing a draft requires you to focus on the sentence you are working on. The font needs to have the right tempo for careful reading. Proportional fonts are made for fast reading and editing, but when writing a long-form text they lure you away from the caret to start editing before you can finish your thought. I could geek out on Nitti’s beautiful proportions, the high ascender, and the smallish caps it has, and why these atypical proportions excel for a monospaced writing typeface, but you’d be reading a novella.
  2. The choice for Note was a no-brainer — Bold Monday was working on a proportional version of Nitti. Why not a naive Comic Sans-style typeface for notes? Notes are your sources, and sources should be clean and pristine. We wanted a stellar typeface for notes, because “the beginning is a delicate phase”, and the more precious the source, the more promising the stream. “You want Comic Sans for your notes? No Writer Pro for you!”
  3. We decided to use one typeface for Edit/Read, and differentiate the two Workflow states in color and editability. Edit lets you see your text with the eyes of a reader. It makes sense to use the same typeface as in Read. With its generous x-height, Tiempos by Klim Type Foundry is a powerful reading typeface. It partners well with Nitti and Nitti Grotesk and it is strong enough to hold the visual balance. Yet it is ultra-delicate. A delight to read.

2. Syntax Control™

Chances are that once you see Syntax Control in action you’ll see the benefits immediately. When editing a text, writers subconsciously scan for bad signs. Theses signs form syntactic patterns:

  • Long sentences that ramble without a clear idea
  • Excessive or empty adjectives over-spicing the text
  • Unwanted repetition breaking the text’s flow
  • Lame verbs weakening the prose
  • Incorrect conjunctions leading to bad logic

Grammar and style rules do not improve text quality if you follow them blindly. Repetition is not evil by nature — unwanted repetition is. Long sentences work flawlessly when consciously crafted. Adjectives are efficient when chosen with care.

The longer you work on a text, the harder it is to find these signs. For example, using “Adjectives” under “Syntax” will reveal how many empty ones you overlooked. This might bore an absolute killer writer, of which, no doubt, there are many among you, but for the rest of us Syntax Control is a bonanza. Used after you thought your text was polished, most writers will find a mountain of mistakes and weaknesses. It changes the way you write, tightening up your prose. And if your first language is not English… Holy cannoli!

Syntax Control — distinguishing a specific aspect of the text to assist in editing — is a solid innovation, one we’ve been working on for more than four years. As with every serious design, once you have seen how it works and how effective it is, it seems obvious, but it was a long road to get there.

3. Will you abandon iA Writer? Where are my features?

Why the need for new apps? Doesn’t Writer Pro mean you’ll just abandon iA Writer? Why don’t you just add the iOS 7 keyboard to iA Writer for iPad and iPhone? Well, we found the changes iOS 7 required were deep. Writer Pro is a clean rewrite based on our four years of experience. At the same time, we released an update for iA Writer for iPad and iPhone on the same day.

Why does it take so long to satisfy user requests, and why do you do radical stuff first? We believe that leading with innovation beats competing on features. Writer Pro does what no other app does, it provides a unique user experience (“everything goes away but the writing experience”, as Stephen Fry said), and does so without settings. We’d like to keep it that way.

3.2. But iCloud sucks! Dropbox please!

iCloud has been a hell of a ride. We worked on it for a long time. It became stable in our latest iOS6 integration. Then came iOS7. With each update iCloud became more stable on iOS 7, and from iOS 7.04 we get better results than with iOS6. iCloud suffers a worse reputation than it deserves, yet it works incredibly well. Due to time constraints we were forced to go without Dropbox in Writer Pro for iPad and iPhone for 1.0. Dropbox integration is coming.

3.3. What’s next? When will you add my essential feature?

We have learned to keep our mouth shut about what we plan — while we would love to tell you about X, Y and Z, it would be… unwise. We have done big things with iA Writer, and this 1.0 release is a subset of what we have planned for iA Writer Pro. We can’t wait to show you.

]]>
http://ia.net/blog/writer-pro/feed/ 26
Logo, Bullshit & Co., Inc. http://ia.net/blog/logo-bullshit-co-inc/ http://ia.net/blog/logo-bullshit-co-inc/#comments Thu, 05 Sep 2013 13:33:04 +0000 http://ia.net/?p=10446 Everybody likes logos. Everybody wants their own logo. Everybody wants to make their own logo. Everybody has a computer and some fonts. Anybody can make a logo. What makes designers think they are so special?

The first Yahoo! logo, from 1995

Anybody can make a logo. No doubt. It’s not complicated. Just try a couple of fonts and colors, choose the one you like, then change the font a little so it becomes special. Make it look nice. Blog about it, showing those magic construction lines1. You can do it. All it needs is a little time, a computer, someone that knows how to use Illustrator, and taste, maybe. Everybody has taste, right? So let’s do it!

So thought Yahoo’s CEO Marissa Mayer, and she went and did it. How did it turn out?

The Weekend

For the last month Yahoo has showcased its logo in a different font each day. The motivation was unclear. Did they want feedback in the decision process, or was Yahoo just trying to get attention from the design community? The new logo Yahoo unveiled at the end of this was not better or worse than the previous variations, and it appears it had already been chosen before this began. After unveiling that empty secret, Marissa Mayer wrote a blog post2 about the process:

We hadn’t updated our logo in 18 years. Our brand, as represented by the logo, has been valued at as much as ~$10 billion dollars. So, while it was time for a change, it’s not something we could do lightly.

Whether Yahoo needs a change in brand identity is hardly something we can decide from outside, not knowing exactly what the overall brand strategy is. It seems legit, because currently the Yahoo brand feels dead. Yahoo is still a massive online property, but it is as boring as it is big. Changing brand identity when you change strategy makes sense. So, even though it’s misleading to claim that the Yahoo logo hasn’t changed in 18 years3, the time for a change is up to the CEO.

On a personal level, I love brands, logos, color, design, and, most of all, Adobe Illustrator. I think it’s one of the most incredible software packages ever made. I’m not a pro, but I know enough to be dangerous :)

There is nothing wrong with loving brands or branding as such (I do), logos in general (some do), colors (who doesn’t?) or a particular software program (okay, that’s a little weird). And it’s okay if you are not a pro at everything. But if, as the CEO, you work on a $10 Billion Dollar core brand identity, and you hack it out in a weekend, you are not being professional.

So, one weekend this summer, I rolled up my sleeves and dove into the trenches with our logo design team: Bob Stohrer, Marc DeBartolomeis, Russ Khaydarov, and our intern Max Ma. We spent the majority of Saturday and Sunday designing the logo from start to finish, and we had a ton of fun weighing every minute detail.

Let us assume that at Yahoo the logo design team (including the intern) is comprised of the best designers in the field. It is conceivable that, with some luck, this dream team can design a logo “from start to finish” over a weekend. It sure is fun “weighing every minute detail” with a team of outstanding professionals. And what is more efficient than working directly with the CEO on the brand identity? A dream setup. Also, it’s cheap. A weekend for a logo, instead of paying a branding agency millions and waiting months for something that can be done in a couple of days? That’s smart business!

Is it?

The Headache

Let’s assume that it is possible to pull all this off with a team of incredibly lucky geniuses. What do these geniuses really need to achieve in a few days that less talented professionals need months for? What is it that makes logo design so special, so expensive? The process. The consistency. The precision. That the logo works. That it has impact. That it represents well. Blablabla, I hear you say, it’s just a typeface and color. Anyone can do it, and a smart, talented designer can do it quickly.

A smart, talented designer like Paula Scher can sketch the logo of a big bank on a napkin during lunch4. But what follows after that sketch is months of putting thought into context. Logo design is not just coming up with a shape and calling it a day. You need to have a clear idea, to give it form, and to make it work with everything else. In other words, it’s hard. The logo is only one part of a 1,000 piece puzzle game, where the picture is constantly changing while you put it together. Pshaw! I hear you say. Just pick a font you like and fiddle with it until it feels right!

Redesigning a logo for a $10 Billion Dollar company that is in deep trouble is not a matter of talented designers and personal preferences for design. It is not about fiddling. Doing it in a weekend is simply unprofessional.

Let us give Mayer the benefit of the doubt. While the logo indeed looks like it was done in a day or two over beers and laughs, maybe that whole weekend thing was actually months of hard work, and she’s just saying it to impress us5. Let’s hope the “done in a weekend” bragging is just bullshit, and get back to the subject:

The Brand

Branding doesn’t start with the logo. It is not primarily a visual discipline. Your brand is what you stand for. Branding is more about content than shape. It is who you are, not how you look. The shape should represent your inside, your content. Your brand architecture is your information architecture.

The hard part of rebranding a giant like Yahoo is not how the logo looks. It doesn’t matter so much if some dislike it. A logo is not decorative, it works more like an icon. It needs to be clear. Brands create orientation. The most beautiful toilet sign is useless if men constantly walk into the ladies’ room.

The hard part is defining what your brand is and what it aims to become. Your brand strategy follows your brand ambition, and your visual identity mirrors your overall brand ambition. Identity is not just how you look, it is what you say, what you do, what you are. What is Yahoo? What is at Yahoo’s core? What does the company stand for? We don’t really know, but Mayer helps us out:

We knew we wanted a logo that reflected Yahoo – whimsical, yet sophisticated. Modern and fresh, with a nod to our history. Having a human touch, personal. Proud.

Is Yahoo “whimsical, yet sophisticated. Modern and fresh […] human, personal […] proud”? Currently, Yahoo is not associated with being whimsical or sophisticated, rather it is mostly boring and dull. It doesn’t portray modernity or freshness, it feels obsolete and dated. There is no humanity in the brand identity, it’s computed, impersonal, scattered. What Mayer means by “proud” is also quite unclear, unless she means the blind pride that comes from ownership of high traffic domains, which is, again, anything but whimsical.

The Bullshit

Maybe the Yahoo she sees in the logo is the Yahoo she wants to build. A bizarro Yahoo, the opposite of what it is, a Yahoo that we have yet to see. It is not impossible, but highly improbable. Maybe, again, it’s all just bullshit. She is not describing Yahoo, she is just describing what the logo should convey. It is more likely she’s reverse-engineering and rationalising the logo than describing the design brief. These random formal restrictions use the same language:

We didn’t want to have any straight lines in the logo. Straight lines don’t exist in the human form and are extremely rare in nature, so the human touch in the logo is that all the lines and forms all have at least a slight curve.

Artifacts are by definition not natural and they don’t need to look natural. But let’s not get sidetracked here. It’s bullshit.

We preferred letters that had thicker and thinner strokes – conveying the subjective and editorial nature of some of what we do.

Like a humanist sans serif? And is “subjective and editorial” what a humanist sans conveys? What does “subjective and editorial” actually mean? There is a contradiction there, no? Ah no, wait, it’s bullshit.

Serifs were a big part of our old logo. It felt wrong to give them up altogether so we went for a sans serif font with “scallops” on the ends of the letters.

Bullshit.

Our existing logo felt like the iconic Yahoo yodel. We wanted to preserve that and do something playful with the OO’s.

So she does not only want to be a designer, she also wants to be a sales person from a cheesy design agency.

We wanted there to be a mathematical consistency to the logo, really pulling it together into one coherent mark.

Mathematical consistency. Like in the kerning of the letters A H O O? Perfect geometry does not result in perfect design. On the contrary, “real visual rhythm is hurt by precision. This fact is where we get the saying in design: if it looks right, it is right.”6

Our last move was to tilt the exclamation point by 9 degrees, just to add a bit of whimsy.

But wait, it gets better:

Prior to the weekend, we had also polled our employees on the changes they wanted to see. Interestingly, 87% of our employees wanted some type of change in the logo (either iterative or radical). In terms of specific attributes, our employees had wanted:

  • sans serif
  • variable size letters
  • a variable baseline
  • a tilted exclamation point
  • and the majority of their favorite logos were uppercase.

While we hadn’t set out to explicitly fill each request, we met a lot of what the people who know us best felt suited us best.

Design by polling. Great idea! Next she should try the same with Yahoo’s server architecture. Ask everyone about the best server configuration and then put together a brief for the system administrators. Why not? We all use the web, and know how to load and save and stuff. Everybody is a designer, so if we ask n people, the quality of the logo increases by factor n. Right?

Color and texture were pretty easy. Our purple is Pantone Violet C – a pantone that needs no number and no introduction ;). For the texture, we came up with the nice idea of creating a chiseled triangular depth to the logo – this causes the letter Y to appear in the shading at the ends of each of the letters.

Piece of cake. Why lose your mind over color? We love all of the colors. Let’s just pick one with a nice code.

Over the subsequent weeks, we’ve worked on various applications and treatments of the logo (the favicon, app launchers, sub-brand lockups). It’s held up well. And, while moving forward we’re likely to make small iterative changes along the way rather than dramatic ones, we’re really happy with where we ended up. We hope you are too!

So how did it turn out? Typographically, the kerning and spacing alone are worth an extensive, geeky critique7, but I don’t work for a $10 Billion Dollar company for free. Before you tell me “but I like it!” and insist on a minute analysis of the technical quality of this logo, let me make my point.

The Hangover

This post is not about the technical quality of the logo. I am not writing about brand design, but about brand management. This is about a simple rule: Brand design follows brand management, not the other way around.

One could argue that we can’t say if this is bad brand management. Unless we know what the brand ambition, the brand architecture, and the brand strategy is, we ought to have no opinion. Maybe the logo does exactly what it is supposed to do. Because really, it doesn’t matter whether it looks pretty, or whether someone likes or dislikes the purple or the scallops. The Coca-Cola logo was not designed by a professional designer, it is typographically hideous, but that doesn’t matter. Brand identity is not about visual refinement or aesthetics. It can be purposely ugly, like the London Olympics logo. What is important is that it is done seriously.

Designing a $10 Billion Dollar company’s logo over a weekend, without considering the whole of the brand identity and what it needs to do… this is not serious.

Now, again, let’s assume the best case. Let’s say that all of this is just a marketing stunt, and while for unknown reasons the logo is technically not quite on par with the $10 Billion Dollar brand it represents, everything has been calculated and thought through. This is very unlikely, but let’s assume it anyway.

For a brand like Yahoo there is something more important than spacing, kerning, colors, serifs, or making designers angry at this point. No, it’s not getting attention. It’s gaining trust. Ironically, for that you need a reflective, clear, and consistent brand identity. A different logo powered by bullshit doesn’t convey identity and trustworthiness. It conveys desperation.

Footnotes

  1. You can post-hoc rationalize any logo with lines. Jessica Hische explains.
  2. Marissa Mayer on the process behind the logo redesign: Geeking Out on the Logo.
  3. “The original logo of Yahoo!, known as the ‘Jumping Y Guy,’ […] was designed by David Shen, the 17th employee at Yahoo!. Later, Shen partnered with an ad agency ‘Organic Online’ to design the logotype. Designer Kevin Farnham (CEO, Method) from Organic Studios leaded the project. They needed a horizontal logo as it took less space than the vertical jumping ‘Y’ guy. They finally settled on Able font, which they modified and made purple. The red logo has been used for several years but now Yahoo! plans to extend the purple logo to all its networks”. From Famous Brand Logo Designs and Designers.
  4. “How can a multi-billion dollar organization base their identity off of a second? Answer: ‘it’s a second done in 34 years’ says Paula Scher for her napkin sketch of the Citi logo. The questioning came when Paula Scher first introduced her initial sketch of the Citi logo on a napkin during a client meeting.” From Citi logo by Paula Scher. More on that in her must-see TED talk on Solemn vs Serious Design.
  5. Or maybe Marissa Mayer really is super-human: “I do marathon e-mail catch-up sessions, sometimes on a Saturday or Sunday. I’ll just sit down and do e-mail for ten to 14 hours straight […] In an average week I’m getting scheduled into about 70 meetings, probably ten or 11 hours a day.” — Marissa Mayer, “How I work”.
  6. Does the Apple logo really adhere to the golden ratio? No.
  7. Stephen Coles covers this in his Yahoo Logo (2013) article on Fonts In Use.

]]>
http://ia.net/blog/logo-bullshit-co-inc/feed/ 66
Learning to See http://ia.net/blog/learning-to-see/ http://ia.net/blog/learning-to-see/#comments Tue, 19 Mar 2013 17:44:43 +0000 http://informationarchitects.net/?p=9978 Learning to design is learning to see, an adventure that gets more and more captivating the further you go. A love letter 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:

An illustration with the numbers ‘12 13 14’ running left to right, with the letters ‘A’ and ‘C’ above and below the ‘13’. Due to the font, ‘13’ can also be read as ‘B’, and will be if you’re expecting letters. Depending on how you read the diagram, you will read the characters in the middle as “13” or “B”.

“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:

We may fail to notice printing/writing errors.

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 notice, but many still have a hard time. If you failed the above test, and now see what you previously didn’t, you will immediately nod in agreement to the following thought:

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

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 analyzing 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 are 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 than 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.”
— Kenn 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 aesthetics. 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 appearance, 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:

A graph with two axes, with ‘ugly’ to ‘pretty’ on the x-axis, and ‘broken’ to ‘works well’ on the y-axis

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.

The previous graph, with the terms ‘Beauty’, ‘Boldness’, ‘Trash’, and ‘Kitch’ applied to the quadrants (counter-clockwise from the top left quadrant)

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 (literally, “finger-tip-feeling”).

Jan Tschichold representing Fingerspitzengefühl 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 color, 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 of this. 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 are 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 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 workings show 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 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’ rules 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 mishmash 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 saying 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. 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”. In everyday 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 on the screen. But 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

And again, using “interface” in the sense of only what you see on the screen or the surface of a product is not bad or wrong, it’s just 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 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 definitions. What does this rhetoric aim at?

It targets only the bloated, overblown surface, ignoring the depth of an interface. What do these expressions try to say? They are trying to say the same thing as those who say “less is more”. However, if this translates to “hide how a product works”, or anything else that makes the product harder to use, the interface will become worse. On the other hand, less visual clutter does lead to a more efficient interface. Again, in Dieter Rams’ 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.

Discussing “more interface” or “less interface” out of context is prone to misunderstanding. While we have no right to tell people how to speak, as designers we have to communicate clearly. 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 learning to see. Naturally, 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, just as web designers don’t see radiographs as doctors do. Our experience sharpens our eyes to certain perceptions and shapes what we expect to see, just as what we expect to see shapes our experience. Our reality is perspectival. Although we don’t perceive and sense things that a more experienced practitioner can, we can learn, and it’s very exciting and rewarding to do so.

The difference between good and great design tends to happen in a sphere that only experienced designers can perceive clearly. Still, most people can feel the difference between good and bad design. As I mentioned above, very few people perceive the delicacies of great typography, and even fewer can set type, but most of us will feel that a well typeset book reads better. This seems 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 paradoxical 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 definition (a matter of taste) is incommensurable with the professional definition of design as a matter of functional beauty and care for detail. While everybody can sense the design quality of a product through use, no one has authority on matters of taste. Still, and to hammer it in, by learning to design you evolve an eye for design, as well as a more refined taste to discern subtle design details.

Now, if you are a designer and proud of your skills, 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 can’t be directly compared. Some have deeper imagination, are better with the purely functional aspects, have more talent in polishing details, have better 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 definition of “interface” in the sense of “computer graphics” with the more abstract and technical definition that involves how something works, including the physical interaction and the user’s perception. 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.

It’s 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 designing child locks. Unless your purpose is to make your UI inaccessible, 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 Magnetic Resonance Imaging machines.

After getting lost in the labyrinth of design and aesthetics, I think that I have found a way out that doesn’t oversimplify or fuel egos, but invites everyone to see more. I am pretty sure that there are shorter, easier ways, but I can’t see them… yet. Maybe it needs a non-designer’s perspective from outside to say it all in fewer words.

“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

If you scrolled down to find the article’s essence in a last nutshell paragraph: Designers are not superior creatures that can ignore listening to other, supposedly inferior beings. In contrary! Without critical feedback and the modesty to accept all opinions on our work as a perfectly valid, different view no matter who, how and what, we lose our freaky key ability, which is not just to see more, but to see more with one eye, and feel with the other.

So, yes, I am looking forward to hearing what you think.

]]>
http://ia.net/blog/learning-to-see/feed/ 87
Bringing Responsiveness to Apps http://ia.net/blog/bringing-responsiveness-the-app-world/ http://ia.net/blog/bringing-responsiveness-the-app-world/#comments Mon, 05 Nov 2012 14:12:51 +0000 http://informationarchitects.net/?p=9903 iA Writer for Mac is the first native text editor that uses a responsive design. Why did it take so long?

iA Writer with responsive design

The main request we’ve heard for iA Writer for Mac from customers is the ability to change font size. This would be a simple feature to add, but we just didn’t give in. Why?

Why so arrogant?

While some critiques suggested Writer’s typography was due to our aesthetic arrogance, this is not true. The reasons why Writer had only one typeface and font size were:

  1. One of the main distractions of other text editors is fumbling with fonts. Despite varying preferences and a legacy of over-small type from 20 years ago, finding the right typeface and text size is not a matter of taste.
  2. Smaller font sizes are good for reading and editing, but seeing the text up close helps you focus when you’re crafting your prose sentence by sentence.
  3. The font size we chose was not ideal. It was a compromise — a size that would deliver good results on most Mac Screens. We were always aware that on some older screens the font would seem rather big, while on newer screens it would seem a little too small for the best writing experience.

We knew there was room for improvement. We have spent a lot of time thinking about a solution that keeps Writer’s simplicity and still allows different font sizes. First we tried to find a technical approach to check resolution and pixel density, changing font sizes for different screens. But that solution required us to add separate reading and editing modes, and seemed a little too control freak-ish, even for us.

The solution: a responsive design

Inspired by our deep experience designing for the web, we’ve given Writer for Mac a responsive design, changing the font size based on window width. This maintains the text’s typographic proportions, zooming in and out without reflowing the text. I don’t know why it took us so long to find this obvious solution. However, given that no one else has done it, the simplicity of this solution is perhaps not as obvious as it seems in hindsight. With all the custom features built into Writer for Mac, like Focus Mode and Auto Markdown, technically it was not as easy as you’d expect. But we’ve taken the time to address these details, so that this new feature feels obvious and natural.

While we experimented with liquid resizing, we decided to go with a three-step adaptive layout. This is why:

How we write with Writer for Mac

We’ve been testing prototypes for months now, and this seemingly simple change has completely changed the way we write. Here is how we use the three font sizes:

  1. Big size for difficult writing: Seeing your sentence from close slows down your pace. This is particularly helpful if you have a tough subject to write about, that requires you to take one step at a time. Especially when paired with Focus Mode, this helps you write that difficult scientific paper, poem or philosophical text.
  2. Medium size for Writing and editing: This works well for quick, easy writing and editing.
  3. Small size for reading: Some writers like to use a small font size to write because it allows them to see the surrounding text. However for many people a small size reveals too much text. Seeing too much text can lead to fast typing, careless thinking, and the temptation to stop writing and start editing. Some texts (and some writers) will benefit from this, but we find the small size works best for moving text around, “big picture” edits and reading what you’ve written.

Another way to use the different font sizes is to order open documents by importance. Resize the window to the small size before putting it into the background, and make the text bigger for the window that you are actively working on. Use a medium size for secondary texts.

iA Writer HTML Preview Panel

Two more things…

While we think responsive design is the stand-out feature in this version, there are other exciting additions and improvements. Writer for Mac now has selection-sensitive word count, a more powerful find and replace and an HTML preview panel. The really good news is that, it’s a free update. If you don’t have it yet get your copy now, while it is on sale at half price.

]]>
http://ia.net/blog/bringing-responsiveness-the-app-world/feed/ 22
Mountain Lion’s New File System http://ia.net/blog/mountain-lions-new-file-system/ http://ia.net/blog/mountain-lions-new-file-system/#comments Wed, 25 Jul 2012 16:42:33 +0000 http://informationarchitects.net/?p=9724 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.

The beauty of search and sort

It is possible to fill books with how horrible iTunes is, but finding a song among 1’000’00 in there works incredibly well. Without folders. How come?

The iTunes music library was Apple’s first step into a new file system paradigm. And besides all the mistakes they made with iTunes later on, they solved the basic problem: How to organize thousands of files without folder system. The solution was search and sort.

To find one song among a million, all you do is type in either the band, the album or the song, and sort the list accordingly. It takes no more than a couple of seconds to find what you are looking for.

If you prefer to find your music throug the iTunes folders than through search and sort, then, of course, you are the file system king and you don’t need a better way to organize your files on a computer.

Seeing how well the file system worked, Apple decided to integrate the search and sort paradigm step by step into the core interaction of the finder. Search became the new finder.

Default folders help

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

OSX default folders

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:

OSX Mountain Lion 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.

iA Writer on iOS: File System

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, gives us peace of mind that the files are in the right place, and relieves us from our OCD compulsion to over-organize.

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.

iA-Writer for iPhone, iPad, and Mac

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.

Update: I hope that you realize that…

Mac OSX Lion still has the normal file browser. What happens with iCloud is a direction Apple OSX is heading into. But it’s not forced upon you:

“Use Mountain Lion and its built-in apps like TextEdit and Preview for a few hours and it is very clear that this is how Apple wants users to deal with documents and app content. It’s a radical change from the nearly 30-year-old file-system-centric approach to data management on the Mac. The old way: go to the Finder, find the file you want, and open it. The new way: go to the app and open the document from within the app. Conceptually it works just like iOS — your files aren’t in the file system, but rather “in” the app you used to create them. This is the future, but Apple isn’t forcing it upon us. The feature is prominent, yes, because Apple wants us to use it. But it is far from mandatory. Don’t want to use iCloud document storage? Then just keep on managing your files exactly as before. Apple’s not dragging us to the future; they’re enticing us to walk there on our own.” Daring Fireball

Some people mentioned that professionals need folders for client projects working in a team. I hope you don’t organize your team repository only on your own machine. Mountain Lion is not going to replace GitHub or whatever you use to organize your client projects (we use GitHub and Dropbox). iCloud is for personal use, it’s not a team work file system.

]]>
http://ia.net/blog/mountain-lions-new-file-system/feed/ 40
iA Writer Update: Mac, iPhone & iPad http://ia.net/blog/ia-writer-update-mac-iphone-ipad/ http://ia.net/blog/ia-writer-update-mac-iphone-ipad/#comments Mon, 23 Jul 2012 15:55:35 +0000 http://informationarchitects.net/?p=9695 We have just updated iA Writer for Mac, iPhone and iPad. We have been working hard to make them compatible with upcoming Mountain Lion and iCloud features. What’s new?

iA-Writer for iPhone, iPad, and Mac

Mac: New parser and window framework

As you probably know, the Mac version comes with a powerful text parser and window framework that allows us to use the unique combination of:

  • Auto Markdown with auto-indent
  • Dynamic title bar
  • Focus Mode
  • And our famous blue cursor

To implement the dynamic title bar, we had to use a custom window framework that came with some downsides for third party apps, multi-monitor setups, and older machines. For this version we’ve overhauled our text parser, and built a completely new window framework. It is flying fast, and should work seamlessly with third party apps and multiple monitors.

Mac: Document panel

iA Writer for Mac is the first writing app that fully supports Mountain Lion, including folders in iCloud. To make this possible, we put all our energy into making iA Writer 100% ready for Mountain Lion.

iA Writer File System on Mountain Lion

Making those iCloud folders work both on OS X and iOS was a major achievement: you can now write and organize all your texts with one application.

The only downside is that you will have to wait another couple of days for Mountain Lion to launch. (Note: On Lion and Snow Leopard you can only view iCloud folders and their contents, not create them.)

iOS: Folders everywhere!

iA Writer for iOS is a universal app, meaning you get both the iPad and the iPhone apps in one. Since Mountain Lion allows you to work with folders, we wanted to support iCloud folders on iOS too.

We implemented Apple’s standard behavior for creating folders on touch devices: simply drag a document and drop it on a second document, and they will automatically be put in a new folder.

iA Writer on iOS: File System

iOS: Responsive typography

As of our latest update, iA Writer for iOS comes with responsive typography. No matter whether you use an iPhone 3GS or a new iPad with a Retina display, the typeface will always look stunning.

What’s next?

We hope you like these changes. Our next update will concentrate on more visual changes. If you haven’t got our apps yet, now is a great time to buy them — both iA Writer for Mac ($4.99) and iOS ($0.99) are currently discounted, for a limited time!

]]>
http://ia.net/blog/ia-writer-update-mac-iphone-ipad/feed/ 7
Twitterror http://ia.net/blog/twitterror/ http://ia.net/blog/twitterror/#comments Thu, 14 Jun 2012 13:34:32 +0000 http://informationarchitects.net/?p=9590 any erroneous tweets, your erroneous tweets. The tweets that you misspelled or, worse, that you sent out spiked with false information or late night knee jerking randomness. What do you do when the retweets start and then people correct you, and then people react to the reactions even though you deleted it right away? ]]> 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:

strike through because of wrong Link

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 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):

Mark as Error

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 expressed some concerns over added complexity:

Josh Brewer and Doug Bowman react to the strike through idea

The most influential designer at Twitter didn’t like it expressed concern 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:

Dough Bowman and Mike Monteiro strike through their reaction to the strike through idea

I’m curious to hear what you think

]]>
http://ia.net/blog/twitterror/feed/ 51
NZZ Relaunch: An iA Checkup http://ia.net/blog/nzz-relaunch-a-quick-review/ http://ia.net/blog/nzz-relaunch-a-quick-review/#comments Fri, 08 Jun 2012 15:55:40 +0000 http://informationarchitects.net/?p=9516 The Swiss newspaper NZZ just launched its much anticipated redesign. The design was made by the German agency Meiré and Meiré that has also done the print design. Commenting on work from people in your own field is a delicate matter. Usually, we don’t publicly comment on work by other agencies in our field. But besides that ballsy print campaign today (they printed the front with ones and zeros), there is a lot to like about this redesign.

The following critique is not only the first public critique of a product that competes with some of our clients, it is the first quick review that we publish. We write a lot of those when we look at the site of a new client or when we assess competitive Web sites for our clients. If you work in the industry, it will give you a insight on how we look at things.

Our reviews are short, cold and to the point. We do not intend in any way to bash the design. NZZ is one of the most prestigious journalistic products in Switzerland, and everything they do is high class. Even though NZZ is not our client we all read and love that newspaper.

Concept

Business Model

NZZ has announced that they will introduce a pay wall. Looking at the Website it is not immediately clear what the concept of that paywall is (the official statement is that it will be a metered paywall), but there are a lot of sales points embedded into the design.

The discussion about paywalls is a subject of its own, but if indeed the paywall comes up, the communication about how it works needs to be streamlined and the sales points should be reduced (if possible funneled to one central sales point). There is a lot to say about the new single brand with a unified newsroom but this is a quick review…

Information Architecture

If you have ever worked on a news project, you will be pleased to see how simple the new information architecture of the new NZZ site is. As a design agency, you usually do not have too much influence on the structure. The editors fight it out among themselves and you can just try to avoid the worst.

You might criticize Meiré and Meiré for some things that seem to point to a lack of conteporary technical potential of Web design, but the Information Architecture is spot on.

The meta navigation on the top of the page is split into two strings. There are eight content categories:

  • Aktuell (News)
  • Meinung (Opinion)
  • Finanzen (Finance)
  • Wissen (Knowledge)
  • Lebensart (Lifestyle)
  • Video (Video)
  • Dossiers
  • Marktplätze (Buy and Sell)

The News category is divided into nine sections:

  • International
  • Schweiz (Switzerland)
  • Wirtschaft (Economy)
  • Zürich
  • Feuilleton (Arts)
  • Digital
  • Sport
  • Panorama

The news sections are straight forward and correspond to the mental model of the print reader. The eight main categories have one or two debatable notions (why is “Lifestyle” there?), but overall this is a job well done.

Lovely details like the context-related search field beneath articles made us smile.

Marketing

While the aggressive integration of social media buttons with a floating panel is a debatable move, NZZ now seems to have a strong and real presence in social media, they are relaxed and casual and seem to respond really quickly. NZZ is regarded as a serious, dry publication, but the slightly more casual Twitter policy is appropriate for the medium.

The ad campaign: NZZ’s front page was printed in binary code. This shows that they are serious about what they do. That the Zwinglian “Old Lady” agreed on such a bold move cannot be applauded enough. The only minor stain: the ad agency (“JvM”) had to leave its trace in the header, which weakens the bad ass impact a tiny little bit.

NZZ head binary

  • 01001110 01011010 01011010 translates as “NZZ”
  • 01001010 01010110 01001101 translates as “JvM”

NZZ article binary (sample)

  • 01000010 01100101 01110010 01101001 01100011 01101000 01110100 01100101 00100000 11111100 01100010 01100101 01110010 00100000 01101110 01100101 01110101 01100101 01110011 00100000 01001101 01100001 01110011 01110011 01100001 01101011 01100101 01110010 00100000 01101001 01101110 00100000 01010011 01111001 01110010 01101001 01100101 01101110 00001101 00001010 00001101 00001010 01010101 01101110 01101111 00101101 01000010 01100101 01101111 01100010 01100001 01100011 01101000 01110100 01100101 01110010 00100000 01110110 01101111 01101101 00100000 01010011 01100011 01101000 01100001 01110101 01110000 01101100 01100001 01110100 01111010 00100000 01100110 01100101 01110010 01101110 01100111 01100101 01101000 01100001 01101100 01110100 01100101 01101110 …translates as “Berichte über neues Massaker in Syrien” and “Uno-Beobachter vom Schauplatz ferngehalten”

Design

It is a bold move to get print and digital from the same hands. Print and Web seem similar yet they are completely different disciplines. Web design needs different engineering skills from print design. One can see both the benefit and the downside of a print designer taking matters in his own hands. And while it is not entirely fair to nail the deficiencies of the design to the fact that a print designer did it, it is also the risk you take when you work in another field.

The Good

On the positive side it is worth mentioning that the NZZ gives enough space to the masthead and doesn’t slavishly follow the above-the-fold/below-the-fold ideology. There is enough white space to make the page breathe. The Typography is systematic and on most monitors it is readable. There is advertisement but it doesn’t kill the page. The work of the picture editors is exemplary.

The negative aspects are longer but that’s also because it is always easier to point out negative aspects. Overall the new NZZ.ch is solid work. Okay, enough now with the excuses…

The Bad

The use of the real brand (NZZ instead of the obsolete NZZ Online) is the right move. That being said, all in all, the site doesn’t feel quite like NZZ just yet.

Interaction Design

On a PC, in general the interaction design is well crafted. Some downsizes though: The many flyouts in the header for promoting the various subscriptions break the decent appearance. Where the visual branding does a good job, the interaction branding leaves an experience somewhat of a mine field.

Some elements feel especially raw, like the “Lesertrend” box. Hovering to reveal additional information is not only unexpected, but slow in performance and partly breaking the design.

Advanced functions like bookmarking (“Merken”) don’t work properly (yet). If you try click on a star (which appears on mouse over), you won’t get any reaction, but the tool tip will change. On a second click nothing happens at all.

Information Design

The black bar navigation bar is a foreign body in the otherwise very reduced design; it splits the masthead from the body and creates trapped white space between the bar and the content section with the grey background.

The fade on the top is what Swiss designers call “schwurbel” or “gurk.” Warning: “gurk” doesn’t mean the same thing in English! Don’t even…

The grey background feels a little too dark, which makes the page look a little grim. The whitish background on some of the right column boxes break with the minimal approach of the main column that only uses horizontal lines.

The vertical rhythm needs optimization. Compared to the beta site is already substantially better (less holes), but overall it still feels somewhat random after two or three scrolls.

The article pages are readable but the overlong side bar kills the layout on pages with short articles.

Typography

In order to create a tighter integration with the print edition an obvious measure would have been to adapt the print typography. There might have been some concerns about performance, but technology is advanced enough to use a digitized version of the typeface used in print.

The current typographic definition has too many elements that resemble other competing newspapers that have been designed years ago under different technical conditions. This is a shame if you look at the treasure chest of ideas and elements that NZZ’s print design offers.

Side note: With new screens conquering the market the 15px body text will soon be too small.

Identity

The aggressive integration of Social Media Buttons on a high end journalistic product feels cheap and pays more into the social networks than into the brand. Alternatively, the curated integration of the best social Media comments into the article would add value and credibility to the brand.

Technology

If you are visiting nzz.ch today, you will likely encounter some issues, as usual in recently launched websites. However, there are a couple of problems that are obvious:

  1. The first time the page renders, some elements are out of place (such as, for example, the tabbed articles being rendered on top of the main menu). Some seconds later, the page seems to re-render and all the elements go into the right place;
  2. The social buttons seem to stutter as we scroll, being extremely distracting.

Despite these problems, there is something that is important to mention: the page loads blazing fast. No matter how good your IA and surface design is, a slow page sends those efforts to the toilet. NZZ got it right.

We noticed that although NZZ advertises that this website adapts to the device you’re visiting with, their adapting mechanism is not active yet. At the time of writing, both a smartphone and the iPad load the desktop version of the website, although they clearly have a mobile version. Despite this malfunction, the strategy NZZ adopted is clear: the mobile version is served separately, rather than having one responsive version.

Accessibility

The team behind nzz.ch took accessibility seriously. Looking into the code, one of the first elements is a (visually) hidden list of links. This list can be read by screen readers and allows visually impaired people to jump directly to a specific area before reading anything else. If this was not the case, a visually impaired person would have to skip 28 (!) links until he reached the actual content. This and other details make for a nice experience for a target group that is, more times than it should be, an afterthought.

Conclusion

The new information architecture with its reduced and clear structure is without any doubt one of the highlights of this redesign. The paywall is not activated yet and we don’t know enough details to make a substantial statement about the overall concept.

Using the mother brand in a more spacious masthead, breaking with the above-the-fold ideology are welcome design moves, but the redesign falls flat on the unused typographic potential that the print edition offers. The design has failed to translate the world class typography of the print product into digital. While even one year ago this would have been an understandable omission, today it is not anymore. The information design needs a lot of work to find the right density and clarity.

The CMS has some major relaunch problems that are apparent but that we cannot judge from outside. Hopefully these hiccups will disappear in the next few days. The frontend code is well executed, and the minor flaws it has can be fixed easily.

]]>
http://ia.net/blog/nzz-relaunch-a-quick-review/feed/ 2