Lo estás haciendo mal

Todos recordarán el antennagate, cuando el diseño de antena exterior del iPhone 4 mostró un pequeño fallo: el usuario era capaz de puentear las antenas con su mano al agarrarlo, degradando la recepción hasta el punto de no tener señal en algunas ocasiones. El problema era gordo, aunque también es cierto que tampoco era para empezar la tercera guerra mundial como muchos quisieron hacer. Yo mismo he tenido el iPhone 4 y el fallo se convertía en problema básicamente en zonas de baja recepción; no quito peso al fallo, pero si a la publicidad que se le hizo.

Pero vayamos a lo que interesa, lo que dijo Steve Jobs al respecto: “Lo estás agarrando mal”. El meollo del asunto no fue que hubiera un error en el diseño, sino la gestión que se hizo del problema desde la empresa: ga-rra-fal.

Hace unos meses se hizo viral un vídeo (así como sus clones) titulado “10 cosas que estabas haciendo mal”. El vídeo en cuestión pertenece a un canal de hackings (trucos caseros), la gran mayoría muy útiles, por cierto.

Puse el ejemplo del iPhone 4 antes porque uno de esos “trucos” básicamente dice lo mismo: estás agarrando mal el brick. A todos nos ha pasado que salpicamos todo cuando se vierte la leche o el zumo desde un brick. Esto se debe a la turbulencia creada cuando el aire que entra en el envase se encuentra de frente con el líquido que sale. A continuación se puede ver el truco propuesto para evitar ese problema.

En resumen, se propone girar el envase de forma que el agujero de salida quede arriba en lugar de abajo (donde todo el mundo lo usa), permitiendo que el aire entre libremente sin crear turbulencia.

El problema está que esto no es un fallo de uso de parte del consumidor, que lógicamente pone la boca del envase lo más cerca posible del recipiente para maximizar la puntería (con la boca puesta como en el truco se hace más difícil acertar). El problema está en el diseño del envase que prioriza otros factores como volumen óptimo y almacenamiento frente a su uso, dejando como única salida el poner la boquilla en un lugar tan poco apto.

No es que “lo estés agarrando mal”, es que está mal diseñado. No es culpa del consumidor sino del fabricante. Y el vídeo no hace sino acentuar esa percepción de “inutilidad” del usuario al llamarlo algo que “estabas haciendo mal” en lugar de llamarlo un simple truco para compensar el fallo de diseño.

Esto ocurre en muchos otros ámbitos, incluido el mío profesional (programación). Creemos que es el usuario el que lo hace mal (aunque no faltan ejemplos) cuando nuestro trabajo, en su clímax, ¡es lograr que el usuario lo haga bien sin tener que explicárselo! Ya lo dice Jony Ive (CDO de Apple): “Pienso que nuestra meta es que tengas la sensación de que no hay diseño”, de que las cosas funcionan y ya, de que son intuitivas, de que tenían que ser así.

En este sentido me gustaría mostrar dos envases de los que compramos en casa. El de la derecha es el típico brick tetraédrico con la boquilla en una esquina (y su consiguiente turbulencia y derrame). El de la izquierda es de otra marca donde han querido evitar ese problema con un diseño mejorado: la forma en pico de la parte superior hace que la boquilla quede por encima del líquido durante el vertido, facilitando la entrada del aire y eliminando la turbulencia. Para evitar que la pérdida de resistencia colapse el envase al apilarlos, se agregó un tabique de cartón en el medio de los empaques de 6 unidades para absorber parte del peso. En términos de coste no sé cómo afectará, pero no es el producto más caro de su género y creo que han llegado a una solución más que buena.

El tamaño importa sólo si se ve bien

Es en momentos como éste cuando yo pienso que el que propuso la idea, el que la diseñó, el que la codificó yel que diseñó los gráficos no se pusieron de acuerdo en ningún momento y se transmitieron todo a base de post-its. Y para rematar, el que validó esos casos de uso derramó su café sobre la lista de tareas y no vio que faltaba algo.

