The Vostok blog

I think the human body and buildings have a lot in common. Buildings are as weak as they are heavy, and one tool in our armament is a process known as genchiku, which we can use to decrease the overall weight of a building – you could think of it as a process that gets rid of unwanted flab and beefs up muscle where it’s needed. However, I think that some people don’t consider balance in quite the same way – simply putting more on top doesn’t necessarily make a structure stronger.

Shigeru Aoki at The earthquake from an architect’s perspective

When recalling the sources that taught me and influenced me as an interaction designer many things come to mind: presentations, movies, observation, experience… and obviously books. I’ve been asked many times about my “recommended books for someone who’s starting in the field” and I never know where to start. The truth is that most of the readings I’d recommend are not *on interaction design* but rather on surrounding disciplines. Here are the 25 (now updated to 26) that most influenced me:

The World as Design
Otl Aicher

Honesty and design. It’s a book about integrity, about what decisions should be made, when and why. My favorite book about design, it has really changed the way I see my profession.

The book is a series of essays written by Aicher relating to all sorts of things; from how the Eameses designed chairs to the morals behind choosing one color over another to paint a house façade. This book made me understand that there is a reason for everything and every design decision should have a reasoning behind it.

101 Things I Learned in Architecture School
Matthew Frederick

It’s a tiny book about the basics of architecture and therefore, about the basics of the relationship between people and space. It’s very interesting because it gives you good advice for whenever you need to think about information architecture in terms of environments, just as an urbanist would. Not what happens inside a page but how to receive a user, how to guide him, what should the paths look like. When to make “open spaces” and when to make aisles, etc.

Designing for People
Henry Dreyfuss

Dreyfuss designed many iconic objects we still use nowadays. He was also the first one to apply human factors to his designs. He stated that the characteristics of the human body should be taken into account when desiging something for human use. The idea was revolutionary and completely against the design of his time (the 50′s), which was much more worried about forms that would sell well.

On Designing for People he exposes his ideas along with some thoughts on how to run a studio, its processes and methodologies. A classic.

Universal Principles of Design
William Lidwell

A great compliation on design principles (behavioral, mostly). Each principle is carefully explained; on one side of the page with text, on the other with illustrations or diagrams. Perfect to learn the basics and see them in action; it conveys the message clearly using excellent examples.

It touches on many subjects, among them: how appearance influences people, how many options are optimal, how to order stuff… It’s a must for anybody who wants to understand how users make decisions.

The Psychology of Everyday Things
Donald Norman

A great introduction to cognitive psychology applied to design. Very good at helping understand how we relate to the objects that surround us and the things that go on in our minds. Norman introduces the concept of affordance, among many others, one of the few things I try to always keep in mind when designing.

The Industrial Design Reader
Carma Gorman

A compilation of readings (articles, essays, excerpts…) on design, architecture and the like. I’d say 80% is still applicable to interaction design no matter the year the texts were written (some are from 19th century and very valid).

It’s a good book to help remind us that, even before our times, great minds put a lot of time and effort into thinking how things should be made. It helps me keep focus and give foundations to what I do.

The Invisible Computer
Donald Norman

This book by Norman has a few extremely good chapters on how design (as user experience), technology and marketing interrelate in a project and the role each one should play. It provides you with (and helps you understand) the whole picture; how technological products are made and why most of the time we fail.

Information Architects
Richard Saul Wurman

Wurman coined the term “information architecture” and uses it in a slightly different way to what we are used to. We think of it as structures of webpages, he thought of it as what we now call “information design”. The book is a great compilation of examples by excellent designers on how to shape information in a way that conveys the message more efficiently (most of the times that means visually).

Ambient Findability
Peter Morville

Morville, one of the founding fathers of information architecture, wrote this excellent book about how information acquires new dimensions when leaving the realm of the traditional website. He talks about how GPS, RFID, sensors and many other technologies are creating new forms of data that make information more meaningful. To me, this book was a great introduction to the value of metadata, the internet of things and geoeverything.

