Trataré de explicar de la manera lo más sencilla posible 5 aspectos del diseño de interfaces (UI) que influyen mucho en la Usabilidad y Experiencia de usuario (UX) de un sitio web.
He dividido este artículo en 2 partes, primero explicar a groso modo la importancia del Diseño de Interfaces para los que quieran solo el resumen, y luego en detalle explicaré las 5 leyes que los creadores de Sistemas Operativos aplican a sus productos y que son el verdadero secreto de su éxito.
Si tu equipo de trabajo tiene que realizar el diseño de una interfaz de producto, sitio web o app, te recomiendo que preste atención a estos 5 principios de diseño, que existen incluso desde antes del Internet, y que son aplicados desde el diseño de la cabina de un avión, hasta el panel de control de centrales nucleares.
Comprender mejor cómo los usuarios interactúan con su producto o página web permite, le permitirá crear diseños enfocadas en generar más conversiones.
La importancia del UX/UI en la actualidad
El motivo por el que cada vez mas empresas contratan especialistas en estas áreas se debe a que actualmente ya nadie duda de el impacto que tiene el diseño de una interfaz en el éxito de una app o un software. Habiendo tantas opciones para elegir los usuarios se decidirán primero por aquello que les resulte mas fácil y práctico de usar.
La manera en la que empresas como Amazon, Apple, Microsoft, etc. diseñan la interfaz de sus productos, no es parte de un capricho de los programadores, si no que cada decisión, parte de un estudio previo del comportamiento humano, y a eso se debe en parte el éxito de sus productos.
Gracias a los avances de los SmartPhones Internet ahora forma parte de nuestra vida diaria, y nos vemos casi que obligados a interactuar con el mundo digital a diario. Este uso masivo de Internet y medios digitales a generado una gran cantidad de datos que ayuda a los equipos de desarrollo a mejorar la forma en la que nos relacionamos con el mundo digital.
Debido a estos avances los equipos de diseño de productos, pueden comprender cada vez más lo que funciona mejor con todos los usuarios y no como ocurría en el pasado que solo una parte de las personas (los que les gustaban las computadoras) eran los que se beneficiaban.
Es por este motivo que actualmente vemos como los sitios web han evolucionado de un diseño meramente estético, a uno más funcional donde es más importante convertir visitantes en ventas, que en generar impacto visual.
Los usuarios valoran más aquello que es más fácil de usar y que proporcione experiencias positivas.
Entre otros aspectos, el UX y UI también influyen en la CX (La experiencia del cliente), que se refiere a la relación de la empresa con el cliente en todas las etapas del proceso de compra.
¿Cómo aplicar estos principios en el Diseño Web?
Actualmente vemos que se ha dejado de utilizar animaciones complejas, las páginas web tienden a cargar mas rápido que antes y suelen tener un diseño más pensado en los usuarios móviles.
Tal vez haz notado que hay ciertas similitudes de diseño en la mayoría de los sitios web y no es por falta de creatividad, los botones redondeados, siempre el menú hamburguesa arriba y a la izquierda, el logotipo arriba a la derecha, tipografías menos decorativas, etc. Todo esto responde al diseño centrado en el usuario, es lo que más funciona, por tanto lo que genera más ventas.
Las 5 leyes que vamos a ver son:
- 🐘 Ley de Fitts: Componentes grandes y fáciles de señalar.
- 🎢 Ley de Steering: Elementos amplios y fáciles de recorrer.
- 🔢 Ley de Hick: Pocos elementos para optimizar el uso de memoria mental.
- 🍰 Ley de Miller: Dividir la interfaz en secciones para trabajar mejor.
- 🔁 Ley del Poder de la Práctica: Mientras más veces se haga una acción, más rápido se hará.
Algunas formas en las que podemos aplicar estas reglas en el diseño web podrían ser:
- ➔ Dividir el diseño en secciones.
- ➔ Ampliar el margen de los elementos seleccionables.
- ➔ Usar tipografías más legibles y textos más cortos.
- ➔ Utilizar colores y formas fácilmente reconocibles.
- ➔ Acciones por medio de iconos sencillos a la vista.
- ➔ Procesos rápidos y fáciles de recordar.
Bueno si ya llegaste a esta parte de la lectura y te interesa conocer el origen de todas estas conclusiones más en detalle, vamos a verlo.
1) Ley de Fitts
La Ley de Fitt, describe qué tan fácil es para una persona apuntar o señalar cosas. Mucha gente cuando estudia la Ley de Fitt piens que solo se trata de que las cosas más grandes son más fáciles de señalar que las pequeñas, lo que parece realmente obvio. Sin embargo, Paul Fitts se dio cuenta que la eficiencia en la transmisión la información depende de la cantidad de ruido que haya en el sistema, por lo que hay otros aspectos a tomar en cuenta.
Fitts era un investigador de la Fuerza Aérea de los Estados Unidos y alrededor de la década de 1950 trabajaba en el re-diseño de las cabinas de los aviones. Esto era una cuestión de vida o muerte para los pilotos, ya que si los botones e interruptores se colocaban en el lugar equivocado, resultaba difícil encontrar el botón, interruptor o la información correcta, para enderezar el avión o recuperarse de una maniobra peligrosa.
Paul llegó a la conclusión de que la información que va de nuestro cerebro a los músculos viaja a través de un canal, y que el cuerpo humano, nuestro sistema nervioso y los músculos son en realidad este ruido que se interpone en nuestro camino cuando tenemos que manipular el mundo real y pensar a la vez.
Fue así como descubrió que existía una relación entre:
- el ancho de la distancia del objetivo,
- la distancia entre los elementos
- y el tiempo.
Los usuarios quieren que las cosas sean lo más rápido posible
Según la ley de Fitts, reducir el tiempo al máximo posible, significa reducir la distancia, e incrementar el ancho del objetivo que deseamos alcanzar.
Muchas veces, cuando se trabaja con interfaces y elementos de menú debemos pensar hacia dónde se dirigirá principalmente el cursor, y si se moverá de arriba hacia abajo o se desplazará hacia arriba para llegar al objeto. O si se moverá de izquierda a derecha, y esto determina cómo cambiar el tamaño y dar forma a las cosas para que las personas puedan hacer clic en ellas con mayor facilidad.
La forma óptima de optimizar el tiempo en una interfaz, es tener una distancia cero entre el punto de partida y aquello a lo que queremos hacer clic, un ejemplo de ello son los menús contextuales.
La razón por la que los sistemas operativos (Windows, Mac, Linux) utilizan los menús contextuales es por lo super útiles y fáciles de usar que son. Cuando hacemos clic derecho, no tenemos que mover el mouse.
Todo lo que necesitamos está justo allí, es mucho más fácil llegar a ellas con un clic que tener que desplazarnos hasta el menú principal, presionar propiedades y luego regresar a dónde estábamos. Puedes ir directamente a lo que te interesa.
Las Esquinas de la Pantalla
Otro elemento interesante que encontramos en esta ley es que las esquinas de la pantalla son los lugares más fáciles para hacer clic en una interfaz.
Y es una de las razones por las que los sistemas operativos crean puntos de acceso y accesos directos en estos lugares, como el menú principal o los iconos de notificación.
Cuando tocas los bordes de un dispositivo móvil, esas esquinas activas, son los lugares más fáciles para acceder, y eso hace que sea realmente fácil de usar algunas funciones.
Palm era un sistema operativo móvil realmente innovador que, lamentablemente, no se hizo lo suficientemente popular, pero tenía todas estas ideas increíbles en su interfaz. Incluso dio origen a los Pocket PC que lamentablemente tampoco tuvieron mucha acogida.
Cuando accedemos a las notificaciones, o accedemos a las diferentes configuraciones para Bluetooth y WiFi que ahora vemos en los dispositivos móviles, son fáciles, gracias a la Ley de Fitts.
Señalar con el dedo es mucho más fácil y rápido que con el Mouse
Una investigación hecha en 1996 por Evan Graham y Christine Mackenzie, sobre la diferencia entre cómo pensamos acerca de señalar las cosas y cómo ese movimiento se describe realmente, determinó que el comportamiento de cómo las personas señalan y hacen clic, en realidad se divide en dos partes.
Hay un momento inicial de alta velocidad cuando estoy en un punto de reposo y voy al otro punto, cuando veo el objeto que necesito para hacer clic, me moveré muy rápido, muy rápido. Y luego cuando estoy por llegar viene una desaceleración. Esto es porque hay una corrección, de modo que a medida que me acerco al objeto, tengo que empezar a reducir la velocidad para poder hacer clic en él correctamente.
Esta es una de las razones por las que cuando señalamos cosas con nuestro dedo, es más rápido y fácil de hacer. Podemos controlar esa aceleración con mucho más detalle. Con un instrumento externo siempre será más difícil que hacer clic con nuestros dedos reales.
Resumen de la Ley de Fitts
La ley de Fitts pero es un tema bastante extenso del que podría seguir escribiendo, pero me falta explicar las otras 4, y mi idea es que puedas llegar al final de este post e irte con un nuevo conocimiento que te ayude a diseñar mejores interfaces, así que voy a saltar algunas explicaciones y dejarte las ideas que debemos considerar de ley de Fitts:
- La distancia y el tamaño de un elemento harán que sea más fácil o difícil hacer presionarlo o hacer clic en él.
- Los puntos más fáciles de alcanzar en las pantallas, son los bordes.
- La dificultad de alcanzar un botón dependerá de la dirección del movimiento del cursor y el tamaño del objeto. Por ejemplo, si el movimiento es horizontal y el objeto es muy alto pero delgado no será un objetivo tan sencillo.
- El clic derecho es tan poderoso porque pone la lista de opciones a una distancia cero, las opciones se muestran justo donde se hizo clic.
- Si los objetos en la interfaz ya son grandes no tiene sentido hacerlos más grandes, deberíamos enfocarnos en las cosas pequeñas para hacer una mayor diferencia.
2) Ley de Steering
La Ley de Steering es una derivación de la Ley de Fitts y describe cómo los humanos se mueven en un túnel. Ajá pero, ¿Qué tiene esto que ver con el diseño de interfaces?
Lo que hace la Ley de Steering es describir cómo alguien se mueve desde un punto de inicio hasta un punto final, independientemente de la forma que tenga el camino. La rapidez con que puedes moverte en ese túnel solo depende de dos variables, la longitud del túnel y el ancho de ese túnel.
Básicamente, cuanto mayor sea el ancho, menor será el tiempo, o será más rápido cruzar el túnel. Los caminos más anchos equivalen a un movimiento más rápido. Podemos aplicar esta información y conceptos a los escenarios comunes que vemos en el diseño de interfaces. Por ejemplo, los menús anidados.
Veo que mucha gente comete este error, pensando que si estos rectángulos son muy anchos, esto será lo que determine qué tan fácil será pasar por aquí. Pero en realidad, el ancho del túnel en su punto más pequeño es el punto de congestión que dice que tan rápido puedes moverse a través de él. Entonces, cuando intentes llegar a un ítem aquí en este punto rojo, porque hay un punto de estrangulamiento que va desde esa línea de ruta amarilla, y esto ralentizará el movimiento, y hará que sea mucho menos eficiente usar este tipo de optimización del menú de anidamiento cuando tienen tan poca altura como este. La otra cosa que lo hace interesante es que, de nuevo, lo que queremos empezar a identificar es, ¿Dónde están los extremos? Donde existen lugares donde hay cero enlaces dentro de un túnel o ruta al cruzar interfaces basadas.
Anteriormente hablamos sobre este aspecto del sistema operativo web, cuando cruzamos un umbral, simplemente arrastramos desde la parte inferior, y luego tenemos acceso instantáneo a eso.
EN WUFOO hicimos esto en las primeras fases de diseño, y tuvimos esta idea, que deseábamos que las personas pudieran accede a todas las demás páginas de destino con mucha facilidad.
Así que creamos esta crossing-based interface donde no tienes que hacer clic en algo para llegar a otro punto, hicimos que toda la altura o el ancho fuera un lugar muy fácil para acceder a todos estos elementos solo moviendo el cursor a través de una línea, una línea imaginaria, y luego se podría obtener llegar a estas cosas muy rápido. Aquí está el truco.
Terminó siendo tan fácil para ellos acceder a ese menú que la gente realmente se quejó porque era demasiado fácil hacerlo, y aunque no lo hicieran a propósito, como resultado llegaban a esta interfaz.
Hacer que los menús sean más fáciles de manejar con la ley de steering
- Los menús son uno de los elementos de la interfaz de usuario más afectados por la Ley de Steering. Aquí hay algunas opciones de diseño para que sean fáciles de usar.
- Mantén los menús desplegables lo más cortos posible. Los menús con pocas opciones minimizan el tiempo y la dificultad de conducir a través del túnel estrecho y también reducen el tiempo para buscar visualmente a través de una gran cantidad de opciones.
- Evita los menús jerárquicos, en particular los menús jerárquicos que tienen más de dos niveles de profundidad. Los menús jerárquicos son intrínsecamente una interfaz de usuario difícil de diseñar bien debido a las restricciones de la ley de Steering.
Lectura para Profundizar: https://www.nngroup.com/articles/steering-law/
Para saber que tiempo nos toma movernos en un túnel actúan 2 cosas principalmente, la longitud y el ancho del mismo.
- Entre mas largo y ancho mas rápido será.
Es por eso que los menús jerárquicos al tener más de 1 nivel tienden a ser poco accesibles, el primer nivel tiene un ancho considerable, por lo que podemos acceder fácil y rápidamente, pero para acceder a un segundo nivel nuestro “túnel de movimiento” tiene un ancho muy corto y una longitud considerable(hablando del movimiento que se tiene que hacer con el mouse), lo que crea una especie de congestionamiento por lo que tenemos que disminuir la velocidad al tenerlo como objetivo y al acceder, nuevamente se ensancha por lo que nos moveremos muy rápido, ahora entiendo porque los odio y termino haciendo clic fuera de el.
3) Ley de Hick’s
Pasemos ahora a la Ley de Hick. La Ley de Hick se ve así, lo que resulta familiar a nuestra Ley de Fitt’s, y lo que describe en el universo es que requiere menos tiempo identificar objetos de entre una menos cantidad de cosas, lo que de nuevo suena realmente obvio.
Pero cuando empezamos a analizar las matemáticas y a ver sus matices, podemos darnos cuenta que este principio en realidad solo es útil en escenarios muy específicos. Cuando Hick diseñó este experimento, básicamente tenía una serie de lámparas que colocaba en una configuración como esta, encendiendo una al azar.
Y luego le pedía a la gente que dijera qué lámpara estaba encendida, y cronometraba cuánto tiempo necesitaban para decir qué lámpara estaba encendida. Luego lo que hacía era aumentar la cantidad de lámparas en el experimento y luego encienda una lámpara aleatoriamente y repetía el mismo procedimiento una y otra vez. Y lo que encontró fue que existe una relación entre el número de lámparas y que tan rápido podemos identificar cual lámpara está encendida.
Acá podemos analizar todos las diferentes aplicaciones de esta ecuación. En la Ley de Fitts, dijimos que log que representa una relación logarítmica de cómo funcionan los números. En la Ley de Hick, describe en realidad la búsqueda binaria.
Es una forma intuitiva de comprender y dividir los problemas para decidir qué es importante. Lo que vemos entonces es que el número de opciones, dependiendo de la configuración, incrementa el tiempo relativo de una manera muy específica. Permítanme explicarles cómo ocurre la búsqueda binaria, cómo nuestro cerebro realiza esta búsqueda binaria. Digamos que tengo este número de objetos y te pido que indiques cuál está encendido.
Esto es lo que tu cerebro hace. Piensa en dividir la cantidad de elementos a la mitad y luego analiza esa mitad para ver si el objeto está ahí.
Y si no es así, toma la otra mitad y la divide de nuevo y analiza cada parte para determinar si el objeto que busca está ahí. Y aasí para esta búsqueda binaria, se requieren tres iteraciones o ciclos cerebrales, para básicamente encontrar la lámpara que está encendida en función de la cantidad de elementos que hay en total.
Mucha gente comete este error cuando intentan aplicar la Ley de Hick al diseño de menús cuando en realidad no aplica. Cuando diseñamos un menú y digo, encuentra el mono, en realidad no hacemos una búsqueda binaria para encontrar el mono.
Lo que realmente hacemos es mirar y literalmente buscar a través de cada uno. Tenemos que leer cada uno individualmente, y eso no es una búsqueda binaria, porque tengo que comprender y leer hasta el final. La Ley de Hick es mejor aplicada para optimizar la atención de nuestras notificaciones.
Por ejemplo, supongamos que estás administrando una planta de energía nuclear y hay una alerta de emergencia. La Ley de Hick es aplicable porque quieres que las personas sean capaces de identificar que algo que está mal entre todas las cosas que en el panel de control sin tener que leer todos los instrumentos.
Lo que deberías hacer es lo siguiente;
- En un sistema de atención o alerta, te pediría que muy rápidamente elijas de este menú el animal que tiene problemas.
- En ese momento si realizas una búsqueda binaria porque solo estás buscando la alerta roja.
- No estás leyendo todos los elementos. Primero encuentras el rojo y luego lo lees.
Otro aspecto importante a considerar cuando diseñamos interfaces es que que muchas veces, para cada una de las interfaces hacia donde diriges a los usuarios, quiere que ellos sepan lo que se supone que deben hacer a continuación. Y quieres que eso sea tan obvio como sea posible, entre tantos elementos de la pantalla de interfaz como sea posible.
Por lo general, esto se logra mediante un botón gigante.
Hay muchas cosas en las que pueden hacer clic, muchas cosas en términos de navegación, o elementos o información a los que intentan acceder.
Pero en esta página, hago que sea muy fácil encontrar lo que probablemente quieras hacer, y esto es información para encontrar qué seleccionar o hacer clic en ese botón para crear una nueva entrada.
Y así es como hacemos que las interfaces sean realmente fáciles de usar desde el principio, porque su atención puede perderse fácilmente al tratar de encontrar lo que se supone que debe hacer. Y para mucha gente ese va a representar encontrar el botón.
Ley de Hick: Se necesita menos tiempo para identificar un objeto de menos cosas. Se basa en la búsqueda binaria.
Solo se usa en escenarios específicos como:
➔ Optimización de la atención
➔ Ayudar a los usuarios a saber qué hacer a continuación
➔ Disminuir el tiempo de toma de decisión
Y no se usa para:
➔ El diseño de menús (no usamos búsqueda binaria en los menús).
➔ Decisiones más complejas (cómo el lugar de hospedaje en un Airbnb)
Ejemplos ✦
Al suscribirte en revistas tomas decisiones de tus preferencias.
El ejemplo de las plantas nucleares es real, trabaje en una hace tiempo y las reuniones eran en cuarto de control, ahí las alarmas se localizan en una pantalla con una rejilla y celdas cada celda es una alarma asociada a un equipo, jejeje que bueno saber como fue basado el diseño.
Ley de Miller’s
La Ley de Miller. Miller era un personaje interesante y lo que estaba tratando de averiguar era la capacidad de la memoria funcional. Es decir, cuando estamos trabajando, las cosas que almacenamos en la memoria inmediata a corto plazo. ¿Cuántas cosas puedo guardar en mi cabeza o en mi cerebro?
¿Con qué cosas puedo hacer malabares de una manera inmediata? Obviamente en el diseño de interfaces esto es algo interesante para todos, ya que debemos trabajar dentro de esta capacidad de la memoria funcional porque eso será lo más fácil para los usuarios.
Cualquier cosa fuera de esa capacidad hará el trabajo más difícil.
A Miller se le ocurrió que este número es siete más o menos dos fragmentos (chunks).
Eso significa que la cantidad de fragmentos que los humanos pueden procesar fácilmente es entre cinco y nueve.
Probablemente se estén preguntando qué es un fragmento, ¿qué significa eso exactamente? Mucha gente comete el error de pensar que esto solo de refiere a items.
Pero hay una diferencia muy clara entre un bit y un fragmento. Un bit es un pedazo de información discreta.
Pensemos en el lenguaje, en una palabra los bits son todas letras individuales. Y los fragmentos son la palabra completa. Los seres humanos somos máquinas de reconocer patrones.
Constantemente estamos obervando el universo.
Vemos muchas cosas diferentes y tratamos de convertirlas en un patrón.
Básicamente, estamos tratando de agrupar las cosas y luego tomamos estos fragmentos y los procesamos. En la década de 1970 la gente se dio cuenta que existía un modelo de memoria operativas que incorporaba algo llamado bucle fonológico.
No necesito explicar todo este gigante diagrama. Todo lo que necesitas saber sobre el bucle fonológico es que cuando hablamos de fragmentos, se trata de la cantidad de sonido que podemos mantener en nuestra cabeza en un tiempo muy corto. Y esto es alrededor de dos segundos de sonido.
Entonces, cualquier información que podamos almacenar en dos segundos de sonido, eso es lo que representa un fragmento, dependiendo de los elementos con los que estemos tratando, los diferentes valores, por este motivo es qué hay variabilidad, ese siete más o menos dos.
Por ejemplo, en dos segundos de sonido puedes tener siete dígitos o seis letras, o aproximadamente cinco palabras. Los pedazos de información se pueden representar en este gráfico de esta manera, dependiendo de lo que necesitas que la gente procese. Eso determina la cantidad de items que puedes tener en esa memoria funcional, por lo que nuestra capacidad de procesar fragmentos es en realidad alrededor de cuatro más o menos uno. Entonces entre tres y cinco fragmentos de información.
Te daré una explicación muy clara de este concepto.
Si te pidiera que intentes recordar lo más rápido posible o que memorices esta secuencia de números o letras, te resultará muy difícil hacerl0 en muy poco tiempo.
Pero si los fragmento y los pongo en contexto, esto es mucho más fácil de procesar porque hemos dividido la información en diferentes fragmentos discretos de sonido y tiempo.
Esto es lo interesante de esto. Y explica el por qué los hablantes del idioma chino pueden procesar más números y dígitos que los hablantes de inglés, porque en chino, ellos pueden decir esos números mucho más rápido de lo que nosotros podemos decir los números en inglés y otros idiomas derivados del Latin. Es por eso que muchas personas piensan
o cometen el error de creer que los chinos son mejores en matemáticas.
Y es solamente porque que tienen la capacidad de almacenar más números matemáticos o dígitos en su mente que otras personas porque pueden comprimirlos en esos dos segundos de sonido fonológico.
La gran conclusión es que debemos crear interfaces en fragmentos, agrupar cosas en torno a esos números, y eso hace que las personas puedan procesarlos mucho más rápido y fácilmente.
Aquí podemos ver algunos ejemplos. La función exposé y todos los cambios e iteraciones del sistema operativo iOS para gestionar la navegación de ventanas y la manipulación del escritorio, ellos tratan de dividir las cosas en grupos, ayudándote a agrupar las cosas lo más rápido posible para que puedas encontrarlas mucho más rápido porque piensas mejor en fragmentos que en unidades individuales discretas.
Hablemos de Github. A pesar de que tiene tantos elementos y es una interfaz complicada en términos de cuántas cosas puedes hacer desde ahi, digamos, en la parte superior del pliegue, dividen la interfaz en fragmentos.
Y eso es lo que hace que sea más fácil de procesar que otras interfaces similares con tantos botones diferentes apiñados. La fragmentación puede ser fácil.
Este es un menú desplegable que habíamos configurado para desplegar opciones sobre cómo configurar el formato de número, fácilmente podríamos haber dicho simplemente vamos a poner todo esto junto.
Pero con tan solo agregar esta línea punteada ayudamos a las personas a dividir los grupos, y ellas entienden que así es como funciona la relación entre los elementos y cómo encontrar las cosas mucho más rápido.
Muchos de los ejemplos que tengo aquí son de WUFOO y explican cómo pienso sobre el diseño.
Y se trata de tomar muchas cosas diferentes y complejas y dividirla en fragmentos. Por ejemplo, aquí, que es donde creas la lógica y la ramificación dentro de WUFOO para hacer formularios y encuestas. Estoy dividiendo la información en tres pestañas, tres tipos diferentes de cosas, y luego aquí, donde creas las reglas, segmento la información de reglas en partes.
Entonces digo que la parte superior es la condición. Aquí es donde indicas lo quieres que busquemos. Y luego viene la acción, lo que vamos a realizar basándonos en este elemento. Ese sistema de fragmentación hace que sea fácil comprender la interfaz y aprender a usarla rápidamente. La fragmentación ocurre aquí, cuando estás dividiendo los procesos los pasos, y para cada paso, me aseguro que exista un un número limitado de elementos con los que debes lidiar.
En la integración de pagos por ejemplo, configurar los pagos de las personas en los formularios de pago.
Dividimos la información. Aquí solamente encuentramos la configuración necesaria. Luego, el siguiente fragmento. Aquí están todas las diferentes opciones y configuraciones.
Y luego el siguiente fragmento. Para cada parte del formulario, debes indicar qué precios deseas asignarles. Y luego la gente solo tiene que seguir los pasos.
Sigo los pasos y no me pierdo porque solo tengo que procesar ese fragmento individual. Lo mismo pasa en las integraciones, cuando tenemos por ejemplo muchas personas
conectándose a muchos otros sistemas. En lugar de poner todos los ajustes en un mismo lugar y todos a la vez, los dividimos en fragmentos.
Digamos que estamos configurando Highrise, por ejemplo, con un formulario WUFOO.
Solo empezamos por aquí y todo lo que tenemos que hacer es procesar esto y luego obtenemos el siguiente paso, simplemente procesando estos pequeños fragmentos. Esto nos permite tener muchísimas integraciones diferentes y nadie se sentirá abrumado porque solo tienen que lidiar con un fragmento a la vez. Lo mismo ocurre con los reportes. La reportería es algo realmente complicado para nosotros.
Hay muchas características diferentes aquí pero las hemos incorporado en un sistema de pasos muy simple.
Solo tienes que seguir estos pequeños fragmentos y no hay más de 5 a 7 elementos que debes procesar para averiguar lo que necesitas hacer. Y nunca te sientes abrumado a pesar de estar navegando entre muchas opciones y configuraciones.
- 🧠 La ley de Miller habla de cuántos elementos (más o menos) puede la memoria de trabajo gestionar de forma sencilla. Habla de que son 7 elementos en promedio (máximo 9 y mínimo 5).
- 🎙 La memoria fonológica habla de cuánta información auditiva la persona puede almacenar de forma sencilla, siendo el tiempo estimado: 2 segundos de sonido..
- 📖 Lo ideal es diseñar interfaces de usuario en chunks, o grupos de información reducidos. Esto hace que la memoria de trabajo pueda analizarlos mejor y memorizarlos mejor.
La ley de Miller habla de cuántos elementos (más o menos) puede la memoria de trabajo gestionar de forma sencilla. Habla de que son 7 elementos en promedio (máximo 9 y mínimo 5). Diversificados y fragmentados. Para luego conectarlos y crear patrones.
.
➔ La memoria fonológica habla de cuánta información auditiva la persona puede almacenar de forma sencilla, siendo el tiempo estimado: 2 segundos de sonido. Razón por la cual los chinos son más rápidos en matemáticas.
.
➔ Lo ideal es diseñar interfaces de usuario en chunks, o grupos de información reducidos. Esto hace que la memoria de trabajo pueda analizarlos mejor y memorizarlos mejor.
El bucle fonológico es un componente del modelo de memoria de trabajo que se ocupa del material hablado y escrito, se subdivide en almacén fonológico y en el proceso de control articulatorio.
El almacén fonológico(oído interno) Procesa la percepción del habla y almacena las palabras habladas que escuchamos durante 1 a 2 segundos.
El proceso de control articulatorio(voz interior) procesa la producción del habla, ensaya y almacena información verbal del almacén fonológico.
Fuente de información aquí.
Bits= each letter that forms a word
Chunk= the word itself
La memoria funciona mejor al dividir el todo en partes
5) Ley del Poder de la Práctica
La última ley sobre la que vamos a hablar es la Ley de Poder de la Práctica que es mi favorita.
Creo que es una de las más poderosas y si la aplicas correctamente te permite superar todas las demás leyes. Esta es la formula de la Ley de Poder de la Práctica y básicamente todo lo que debes comprender sobre esta ley es que el tiempo necesario para realizar una acción, dependiendo de la cantidad de veces que has practicado, está determinado por lo que he llamado tiempo noob. Esto es el tiempo necesario para hacer algo por primera vez multiplicado por el número de intentos. Existen muchas relaciones diferentes para la Ley de Poder de la Práctica. Hay personas que piensan que esta relación en realidad se parece más a la Ley Exponencial de la Práctica.
Pero no necesitas preocuparte por eso. Todo lo que debes saber es que el tiempo necesario para realizar una acción depende del número de intentos. Es decir, las veces que se ha practicado una acción. Y cada vez que practicas algo, te vuelves más rápido con cada práctica. Entonces, si practicas 100,000 veces y luego 101,000 veces, continuarás haciéndolo aun más rápido.
Aunque algo se haya repetido muchísimas veces, cada elemento de práctica hace que la gente lo haga más rápido, lo cual es bastante sorprendente. Como diseñadores de interfaces, debemos pensar en la repetición de acciones de una manera muy distinta.
No deberíamos utilizar demasiados patrones nuevos. Veo que muchos diseñadores de interfaces.
piensan en crear algo completamente nuevo en el universo.
No quieren aplicar conceptos como affordances (ofrecimientos) y otros paradigmas de interfaces que han sido implementados por otros diseñadores. Piensan en crear algo nuevo.
Algo en lo que puedan poner su nombre. Pero todo lo que estás logrando es que alguien comience de cero al empezar a utilizar la interfaz. Si los usuarios han utilizado patrónes de interfaz en el pasado y los reutilizas con exito, ya que los han repetido muchas veces, cuando lleguen a tu interfaz podrán navegar mucho más rapido que de lo contrario.
Una de las cosas que menciono frecuentemente cuando hablo con personas que crean interfaces con muchas capas y niveles de complejidad asi que es posible que los usuarios estén en diferentes niveles cuando ingresan a la interfaz.
La interfaz debería de cambiar dependiendo de si los usuarios del sistema son nuevos o experimentados.
Te daré un ejemplo simple. En WUFOO, como ves aquí arriba, tenemos unas instrucciones.
en la esquina superior izquierda. Te pide que hagas clic o arrastres para agregar un campo.
Luego de dos semanas de utilizar el sistema, si notamos que lo está usando bastante bien, dejamos de mostrarte este mensaje. Ahora contamos con espacio para optimizar la interfaz para ti.
Para reducir las distracciones gradualmente porque te vuelves cada vez más rapido para llegar a las cosas y entender el sistema. Como segundo ejemplo, teníamos un interesante problema en que queríamos enseñar a la gente acerca de la configuración de los formularios. La pestaña de configuración del formulario contenía todas las configuraciones que los usuarios podrían necesitar pero aún asi continuabamos recibiendo solicitudes de soporte sobre ello.
No lograban encontrar esta pestaña simplemente porque no estaban haciendo clic aquí porque obviamente todo eso está oculto.
Entonces decidimos que en lugar de tratar de hacerlo realmente obvio, colocando ahí un tour para tratar de obligarlos a hacer clic en la configuración del formulario. Pensamos en nuestras opciones, porque todo lo que teniamos que que hacer era enseñarles cómo llegar una sola vez y después nunca tendrían que aprenderlo de nuevo. Entonces, en lugar de cambiar toda la interfaz, decidimos que comenzariamos a llamar a los nuevos formularios que la gente creara formulario sin título, y ya que nadie quiere llamar así a su formulario, los usuarios naturalmente hacían clic en ese título para cambiarlo cambialo. Sabíamos que el cambio de título ocurría en la configuración del formulario, y como resultado, ya que sabíamos por nuestros estudios de usuario que muchas veces esto sería lo primero en que los usuarios buscaban hacer clic o cambiar porque no quieren este título.
De esa forma terminaban descubriendo las demás configuraciones con tan solo un clic lo que resultó intuitivo porque lo que querían hacer era cambiar el nombre.
Hicieron clic en él y lograron ver todas las configuraciones. Entonces todas estas preguntas que llegaron a soport técnico sobre cómo cambiar el idioma del formulario, o cómo cambiar la página de confirmación. Estas preguntas desaparecieron porque al enseñarles algo una vez, ya no necesitan aprenderlo de nuevo.
Entonces recuerda que a veces la respuesta a una solución es crear una penalización que debemos resolver una vez y ya no será un problema para los usuarios.
No intentes resolver soluciones para los primeros casos ya que muchas veces solo harás que tu interfaz sea mucho más pesada y complicada de lo necesario. Este es el problema con la Ley de Poder de la Práctica, que te vuelves más rápido en hacer las cosas, independientemente de si la acción es deseada o no.
Entonces, si repites una mala acción o un hábito, te volverás más rápido en realizar esta acción.
Por lo tanto, es importante evitar diálogos como este, “¿Está seguro de que desea eliminar este
artículo?“ Porque lo que empiezan a hacer es practicar que la mayoría del tiempo la respuesta es sí, están bastante seguros de lo que quieren hacer, y lo hacen cada vez más rápido, y el resultado es que eliminarán accidentalmente cosas que no quieren eliminar.
Esta es la razón por la que es mucho mejor tener una opción de deshacer configuración aquí, porque la Ley de Poder de la Práctica te ayuda a superarlo. No importa que te vuelvas más rápido en esas cosas.
Siempre hay una forma de dar marcha atrás. Así concluyen las cinco leyes del diseño de interfaces que creo que todo diseñador de software debe conocer. La Ley de Fitts, la Ley de Hick, la Ley de Miller y la Ley de Práctica. Básicamente, la idea es que cuando estás creando mejores interfaces, quieres hacer las cosas en las que desea hacer clic más grandes. Quieres hacer que el camino sea lo más amplio posible.
Utilizar la menor cantidad de elementos posibles. Y quieres fragmentar cosas en grupos y optimizarlas para la repetición.
La ley del poder del aprendizaje dice que el tiempo que se tarda en realizar una tarea disminuye con el número de repeticiones de esa tarea.
Cómo puedes ver estas leyes, están presente en muchas de las cosas que usamos y el motivo por el que es importante tomarlas en cuenta es porque tienen eficacia comprobada en el tiempo. ¿Por qué no habría de tomarlas en cuenta para el diseño de un producto, sitio web o aplicación?