We were hired by Movistar, a high-powered Spanish telecom with important international presence, to envision the best solution for what their online video and television service should be like. We have spent the last few months designing it and collaborating with Movistar’s UX team. And we are incredibly proud of the results.

It’s the product of months of work but, most importantly, it’s a representation of Vostok’s design principles: it’s simple, it’s elegant, it’s honest.

The premise: An online service for film, TV series and linear TV that could be accessed anytime, anywhere. For clients and non-clients. Our solution: a native grid system that responds to a set pattern of interactions that work across all platforms (PC, TV and mobile phones).

To share our thought process we have uploaded a slideshow that puts together the design premises we kicked off with. And a webpage that shows a selection of the design aspects in the final product we find most interesting.

Last, but not least we release a video made in collaboration with Riot Cinema that is the perfect accompaniment to this product. Don’t forget to check it out :)

Curious to know what you think.

The Madrid electoral board is pushing to have the protest banned before the elections. To defy the ban people must get together and sign a petition. And they are. From all over the world. And a map is registering it all live.

There are only two things I have to say:

• You would never ever find this kind of map coming from traditional spanish mainstream media. And that says something.
• It’s a great example of a simple but powerful mesh between mapping, information design and political awareness.

Kudos to Vizzuality and Actuable for documenting and sharing this real time. Not only for Spain but for the world.

The universal language of love? How about the universal language of pictograms?

Javier Cañada talked about the ISOTYPE (International System of Typographic Picture Education) project in 2002. It’s hightime we made reference to it again. The project was created by Otto Neurath and designed by Gerd Arntz and is believed to be the base upon which the AIGA was built on.

Neurath recognised something crucial to the theory of communication, through creating icons of objectivity. Since a considerable part of the information to which an individual is exposed is optically processed, as Gestalt Theory and perceptual psychology were able to demonstrate at the end of the 19th century, it can be conclusive that information must be visualised or data must be transformed into pictures in order to be perceived at all.

Frank Hartmann

A new book on Arntz was edited last year by designers Ed Annink and Max Bruinsma. If you’re lucky enough to be in London before March, don’t forget to check out the exhibition on ISOTYPE at the Victoria & Albert Museum in London.

If you want to read more, Neurath’s book International Picture Language is a good start.

UPDATE (12 Feb, 2011)
Katie Treggiden, from ‘Confessions of a design geek’, has a great account of the V&A exhibit, with a bit more insight about the history of the ISOTYPE project and pictures of the exhibition.

If you want a copy, here’s the PDF.

In short:

In 1998, former Apple, former Microsoft, now journalist and consultant Linda Stone, coined the term Continuous Partial Attention. This should be the fundamental concept behind online newspaper design, what sets the difference between design that is modern and design that is expired.

Before the immediacy of the web, before feed readers, Facebook and Twitter, it took us 20 to 40 minutes to read a newspaper everyday. Today, we no longer read information in blocks, we scan for it or come by it in snippets. One article here, another one there. By the end of the day we have tailored our own newspaper with information gathered from all sorts of sources: blogs, newspapers, magazines. But it didn’t take us 40 minutes, it took us the entire day. I think there’s something there going on for newspapers if only they had the courage to move forward and forget about their print inheritance.

How can newspapers embrace this? By providing us with a homepage that:

• is easy to read, that is not cluttered or where I have to zig zag between columns.
• is continuously updated, and where updates are visible.
• doesn’t tell me what’s the most important news of the day but gives me the latest and allows me to set my own hierarchy.
• is designed to make information king (not the ads).
• visual, where without having to read much, photos can aid me to know what the story is about.
• can work in my iPad, where I don’t have to zoom in hundreds of times to reach a link.
• can inform me both superficially (online) and in-depth (to read later in my iPad).
• doesn’t organize the news into absurd sections (culture, politics, sports), but classifies it into easy to identify/searchable tags.

We’ll keep touching on this subject in the future. In the meantime, let us know if you think we have left anything out in the comments.

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.

It’s meant for you to focus on what’s important: your writing. No distractions.

This dreamy video tutorial sets the mood to help you see it in action:

Other convenient functions on Writer: easy read, sync with dropbox, email content.

Click here for high-res photo

Click here for high-res photo

Concepts any John Doe needs to convey: date, time, water, food, lodging.

Concepts the US Army needs to convey: means of identification, ambush, booby traps, hideouts, weapons, destruction, pullover, surrender + date, time, water, food, lodging.

It exemplifies analytic and synthetic thinking at its best, no?

This guide was made by Kwikpoint.  A visual translator company that works with designers, linguists and diplomats to replace “pounds-or kilos-of language dictionaries and phrase books” with images. Javier Cañada bought this sample in 2004, at the height of  the Iraq War.

The great thing about sites like Verkami is that while connecting creators and audiences, they take down the middleman, empower artists and turn into wonderful spaces where to spot truly smart and creative initiatives.

Some of the design elements we like the most

A detail from the creator’s admin page (project is still up and running):

and when the project has finally reached it’s original funding goal:

For those interested in the development, Linking Paths added the programming muscle.

Take a sec, check it out. No excuses to bum around: start a project or become a patron and make great projects come true!

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?

In his own words:

The music amplifies the pictures, and the pictures amplify and clarify the music. It’s a way to get a really large amount of information in pictures and music to people in a way that is very intuitive and easy to absorb.

-Chris Hondros

You can read more about it in the NYT’s Lens blog.

1. Headlines are turned into photographs making the most out of the visuality of the medium. Kind of like what the iPad feed reader Pulse did and what we did with filmin’s catalogue.
2. The images are followed by a constant stream of news organized by time, with the newest item always at the top. Pretty much like Twitter (or Planetaki for that matter).

Online newspapers = columns, too much information clustered into categories, no apparent distinction between important and less important info, Ads. (FAIL)

Why would anyone think a mashup of these two would be a good idea? Giving up all the good stuff and taking on all the bad. Well, we have found out through bitelia that paper.li has done it. In a nutshell: paper.li organizes links shared on Twitter into an easy to read newspaper-style format.

Sounds like a good idea? You bet! (if you like your twitter feed full of ads that is).

bitelia’s newspaper (hope they don’t mind us using their newspaper as an example).

For those of you who don’t know, Eskup is a kind of social network, twitter-like, microblogging plattform which merges Elpais.com content with user generated microposts. Kind of like the dull answer to “how do we, newspaper, take advantage of social media?”

El Pais seems pretty excited about this. Their excitement is directly proportional to my skepticism. They’ve done a great deal of programming for this and they’ve taken risks, which is good. But they URGENTLY need to rework the design and functionality so the product is more understandable and easy to use. Otherwise it will be another missed atempt at redefining online journalism in Spain.

We also have a promo code for a premium account at Filmin (any movie, any time anywhere) which we’ll give to the person who makes the best list (it’s ok to repeat some movie suggested by someone else). Easy peasy japanesey. A neat gift for little effort.

These are the movies/docs we have so far:

Kitchen Stories (Bent Hamer, 2003)

The Fountainhead (King Vidor, 1949)

Tucker: The Man and his Dream (Francis Ford Coppola, 1988)

Helvetica (Gary Hustwit, 2007)

Powers of 10 (and other films by Ray y Charles Eames, 1977)

The RTVE series ‘Elogio de la luz‘, each episode covering an architect

The Belly of an Architect (Peter Greenaway, 1987)

Sketches of Frank Gehry (Sydney Pollack, 2005)

Play Time (Jacques Tati, 1967)

Full disclosure: We’ve done Filmin’s web redesign and we love it (the service, not the redesign. Well… both). We’ll go into details in a future post.

Marco, who also happens to be the lead developer at Tumblr, dealt with several issues when designing the iPad version of his product:

• Placement of the controls: follow Apple’s lead or do what he finds it’s better (standarisation over effectivity).
• Placement of the action buttons (not where they fit but at the specific spot where you are when you may need them).
• Text margins and line readability.
• Single column vs. multicolumn layouts.
• Color and brightness for legibility (pure black on pure white on a screen is an aberration, don’t get fooled).
• Pagination tap zones (and differences between iPhone and iPad).
• Tipographies.