Being Digital
Nicholas Negroponte

It’s the bible of the digital realm, a book that sheds light on the consequences of converting everything to ones and zeroes. Most of what he says on the book is stuff almost everyone knows now but back then: it was shocking. It should be a mandatory read for some policy makers even today.

Inside Steve’s Brain
Leander Kahney

Learn marketing, design, communication and product strategy from Steve Jobs. Who else could teach it better? The book is half biography half chronicle about Jobs and Apple. It goes deep into many issues in a very entertaining style. Some chapters are worth their weight in caviar. The book was last year’s Vostok present to our clients.

Designing Pleasurable Products
Patrick Jordan

Forget Donald Norman’s “Emotional Design”. If you want to know about emotional design then get this book. It’s entertaining and rigorous and it has everything you need to know about how emotions play a role in the way we choose and use products.

In Praise of Shadows
Junichiro Tanizaki

It’s japanese aesthetics in prose poetry. It speaks about organic materials, objects that age gracefully and the beauty of imperfection. It describes the secret pleasure of wabi-sabi.

Wabi-Sabi: for Artists, Designers, Poets & Philosophers
Leonard Koren

A great essay on wabi-sabi, that side of Japanese aesthetics that looks into the graceful decadence of materials, seductive imperfection, shadows, organic materials, wood, ceramics and beautiful rusty colors. To me, modernism is great but sometimes you just need a break, a good break, not one of those breaks that postmo hipster boys have in store.

Braun: 50 Jahre Produktinnovationen
Bernd Polster

Braun is the Apple of the 20th century. This book is a catalog of all the stuff produced by Braun during the past 50 years. You can see the influence of the Ulm School of Design, Dieter Rams, Hans Gugelot, Otl Aicher… And also learn through colorful examples how Oral-B ruined the best design driven company that’s ever existed. The book was a gift from my students some years ago and I go back to it when I need inspiration for use of color, layout, etc. Full disclosure: Dieter Rams is one of my prophets.

Digital Diagrams
Trevor Bounford

I lend this book to whoever asks me to recommend a book on information design that’s not just theory. Edward Tufte is fine but it may leave you clueless about how to start. This book will give you many examples and even Illustrator tips on how to visually display data. A great book to have around.

The Kitchen is for Cooking
Otl Aicher

Aicher had to redesign a kitchen. In the process he learnt so much about how everything works inside, an entire microuniverse, that he decided to write a book about all his findings. I consider it a great example on how to understand contexts of use, which are often wider and more complex than expected.

Typography
Otl Aicher

There are many books on typography and I confess that I’ve only read a few but, boy is this one good. It makes you feel a complete ingnorant. What’s wonderful about is that it makes you understand how people read so you can make design decisions on how to display your type. You have to read a good book on typography before you design anything intended to be read and this is probably one of the top books to aide you.

From Bauhaus to Our House
Tom Wolfe

Good modernists sometimes get so fed up with ourselves that we need a break. Wolfe’s book is a satirical essay on the modernist madness and all those “white shoe boxes” derived from the first Bauhaus buildings. Is there a modernist aesthetic and you just used it without being it a derivation of function? Perhaps you are modernist-sick. Go get the book.

Conversations with Jean Prouvé
Armelle Lavalou

A tiny but marvelous book on how an industrial designer thinks and works. In this book Prouvé is extremely honest and modest, a quality difficult to find in today’s designers. He was also a real innovator in materials, form and structure. The way the book is written is like having the master talking about himself in front of you.

Sistemas de Signos en la Comunicación Visual / Zeichensysteme Der Visuellen Kommunikation: Handbuch Fur Designer, Architekten, Planer, Organisatoren
Martin Krampen and Otl Aicher

The book is worth its price just for one chapter, the one where Aicher explains the difference between analytical and synthetic information. It’s the first thing I teach to my students every year. When you know that, you know 30% of everything a designer that works with information needs.