¿De qué hablo? De la opción “Large icons” de la barra de herramientas. Una imagen dice más que mil palabras.

Por favor, no cuesta mucho diseñar dos iconos, o renderizar dos en caso de hacerlos en vectorial, pero ¿por qué tiene que verse así un producto final que cuesta no precisamente 2 euros?

La opción como tal puede que tenga sentido (de hecho, conozco mucha gente que debería usarla, así sea para que el icono grite “¡estoy acá, estoy acá!”), pero si se hacen las cosas hay que tratar de hacerlas bien: esto es un vulgar escalado que queda mal, daña la estética de todo el producto. Es como comprar un Audi A5 y ver que las alfombras del coche están protegidas con papel de periódico. Simplemente ¡no!

En interfaces de usuario el buen gusto es muy importante, y muchos me dirán que eso cae dentro de lo opinable: sí y no. Sí porque a mí el arte moderno no me gusta tanto como el clásico y otros pueden opinar contrario. Pero por otro lado el buen gusto implica un mínimo de cosas, y el cuidar los detalles es una de ellas. Especialmente cuando el detalle es grande, como esos iconos poco definidos y, “opinión”, espantosos.

Sobre los gradientes…

Leí hace unos pocos días un artículo (enlace) sobre las consecuencias del ruido en una señal. En general, pensamos que el ruido es malo, pero este artículo me iluminó en que también se puede sacar provecho de él y me puso a pensar acerca de algo muy de moda ahora en el mundo del diseño gráfico. ¿Y en qué consiste, esto a lo que me he atrevido a llamar “gradientes texturizados”? Pues en agregar un poco de ruido blanco a una imagen que, obviamente, es un gradiente.

Al principio pensaba que era una especie de alternativa al vintage que reina en muchos lugares, pero leyendo este artículo me di cuenta de que además podía tener una razón científica. No sé si haya sido una técnica pensada, o más bien que los diseñadores la han descubierto por ensayo y error, pero el asunto es que funciona, se ve bien y la usan en muchos lugares, por ejemplo Facebook en sus aplicaciones móbiles:

Facebook

Si han seguido el enlace del artículo que les comenté antes, habrán visto que el ruido “disimula” la falta de precisión en la profundidad de color, es decir, se disimulan los saltos entre dos tonos “consecutivos” que, por baja calidad, están realmente muy distantes.

Por otra parte, cuando se hacen gradientes (y creo que todos hemos vivido eso), hay veces donde “se notan” los saltos, especialmente si el gradiente es circular, si los colores son oscuros, si los tonos con los que se hace el gradiente son parecidos o si el salto es muy brusco. A este fenómeno se le denomina posterización.

Pues bien, agregando un poco de ruido blanco (muy poco, menos de 1% suele ser suficiente) se disimula dicha pérdida, permitiendo al diseñador crear gradientes suaves y sutiles sin comprometer la calidad de su trabajo. En castellano este efecto se conoce como “tramado” (dithering en inglés, Wikipedia). Este mecanismo se usa en muchos otros lugares para crear más colores de los que realmente se dispone, tales como algunas impresoras y modos gráficos con poca profundidad de color.

Para concluir el post, les dejo dos imágenes para que comparen: la de la izquierda tiene únicamente el gradiente, mientras que la de la derecha se le ha aplicado un 0.6% de ruido). El efecto es muy sutil en este caso, puesto que he tratado de hacer un gradiente como el que usaría en un diseño real, y no uno especial para mostrar la diferencia, pero aún así es posible captar las líneas en el primero (especialmente hacia las esquinas inferiores), mientras que el segundo es bastante más difícil (por no decir imposible). La contrapartida de este efecto es que deja menos margen de maniobra a los algoritmos de compresión y las imágenes resultantes son más pesadas.