Este principio b\u00e1sico se refiere, por lo tanto, a hacer visibles las partes relevantes del dise\u00f1o, haciendo evidentes las caracter\u00edsticas o elementos relacionados con el modelo mental sobre el que se ha construido.<\/p>\n
Los problemas aparecen cuando no podemos \u00abver\u00bb c\u00f3mo utilizar un elemento, como es el caso de los grifos que incorporan sensores invisibles. En algunas ocasiones han sido reemplazados por pomos est\u00e1ndares, esferas o botones que permiten reconocer claramente c\u00f3mo utilizarlos.<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_61.jpg\")
Grifos con sensor
Fuente: Wikimedia.<\/p><\/div>\n
Nuestro cerebro va dando forma a las experiencias con las que interact\u00faa a trav\u00e9s de est\u00edmulos en su entorno, pregunt\u00e1ndose: \u00bfqu\u00e9 es esto?, \u00bfqu\u00e9 significa?, \u00bfpara qu\u00e9 sirve? Y mientras se realiza este proceso de inspecci\u00f3n, es necesario un impulso que invite a la acci\u00f3n y sea f\u00e1cil de entender. Los usuarios deben ser capaces de percibir f\u00e1cilmente que existe una oportunidad para interaccionar, y predecir razonablemente cu\u00e1l ser\u00e1 el resultado de esa interacci\u00f3n.<\/p>\n
En nuestro d\u00eda a d\u00eda, estamos continuamente rodeados de sistemas que nos ofrecen alg\u00fan tipo de informaci\u00f3n a trav\u00e9s del principio de visibilidad. Un letrero con forma de rombo nos comunica el acceso a una parada de metro, una se\u00f1al triangular un pr\u00f3ximo paso de cebra, una figura de una pila nos indica cu\u00e1nta bater\u00eda queda en nuestro tel\u00e9fono m\u00f3vil.<\/p>\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_62.jpg\")
Ejemplos de sistemas que utilizan la visibilidad para ofrecer informaci\u00f3n
Fuente: Wikimedia.<\/p><\/div>\n
Seg\u00fan Rogers, en el \u00e1mbito digital la visibilidad tiene un papel fundamental dentro de los principios b\u00e1sicos de dise\u00f1o de interacci\u00f3n junto con los de retroacci\u00f3n, limitaciones, consistencia y affordance<\/em>, con los cuales convive para conseguir que un producto sea realmente usable. La visibilidad se refiere a la exposici\u00f3n de las caracter\u00edsticas principales de un dise\u00f1o, y la clave es mantener estas caracter\u00edsticas en mente a medida que se dise\u00f1a, para asegurarse de que sean muy visibles. La visibilidad parte de la premisa de que todos los elementos interactivos deben hacerse visibles (si bien presentar un gran conjunto de ellos puede tener un efecto contraproducente), y deben brindar al usuario informaci\u00f3n sobre c\u00f3mo actuar en determinadas circunstancias.<\/p>\n Vincent Flanders, conocido experto en el mundo del dise\u00f1o web, destaca la importancia de la visibilidad y primera impresi\u00f3n de un website<\/em> o aplicaci\u00f3n. La mayor\u00eda de los websites<\/em> disponen de menos de 10 segundos para atraer al visitante, y si no lo logran, el resultado es claro: el visitante abandona la p\u00e1gina. Incluso en el caso que se quede, el promedio de la visita es, en el mejor de los casos, de no m\u00e1s de 2 minutos. Si el visitante no encuentra lo que quiere en esa franja de tiempo, se marchar\u00e1.<\/p>\n El principio de visibilidad<\/strong> sugiere que la usabilidad y la capacidad de aprendizaje mejoran cuando el usuario puede ver f\u00e1cilmente qu\u00e9 comandos y opciones est\u00e1n disponibles. Los controles deben hacerse claramente visibles, y deben colocarse donde los usuarios esperan que est\u00e9n. Colocar elementos de interacci\u00f3n en lugares inesperados equivale a ocultarlos.<\/p>\n Un elemento que no tiene una representaci\u00f3n visual puede ser dif\u00edcil de descubrir y encontrar. Por ejemplo, los atajos de teclado ahorran tiempo a los usuarios expertos, pero cuando un atajo de teclado es la \u00fanica forma de activar un comando, los usuarios inexpertos no lo descubrir\u00e1n, excepto por accidente o leyendo la documentaci\u00f3n de referencia.<\/p>\n El principio de visibilidad no necesariamente debe interpretarse en el sentido de que cada funci\u00f3n posible debe tener un bot\u00f3n llamativo en la pantalla; en una aplicaci\u00f3n con cierta complejidad, habr\u00eda tantos botones que la pantalla estar\u00eda repleta de objetos, y ser\u00eda muy dif\u00edcil encontrar la opci\u00f3n deseada. Una buena pr\u00e1ctica consiste en jerarquizar correctamente las opciones, como se ver\u00e1 m\u00e1s adelante en el ejemplo de un men\u00fa.<\/p>\n En dise\u00f1o web, la visibilidad del estado del sistema<\/strong> tiene como objetivo mantener a los usuarios informados de lo que est\u00e1 sucediendo, a trav\u00e9s de indicadores visuales. Los usuarios no deben verse obligados a adivinar qu\u00e9 est\u00e1 pasando o qu\u00e9 ocurrir\u00e1 al realizar una acci\u00f3n. De aqu\u00ed la importancia de que la visibilidad trabaje de la mano del principio de retroacci\u00f3n.<\/p>\n Ejemplo de indicador de progreso El usuario, al fin y al cabo, desea tener el control y confiar en que el sistema se comporte como se espera. Incluso se puede decir que a los usuarios finales no les gusta que aparezcan sorpresas o comportamientos fuera de lo com\u00fan, a no ser que est\u00e9n en un entorno de juego o experimental.<\/p>\n Dentro de la visibilidad del estado del sistema, la respuesta puede ser discreta para informaciones frecuentes, mientras que las informaciones poco frecuentes e importantes deben ser m\u00e1s m\u00e1s evidentes.<\/p>\n Cada vez que los usuarios interaccionan con un sistema, deber\u00edan saber el resultado de la interacci\u00f3n que acaban de realizar y evitar realizarse preguntas como: \u00bfel sistema ha recibido el clic en el bot\u00f3n o lo ha ignorado?, \u00bfse ha a\u00f1adido el art\u00edculo al carrito?, \u00bfel pago se ha realizado correctamente? La retroacci\u00f3n apropiada para una acci\u00f3n determinada es el principio m\u00e1s b\u00e1sico de los que se definen en el dise\u00f1o de interacci\u00f3n, y se complementa con la visibilidad de una acci\u00f3n concreta para mantener a los usuarios informados, y permitirles dirigir la interacci\u00f3n en la direcci\u00f3n correcta.<\/p>\n En el formulario de la siguiente figura se puede comprobar c\u00f3mo, en primera instancia, el principio de visibilidad se centra en el bot\u00f3n \u00abReg\u00edstrate\u00bb situado en la parte inferior. Al pasar por los campos obligatorios, el principio de retroacci\u00f3n se integra con el de visibilidad a trav\u00e9s de etiquetas, iconos y bordes de colores llamativos.<\/p>\n Ejemplo de visibilidad y feedback<\/em> en formularios de Facebook La retroacci\u00f3n puede ser tan simple como un cambio de color cuando el usuario ha hecho clic en un bot\u00f3n, o un indicador de progreso como el comentado anteriormente. Estas se\u00f1ales visuales comunican que el sistema est\u00e1 funcionando y reducen la incertidumbre, lo que evita que los usuarios, por ejemplo, toquen el mismo bot\u00f3n varias veces porque no est\u00e1n seguros de que la primera vez haya funcionado.<\/p>\n El principio de visibilidad es f\u00e1cil de implementar, si bien los dise\u00f1adores a\u00fan cometen errores al intentar aplicarlo de forma correcta.<\/p>\n La visibilidad en un tel\u00e9fono m\u00f3vil tiene especial consideraci\u00f3n debido a las caracter\u00edsticas f\u00edsicas de este dispositivo (espacio reducido para mostrar la informaci\u00f3n), as\u00ed como a la forma en que los usuarios interaccionan con \u00e9l (de manera m\u00e1s r\u00e1pida y directa que en los ordenadores). Un ejemplo de pr\u00e1ctica pol\u00e9mica en lo que a visibilidad se refiere son los men\u00fas tipo \u00abhamburguesa\u00bb, que permiten reunir diversos elementos de men\u00fa, pero tienen la desventaja de falta de visibilidad de estos elementos.<\/p>\n Icono men\u00fa \u00abhamburguesa\u00bb y ejemplo de men\u00fa desplegado Con el objetivo de dar m\u00e1s visibilidad a aquellos contenidos que m\u00e1s interesan al usuario, este dise\u00f1o puede combinarse con el de men\u00fa de pesta\u00f1as. Un ejemplo de esta soluci\u00f3n son las conocidas tab bar<\/em>, como la de la figura 6, que destaca las funcionalidades clave de la aplicaci\u00f3n, reservando el men\u00fa de hamburguesa para opciones de uso menos frecuente.<\/p>\n Ejemplo del uso de tab bar<\/em> El tab bar<\/em> es una fila de botones persistentemente visibles, generalmente en la parte inferior de la pantalla del m\u00f3vil. En lugar de ocultar estas opciones de navegaci\u00f3n, se muestran constantemente al usuario. Esto evita que el usuario olvide estas opciones, est\u00e1n disponibles con un solo toque, permiten un cambio r\u00e1pido de apartado sin necesidad de volver a la pantalla de inicio, y pueden mostrar notificaciones. La clave para aplicar correctamente este principio reside en darse cuenta de que no es posible hacer que todo sea visible, ya que en \u00faltima instancia saturar\u00eda la interfaz; se debe analizar qu\u00e9 elementos de la interfaz son los m\u00e1s importantes para la experiencia del usuario, y priorizar su visibilidad.<\/p>\n En los programas inform\u00e1ticos orientados al procesamiento de texto, la visibilidad est\u00e1 implementada de forma clara en dos casos concretos. Por un lado, en la barra superior donde se exponen las funciones m\u00e1s usadas agrupadas seg\u00fan su categor\u00eda (men\u00fa principal). Por el otro, al pulsar el bot\u00f3n derecho se muestran las funciones m\u00e1s relevantes para interaccionar con el texto escrito (men\u00fa contextual).<\/p>\n Procesador de texto Microsoft Word Otro ejemplo es el gestor de correo Gmail. De un r\u00e1pido vistazo puede percibirse el elemento que m\u00e1s destaca en toda la pantalla: el bot\u00f3n de \u00abRedactar\u00bb de la parte superior izquierda. Gmail ofrece muchas funciones, pero, al fin y al cabo, est\u00e1 principalmente dise\u00f1ado para poder redactar y enviar correos electr\u00f3nicos. El bot\u00f3n \u00abRedactar\u00bb destaca sobre los dem\u00e1s por su tama\u00f1o, su ubicaci\u00f3n prominente y su color, que contrasta con la gama crom\u00e1tica del resto de p\u00e1gina. Los usuarios pueden encontrar esta opci\u00f3n sin esfuerzo y de manera intuitiva.<\/p>\n Bandeja de entrada correo electr\u00f3nico Gmail Flanders, V.; Willis, M.<\/strong> (1998). Web pages that suck: Learn good design by looking at bad design<\/em>. SYBEX Inc.<\/p>\nAplicaci\u00f3n<\/h2>\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_63.jpg\")
Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_64.jpg\")
Fuente: elaboraci\u00f3n propia.<\/p><\/div>\nEjemplos<\/h2>\n
![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_65.jpg\")
Fuente: Wikimedia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_66.jpg\")
Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_67.jpg\")
Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n![\"\"](\"\/wp-content\/uploads\/2020\/12\/75590_68.jpg\")
Fuente: elaboraci\u00f3n propia.<\/p><\/div>\nReferencias<\/h2>\n