Category Archives for "usabilidad"

Nov 02

Apuntes de tipografía: serio y flexible

By admin | comunicación , digital , diseño , escritura , psicología , publicidad , recomendado , tipografía , usabilidad

Cuando eliges una portada para tu informe, un tipo de letra para tu presentación o un diseño concreto para tu blog estás enviando un mensaje gráfico a tus lectores. La tipografía, el diseño y la maquetación tienen mucho peso en nuestra percepción de los contenidos a los que somos expuestos, porque el medio visual elegido establece un marco desde el cual interpretamos el mensaje. Pero, ¿sabes de qué manera ocurre?

Te propongo un experimento para verlo de forma muy directa. Observa los dos siguientes gráficos creados con términos de estadística y dime cuál te parece más fiable.

Gráfico 1

Glosario letras movidas editado

Nube de términos con tipografía tipo imán de nevera (Alpha Fridge Magnet All Caps de Worle.net)

 

Gráfico 2

 

Los mismos términos con otra tipografía

Los mismos términos con otra tipografía (Vigo- Wordle.net)

La irregularidad y el movimiento de las letras del gráfico 1, que representan los imanes típicos de la nevera les da cierto atractivo visual pero al mismo tiempo hace que no sean adecuadas para un mensaje técnico como el de este caso (da la sensación de que  que las medias fueran a estar mal calculadas, por ejemplo). La tipografía del gráfico 2 con letras bien definidas y disposición recta y ordenada es mucho más acorde con el tema estadístico del mensaje y le da mayor credibilidad.

 

Veamos el siguiente par de gráficos. ¿Cuál de los dos te parece más serio y fiable?

 

Gráfico 3

Mismos términos con letra de tipo manuscrito

Mismos términos con letra de tipo manuscrito (Enamel Brush- Wordle.net)

Gráfico 4

 

mismos términos con letra de palo muy limpia

Los mismos términos con letra “de palo” muy limpia (Expressway Free-Wordle.net)

 

Al comparar estos dos gráficos, encontramos que el gráfico 3 emplea una tipografía más irregular, parecida a la letra manuscrita, que le resta credibilidad al mensaje ya que incluso en algunas palabras cuesta distinguir la “a” de la “o”. La irregularidad del trazo hace que la maquetación también sea necesariamente irregular.

Por su parte, el gráfico 4 resulta claro, limpio y transmite una gran sensación de credibilidad y profesionalidad. Los colores de ambos gráficos están en la misma gama, por lo que el color aquí no contribuye a la diferencia.

Demos un paso más allá con el siguiente par y juguemos un poco a la “adivinación” tipográfica. ¿Con quién preferirías negociar, con el autor del gráfico 5 o con quien ha diseñado el gráfico 6?

Gráfico 5

Tipografía rotunda y  contundente

Tipografía rotunda y contundente (Tank Like de Wordle.net)

Gráfico 6

Mismos términos con tipografía Mail Ray Stuff

Mismos términos con tipografía Mail Ray Stuff de Wordle.net

 

Esta pregunta tiene un mayor grado de subjetividad y la respuesta se puede ver influida por factores personales extratipográficos. En mi caso, yo preferiría negociar cualquier cosa con la persona del gráfico 6, ya que los trazos redondos, las pequeñas asimetrías e inclinaciones de las letras unidos a los espacios en blanco dan la sensación de que la persona que lo ha dibujado es más flexible, abierta e imaginativa que el autor del “aplastante” gráfico número 5. El número 6 es un gráfico orgánico, con margen para otras personas e ideas y con aire para respirar.

Sin embargo, las letras de bloque con gruesos perfiles del gráfico 5, el diseño lineal y recto, la densidad, el tamaño de letra y la falta de espacios en blanco me hacen pensar en alguien recio, muy contundente y poco abierto a lo nuevo. Los gruesos bloques de las letras parecen más piezas de un Tetris que verdaderas letras. En resumen, parece que el objetivo fuera ocupar todo el espacio y no dejar resquicio para nada más…

Los gráficos de nube de tags de este artículo recogen los términos del glosario del libro “Cómo mentir con estadísticas” de Darrell Huff y los he creado con la aplicación online gratuita Wordle.net. Este programa permite elegir la disposición de las palabras (Layout), la paleta de colores y el fondo (Color) y la tipografía (Font). Para aumentar el tamaño de letra de los términos que se quieran destacar hay que repetir el concepto en cuestión (a mayor número de repeticiones mayor tamaño). Hay que emplear términos de una sola palabra para que no aparezcan por separado (de ahí que yo haya escrito “MediaAritmética” y no “Media aritmética”).

Si te interesa el diseño gráfico y la tipografía te recomiendo que entres en la aplicación y trastees porque se pueden hacer cosas muy curiosas y aprender sobre la marcha.

Oct 14

Apuntes de diseño: And all that (design) CRAP

By admin | comunicación , digital , diseño , formación , publicidad , recomendado , tipografía , usabilidad

Querido diseñador en ciernes, apúntate la palabra “CRAP”. Yo ya la he anotado con formas circulares de distintos colores como recomienda Tony Buzan para sus mapas mentales.

El término CRAP procede del inglés, pero en este contexto (y sobre todo sin la palabra “holy” delante) no significa lo que indica Wordreference. En realidad, se trata de una expresión mnemotécnica creada para recordar los cuatro factores fundamentales de todo buen diseño: Contraste, Repetición, Alineación y Proximidad.

