7 principios del diseño de aplicaciones

El diseño de aplicaciones web debe cumplir con una serie de requisitos para generar interfaces naturales, obvias y predecibles que no sólo aceleren el trabajo con la aplicación, sinó que además provean al usuario de seguridad, confianza y satisfacción en su uso. Estos requisitos los he agrupado en 7 principios fundamentales del diseño de aplicaciones:

Proximidad: Las funciones básicas deben aparecer de inmediato, mientras que las funciones avanzadas deben estar en un lugar menos para los usuarios nuevos. Los usuarios deben beneficiarse de tener más próximas las funcionalidades más utilizadas, al igual que un carpintero siempre quiere tener a mano las herramientas que más utiliza.

Familiaridad: Una de las características de una buena interfaz es que en su mayor parte no requiere un aprendizaje específico, sino que es utilizable inmediatamente porque se basa en conocimientos previos de la vida real de los usuarios. Utilizar conceptos, mecanismos e imaginería del mundo real como metáforas permite a los nuevos usuarios empezar a utilizar la aplicación casi de inmediato, porque intuyen su funcionamiento al encontrarse con conceptos conocidos. Además, emplear las convenciones típicas de las aplicaciones facilita también el aprendizaje, puesto que se aprovecha una parte del conocimiento previo en la utilización de otras aplicaciones.

Simplicidad: Una interfaz repleta de funciones avanzadas sólo distrae a los usuarios y les impide realizar las tareas comunes del día a día. Por el contrario, una interfaz que sustenta las acciones del usuario acaba desapareciendo como interfaz y se convierte en tapiz. Además, los objetos de la interfaz tienen que parecer lo que son. Los controles, los elementos y sus relaciones tienen que tener un significado obvio, claro y comprensible, de modo que de un vistazo el usuario pueda entender, sin llegar a tocar el ratón, cómo funciona la aplicación.

Transparencia: A diferencia de muchos otros sistemas como motores o máquinas de tabaco, las aplicaciones son sistemas interactivos que no hacen ruido mecánico por sí mismos. Por tanto, toda la comunicación debe vehicularse a través de la vista (ignoramos aquí aquellas que generan efectos sonoros, como aplicaciones de escritorio). Las mejores interfaces dialogan con el usuario de modo visual (y más que textual): estas pistas visuales evidencian qué está haciendo la aplicación, cuánto queda, y qué se espera del usuario. Con barras de estado, barras de progreso y técnicas como el empleo de focus y highlights, la interfaz comunica visualmente al usuario la actividad de la aplicación, que si no sería completamente silenciosa. La interfaz debe ser transparente y mostrar visualmente la acción que el usuario realiza, de modo que trabajar con la aplicación sea obvio, y que los efectos de utilizarla sean inmediatos.

Diálogo: Aparte de ser transparente en su funcionamiento, la aplicación debe comunicarse con mensajes de texto con el usuario. Mediante estos mensajes, que pueden ser de error, de alerta o de confirmación, la interfaz debe expresar lo que está ocurriendo “under the hood”, detrás de la pantalla. Estos mensajes deben estar bien redactados y ser precisos sobre el tipo de error que ha habido, sobre la acción que se ha completado o sobre el aviso que quiere darse al usuario. No deben ser genéricos sino específicos. Deben dar siempre la oportunidad de cancelar la acción, si no está hecha, o deshacerla, si ya está hecha.

Seguridad: El usuario debe tener la seguridad de que usar la aplicación no es ni peligroso ni arriesgado. Es decir, que no es posible equivocarse sin haber sido advertido previamente, ni que no es posible cometer un error sin poder restaurar el estado de las cosas antes de cometerlo, es decir, deshacerlo. Eso pasa por no situar ningún botón fatal en un sitio de paso cualquiera sino en un sitio protegido, dar el aspecto pertinente a los botones de acción fatal, pedir confirmación antes de realizar la acción, etc. El usuario debe tener la seguridad de que si va a realizar alguna acción crítica, la aplicación estará a la altura y sabrá advertirle de modo oportuno (en el momento adecuado) y pertinente (avisando con claridad las consecuencias de esa acción crítica).