The Tipping Point
Malcolm Gladwell

It’s a great collection of stories about how people behave unexpectedly in certain situations. Gladwell is very good at pop psychology facts that sometimes are good for understanding user patterns or for provoking them.

Designing Web Usability
Jakob Nielsen

An introductory classic. One of the books that started it all. Nielsen is not the guru he used to be but he deserves credit for this great compendium of applied human-computer interaction that kicked our profession in its initial days. The book was also great for convincing clients and “evangelizing”, if you ever want to use that word.

Don’t Make Me Think! A Common Sense Approach to Web Usability
Steve Krugg

Krugg’s book is also an introductory classic; if Nielsen’s was about principles this one is about techniques. How to run a usability test without a white coat, how to report usability issues effectively, etc. Many examples and cartoons, easy to read (it took me less than 2 hours!). Very good for superbeginners who need to do usability tasks at their products. Also very good for those who’s job is not on the usability/design trench but need notions.

Le Corbusier Talks with Students
Le Corbusier

Designers usually pretend to know a lot about Le Corbusier but they usually know little more than a few modern-design villas with beautiful horizontal shapes without understanding the reasons behind such decisions on form. This book summarizes many of his thoughts on design and architecture. Since the book is a transcript from his talks, it feels very natural and close. You end up learning a few things about systems and contexts from a discipline that has many things in common with interaction design.

UPDATE (31 Jan, 2011)

The Fountainhead
Ayn Rand

Yes, a novel. Setting aside Rand’s political views, The Fountainhead is clearly a good story about honesty and values in creative work. The book is about an architect who fights the world to stay true to his beliefs on what a building should be. There is much about his views on architecture that matches what I consider good design. Also, all the character’s struggle to stay true to himself is a great teaching in a field where clients, peers and fashions have so much influence.

Read it when you feel you are senior enough, not too soon. And stay away from work when reading it. A summer vacation would be ideal.

Javier Cañada leads Vostok, a design and strategy studio that creates smart interactive products. You can follow him on twitter @javiercanada or at Vostok’s blog.

We believe the best way to express our views on design is to let our clients speak for themselves:

We’d like to thank our clients and Riot Cinema for this video.

Bruno Teixidor brought me a wall map of the Moscow’s metro network some time ago. I have it hanging on a wall to remind me this exact quote:

The structure of a system reflects the structure of the organization that built it.

Richard Fairley

Now check the metro map:

How much information about the city and the country who build it, right? You can tell it has a strong, centralized and authoritarian political power just by looking at how the lines converge at the very center. Their concept of traffic transversality isn’t lines that doesn’t cross the center but a circular line that reinforces this idea.

But is the metro network what shapes that reality or was it there before? Let’s check a regular roadmap of the city:

Very much the same: strongly centralized, everything that needs to go from A to B needs to pass through the center first. Everyone, every matter.

If you check New York or Barcelona, for instance, you’ll se something different. Everything seems more rational and decentralized. Both cities have a strong grid shape reflecting that interactions between people (being social or business) are more important than political power.

The funny thing about this quote is that it was said regarding software and programming, not urbanism. Do you thing it applies to the design of interactive systems as well? Do we end up shaping structures that reflect the organisation behind. Is that good or bad? Are there powerful examples?

Mark Adams, managing director of Vitsoe, states it very clear when talking about their furniture. They make furniture that’s timeless because they don’t believe in recycling, they believe in designing adaptive systems that can be rearranged over time to suit different needs and scenarios.

the concept is to reuse your furniture…we see recycling as a defeat

Modularity and no-aesthetics as design is my big obsession when designing interactive products (mostly websites). It’s not about designing a good website, it’s about designing a system of elements that can be arranged in certain ways and that can fulfill the company needs over time and for different reasons. If done well, when there is a need for some module that’s not designed, its shape, look and behavior comes out of intuition, it’s evident. My goal is to leave something in the hands of my client that will be there in 4 years, probably rearranged, perhaps with more pieces but within the same system.