La norteamericana Robin Williams dice ser la creadora de estas siglas que se han vuelto tan populares en el ámbito del diseño (haz la prueba, busca en Google “CRAP diseño” o “CRAP design”). Creadora o no de este término (estas cuestiones son muy difíciles de rastrear y verificar), Williams ha escrito dos libros magníficos, uno sobre diseño para no diseñadores y otro de Illustrator para no diseñadores.

Tanto el de diseño como el de Illustrator son libros claros, completos y muy amenos, que han sido éxito de ventas y recibido premios. Yo los tengo en inglés, pero Anaya ha publicado versión española de Diseño Gráfico: Principios y tipografía así como de un libro de la autora sobre Illustrator y este otro de Photoshop.

Diseño gráfico de Robin Williams, un libro muy recomendable

Un libro muy recomendable, sobre todo para principiantes

 

Volvamos a nuestro CRAP. Si te fijas, en las siglas para Contraste, Repetición, Alineación y Proximidad hay un primer par de opuestos,  lo distinto y lo igual (contraste-repetición) y después pasamos a lo que empieza en igual punto y a aquello que está cerca de otros elementos (alineación y proximidad).

El contraste puede ser de color, de tipografía y de tamaño, posición o estilo, mientras que la repetición puede consistir en reiteración de elementos, tipografías, colores o estilos.
Ejemplo de diseño basado en contraste y repetición (fuente: Monstreh vía Pixabay) https://pixabay.com/es/sumi-e-total-de-tinta-negra-east-711491/

Ejemplo de diseño basado en contraste, repetición, alineación y proximidad (ilustración de Monstreh vía Pixabay)

Por su parte, la alineación y la proximidad pueden aplicarse a todos los elementos o a parte de ellos, lo que a su vez produciría contraste entre los elementos alineados entre sí y los que no lo están, o entre los próximos, que se percibirían como relacionados entre sí, y los alejados, que se verían como ajenos o distintos.

Diseñar consiste en algo más que saber manejar las herramientas y ser capaz de entender las necesidades del cliente. También requiere tener nociones de composición, de uso del color, de la tipografía y conocer las líneas maestras de la historia del diseño y las artes plásticas, además de conocer los distintos soportes, técnicas de impresión y sus características.

Para internarse en este complejo mundo conviene empezar por analizar los diseños en términos de CRAP. Las cosas empezarán  a cuadrar y podrás argumentar por qué te parece que un diseño funciona o no y abandonar el resbaladizo terreno del “me gusta”/”no me gusta”.

 

Sep 04

Apuntes de diseño web: formularios

By admin | 2.0 , comunicación , digital , diseño , recomendado , tipografía , usabilidad

Parece que los diseñadores de la página web de la Seguridad Social no vieron el capítulo de cerca-lejos de Súper Coco en Barrio Sésamo de niños y que de adultos han frecuentado poco los manuales de diseño web y usabilidad.

La imagen siguiente es una captura de los campos que hay que rellenar para obtener el documento de la vida laboral a través de la web y mediante un código recibido por SMS (enlace).

 

Datos para solicitar vida laboral

Datos para solicitar vida laboral

 

La primera opción, la del combo, no presenta ninguna dificultad ya que es evidente que hay que elegir DNI o NIE. El problema llega justo después porque la proximidad a la línea siguiente y la gran separación con el elemento de la derecha de la misma línea nos hacen pensar que estamos ante columnas y que por tanto hay que leer de arriba abajo.

Así pues, interpretamos que en la casilla siguiente será donde tengamos que escribir nuestro número de DNI. No es así, y de hecho, el texto dice “Número de afiliación” y la afiliación es un término que en España se suele usar para el número de la seguridad social y no para el DNI, pero un alto porcentaje de usuarios -como me ocurrió a mí- se dejará llevar por la lógica visual que es la que predomina en internet y tecleará aquí su DNI o su NIE. Al terminar de rellenar los campos y pulsar en “Aceptar” el programa le dará error porque el lugar en el que se debe escribir el número de documento está a la derecha (¡muy a la derecha!) y no debajo de “Tipo de documento”. El mensaje de error tampoco sacará de dudas al usuario porque que se trata de un texto genérico y ambiguo.

 

Aviso de error en los datos de la vida laboral

Mensaje de error en los datos de la vida laboral

Y, así, el usuario pensará que el problema es que los datos introducidos no coinciden con los que tiene la Seguridad Social y no que ha rellenado los campos en el orden inverso. El sistema lanza otro mensaje de error cuando falta algún dato, pero esto tampoco le aclara nada al usuario.

 

error_acceso_vida_laboral_incompleto

La mejor forma de evitar esta confusión sería ubicar “Número de documento” debajo de “Tipo de documento” para seguir un orden lógico y no separar en dos columnas diferentes elementos relacionados. Otra opción posible aunque menos limpia sería conservar la disposición actual y añadir un paréntesis detrás de “Número de afiliación” con el texto: “seguridad social o tarjeta sanitaria” e insertar otro paréntesis después de “Número de documento” con el texto: “DNI/NIE”. La primera solución es mucho mejor porque resulta más breve y más clara.

 

Para saber más sobre usabilidad y diseño web.