Consistencia: Una interfaz consistente logra una de las mayores virtudes de las interfaces: la predictividad. La aplicación debe comportarse de una manera predecible. El usuario debe poder predecir y acertar sobre lo que pasará cuando haga click aquí o allí, porque antes ha visto a la aplicación responder de ese modo en una situación parecida. Eso se logra cuando elementos de la interfaz parecidos se comportan de manera parecida, y cuando ese comportamiento se mantiene de modo consistente a través de toda la aplicación. Los mismos objetos de la interfaz deben comportarse de la misma manera en cualquier lugar. Si van a comportarse diferente, su aspecto también debe ser diferente.

Apple Mail: pequeño pero importante error

Error Apple Mail

Existe en el cliente de Mail del Mac OS X (todas las versiones) lo que a mi entender es un pequeño pero grave error de diseño. Se trata de los dos iconos que representan las acciones de “Eliminar” y “Trasladar a Correo no deseado” el mensaje/mensajes que tengamos seleccionados. El problema es que los dos iconos parece que estén intercambiados, lo que genera en algunos usuarios confusión (cuanto menos a mí me pasa, pero también he visto a otros usuarios de Apple Mail claramente dubitativos frente a la duda de qué botón deben apretar). En el Apple Mail:

Icono de Apple Mail para la acción de "No deseado"El botón de “Eliminar” es una señal de “Prohibido el Paso”, que obviamente nada tiene que ver con la acción de Eliminar y sí con el hecho de denegar el paso a mensajes de spam.

Icono de Apple Mail para la acción de "Eliminar"Por su parte, el botón de “No deseado” es una bolsa de basura convencional que, además, si nos fijamos bien veremos que es una bolsa de basura reciclable, dejando intuir que su contenido se puede reciclar (recuperar), utilizando la misma metáfora que utiliza Windos con su “Papelera de Reciclaje”.

Al ser dos iconos que parecen reflejar dos acciones que no son las que realmente realizan, esto se convierte en un fallo en la usabilidad de la aplicación, lo que en consecuencia crea a menudo errores: hay usuarios que creen prohibir el paso de e-mails de spam marcando el mensaje con la señal de Prohibido, pero en cambio lo que están haciendo es eliminarlo sin marcarlo como spam (y además legitimado el mensaje como un e-mail genuino).

Por su lado, hay usuarios que, una vez leído un e-mail legítimo de un contacto, lo quieren eliminar y por tanto trasladar a la papelera de reciclaje. Por tanto, se dejan guíar por la iconografía de la interfaz y aprietan el botón de la papelera amarilla, sin darse cuenta de que están marcando como spam ese mensaje y, por tanto, marcando también como spam los que puedan provenir en el futuro de ese remitente.

La lógica del usuario es evidente y no deja dudas: si quiero eliminar un mensaje, por qué debería apretar un botón que significa universalmente “Prohibir” y no dice nada de “Eliminar”? Con más motivo aún cuando justo al lado hay un botón con un cubo de basura, que es la metáfora más extendida en informática para la acción de “Eliminar”. El cubo de basura significa universalmente “Eliminar” y además viene reforzado por el símbolo de reciclaje, que me informa que no un eliminado definitivo, sinó que si luego quiero recuperarlo podré hacerlo (como en la Papelera de Reciclaje de Windows, o la Papelera de Mac OS X). Si por el contrario, quiero marcar como “correo no deseado” un mensaje y por tanto prohibir que no vuelva a entrar en el buzón de entrada ningún mail parecido, no debería apretar el botón de “Prohibir”???

Apple Mail icons

Lógicamente, la solución radicaría en intercambiar los iconos de lugar, como se ilustra en la imagen de arriba. Pero claro, no puedes cambiar de orden dos iconos a los que la gente se ha habituado (aunque sea en una relación tormentosa con ellos) y que ahora signifiquen cosas distintas a las que han significado hasta ahora.

