Categoría: Diseño

Categorías
Diseño

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.
Categorías
Citas Desarrollo web Diseño Profesionales web

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.

Categorías
Citas Diseño

¿Qué falla en un diseño? El test de Can’t Unsee

Hace casi diez años (sí diez años), publiqué por el blog diseño, creatividad y dos test en el que hacía referencia a dos test de Andy Rutledge de los que se podía aprender mucho: en un test aparecía la solución, en otro había que investigar más… . Al final, una de las conclusiones es que la lectura de Universal Principles of Design, Revised and Updated era muy recomendable para conocer las respuestas al test y mucho más.

Con diferencia, Universal Principles of Design es el libro con el que más he aprendido.

Hoy recomiendo dar un vistazo a Can’t Unsee. Un test en el que vemos dos versiones sutilmente diferentes en el que hay que elegir aquella opción de que está mejor diseñada. ¿La diferencia? En ocasiones es muy sutil: es cuestión de detalles. Y ya sabemos…

Los detalles no son detalles, son lo que define el diseño.

Charles Eames

Categorías
Citas Diseño

Mike Monteiro, vacunas, datos y sensaciones

Mike Monteiro, autor del recomendable libro Design is a job, ha publicado otro: Ruined by Design: How Designers Destroyed the World, and What We Can Do to Fix It. Y como ahora lo de escribir en un blog se ha vuelto vintage, está publicando una lista de correo (Mike´s Monteiro Good News).

Estoy suscrito.

La última entrega empieza hablando de las vacunas, los anti-vacunas (gente que puede ser responsable de la vida de sus hijos y también puede votar), los datos, las sensaciones y el diseño.

Como buen diseñador, es partidario de utilizar los datos disponibles: es una forma objetiva de tomar decisiones argumentadas (y tengo que aprender más al respecto, confieso).

Y no deja de ser paradójico que en la época en la que más datos hay disponibles, en no pocas ocasiones al final se toman las decisiones por emociones.

Silicon Valley claims to be obsessed with data.
[…]
How to get it. What to do with it. Who’s selling it to whom. Who needs it. How to protect yours. We’ve collected more data in the last ten years than we can process in the next hundred. No one can exactly remember why we’re collecting it, but everyone’s afraid to stop. Yet, with all this data at our disposal, we’ve created a garbage fire run by platforms of vitriol. Here’s some more data: we’re idiots.
Like any good designer, I work with data. If you’re designing something for people to use and no one can use it, that’s data. You’d be a fool to ignore the data.
[…]
While you’re designing, you’re like a scientist. You study every data point. It’s the smart thing to do. Then you gotta persuade people the work is right. Hold onto your butts…
The minute you put a design solution in front of data-driven Silicon Valley types, they start talking about feelings.
“This feeeeeels wrong.”
“I’m not feeeeeeling it.”
“Oh, I like the feel of this!”
It’s a little crazy-making, but it’s also understandable. I told you people don’t make decisions based on data; they make them based on feelings.

Mike Monteiro

Datos versus emociones.

Datos y emociones.

Categorías
Diseño Libros

Las fuentes de Massimo Vignelli

En estos días estoy releyendo «The Vignelli Canon», de Massimo Vignelli. El libro, muy recomendable, está disponible en formato pdf (The Vignelli Canon [pdf]«), pero es uno de esos libros que se disfruta mucho en papel.

En uno de sus contenidos, habla sobre tipografías. Desde su experiencia, no hacía falta trabajar con un número descomunal de tipografías, con unas pocas seleccionadas pudo hacer la mayor parte de sus trabajos. De hecho menciona que en una exposición, mostraba una representación de sus obras en las que únicamente usaba cuatro tipografías, y son las siguientes:

  • Garamond
  • Bodoni
  • Century Expanded
  • Helvetica

Nombraba también las siguientes fuentes, que añadía a su lista de imprescindibles (junto con algunas otras no mencionadas):

  • Optima
  • Futura
  • Univers
  • Caslon
  • Baskerville

Ocho fuentes que usadas con sabiduría, podría evitar lo que Massimo denominaba one of the biggest visual pollutions of all times, debido a la proliferación de fuentes creadas con los ordenadores.

Como curiosidad, añadiendo un poco más de información, más allá del nombre de la fuente (fecha de creación, autor y nacionalidad), saltan a la vista algunos detalles curiosos.

  • Garamond (1532), Claude Garamond, Francia.
  • Bodoni (1788), Giambattista Bodoni, Italia.
  • Century Expanded (1990), Morris Fuller Benton, Estados Unidos.
  • Helvetica (1957), Max Miedinger y Edouard Hoffmann, Suiza.
  • Optima (1955), Hermann Zapf, Alemania.
  • Futura (1930), Paul Renner, Alemania.
  • Univers (1957), Adrian Frutinger, Suiza.
  • Caslon (1734), William Caslon, Gran Bretaña.
  • Baskerville (1757), John Baskerville, Gran Bretaña.

Las fuentes clásicas, que van desde el siglo XIV al XVI son originarias de Francia, Italia y Gran Bretaña. Las fuentes más actuales, se concentran en Alemania y Suiza (más la Century, de Estados Unidos).

Massimo Vignelli fue un diseñador que trabajó en muchos ámbitos, pero en el contexto actual, hay que tener obviamente muy presente la proliferación de pantallas en nuestras manos y frente a nosotros.

Recuerdo haber leído opiniones al respecto de las fuentes que a pesar de estar plenamiente consolidadas (¡algunas se llevan usando durante siglos!), tal vez no sean las más apropiadas para el contexto digital. Al principio había que restringirse a las fuentes instaladas en el correspondiente sistema operativo (sí, el famoso font-family: Helvetica, Arial, sans-serif usada en las hojas de estilo), aunque hoy en día existe la flexibilidad de poder usar webfonts y hay una gran disponibilidad de fuentes con licencias bastante permisivas.

Dadas las circunstancias actuales, ¿qué fuentes diseñadas recientemente añadiría hoy en día Massimo a su lista para un uso predominante en un entorno digital? Mencionaré algunas posibilidades, diseñadas en un contexto más actual, aunque ignoro su probabilidad:

  • Fira Go (2018), varios autores, basada en la fuente Fira Sans (2013) diseñada por Erik Spiekermann para el sistema operativo Firefox OS.
  • Roboto (2011), Christian Robertson (Estados Unidos), diseñada para el sistema operativo Android.
  • San Francisco (2014), Apple, Estados Unidos. Usada en sus sistemas operativos (iOS y Mac OSX).
  • Segoe UI (2004), Steve Matteson, Estados Unidos. Usada en los sistemas operativos de Microsoft.

Pregunta que dejo en el aire. Estamos en el año 2050. ¿Estarán vivas Fira Go, Roboto, San Francisco, Segoe UI, o habrán caído en el olvido y seguirán con todo su vigor las fuentes antes mencionadas y diseñadas de uno a ocho siglos antes?

El tiempo lo dirá.

Actualización de junio del 2021.

Matej Latin, autor del libro Better web typography for a better web cuenta en su artículo All you need is 5 fonts tiene su grupo de fuentes favorito:

  • Gilroy
  • Meta serif pro
  • Roboto
  • Georgia
  • Work sans

Más allá de la lista, recomienda las características que tendrían que tener las fuentes elegidas para ser usadas en la web actual:

Here’s a list of types of fonts I think a modern web designer needs to have on their “5 fonts” list:

  • A geometric sans serif
  • A high quality serif for long text
  • A workhorse font
  • A web safe font
  • A variable font