When I fist read the Ten Principles for Good Design (that was back in 2004) I was shocked. It was like a revelation that made reconsider all I knew about information architecture and HCI. Here are the ones that hit me harder:

4. Good Design helps a product be understood
6. Good Design is honest
7. Good Design is durable
10. Good Design is as little design as possible

In Dieter Rams’ words: less but better.

Los Angeles Times reports that Rupert Murdoch plans on launching a newspaper for the iPad and the like only. Freshly designed. Both content and form from scratch.

I’d sell my soul to Lucifer to be on that team.

In some of my recent talks I’ve mentioned the story behind USA Today. I think it’s one of the best examples to learn about information consumption and adaptation.

USA Today launched almost 30 years ago built on a premise: that most Americans didn’t read, that they mostly got news from television (color television) and that they spent a lot of time in front of the tube.

Al Neuharth, USA Today’s founder, understood the new context and decided to design a newspaper from scratch, one based on these premises where:

• there was color all over (for pictures, for sections) just like on TV
• photos drove the stories and not the opposite
• articles were short
• news didn’t need a follow-up, there was no incremental coverage

This was the result, the fresh design of the USA Today in 1982:

And here is what the New York Times looked like in the early 80′s (see how big the change was?):

In short, USA Today wasn’t targeted to newspaper readers but to TV watchers. The critics called it the McPaper, the junk news, the fast food of information. But despite that they ended up being the most read paper in the USA. They understood their new readers and the new context. They won.

And that is why most old newspapers redesign for the internet or for the ipad and they fail miserably. Why? They don’t pay attention to new users and their new contexts of use.

The difference between product design and architecture is in human scale and that has to do with political power.

There is something subduing in the creation of structures we humans inhabit or use in any way, something about those structures condioning our moves and behaviors. Architecture and (even more) urbanism have that powerful quality.

Architects project their structures to influence in the way we feel and behave. They manage flows of people, they regulate our exposition to daylight to condition our feelings or they make us feel free and empowered through space and height. They make structures that manipulate us.

Architecture and urbanism could be the use of power though means of space. That could explain why politicians have always flirted with architecture, and dictators love to have scale models of their dreamt cities.

Designers instead, have never been that interesting for the powerful (with some interesting exceptions). Their work is usually not that influencing. Designers make things that tend to be smaller than humans. Their structures may condition but don’t force us to do anything. It’s not the space which conditions the individual but the individual who manipulates the object.

I made a personal update to the Schematic Chart of Ideological and Design Changes from the 60s to the 80s by Massimo Vignelli. I decided to add a column named “internet times” suggesting that the internet is bringing a set of values to the way we understand creation, specifically designing and more specifically designing for the internet.

Mine is a personal interpretation of what that fourth column should be, if there should be a fourth column. I encourage you to make your interpretation too, filling the blanks with what you consider more appropiate. I’m sure there will be some common points.

Here is the original Schematic Chart of Ideological and Design Changes from the 60s to the 80s by Vignelli:

And here’s my interpretation. It’s a Fireworks PNG file for your editing convenience:

Now come and do yours, or at least help me out with rows 1 and 3.

I deeply believe that honesty and beauty are two of the most important values in design. We put as much as we could in the redesign of the Search Results page of Minube for flights and hotels and the result has been good. Here it is:

Our assumptions

We (both minube and us) put extreme attention to what information mattered the most and made it stand above the secondary data. These were our main assumptions:

• Price matters most than company.
• Price (usually) matters most than hours.
• There is the cheapest and then the rest.
• Airlines are better recognized by their logos/colors than by their names.
• Some things don’t need to be a in a filter: price ranges, airline, websites searched, etc.
• Those with flexible dates need a different way to look at it.
• It’s easier to redo the search than to refine through ajax.
• Flight and flight back are consecutive, so let’s show them consecutive.
• It’s likely that your choice will be among the first 10 results (although you may want to see more).
• White space helps people identify choices, it makes everything clearer.
• Boxes help you separate between different types of content.
• It’s better to show just the essential data.

