Curso Diseño UI - 11 Principio UI: Reglas de Usabilidad
Summary
TLDREsta lección se enfoca en la usabilidad y experiencia del usuario, basándose en las 10 reglas establecidas por Jakob Nielsen, un experto reconocido en el campo. Se discuten conceptos clave como la visibilidad del estado del sistema, el uso de lenguaje familiar, el control y libertad del usuario, la consistencia y prevención de errores. Además, se explora cómo aplicar estos principios en el diseño de interfaces digitales para simplificar tareas y mejorar la interacción con los usuarios, promoviendo una experiencia minimalista y eficiente.
Takeaways
- 😀 La usabilidad es clave en el diseño de interfaces digitales y es fundamental para una buena experiencia de usuario.
- 🔍 Las 10 reglas de usabilidad de Jakob Nielsen son un conjunto de principios básicos para el diseño de interfaces fáciles de usar.
- 📢 La visibilidad del estado del sistema es crucial; los usuarios deben estar informados constantemente sobre lo que sucede en el sistema.
- 🌐 El sistema debe hablar el lenguaje del usuario, evitando el jargon técnico y siguiendo las convenciones del mundo real.
- 🔄 El control y la libertad del usuario son importantes; los errores deben ser fáciles de deshacer y se deben proporcionar opciones claras para cancelar acciones no deseadas.
- 🔗 La consistencia y los estándares son esenciales; el lenguaje, los colores y los elementos interactivos deben ser coherentes a través de toda la interfaz.
- 🚫 La prevención de errores es mejor que un buen diseño de mensajes de error; se deben diseñar interfaces que eviten que los errores ocurran en primer lugar.
- 🧐 El reconocimiento es preferible a la memoria; los usuarios no deberían tener que recordar información de un paso a otro en un proceso.
- ⚡ La flexibilidad y eficiencia de uso son importantes para usuarios de todos los niveles; se deben considerar atajos y personalizaciones para usuarios más expertos.
- 🎨 El diseño minimalista mejora la estética y la usabilidad; se debe evitar la información irrelevante y mantener un enfoque en la funcionalidad.
- ❗ La ayuda y la documentación son esenciales; se debe proporcionar soporte fácil de encontrar y enfocado en las tareas del usuario.
Q & A
¿Qué es la usabilidad y por qué es importante en la experiencia del usuario?
-La usabilidad es la capacidad de un sistema para ser utilizado efectivamente, eficientemente y satisfactoriamente por los usuarios para lograr sus objetivos. Es importante porque permite a los usuarios completar tareas de manera rápida y efectiva, mejorando la satisfacción y la adherencia al uso del sistema.
¿Quién es Jakob Nielsen y qué contribuciones significativas ha hecho a la usabilidad y experiencia del usuario?
-Jakob Nielsen es un experto en usabilidad y experiencia del usuario, y es socio fundador de Nielsen Norman Group, una de las empresas líderes en investigación y enseñanza sobre estas áreas. Él estableció las 10 reglas generales de usabilidad, también conocidas como heurísticas, que son ampliamente utilizadas en el diseño de interfaces y experiencias de usuario.
¿Cuál es la primera regla de usabilidad establecida por Jakob Nielsen y qué implica?
-La primera regla es la 'Visibilidad del estado del sistema', que implica que el sistema siempre debe mantener informados a los usuarios sobre lo que está ocurriendo a través de retroalimentación apropiada dentro de un tiempo razonable.
¿Cómo afecta la 'Visibilidad del estado del sistema' el diseño de interfaces digitales?
-Al diseñar interfaces digitales, es importante definir específicamente dónde y cómo se mostrarán los mensajes de estado, como los de alerta, error o acciones automáticas, y considerar la creación de pantallas intermedias que indiquen el progreso de ciertas tareas.
¿Qué significa el 'Sistema y el mundo real' en el contexto de la segunda regla de usabilidad y cómo se aplica?
-La segunda regla, 'Sistema y el mundo real', sugiere que el sistema debe hablar el lenguaje de los usuarios utilizando palabras, frases y conceptos familiares. Esto se aplica evitando el uso de un lenguaje complejo o técnico y tratando las interacciones de manera humana.
¿Cómo se puede mejorar la experiencia del usuario al mantener el control y la libertad del usuario según la tercera regla?
-Al mantener el control y la libertad del usuario, se debe proporcionar una salida de emergencia clara para dejar un estado no deseado, apoyar funciones de deshacer y rehacer, y considerar la integración de un mecanismo para guardar borradores y permitir a los usuarios volver a la pantalla anterior si es necesario.
¿Qué implica la 'Consistencia y estándares' en el diseño de experiencias de usuario y cómo se logra?
-La 'Consistencia y estándares' implica que los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan lo mismo. Se logra siguiendo convenciones establecidas, utilizando terminología y colores de manera consistente a lo largo de todas las interfaces.
¿Cómo se puede prevenir la ocurrencia de errores en el diseño de interfaces según la quinta regla?
-Para prevenir errores, se debe diseñar cuidadosamente las interfaces para que el propósito de cada elemento sea visualmente claro, utilizar placeholders y etiquetas para ejemplificar lo que se requiere y bloquear elementos que no son requeridos hasta que sean necesarios.
¿Qué significa el 'Reconocimiento antes que recuerdo' y cómo se aplica en el diseño de interfaces?
-El 'Reconocimiento antes que recuerdo' sugiere que los objetos, acciones y opciones deben ser visibles y no deberían ser necesarios que el usuario recuerde información previa. Se aplica manteniendo instrucciones visibles, integrando campos para obtener ayuda cuando sea necesario y mostrando los pasos completados y los restantes en procesos largos.
¿Cómo se puede hacer que un sistema sea flexible y eficiente en su uso según la sexta regla?
-Para hacer que un sistema sea flexible y eficiente, se pueden incluir aceleradores para usuarios expertos, permitir que los usuarios adapten el sistema para usos frecuentes y considerar la integración de perfiles preestablecidos o datos previamente guardados para agilizar procesos.
¿Qué se entiende por 'Estética y diseño minimalista' y cómo se relaciona con la usabilidad?
-El 'Estética y diseño minimalista' se refiere a la eliminación de información irrelevante o poco utilizada y a la creación de un diseño que tenga un propósito claro para cada elemento. Esto mejora la usabilidad al evitar la complejidad innecesaria y mantener la atención del usuario en las tareas principales.
¿Cómo se abordan los errores en el diseño de interfaces según la novena regla?
-Según la novena regla, los errores deben ser reconocidos, diagnosticados y facilitados para su recuperación. Esto implica proporcionar mensajes de error claros y simples que indiquen el problema y sugieran una solución constructiva, mostrar los mensajes de error en contexto y considerar la validación en tiempo real.
¿Qué tipo de ayuda y documentación se debería incluir en un sistema según la décima regla?
-La décima regla sugiere que incluso si un sistema puede ser utilizado sin documentación, debería ofrecer ayuda y documentación fácil de buscar, enfocadas en las tareas del usuario, con una lista concreta de pasos a desarrollar y no demasiado extensa.
Outlines
😀 Introducción a la Usabilidad y las Reglas de Jakob Nielsen
En este primer párrafo, se presenta el tema de la lección, que es la usabilidad y se basa en 10 reglas establecidas por Jakob Nielsen, un reconocido experto en usabilidad y experiencia de usuario. Se describe la importancia de las heurísticas de Nielsen, que son reglas generales de usabilidad que deberían ser conocidas por todos los diseñadores de interfaces digitales. Además, se menciona la relevancia de la Nielsen Norman Group, empresa líder en investigación y enseñanza sobre experiencia de usuario. Se enfatiza la necesidad de seguir estas reglas al diseñar sistemas digitales y se sugiere que, aunque algunas reglas no se aplican directamente al diseño gráfico, son importantes para considerar en el diseño de interfaces.
🌐 Visibilidad del Estado del Sistema y Relación con el Mundo Real
El párrafo dos aborda la primera regla de usabilidad, la visibilidad del estado del sistema, que implica mantener informado al usuario sobre los procesos que se llevan a cabo. Se discute la importancia de la retroalimentación adecuada y a tiempo. Además, se introduce la segunda regla, la relación entre el sistema y el mundo real, que promueve el uso de lenguaje familiar y la adopción de convenciones del mundo real en el diseño de interfaces. Se sugiere que los diseñadores deberían evitar el lenguaje técnico y mantener un enfoque humano en la interacción con el sistema.
🔙 Control y Libertad del Usuario
Este segmento se centra en la tercera regla de usabilidad, que trata sobre el control y libertad del usuario. Se explica que los usuarios deben poder salir de un estado no deseado sin tener que pasar por una serie de pasos complicados, y se resalta la importancia de funciones de deshacer y rehacer. Se sugiere incluir opciones claras para volver atrás en diseños de interfaces y considerar la posibilidad de guardar borradores automáticos para permitir a los usuarios reanudar sus actividades donde las dejaron.
🔄 Consistencia y Estándares
El cuarto párrafo habla sobre la consistencia y los estándares en el diseño de interfaces, subrayando la necesidad de que los usuarios no duden de la significación de acciones o palabras en diferentes contextos. Se recomienda seguir convenciones establecidas y mantener la terminología, el uso de colores y los estilos de elementos interactivos consistentes a lo largo de toda la interfaz. Esto ayuda a los usuarios a predecir la función de los elementos y a interactuar de manera más eficiente con el sistema.
⛔ Prevención de Errores
En este segmento, se discute la quinta regla de usabilidad, la prevención de errores, que enfatiza la importancia de diseñar interfaces que minimicen la posibilidad de errores por parte del usuario. Se sugiere utilizar placeholders y etiquetas para ejemplificar los requisitos de los campos de formulario y bloquear elementos que no son necesarios para evitar que el usuario ingrese información inadecuada. La sección también habla sobre la importancia de diseñar interfaces que sean intuitives y que guíen al usuario para completar sus tareas sin cometer errores.
🔍 Reconocimiento en Lugar de Recuerdo
El sexto párrafo se enfoca en la regla de reconocimiento en lugar de recuerdo, que sugiere que los objetos, acciones y opciones del sistema deben ser visibles y fácilmente recuperables, en lugar de pedir al usuario que recuerde información de una parte del proceso. Se recomienda diseñar interfaces que indiquen claramente los pasos completados y los restantes, integrar campos de ayuda y mantener instrucciones visibles durante el proceso de completar tareas complejas.
🚀 Flexibilidad y Eficiencia de Uso
Este segmento cubre la séptima regla, la flexibilidad y eficiencia de uso, que aboga por la inclusión de aceleradores para usuarios más experimentados, permitiendo una interacción más rápida sin comprometer la accesibilidad para usuarios novatos. Se sugiere utilizar datos guardados previamente, perfiles preestablecidos y simplificar procesos para mejorar la eficiencia de los usuarios expertos.
🎨 Estética y Diseño Minimalista
El párrafo ocho trata sobre la importancia del diseño minimalista, donde se enfatiza que los diálogos y elementos de la interfaz no deben contener información irrelevante o poco utilizada. Se sugiere que cada elemento del diseño tenga un propósito claro y se eliminen las distracciones, centrando el diseño en mejorar la experiencia del usuario y facilitar la realización de tareas.
🚨 Ayuda para Reconocer, Diagnosticar y Recuperarse de Errores
En este segmento, se discute la necesidad de diseñar mensajes de error claros y constructivos que ayuden al usuario a identificar y solucionar problemas. Se sugiere que los mensajes de error deben indicar precisamente el problema y proponer soluciones, mostrarse en contexto y considerar la validación en tiempo real para prevenir errores y mejorar la experiencia del usuario.
❓ Ayuda y Documentación
El último párrafo aborda la importancia de ofrecer ayuda y documentación en la interfaz. Aunque no es necesario para todos los sistemas, es útil tener una sección de preguntas frecuentes, ayuda en tiempo real y documentación detallada y accesible. Se enfatiza la importancia de que la documentación esté enfocada en las tareas del usuario y sea fácil de encontrar y entender.
Mindmap
Keywords
💡Usabilidad
💡Jacob Nielsen
💡Heurísticas
💡Consistencia
💡Control del usuario
💡Prevención de errores
💡Flexibilidad y eficiencia
💡Aesthetic y diseño minimalista
💡Ayuda y documentación
💡Diagnóstico y recuperación de errores
Highlights
En esta lección se discuten 10 reglas de usabilidad establecidas por Jakob Nielsen, experto en experiencia de usuario y socio de Nielsen Norman Group.
Las reglas de Nielsen son conocidas como heurísticas debido a su naturaleza básica y general, y deberían ser conocidas por todos los diseñadores de interfaces.
La primera regla, 'Visibilidad del estado del sistema', implica mantener informados a los usuarios sobre lo que está sucediendo en el sistema a través de retroalimentación adecuada.
Es importante definir los mensajes de alerta y error al diseñar interfaces, y considerar la ubicación y forma de indicar acciones automáticas.
La segunda regla, 'Relación con el mundo real', sugiere que el sistema debe usar lenguaje familiar para los usuarios y seguir convenciones del mundo real.
El diseño de interfaces debe evitar el lenguaje técnico y mantener la interacción humana natural.
La tercera regla, 'Control y libertad del usuario', destaca la importancia de proporcionar una salida de emergencia y apoyar funciones de deshacer y rehacer.
Se debe considerar una forma de volver atrás en el diseño de interfaces, especialmente en casos de acciones accidentales del usuario.
La cuarta regla, 'Consistencia y estándares', insta a mantener la terminología y el uso de colores consistentes a través de todas las interfaces.
Es esencial definir claramente el uso y funcionalidad de cada color en las interfaces para facilitar la predicción por parte del usuario.
La quinta regla, 'Prevención de errores', enfatiza la importancia de diseñar interfaces que eviten la ocurrencia de errores antes de que ocurran.
Se debe utilizar placeholders y etiquetas para ilustrar lo que se requiere en los formularios y evitar la entrada de información incorrecta.
La sexta regla, 'Reconocimiento antes que recuerdo', sugiere hacer visibles los objetos, acciones y opciones para que el usuario no tenga que recordar información previa.
Es recomendable mantener instrucciones visibles y proporcionar campos de ayuda cuando sea necesario al diseñar interfaces.
La séptima regla, 'Flexibilidad y eficiencia de uso', aboga por la inclusión de aceleradores para usuarios expertos y la adaptación del sistema para usos frecuentes.
El diseño debe considerar perfiles preestablecidos y el uso de datos guardados previamente para mejorar la experiencia del usuario.
La octava regla, 'Estética y diseño minimalista', promueve la eliminación de información irrelevante y la complejidad innecesaria en diálogos.
El diseño debe tener un propósito claro para cada elemento y evitar distracciones que afecten la tarea del usuario.
La novena regla, 'Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores', insiste en la claridad y la construcción de mensajes de error.
Los mensajes de error deben indicar de forma precisa el problema y sugerir soluciones constructivas, mostrando los errores en contexto.
La décima y última regla, 'Ayuda y documentación', sugiere ofrecer ayuda y documentación fácil de buscar y enfocadas en las tareas del usuario.
Es importante incluir secciones de preguntas frecuentes y documentación accesibles para facilitar la resolución de dudas del usuario.
Se debe considerar la posibilidad de ofrecer ayuda en tiempo real y validación en tiempo real para mejorar la experiencia del usuario.
Al finalizar el diseño de una interfaz, es útil preguntarse qué opinaría Jakob Nielsen y si la aprobación sería positiva.
Transcripts
en esta lección vamos a hablar un poco
acerca de usabilidad y para ello vamos a
basarnos en 10 reglas que estableció
esta persona que estamos viendo en la
fotografía que luce muy agradable y
además tiene una corbata con un patrón
de ballenas lo cual lo hace mucho más
agradable su nombre es jacov nielsen y
es un experto en usabilidad y
experiencia de usuario y además es socio
de nielsen norman group que es una de
las empresas líderes en el mundo sobre
la experiencia de usuario la usabilidad
y la investigación sobre estas áreas se
dedican no solamente a implementar
estrategias y investigaciones y mejoras
de experiencia de usuario con sus
clientes sino que además se dedican a
enseñar sobre este tema y vamos a hablar
de dee dee jay com nielsen porque él
estableció 10 reglas generales de
usabilidad que habitualmente también se
les conoce como heurística si los buscas
en internet seguramente no encontrarás
con estos dos nombres como reglas
generales de usabilidad o como
heurísticas y por qué se usa el término
heurística en este caso por qué
según dicen estas reglas son tan básicas
tan generales tan que deberían ser por
todo el mundo sabidas no deberían ni
siquiera hacer explícitas porque es algo
un conocimiento que toda persona que se
dedica a diseñar interfaces digitales o
diseñar experiencias de usuario ya
debería tener interiorizado sí que ni
siquiera deberían ser reglas por eso se
les llama habitualmente heurísticas pero
en nuestro caso vamos a llamarle como
quieras pero son diez reglas que
deberíamos eventualmente seguir a la
hora de diseñar experiencias sistemas
digitales así que vamos a ir una por una
vamos a leer de qué se trata cada una de
estas reglas y finalmente al y junto con
cada una voy a compartir te algunos
consejos de cómo creo que está que estas
reglas nuestros consejos podrían
aplicarse a la hora de diseñar
interfaces digitales algunas de estas de
estas reglas no necesariamente aplican
al diseño gráfico de las interfaces pero
igual vamos a ver cómo podría impactar
nos a nosotros a la hora de diseñar las
interfaces bien vamos a ello
vamos con la primera regla y la primera
regla es visibilidad del estado del
sistema veamos la descripción específica
el sistema siempre debería mantener
informados a los usuarios de lo que está
ocurriendo a través de retroalimentación
apropiada dentro de un tiempo razonable
bien qué significa esto significa que el
usuario cuando está trabajando o cuando
estás haciendo alguna acción dentro de
algún sistema siempre debería saber qué
es lo que está ocurriendo si el sistema
está guardando debería decirle en algún
lugar que está guardando si el sistema
está cargando debería decir estoy
cargando si está trayendo datos una base
de datos debería estar diciendo
capturando datos o trayendo información
a eso se refiere con la visibilidad del
estado del sistema que el usuario
siempre debería saber lo que está
ocurriendo ok y esto como nos afecta a
nosotros a la hora de diseñar las
interfaces bien vamos a ver en primer
lugar para nosotros va a ser muy
importante que definamos son las
específicas para mostrar los mensajes
para mostrar mensajes
de alerta mensaje de error siempre
tenemos que considerar a la hora de
diseñar nuestras interfaces donde se van
a mostrar estos mensajes además tenemos
que definir el lugar y la forma de
indicar las acciones automáticas por
ejemplo cuando uno está trabajando en
google docs tú estás trabajando y en
algún momento ves que al lado del nombre
hay un texto que dice guardando
guardando guardando y de pronto dice
todos los datos han sido guardados bueno
nosotros cuando estamos diseñando alguna
aplicación alguna interfaz que incluya
dar acciones automáticas deberíamos
considerar una sección en donde mostrar
es el estado automático como vaya
cambiando a lo largo del tiempo y por
último debemos diseñar las pantallas
intermedias entre una y otra acción
cuando estamos diseñando nuestros
prototipos es una buena idea que
diseñamos que va a ocurrir entre una
pantalla y otra si es que al momento de
pinchar este botón y que nos lleve a
esta pantalla que va a ocurrir
simplemente va a cargar la otra pantalla
o va a haber alguna interfaz intermedia
en donde vamos a tener
un texto que nos diga cargando o algún
spinner que esté girando bien es bueno
que cuando nosotros diseñamos nuestro
prototipo pensemos en esas pantallas
intermedias y las diseñamos para que se
consideren a la hora del desarrollo bien
vamos con la segunda regla
en relación entre el sistema y el mundo
real de qué se trata esto el sistema
debería hablar el lenguaje de los
usuarios mediante palabras frases y
conceptos que sean familiares al usuario
más que con términos relacionados al
sistema seguir las convenciones del
mundo real haciendo que la información
parezca en un orden natural y lógico de
qué se trata esto que deberíamos
escribir el texto principalmente dentro
de nuestras interfaces de una forma
humana deberíamos hacer que nuestro
sistema se adapte al lenguaje humano no
al revés no que la persona o el usuario
se acostumbre a usar el lenguaje técnico
de la interfaz y esto es algo que
conversamos muy en detalle en una de las
lecciones anteriores en donde
explicábamos que era una interfaz que
era algo que permitía que un humano se
comunique con una máquina bueno en este
caso está hablando acerca de lo mismo
está este intermediario esta interfaz
que permite que el humano se comunique
con el sistema debería hablarle al
humano con lenguaje humano
sin usar terminología compleja sin
exigir que se entiendan términos
técnicos y veamos cómo esto lo podemos
aplicar a la hora de diseñar nuestras
interfaces en primer lugar deberíamos
evitar el uso de un lenguaje complejo o
excesivamente técnico esto nos resulta
bastante obvio dado todo lo que hemos
aprendido hasta ahora pero te
sorprendería ver la cantidad de
interfaces o de sistemas que me ha
tocado ver en donde el lenguaje que se
usa es altamente técnico o altamente
complejo cuando se está apuntando a un
público que no tiene experticia en esa
terminología así que mantengamos los
siempre en mente para que no se nos vaya
a olvidar usamos un lenguaje amable un
lenguaje humano y que sea fácil de
entender sobre todo tengamos en
consideración cuál es el estatus de
conocimiento de nuestros usuarios
vamos con el segundo punto que sería
tratar las interacciones con el usuario
de manera humana esto quiere decir que
no deberíamos solicitarle más datos de
lo que sean estrictamente necesarios que
no deberíamos agregar pasos adicionales
algo que debería en estricto rigor
y una buena idea es que pensemos como lo
haría él si el usuario está tratando de
solicitar algo por ejemplo como lo haría
si estuviera frente a una persona cuál
sería la interacción tratemos de
reflejar ese tipo de interacciones en
nuestras interfaces y por último si
puedes evitar pasos innecesarios del
proceso hazlo si hay algo que
anteriormente tomaba 15 clics que tomaba
15 interacciones para realizar una
acción y ahora puedes resumirlo y que en
4 o 5 clics se pueda conseguir el mismo
resultado por favor hazlo lo ideal es
que un sistema informático simplifique
la vida de las personas y no que la
complejidad es más de lo necesario
así que si puedes simplificar por favor
hazlo vamos con el tercer punto control
y libertad del usuario de qué se trata
hay ocasiones en que los usuarios
elegirán las funciones del sistema por
error y necesitarán una salida de
emergencia claramente marcada para dejar
el estado no deseado al que accedieron
sin tener que pasar por una serie de
pasos se deben apoyar las funciones de
deshacer y rehacer
muchas veces ocurre que personas hacen
clic en donde no deberían haber hecho
clic quizás por qué por qué se les movió
el mouse no lo alcanzaron a poner
correctamente porque están con el
celular y tuvieron que hacer una cosa y
sin querer con el pulgar presionaron en
donde no querían hay múltiples opciones
en donde puede esto ocurrir o quizás
porque no entendieron una instrucción y
accedieron a una sección que no de bien
bueno si es que esto ocurre siempre
debemos tener en mente una forma para
que este usuario o esta persona pueda
volver a donde estaba y salir de ese
lugar
al cual llegó por error por lo tanto
cuando hagamos nuestros diseños de
interfaces tenemos que considerar
siempre una opción para volver atrás ya
ya sé todas las personas que saben
pueden ir al navegador y hacer clic en
back y volver a la pantalla anterior
pero qué pasa cuando estamos trabajando
en una pantalla o en una interfaz que
funciona con ajax qué está pasando qué
pasa cuando estamos trabajando en una en
una interfaz donde tú haces clic y
simplemente se abre una ventana
emergente
no necesariamente marca un acto de ir de
una página a otra al momento de apretar
en el botón de volver puede que vayan a
un lugar equivocado por lo tanto siempre
consideran dentro de la misma interfaz
una forma de volver atrás en las
aplicaciones de celulares siempre tienes
una flechita que apunta hacia la
izquierda que te permite volver a la
pantalla anterior si se trata de una
ventana emergente considera siempre
incluir una equis o hacer que el borde
afuera de este poco sea clique hable
para volver a la página anterior
e integra en el diseño una forma de
guardar borrador y esto también puede
ser interesante porque qué pasa si la
persona entró por error o de manera
equivocada salió del lugar en donde
estaba trabajando debería ser sería una
excelente idea considerar que los datos
que las personas estaban ingresando y
que no termino de ingresar porque saltó
a otra pantalla hayan sido
automáticamente guardados y la persona
pueda volver atrás y continuar donde
quedó y que no tenga que partir desde
cero bien sería una buena idea integrar
esto está idea de ir guardando
borradores conforme la persona avanza
por supuesto todas las cosas que estoy
diciendo hasta ahora son geniales sería
genial poder integrarlas pero siempre
vamos a depender de nuestra contraparte
técnica es súper fácil para mí siendo
diseñador decir oye sería ideal que esto
fuera guardando un borrador conforme el
usuario avanza pero obviamente eso
tienen limitaciones técnicas o cada
sistema tiene sus limitaciones técnicas
así que es una buena idea consultarlo
obviamente con la persona que está
desarrollando el sistema de la interfaz
que esté diciendo bien
vamos con el cuarto punto consistencia y
estándares de qué se trata esto los
usuarios no deberían cuestionarse si
acciones situaciones o palabras
diferentes significan en realidad la
misma cosa sigue las convenciones
establecidas cuando diseñamos
experiencias de usuario cuando diseñamos
sistemas que tienen múltiples pantallas
son múltiples interfaces suele ocurrir
que utilizamos en la pantalla número uno
una terminología y luego en la pantalla
3 usamos otra terminología para
referirnos a la misma cosa por ejemplo
en lugar de en la primera pantalla
utilizamos la palabra eliminar y en la
tercera pantalla usamos la palabra
cancelar o en una utilizamos la palabra
acceder y en otra a aceptar bien nota
utilizamos la pantalla ok la palabra ok
entonces son cambios superficiales que
tienden a confundir cuando en realidad
significan lo mismo por eso a la hora de
aplicar esto al diseño deberíamos
definir la terminología a usar antes de
aplicarle al diseño si las acciones si
la acción de aceptar la vamos a llamar
con el término
en lugar de ok vamos a asegurarnos de
que en todas las interfaces usemos esa
terminología si cancelar con la opción
de terminar una acción la vamos a llamar
como cancelar utilizamos la palabra
cancelar a lo largo de todo el sistema a
lo largo de toda la experiencia bien
vamos a definir claramente el uso y la
funcionalidad de cada color en las
interfaces esto es muy importante porque
a pesar de que nosotros vamos a tener
texto en nuestras interfaces explicando
de qué se trata el color también es un
indicador de qué es lo que estamos
diciendo si ponemos un mensaje de alerta
en un color verde y ese color verde lo
usamos a lo largo de toda nuestra
interfaz para definir acciones o
mensajes positivos mensajes de éxito
bien entonces en la próxima vez que
aparezca un mensaje con texto verde el
cliente va a saber o el usuario va a
saber que estamos hablando de una acción
positiva y no de algo destructivo
mientras que si utilizamos el rojo a lo
largo de toda nuestra interfaz de toda
la experiencia del usuario para mostrar
mensajes
destructivos o mensajes de error el el
usuario va a saber que conforme le
aparezca un mensaje rojo se está
tratando de algo de algo de cuidado de
algo grave bien entonces por eso es
importante definir de qué forma vamos a
utilizar cada color y que seamos
consistentes en su uso para que el
usuario de este modo pueda predecir de
qué se va a tratar algo con solo ver el
color de este elemento y por último es
importante mantener siempre el mismo
estilo para los elementos interactivos
si los botones azules van a ser los
botones que representan acciones que van
a hacer que el usuario avance en su
proceso y mantengamos esa consistencia
llegamos que todos los botones azules
sean para avanzar en el proceso mientras
que usamos los botones rojos para
acciones destructivas bien entonces así
el usuario va a poder predecir a este
botón va a ser para avanzar este botón
va a ser para cancelar y por supuesto
también es importante mantener la
consistencia para que el usuario sepa
que cuando llega a una interfaz y vea
algo de color azul o algo que está en un
cuadradito con las esquinas redondeadas
puede decir ah ese es un botón
que cuando llegue a otra pantalla se
tenga que preguntar de nuevo esto era un
botón o esto no es un botón este es un
elemento interactivo o no es interactivo
bien hay que mantener la consistencia en
el diseño de los elementos interactivos
bien vamos con el quinto punto
prevención de errores veamos de qué se
trata
mucho mejor que realizar un buen diseño
de mensajes de error es realizar un
diseño cuidadoso que prevenga la
ocurrencia de errores de qué se trata
esto los usuarios pueden y van a
equivocarse a la hora de ingresar
información en nuestras interfaces sobre
todo en los formularios o en nuestras
interfaces interactivas puede que entren
a secciones en donde no deberían
ingresar por lo tanto nosotros debemos
ser cuidadosos de diseñar nuestras
interfaces y agregar elementos
interactivos o agregar acciones
interactivas que impidan que estos
errores ocurran por eso a la hora de
aplicarlo en nuestro diseño deberíamos
tener en consideración lo siguiente
deberíamos asegurarnos de que
visualmente se entienda el propósito de
cada elemento que si tenemos un input se
entienda que es un input en donde le
solicitamos al usuario que ingrese
información si es un enlace que se
entienda que es un enlace bien y así
sucesivamente deberíamos usar plays
holders y etiquetas para ejemplificar lo
que se requiere esto quiere decir que
cuando estamos diseñando nuestra
interfaz deberíamos sacar provecho a los
elementos como los plays holder
para explicar que si estamos pidiendo un
correo electrónico este es el formato en
que se solicita el correo electrónico y
también las etiquetas de los campos del
formulario o al agregar en algún lugar
alguna descripción que nos indique
claramente que le indique claramente al
usuario qué es lo que le estamos
pidiendo que ingrese y que impida que
ingrese información equivocada y por
último también es una buena idea ir
bloqueando los elementos que no son
requeridos por ejemplo si una persona
está llenando un formulario de d para
finalizar una compra y están los datos
para que se piden para emitir facturas
qué tal si simplemente le preguntamos si
necesita uno necesita factura y si
necesita factura entonces mostramos o
desbloqueamos esos elementos y si no
necesita factura simplemente los
ocultamos o no lo mostramos bien de esa
forma evitamos errores y evitamos que la
gente ingrese información que no es
necesaria en lugares en donde no se
requiere vamos con el sexto punto
reconocimiento antes que recuerdo
hacer visibles los objetos acciones y
opciones el usuario no tendría que
recordar la información que se le da en
una parte del proceso para seguir
adelante las instrucciones para el uso
del sistema deben estar a la vista o ser
fácilmente recuperables cuando sea
necesario a qué se refiere esto
supongamos que nuestro usuario está en
un proceso que le toma cinco o seis
pantallas para completar un proceso
completo y está en la pantalla número 5
y en esa pantalla en número 5 se le pide
verificar y validar algo que ingresó en
la pantalla 1 o se le se le pide
reingresar algo que ya había ingresado
en la primera pantalla en este caso
estás apelando a que el usuario se
recuerde aquello que ingresó en la
primera pantalla o se acuerde de unas
instrucciones que se le dieron en la
primera pantalla suponte que en la
primera pantalla y le dijeron recuerde
que al llegar a tal punto tiene que
ingresar el código 1 2 3 cuando está en
la pantalla número 6 es muy difícil que
el usuario se acuerde del código que le
diste en la primera pantalla por eso a
la hora de diseñar nuestras interfaces
deberíamos tener en consideración lo
siguiente
diseñar elementos que indiquen los pasos
completados y los restantes por ejemplo
volviendo al mismo el mismo caso
anterior en el en el paso 6 por ejemplo
se le puede preguntar usted completó el
paso 1 de tal cosa el usuario
probablemente ya no se va a acordar por
eso es una buena idea que tengamos
elementos que indiquen los pasos
completados y los restantes esto
generalmente lo vemos aplicado en los
carritos de compras en donde tenemos un
una barrita arriba que nos indica paso 1
carrito de compra check pasos 2 datos de
facturación check paso 3 pago paso 4
envío entonces así el usuario va a saber
cuáles son los pasos que ya completó en
cual está ahora y cuáles son los que
faltan tenemos que considerar si es
necesario estos elementos que nos
indiquen los pasos completados y los
pasos restantes además deberíamos
integrar campos para obtener ayuda
cuando sea necesario
me imagino que todos lo hemos visto pero
muchas veces junto al nivel que indica
lo que tenemos que ingresar en un campo
de texto aparece un signo de
interrogación y cuando haces clic en ese
signo de interrogación aparece un
cuadrito de diálogo que te dice hoy lo
que estamos pidiendo acá está la
información y es requerida por tal razón
bien a eso me refiero con ingresar
campos de ayuda para obtener información
cuando sea necesario y por último
también mantener las instrucciones
visibles al realizar acciones complejas
muchas veces nos toca ingresar
información en formularios que son
bastante complejos o que requieren
información
especifica y es una buena idea que la
información que las instrucciones o
información sobre por qué se nos está
pidiendo tal cosa está invisibles no
recuerdo algún caso en particular pero
sé que por ejemplo una de las soluciones
que se me ocurre es que en un formulario
que sea muy extenso tú puedes tener las
instrucciones y que se queden pegadas
mientras tú vas avanzando en el
formulario y puedes ir leyendo en
cualquier momento estas instrucciones
bien a eso se refiere la idea de de
mantener siempre visible textos de ayuda
o textos de información
vamos con la séptima regla flexibilidad
y eficiencia de uso de qué se trata la
presencia de aceleradores que no son
vistos por los usuarios novatos puede
ofrecer una interacción más rápida a los
usuarios expertos que la que el sistema
puede proveer a los usuarios de todo
tipo se debe permitir que los usuarios
adapten el sistema para usos frecuentes
de qué se trata esto y vamos a ir
directo a la aplicación del diseño para
entender de qué se trata
una idea es considerar acciones que
permitan el uso de datos previamente
guardados y esto se refiere con usuarios
expertos supongamos que estamos
diseñando la experiencia de un carrito
de compras o de un check out de un
finalizar compra en una tienda online y
tenemos a alguien que viene y compra por
primera vez esa persona que compra por
primera vez tendrá que ingresar todos
los datos requeridos de una sola vez
bien pero qué pasa con aquellos usuarios
que son expertos con aquellos usuarios
que son clientes frecuentes o que ya han
realizado múltiples compras previamente
bien nosotros podemos traer esa
información para llenarla o agregar una
opción en donde el usuario diga por
favor ingrese y nm está estos datos con
contenido que ya he ingresado
previamente a eso se refiere por otro
lado es es interesante considerar la
integración de perfiles preestablecidos
por ejemplo si estás configurando una
cuenta
te puede ofrecer la opción esta interfaz
de decir
pre pre completa me la cuenta con datos
como si yo fuera un pre configura mi
cuenta con datos ideales para un
diseñador entonces dependiendo de cuál
sea la interfaz cual sea el sistema con
el cual estás trabajando este sistema te
configurará tu cuenta con las acciones
predeterminadas para aquellos que son
diseñadores y aquel que diga soy
profesor le llenara la le configurará la
cuenta con una con un formato
preestablecido para profesores y así
sucesivamente como estamos hablando de
usuarios que entienden ya de qué se
trata el sistema podría ser una buena
idea acelerar el proceso
teniendo estos perfiles preestablecidos
a diferencia de solicitar que ingresen
cada dato en que configuren manualmente
cada uno su cuenta bien siguiente paso
el número 8 estética y diseño
minimalista
los diálogos no deben contener
información que es irrelevante o poco
usada cada unidad extra de información
en un diálogo compite con las unidades
de información relevantes y disminuye su
visibilidad relativa
es decir cuando estamos diseñando
nuestras interfaces debemos procurar que
cada elemento del diseño tenga un
propósito claro no tenemos que agregar
cosas porque si solamente cada elemento
debe tener un propósito claro y debemos
evitar la complejidad innecesaria
debemos evitar pedir más información de
la requerida debemos evitar agregar
elementos que simplemente distraigan al
usuario y obviamente eso nos lleva al
siguiente punto que es eliminar todo
aquello que puede ser una distracción
para el usuario
sobre todo si estamos diseñando una
interfaz en donde el usuario tiene que
interactuar para completar una tarea o
para o para cumplir con un objetivo todo
aquello que le distraiga de cumplir su
objetivo debemos tratar de eliminarlo a
no ser que tenga un objetivo claro a eso
se refiere ya que unirse al hablar de un
diseño simple y minimalista no está
hablando necesariamente de una estética
de estilo minimalista está hablando de
eliminar todo aquello que sea
innecesario y que genere ruido
vamos con el punto 9 ayudar a los
usuarios a reconocer diagnosticar y
recuperarse de errores los mensajes de
error deben entregar se deben entregar
en un lenguaje claro y simple indicando
de forma precisa el problema y sugerir
una solución constructiva al problema es
decir si alguien por error al utilizar
esa interfaz cometió un error o hay algo
que fallo el usuario debería saber qué
es específicamente lo que falló y cómo
recuperarse de ese problema por eso al
momento del diseño de nuestras
interfaces debemos procurar que los
mensajes de alertas sean claros y que
proveen una solución no basta con que el
mensaje de alerta diga error
necesitamos que diga algo más que diga
error el mensaje no ha podido ser
enviado por lo tanto inténtelo de nuevo
más tarde y por lo tanto comuníquese con
tal o tal persona o por lo tanto haga
tal o cual acción deberíamos en nuestro
mensaje de alerta decir este es el error
ocurrió por este motivo y esta es la
solución
además deberíamos mostrar los mensajes
de error en contexto por ejemplo si el
error está en un campo de texto el error
o el mensaje de error debería aparecer
junto con ese exponente input de texto
de tal forma que la persona identifique
claramente que este campo en particular
es el que está dando problemas y no
otros bien muy común es el problema de
que estás llenando un formulario y al
momento de hacer clic en enviar aparece
un mensaje de alerta arriba que le dice
oye incompleta todos los campos pero son
150 campos y tú no sabes cuándo todos
esos 150 campos es el que no llenaste
por eso es buena idea que los mensajes
de alerta o de error estén en contexto y
por último de ser posible considera la
validación en tiempo real es decir si en
un campo te está pidiendo un correo
electrónico y tú ingresas un nombre al
momento de pasar al siguiente campo o al
mismo tiempo de ir escribiendo el campo
sería una buena idea que te valide que
oye lo que estás utilizando él no es un
correo no es un correo
ahora si es un correo por lo tanto check
pasamos al siguiente
es una buena idea
errores finalmente para que cuando el
usuario haga clic en el botón de enviar
no te interesa y de que un campo fallo
sino que te enteres de inmediato que
todos los campos que ya llenaste están
ok vamos con el último tema con el
último punto ayuda y documentación
incluso en los casos en que el sistema
puede ser utilizado sin documentación
podría ser necesario ofrecer ayuda y
documentación dicha información
debería ser fácil de buscar estar
enfocado en las tareas del usuario con
una lista concreta de pasos a
desarrollar y no ser demasiado extensa
es decir cuando un usuario está
interactuando con nuestro sistema
debería encontrar una forma de acceder a
documentación o de recibir las
instrucciones que necesita para
completar esta tarea por eso cuando
estamos diseñando nuestras interfaces
deberíamos considerar tener una sección
de preguntas frecuentes no
necesariamente en la misma pantalla en
donde tenemos el formulario o aquello
con lo que el usuario está interactuando
pero que esté accesible desde algún menú
desde algún lugar que el usuario puede
llegar a este sector de preguntas
frecuentes para resolver sus dudas o
atender a sus necesidades además
deberíamos pensar en formas de ofrecer
ayuda en tiempo real
nuevamente todo esto depende siempre de
la factibilidad de la tecnología y de la
logística pero si es posible ofrecer
ayuda en tiempo real es una buena idea
por eso a la hora de diseñar tu interfaz
considera si es que va a haber un chat
en vivo para que la persona haga
preguntas o cosas por el estilo
y por último diseña una sección de
documentación en caso de ser necesario
sobre todo si estamos trabajando con
alguna interfaz que sea relativamente
compleja sería buena idea que haya una
sección que más que preguntas frecuentes
sea de documentación de tutoriales o de
instrucciones específicas a las que el
usuario pueda acceder fácilmente ya sea
desde un menú o desde un botoncito que
hay en algún lugar bien ahora que ya
conocemos estas 10 reglas generales de
usabilidad es una buena idea que al
momento de terminar de diseñar cada una
de nuestras interfaces nos preguntemos
qué diría jakob nielsen de nuestra
interfaz acaso nos miraría con enojo y
nos daría debido para abajo o se pondría
feliz y nos daría dedito para arriba
porque al final del día todo lo que le
preocupa allí
es que ofrezcamos la mejor experiencia
posible a nuestros usuarios que hagamos
que esos diseños que estas interfaces
que nosotros estamos creando hagan que
la vida del usuario sea mucho más fácil
y le permita completar de manera rápida
y efectiva las tareas que quieren
completar así que es una buena idea
imaginarse estas caras de jay que
utilizan al momento de terminar nuestras
interfaces ojalá que a todos nosotros
nos dé siempre un debido para arriba y
se ponga feliz eso es todo por ahora nos
vemos en la siguiente elección hasta 8
5.0 / 5 (0 votes)