Centros MEC Rocha, Ministerio de Educación y Cultura
Av. Julio J. Martínez esq. Av. Agraciada, ciudad de Rocha, Uruguay. centrosmecrocha@gmail.com - 44724634 .- Un espacio para intercambiar ideas y compartir nuestras actividades.
Nuestro inconsciente mantiene un proceso permanente de monitoreo de seguridad de nuestro entorno. El proceso básico se puede resumir en que de acuerdo a los estímulos que recibe en un instante, prevé los que va a recibir unos instantes después. Si esta predicción se confirma, se mantiene el equilibrio y todo continúa sin cambios.
Cuando detecta una diferencia, siempre a nivel inconsciente, evalúa su magnitud y determina su grado de peligrosidad. Si la considera baja pueden pasar dos cosas: la descarta o la resuelve también a nivel inconsciente. Si no es así, lo pasa a nuestra consciencia y "nos damos cuenta" de que algo sucedió o cambió.
El costo de romper el equilibrio
Romper el equilibrio siempre tiene costo, por lo que una interfaz de calidad debe hacerlo solamente cuando tiene un buen motivo para hacerlo.
Si el desequilibrio generado es importante, siempre asumiendo que no hay una justificación clara para ello, el resultado es una interrupción o un corte en el flujo de atención significativo y consciente para el usuario. Esto es fácil de notar porque somos conscientes (perdón por la redundancia) cuando nos ocurre en carne propia.
Los mensajes de error que abren en popups son la mayoría de las veces quiebres al equilibrio tan fuertes como innecesarios.
Si el desequilibrio es menor y no llegamos a notarlo conscientemente, ya es otra cosa. Naturalmente que uno o dos pequeños desequilibrios no son un problema, pero cuando se suceden uno tras otro mantienen a nuestro cerebro entretenido generando una molestia que no sabemos bien de dónde viene. Es como cuando estamos en una habitación que nos incomoda pero no podemos decir por qué.
El pulido de todos y cada uno de los detalles que producen desequilibrios menores diferencia a las interfaces buenas de las excelentes.
Cómo mantener el equilibrio
Alinear
Nuestro inconsciente asocia desequilibrio con problema de seguirdad, y es razonable por tanto que sea incapaz de detener el proceso que lo monitorea. Cada pixel fuera de lugar, cada campo fuera de linea, cada texto mal alineado, también verticalmente, es analizado por nuestro cerebro, en esta pantalla primero y en la siguiente otra vez.
Reducir la cantidad de lineas imaginarias que parte de cada elemento, reduce la cantidad de validaciones que nuestro cerebro realiza
En el diseño profesional y de calidad todos los elementos de la pantalla están perfectamente alineados, generando la menor cantidad de lineas imaginarias que parten de los extremos de cada elemento en forma horizontal o vertical.
El problema de alineación del cuadro pequeño con el grande es imposible de pasar por alto, lo mismo que la diferencia entre rojos en la barra horizontal y otros detalles
Un diseñador experiente coloca las cosas exactamente en su lugar cuando las coloca por primera vez, hace las cosas bien de primera, y por tanto sus diseños tienen alineación perfecta al 100%.
Ser estándar
Una de las formas de predecir, tal vez la más universal, es que todo se va a comportar "como siempre". Por tanto, para cumplir con la predicción y mantener el equilibrio hay que hacer las cosas "como siempre" y eso no es otra cosa que respetar al máximo los estándares: los formales y los de facto.
Evitar las estridencias
Todo lo que es estridente, en el sentido que tiene se diferencia fuertemente de su contexto genera desequilibrios. Como siempre: si entendemos por qué debe ser así y qué gana el usuario, o nuestro cliente como en el caso de un PopUp publicitario, adelante.
Pero en el diseño de la interacción la originalidad y la estridencia per se no pagan.
Cumplir las promesas
Cada link, cada botón, cada etiqueta en un flujo de interacción tiene implícita una promesa de qué sucederá al clickearlo, completarlo o arrastrarlo. Esas promesas son detectadas muy fácilmente por los usuarios, inclusive si se transmiten por pistas muy sutiles, esas que los usuarios aprendieron en las decenas de miles de pantallas con las que interactuaron antes de llegar a la nuestra.
Incumplir las promesas genera desequilibrios, grandes y pequeños. Una interacción que rompe todo el tiempo las promesas, por ejemplo usando muchos términos para el mismo concepto, por lo que hago click en el botón Dólares y aterrizo en Moneda Extranjera, no solo transforma un problema Leo y Entiendo en un problema Pienso y Entiendo, lo hace generando además una molestia innecesaria al usuario.
El feedbak permite proveer información al usuario que sin interrumpir ni detener el flujo de trabajo lo dota de una percepción panorámica de que todo está bajo control. Algo deseable y tal vez mandatorio para una interfaz de uso diario.
El foco principal del diseño de la interacción está en el diálogo entre la interfaz y el usuario en el que se resuelve el corazón de la tarea: cómo recibir la información que el usuario brinda y cómo responder a ella, para que el ciclo comience nuevamente.
Si la interfaz es de uso esporádico o de único uso, como la liquidación anual de impuestos o el trámite jubilatorio, esto es suficiente. Pero si la interfaz es de uso diario, con una curva de aprendizaje, es deseable y conveniente complementar este diálogo con pistas y mecanismos de retroalimentación, para lo que universalmente se utiliza la palabra en inglés feedback.
Retroalimentar sin interrumpir
A diferencia de las pantallas y diálogos centrales de la interfaz, la retroalimentación se compone siempre un conjunto de pistas visuales y sonoras discretas que no se interponen en el flujo central de interacción.
Los usuarios habitualmente no las notan ni en el primer uso ni en el siguiente, sino que las van descubriendo a medida que se familiarizan y se vuelven cada vez más productivos con la herramienta y su interfaz. La técnica de diseño que dota a la interfaz de esta habilidad se denomina descubrimiento progresivo (progresive disclosure) y es una característica deseable de una buena interfaz para uso prolongado.
Los navegadores incorporaron hace un par de años un ícono que indica si la página emite sonido, que permite además eliminarlo
Retroalimentación positiva
Además de anunciar el resultado de operaciones, la retroalimentación puede dar una pista certera de que todo está funcionando bien, que la situación está bajo control. Esta idea, introducida por Alan Cooper en su libro About Face bajo la denominación de Positve Feedback, ha permeado el diseño y es hoy obligatoria en una interfaz pensada para el uso diaro y el largo plazo.
La barra de estado de un sistema operativo es un ejemplo ya clásico. Lo que comenzó como un mecanismo de acceso, se ha poblado de pequeños indicadores de las cosas que están sucediendo en el sistema. La descarga de archivos, la batería, las comunicaciones, todo se transmite con imágenes sutiles y sonidos ocasionales.
Los indicadores de carga de batería proporcionan una información completa en un espacio muy pequeño.
Lo importante de la retroalimentación positiva, además de ser sutil y no interponerse en el flujo de la tarea, es que se comporte siempre exactamente de la misma forma, de modo de que el usuario aprenda a reconocerla con el uso continuado, y gane con ello una visión periférica de la interfaz donde los indicadores de avance le muestran que está todo bajo control
Las descargas de archivos se muestran de múltiples formas con retroalimentación positiva.
Feedback en los formularios
Una pregunta que recibimos a menudo es si utilizar este tipo de herramienta en los formularios, retroalimentando a los usuarios campo a campo.
Hay formularios de uso diario y repetido y formularios de uso ocasional o de única vez, por lo que la respuesta es necesariamente mixta: por un lado, la retroalimentación bien hecha es siempre positiva, por otro un formulario es el flujo principal de una tarea y el riesgo de interponerse en medio es muy alto.
Tres enfoques distintos de retroalimentación. Facebook lo hace en algunos campos, solo con color, Twitter lo maneja como errores y Microsoft pide los datos campo a campo, para dar los errores uno por uno.
La recomendación por tanto es garantizar que sea realmente muy sutil, tanto si es positivo como si es para marcar errores y que jamás impida continuar con el formulario incluyendo la posibilidad de llenar cualquier otro campo aunque el actual tenga errores, salvo que uno dependa del otro. Una opción intermedia es hacerlo solo en algunos campos muy relevantes o con alta probabilidad de error.
Para interactuar con el mundo que nos rodea, nuestro cerebro separa lo que percibe en frente y fondo. Le presta atención al frente y descarta lo que está en el fondo. El diseño debe tomar en cuenta este mecanismo cognitivo.
Nuestro cerebro separa lo que percibimos en dos: por un lado la información relevante, que trae al frente y por otro la información irrelevante, que envía al fondo. Cuando un usuario se enfrenta a una interfaz, su aparato cognitivo va a realizar automáticamente, de forma inconsciente, la tarea de separar frente y fondo con cada pantalla, cada cuadro, cada diálogo.
El buen diseño toma en cuenta este fenómeno y genera las pistas visuales que le permitan al usuario realizar esta tarea sin complicaciones, garantizando que la información que queda en el frente es la relevante. Describiremos a continuación cómo funciona el mecanismo cognitivo que separa el frente y el fondo, para luego enumerar las pautas de diseño que esto implica.
El uso del azul para texto, viñetas, decoración, fondo, recuadros y decoración impide al cerebro determinar qué está en el frente y qué está en el fondo. A partir de 2017, el problema fue corregido.
Cómo separamos el frente del fondo
Cuando un usuario se enfrenta a una pantalla, o para ser más exactos a un conjunto de estímulos, lo primero que hace su cerebro es separar en frente y fondo lo que está viendo. Este es un fenómeno inconsciente y casi instantáneo, que demora en el entorno de una décima de segundo.
En el momento en que el usuario percibe conscientemente la interfaz, una o dos décimas de segundo después de haber recibido en sus sensores el impacto de los estímulos, en lo que percibe ya está definido qué está en el frente y qué está en el fondo. Lo que quedó en el frente va a recibir la atención y lo que quedó en el fondo en su mayoría absoluta va a ser descartado sin más trámite.
El proceso mental por el que el usuario separa lo que percibe en frente y fondo no se puede ni detener ni evitar, es un mecanismo que se generó en la evolución que nos permite a los humanos lidiar eficientemente con el entorno complejo que nos rodea. En la naturaleza de hace 25.000 años, el mecanismo funcionaba a la perfección: lo grande, lo ruidoso, lo que se mueve, lo estridente en cualquier forma va al frente. Por eso nuestros depredadores intentan siempre ser silenciosos y mimetizarse con los colores del fondo.
En las interfaces que diseñamos no ocurre lo mismo que en la naturaleza, nosotros tenemos que crear artificialmente la jerarquía para que lo más relevante quede en el frente y lo intrascendente en el fondo.
Durante años la página principal de chileatiende.gob.cl utilizó un hermoso fondo de la cordillera chilena, tan potente que hacía extremadamente difícil entender qué está en el frente y qué está en el fondo. En setiembre de 2020 el problema está resuelto.
Recomendaciones de diseño
Las recomendaciones de diseño para separar correctamente el frente y el fondo son muy sencillas.
Utilice colores (o espacios cromáticos) bien separados para el frente y el fondo. Dicho sencillo: elija un fondo claro y un frente oscuro o al revés, pero nunca mezcle los colores de uno y otro.
Mantenga muy baja la jerarquía visual de los elementos del fondo. Muchas veces el fondo incluye imágenes, guardas, tramas y otros elementos decorativos. Tenga un cuidado especial en que estos elementos no destaquen por sí solos, de modo de que nunca pasen al frente y mantengan su rol decorativo.
En el sitio del ministerio de Desarrollo Social y Familia de Chile, las imágenes de fondo compiten con las del frente en jerarquía, impidiendo generar un frente y un fondo a nivel miro y entiendo (se mantiene igual a setiembre de 2020).
Agrupe los elementos del frente en pocos grupos: recuerde que los humanos podemos percibir y atender hasta 4 grupos a nivel miro y entiendo. Preocúpese de que los elementos que integran el frente estén nítidamente agrupados en una cantidad de grupos pequeña, si fuera posible uno solo.
No aplique texto sobre imágenes, salvo que las diseñe especialmente. La legibilidad es una de las víctimas más comunes de los problemas entre frente y fondo, en particular cuando el texto se encuentra sobre imágenes. En este caso debe haber un cuidado caso a caso de que el texto se mantiene legible, evitando los textos que se muestran automáticamente sobre imágenes de fondo.
___
Si tiene un tema sobre el que le gustaría que escribiéramos o algún otro comentario, no dude en escribirnos a capacitacion@concreta.uy
El formulario es el rey absoluto de la interacción. La variedad y las posibilidades son infinitas, pero el buen diseño tiene siempre un denominador común: entender correctamente el funcionamiento de los campos básicos y elementales.
Un formulario está compuesto de múltiples elementos, que en muchos casos llegan a decenas. Dentro de esta colección, los campos destacan como uno de los componentes sustanciales, ya que es allí que el usuario va a ingresar sus datos. Para diseñar buenos formularios, el punto de partida es conocer los campos más elementales: el campo de texto, los radio-buttons, los check-boxes y los descolgables y combo-boxes. Los recorreremos uno a uno.
El campo de texto
Un campo de texto es un área de la pantalla en el que el usuario puede ingresar texto libremente, y en algunos casos inclusive darle formato: negritas, listas, títulos y otros. Dejaremos los campos de texto más sofisticados para otra oportunidad y nos concentraremos en el básico: el campo de una linea de texto.
Un campo de texto debe obligatoriamente tener todas las propiedades de un campo de este tipo en HTML: escribir, copiar, cortar, editar, arrastrar, pegar, etc. con la única excepción de los casos en los que la seguridad imponga restricciones. No importa cuan bonito luzca el campo de su nueva biblioteca Javascript o de su herramienta de creación de Apps, si no cumple con esta regla, no está a la altura de los acontecimientos.
Es deseable que los campos de texto tengan tamaños similares, inclusive si la cantidad de texto a introducir no es la misma. Si hay mucha variación, elegir dos o a lo sumo tres largos, pero dar a cada campo un largo distinto da una impresión de desorden.
Los campos deben tener un largo similar, inclusive al costo de no reflejar correctamente el tamaño del contenido
Las etiquetas pueden ir a la izquierda del campo, alineadas a uno u otro lado. También pueden ir arriba, en particular en móviles es la ubicación recomendada, cuidando que la etiqueta esté mas cerca del capo de abajo que del de arriba, para evitar el Mal de Lucas, pero nunca deben ir dentro del campo, porque cuando se completa el formulario desaparecen, transformando un problema leo y entiendo en un problema pienso y entiendo.
En móvil las etiquetas van arriba del campo, pero nunca dentro del campo.
Por último, en este breve raconto, el valor del campo es siempre más importante que la etiqueta, por lo que si el tipo de letra de uno y de otro es distinto, debe estar más resaltado el contenido. Es muy frecuente encontrar etiquetas en negrita y campos con texto pleno, lo que es un error.
Lo importante es el dato: siempre que el tamaño y tipo de letra de etiqueta y campo sean distintos, el más destacado debe ser el del contenido
Los Radio Buttons
Los radio buttons se utilizan para seleccionar entre múltiples opciones excluyentes entre sí, es decir, el usuario solo puede elegir una de ellas a la vez. Si debe existir la posibilidad de no seleccionar ninguna, entonces es necesario agregar una opción del tipo "ninguna de las anteriores", ya que una vez que se clickea el primer radio button, no es posible volver atrás.
La etiqueta va como la de cualquier campo, alineada con la primera opción. Los radio buttons van alineados uno debajo del otro y la etiqueta de cada uno de ellos a su derecha. Otras opciones no solo no son estándar, sino que producen confusión, en particular la de ponerlos todos en una línea porque cuando el radio button queda en el medio de dos etiquetas, es difícil saber cuál de las dos es la seleccionada.
Los Radio Buttons van uno debajo del otro, con la etiqueta a la derecha. La ubicación de los check boxes es idéntica
Check Boxes
Los check boxes se utilizan, al igual que los radio buttons, para seleccionar entre múltiples opciones pero cuando el usuario puede seleccionar más de una opción de la lista, incluyendo los casos en que las selecciona todas o ninguna.
Su presentación en la pantalla es idéntica a la de los radio buttons, con la excepción de que nunca va una opción del tipo "ninguno de los anteriores", porque los check boxes se pueden seleccionar y deseleccionar todas las veces que sea necesario.
Es un error común transformarlos en radio buttons vía javascript, haciendo que al seleccionar un check box se deshabiliten los otros. Si este es el comportamiento adecuado, entonces lo que se necesitan son radio buttons.
Listas descolgables y combo boxes.
La lista descolgable cumple la misma función que los radio buttons y los check boxes, en un espacio más reducido, por lo que tiene la ventaja de permitir la selección entre muchas opciones, pero la contra de que la mayoría de las opciones, o eventualmente todas menos una quedan ocultas, lo que hace más dificultoso su uso.
En HTML las listas descolgables siempre permiten avanzar en la lista digitando, lo que permite un funcionamiento de campo de texto limitado a una serie de opciones, por lo que se los denomina "combo box", una caja que combina un campo de texto y una lista descolgable. También en HTML se puede configurar para que se muestre una parte de la lista, pero en general esto tiene problemas con el ancho de los textos y es una opción de uso poco frecuente.
Dos ejemplos de combo boxes en HTML, el segundo no es muy frecuente encontrarlo.
Las listas de selección múltiple requieren hacer click con la tecla Control presionada, algo que no solo es poco conocido, sino que no tiene un análogo razonable en móviles, por lo que es fuertemente desaconsejado. Por último, no abuse de las listas y combo boxes, si bien son sencillos de usar, los radio buttons y los check boxes son siempre más sencillos y muchas veces ahorrar unos renglones de pantalla no es una ganancia que justifique el cambio.