Old and new versions side to side

Minube is always quesioning how they do things and how these things can be improved. I like to say that at Vostok we are not good at innovating but at improving. The old version was good. But good as it was it could be, and should be improved. Here you have both versions side to side:

Facts prove it

We know the new one is more beautiful and more honest. Facts prove it. Raúl (Minube’s CEO) told me about the A/B Test results and the main indicators doubled in the new one. You should check Raúl’s post in Spanish about it.

We both believe

It’s a great thing we have clients who share our believes. Working with minube is always of great pleasure. We have a relationship based on trust and shared values. They also think that beauty and honesty are two of most important principles of good design.

These past few days have been rather depressing. We feel this way for two reasons:

1. We live in an online world that needs a plug-in like Readability to make it bearable.
2. A divisive but exciting conversation thread powered by iA Oliver Reichenstein‘s image titled “3-5 words per line, just to make it look like paper? No NYT, this is NOT how it’s done”. Well done!

Readability (the service)

Readability, which you probably already know, is a free button for your Web browser’s toolbar that eliminates everything from the Web page you’re reading except the text and photos. You can get the button at the arc90 website. The idea is great. Nobody has said it better than NYT’s David Pogue:

Readability makes the world online a calmer, cleaner, more beautiful place.

But shouldn’t this make us happy? Well, let’s just say that we couldn’t agree more with yewknee‘s view on Ryan Catbird’s tumblr:

Very cool, excellent product, but I can’t help but think of how fucked up it is that this thing even needs to exist. Because here’s a novel idea: Hey Publishers: How about you just stop putting shit all over every single pixel on the screen?

Read the entire comment here.

Here’s a peek of how Readability works using an article from the NYT  Young Americans Embrace Rigors of the Bolshoi (and this newspaper is far from being the most cluttered one out there):

Before Readability

After Readability

So what has Readability done?

• kept the photo that illustrated the article
• got rid of all the mess surrounding it
• changed column width
• increased interspacing

So simple! And now you can even change your settings so that you can see links as footnotes. Here’s a demo in video:

All in all the design blogosphere has been kind of hectic recently. Perhaps the iPad has something to do with this. Javier Cañada (@javiercanada) tweeted a few days ago:

iPad means extreme segregation between good and bad designers. Those who don’t embrace true simplicity will fail miserably.

A great conversation on information design…

… taking place on the less expected place: flickr. This interesting discussion on information design and presenting online content had input from Khoi Vinh, Lukas Mathis, Wired Magazine, Adobe and Hoefler+Frere-Jones where the following topics were discussed:

• legibility Vs. ‘a look’
• replicating print
• scrolling Vs. screen to screen
• eye-scanning
• columns

iA has a great image in their Wired app article showing what a mess columns can actually be (look at all the zig-zagging going on):

Even though we’ve grown accustomed to reading this way, it doesn’t mean it’s the best way. It’d be kind of sad to realize that we arrived to the best solution back in the 1600′s.

A few days ago we read this tweet from @Gatada :

If you combine Readability with Instapaper you’re all set; enjoyable reading by your desk and on the move! + Don’t forget Dropbox for files.

He’s right. But we hate to conform.

Here’s Vostok’s take on the matter: a list of things that should ALWAYS be taken into account when thinking about online design:

are you mimicking print? why? if nostalgia is the answer: forget it.

are you drawing a clear distinction between ads and content?

are you taking care of line spacing and line length? what works best for what medium?

are you using columns? why? and how?

are you understanding and respecting the medium you are designing for? are you making the most out of its possibilities?

are you trying to fit the same amount of content of a 22-inch broadsheet into a 9-inch iPad screen?

Yeah, these are the ones for us. Are there any others we’ve missed out?