Por tanto, la única opción radica por realizar una alternativa completamente nueva, como por ejemplo esta propuesta que se ve en la imagen de abajo:

Apple Mail propuesta

La ventaja de esta propuesta es que la acción de “Eliminar” queda ilustrada por un cubo de basura idéntico al que existe en el escritorio (Finder) de Mac OS X, con lo que la curva de aprendizaje, sencillamente, no existe. Los usuarios están plenamente habituados a esta metáfora. Por otro lado, el símbolo de radioactividad (aunque podría ser otro: una cucaracha, un demonio rojo, un virus, una araña…) es un símbolo universal de peligro e de infección, ideas correctamente asociadas a mensajes de spam o de virus.

Napapijri wallpaper

Napapijri wallpaper

Siempre me han fascinado las marcas, desde mucho antes de que ni siquiera supiera qué era el branding. Recientemente he conocido una nueva marca, dedicada a comercializar ropa outdoors, llamada Napapijri. A pesar de su nombre de origen finlandés (al parecer, napapijri significa “círculo polar ártico” en finés), la marca es de origen italiano. Napapijri es una marca que no está al alcance de los mortales currantes como yo: sus chaquetas, pantalones, jerseys y complementos valen una fortuna, y la marca se posiciona como ultra-premium sin complejos.

Aún así, la verdad es que los diseños de Napapijri no son nada del otro mundo y probablemente las tecnologías que usan tampoco (cualquier fabricante de ropa técnica como TNF, Helly Hansen o Salomon seguro que tiene ropa con mejores prestaciones, por la mitad de precio), por lo que lo que más me ha gustado de Napapijri no han sido sus productos sinó el sabor que desprende la marca. Napapijri dice estar inspirada en las primeras expediciones al Polo Norte y al Polo Sur, y dice apoyar exploraciones científicas a la Antártida. Sea verdad o no, lo cierto es que navegando por su web me he acabado inspirando y he acabado haciendo una composición (que puede valer como wallpaper de Napapijri) que intenta ilustrar ese espíritu que Napapijri intenta transmitir.

Se puede ver aquí en todo su esplendor:

VISUALIZAR WALLPAPER NAPAPIJRI

Y se puede descargar desde aquí (1680 x 1050 px):

DESCARGAR WALLPAPER NAPAPIJRI

Lo he enviado a Napapijri también por si quieren utilizarlo para algo, a ver qué dicen…

7 principios básicos en el uso de tipografías

He aquí 7 principios básicos que he ido recopilando de diferentes fuentes (y nunca mejor dicho) a tener en cuenta cuando se usan tipografías:

  1. Las tipografías con serif deben medir siempre algo más que las sin serif; por ejemplo si una sans serif tiene entre 9 y 11 puntos; si la cambiáramos por una serif ésta debería tener entre 11 y 12 puntos.
  2. Es bueno evitar columnas de texto con más de 80 carácteres por línea. Las líneas más largas de 80 cpl pueden llevar a que los usuarios lectores lean la misma línea dos veces; sin embargo, las más cortas de 80 cpl rompen tan a menudo que es difícil seguirlas.
  3. No abusar de letras todas mayúsculas, especialmente cuando se trata de composiciones con un uso intensivo de textos. Las mayúsculas reducen la velocidad de lectura un 30% y en cambio requieren un 30% más de espacio que las minúsculas.
  4. En diseño de revistas y periódicos, pero también en la web, el ancho de la columna debería ser tan largo como lo que ocupara una vez y media el alfabeto entero en la tipografía que quieres usar y en minúscula.
  5. En diseño de vallas exteriores, un buen anuncio no tendrá más de 7 palabras y no más de 2 cosas a las que mirar.
  6. En las tipografías en cursiva, el cuerpo de letra perfecto es aquel que su altura es 5 veces el ancho.
  7. Para saber la legibilidad de un texto a distancia, hay que que coger la mitad de la altura de la letra en pulgadas y multiplicarla por 100, para tener la distancia de la que es legible en pies

Bueno, pues eso eran 7 principios básicos en el uso de tipografías que siempre va bien tener a mano.