I wonder why Mr. Arment decided to let the user chose between 6 different fonts instead of chosing himself the one or two he thinks it works better on that context. What do you guys think about this one?

UPDATE:

Marco just answered my enquiry through twitter:

Marco: Because the people who care about fonts REALLY care about them, and appreciate the choice.

I think Hoefler Text works best, so I made it the default. I take the default settings VERY seriously.

The most un-usable architecture firm Web sites are often exactly like the buildings those architects design: Created to make a statement, rather than focus on everyday livability. Perhaps they have to solve one problem before they can tackle the other.

The article is rather shallow, but worth skimping to check out some info-architectural disasters.

Where Search does a “classic search”, Re-find looks on what I already have seen (and starts digging on my social info up in the cloud) and Discover does te opposite bringing results I’ve never seen before.

It makes sense to me, ¿Does it to you?

Plane chrash on Hudson river:

What would you chose?

The images correspond to El País, El Mundo and ABC.

These structures bleed consensus and politics from every pixel. I’ve been in a couple of these projects and I understand the politics behind a newspaper redesign. All the “we cannot harm our current readers” and “we need to find a spot for this and that” only leads to having the same again and again.

And the constant increase of screen resolution is not helping but increasing the damage. Remember when most newspapers went from 800×600 to 1024? Instead of using those extra pixels to make everything bigger and give some white space they came up with an extra column for junk.

Much has been said about how to renew online journalism. If they just started by questioning these obsolete structures… Jeez… I am so looking for the day when a big exec has the guts to get rid of commitees, consensus and departmental presence to make something different, some design where you see a strategy, a point, a purpose.

A few months ago I wrote an article expressing my displeasure with American Airlines‘ hideous online presence. I also spent some time mocking up a redesigned version of their website. To my surprise, a user experience designer at AA.com emailed me an amazing response describing some of the design problems faced in large corporations. You should read my original article here and the response from Mr. X here.

An hour after I posted the response, American Airlines fired Mr. X.

Dustin Curtis at The Incompetence of American Airlines & the Fate of Mr. X

(Thanks Bastian)

A lot of designers want to increase the line height or padding in order to make the interface “breathe.” We deliberately don’t do that. We want to squeeze in as much information as possible above the fold. We recognize that information density is part of what makes the experience great and efficient. Our goal is to get users in and out really quickly. All our design decisions are based on that strategy.

Irene Au, User Interface Director at Google

Approach B

Yes, it’s true that a team at Google couldn’t decide between two blues, so they’re testing 41 shades between each blue to see which one performs better. I had a recent debate over whether a border should be 3, 4 or 5 pixels wide, and was asked to prove my case. I can’t operate in an environment like that. I’ve grown tired of debating such minuscule design decisions.

Douglas Bowman, Former Head of Visual Design at Google

Which one would you take?

(thanks, Missha)

This makes me very proud since I lead the team who made that possible. I guess I cannot disclose much of the information regarding the project, but I want to congratulate and thank the team who worked really hard to make it possible. We weren’t expecting such success.

Here is the press release and a link to a United Nations page with the full report.

Here is the overall ranking:

This is the detail on the usability category:

This is the paragraph where Madrid’s website is mentioned as one of the best practices all over the world:

Working for the public administration is always dificult. There are many interests and stakeholders which sometimes conflict among themselves and you feel in the middle having to come up with something that compromises all parts and is also what you think it’s best for users. I don’t recall it as an easy project.

Besides, as a professional you have to deliver a plus when working in such projects. Why? For two main reasons:

1. You are being paid with everybody’s money
2. Your users are the Citizens. You work for the public good.

I remember recalling these principles when things used to get tough. It was our big motivation. Now I see it was worth the sacrifice.

My favorite definition/description/whatever goes like this:

Information Architecture: how it’s structured
Interaction Design: how it behaves
Information Design/Visual Design: how it looks

These definitions are not mine and I cannot recall who wrote them first. I’d appreciate any feedback on it. I am also aware that the boudaries between concepts are not clear at all, especially between the last two. They tend to overlap a lot.