La recopilación de principios de diseño más completa: principles.design

Los principios de diseño molan. Ya hablé en su momento de Libro: Universal Principles of Design (para mí, sigue siendo y será siempre un libro imprescindible).

Hoy he visto en twitter que Nacho Gil agradecía a Quino Terceño un enlace de los que hay que guardar, atesorar, investigar, visitar y extraer toda la información en sucesivas revisitas: principles.design (An open source collection of Design Principles and methods).

Veamos su tarjeta de visita:

What are Design Principles?
Design Principles are a set of considerations that form the basis of any good product.

Why use them?
Design Principles help teams with decision making. A few simple principles or constructive questions will guide your team towards making appropriate decisions.

Who uses them?
Organisations, individuals and product teams have benefited from writing and following their principles.

principles.design — Ben Brignell

Veamos algunos ejemplos:

Pero hay más, muchos más. De momento casi 200. Un recurso, como decía, para atesorar.

Los 10 principios del Diseño Centrado en la Vida

Decálogo para reglas o principios, y trilogías para los libros. ¿Es broma?
En 10 Principles of Life Centered Design, Johnathyn Owens publica los diez principios de lo que denomina Diseño Centrado en la Vida (Life Centered Design). Imposible no recordar Ten principles for good design de Dieter Rams.

Diseño y ecología versus diseño y consumismo. Creo que no hay un tema más actual ni más importante.

Algo había leído en Diseño para el mundo real de Victor Papanek y también en Ruined by Design: How Designers Destroyed the World, and What We Can Do to Fix It de Mike Monteiro.

Bueno, y ahora, una traducción casera de los 10 principios del Diseño Centrado en la Vida:

  1. El diseño centrado en la vida está diseñado teniendo en cuenta la visión completa.
  2. El diseño centrado en la vida es sobre el futuro, tanto como sobre el ahora.
  3. El diseño centrado en la vida es para todos, no solo para aquellos que pueden “permitírselo”.
  4. El objetivo final del diseño centrado en la vida es la necesidad, no el costo.
  5. El diseño centrado en la vida está diseñado para durar, no para fallar.
  6. El diseño centrado en la vida es minucioso hasta el último detalle.
  7. El diseño centrado en la vida es simbiótico con la naturaleza.
  8. El diseño centrado en la vida es inteligente.
  9. El diseño centrado en la vida es humano.
  10. El diseño centrado en la vida es lo menos posible.

Más detalle, en el ya mencionado artículo original: 10 Principles of Life Centered Design.

Modelos mentales y sesgos congitivos

Por diferentes caminos he llegado a los siguientes enlaces:

  • Wikipedia: Sesgos cognitivos, un artículo amplio y con un listado amplio.
  • 125 modelos mentales para decidir mejor, publicado por Joan Tubau en joincardinal. Artículo que menciona esquemáticamente y de forma un tanto informal, una serie de modelos mentales. César Astudillo mencionaba en twitter que sería una buena idea sacar unas cartas con los principios. Estoy de acuerdo, y no descarto hacerlo en privado, aunque sea en papel de 80 gramos y con ilustraciones ajenas (eso sí, las enfundaría).
  • Mental models for designers, publicado por Wes O’Haire en dropbox.design, más que los principios, destaco el proceso.

El botón de los 300 millones de dólares. Diseñar un botón como ejercicio

El botón de los 300 millones de dólares

¿Conocéis la vieja historia del botón de los 300 millones de dólares que contó Jared M. Spool en el 2009 (The $300 Million Button)? Es interesante. Cómo al cambiar, entre otras cosas, el texto de un botón, mejoró en 300 millones de dólares las ventas anuales en una web de comercio electrónico.

¿Qué ocurrió? ¿cómo pudo afectar tanto a las ventas el cambio de un botón?
Contexto: en una web de comercio electrónico, al comenzar el proceso de compra tras tener el carro con la compra deseada, aparecía un formulario en el que se pedía el usuario, la contraseña, y la posibilidad de entrar en la página web (para confirmar la dirección de entrega y el medio de pago) o la de darse de alta. Ah, y también el enlace de olvido de contraseña.

Es decir, algo como:

Campo de usuario, contraseña, botón de acceso y vínculos de olvidé mi contraseña y darme de alta.
Recreación libre del formulario del carro de la compra.

¿Qué problemas podían haber (recordemos, año 2009)? De todo tipo:

  • Usuarios que no quieren registrarse en la web (sólo querían comprar).
  • Usuarios dados de alta que dudan cuál es la dirección de correo electrónico que tienen como usuario.
  • Usuarios que se habían dado de alta con varias direcciones de correo electrónicas diferentes.
  • Usuarios que no recuerdan la contraseña.

La consecuencia: en esa página se producía un cuello de botella que impedía finalizar la compra.

La solución: tras realizar pruebas con usuarios, pasa por cambiar el literal de un botón (de «darse de alta» a «continuar»), e incluir un texto indicando que se puede comprar sin darse de alta.

El resultado: 15 millones más de ventas en un mes, y 300 millones en un año (de ahí el sugerente título del artículo para los que se excitan con dólares).

Diseñando un botón: un elemento fundamental

Siempre me ha intrigado el proceso que está detrás de la toma de decisiones en un diseño. El porqué.

Porque se supone que detrás de una decisión de diseño (particularizando en una página web: fuente, tamaño, color, posición, rejilla,…) debería haber motivos que fundamentan esa decisión. ¿Cómo ejercitar esa habilidad o conocimiento?

What if, instead of trying to design an entire page with dozens of elements (nav, text, input controls, a logo, etc.), we consciously started by designing the simplest thing possible? We deliberately limit the playing field to one, tiny thing and see what we learn? Let’s try.

What is the simplest possible element? I vote that it’s a button.

The King vs. Pawn Game of UI Design — Erik D. Kennedy

Enumeremos algunas características de un simple botón:

  • tamaño
  • texto
  • fuente
  • tamaño y efecto de la fuente
  • color de fondo (¿gradiente de colores?)
  • color del texto
  • acompañar o no de un icono
  • padding (separación del texto y el borde)
  • margen (separación entre el botón y el resto de los elementos)
  • forma (esquinas cuadradas, redondeadas, radio de la redondez)
  • tipo de acción que realiza (continuar un proceso, acción «peligrosa», acción neutra, acción principal, acción secundaria,…)

Podemos delegar varias características al estilo por defecto que tenga el navegador (en el caso de una página web), o a algún framework con posibles síntomas de vigorexia.

O podemos diseñar un simple botón. Con el objetivo de cumplir los requisitos del proyecto (real o ficticio). Intentando argumentar cada característica. Me parece un ejercicio muy saludable.