Curso Diseño UI - 11 Principio UI: Reglas de Usabilidad

Summary

Esta 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

00:00

😀 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.

05:00

🌐 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.

10:02

🔙 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.

15:02

🔄 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.

20:04

⛔ 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.

25:04

🔍 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.

Keywords

💡Usabilidad

Usabilidad se refiere a la facilidad con la que los usuarios pueden aprender, utilizar y lograr tareas en un sistema o interfaz. Es el núcleo del tema del video, donde se discuten reglas para mejorar la experiencia del usuario. Por ejemplo, la 'visibilidad del estado del sistema' es una de las reglas que se menciona para mantener al usuario informado sobre lo que sucede, reflejando la importancia de la usabilidad en el diseño de interfaces.

💡Jacob Nielsen

Jacob Nielsen es un experto en usabilidad y experiencia de usuario, conocido por establecer las '10 reglas generales de usabilidad', también llamadas 'heurísticas'. En el video, se le presenta como un referente en el campo y su trabajo es fundamental para entender los conceptos y reglas que se discuten, como su fotografía con una corbata de ballenas que lo hace más agradable.

💡Heurísticas

Las heurísticas son reglas o principios generales que se aplican para encontrar soluciones o resolver problemas. En el contexto del video, se refiere a las '10 reglas generales de usabilidad' establecidas por Nielsen, que son estrategias para evaluar y mejorar la usabilidad de un diseño. Se mencionan como 'heurísticas' porque son tan básicas que deberían ser conocidas por todos los diseñadores de interfaces.

💡Consistencia

La consistencia es la coherencia en el uso de elementos y lenguaje a lo largo de una interfaz, lo que ayuda a los usuarios a comprender y prever la funcionalidad sin tener que cuestionarse. En el video, se destaca la importancia de mantener la consistencia en el uso de términos, colores y estilos de elementos interactivos para facilitar la navegación y comprensión del usuario.

💡Control del usuario

El control del usuario se refiere a la capacidad de los usuarios de realizar acciones y revertirlas si es necesario. Es clave para la confianza y la satisfacción del usuario. En el video, se menciona la importancia de proveer 'salidas de emergencia claramente marcadas' y funciones de 'deshacer y rehacer' para permitir que los usuarios se corrijan y continúen sin frustración.

💡Prevención de errores

La prevención de errores implica diseñar interfaces que evitan que los usuarios cometan errores en primer lugar. En el video, se enfatiza en el diseño cuidadoso que impide errores, como el uso de placeholders y etiquetas claras, y la bloqueo de elementos no requeridos hasta que sean necesarios, para mejorar la experiencia del usuario.

💡Flexibilidad y eficiencia

La flexibilidad y eficiencia de uso se refiere a la capacidad de un sistema para adaptarse a diferentes niveles de habilidad del usuario y permitirles realizar tareas de manera rápida y eficiente. En el video, se sugiere la inclusión de aceleradores para usuarios expertos y la personalización del sistema para uso frecuente, como perfiles preestablecidos y datos guardados previamente.

💡Aesthetic y diseño minimalista

El diseño minimalista se enfoca en la simplicidad y la eliminación de elementos innecesarios para mejorar la claridad y la funcionalidad. En el video, se discute la importancia de un diseño que no contenga información irrelevante y que cada unidad de información sea relevante y clara, evitando la complejidad innecesaria que distrae al usuario.

💡Ayuda y documentación

La ayuda y documentación son recursos que los usuarios pueden necesitar para interactuar con un sistema. El video enfatiza la importancia de que esta información sea fácil de encontrar, enfocada en las tareas del usuario y no demasiado extensa. Se sugiere la inclusión de secciones de preguntas frecuentes, ayuda en tiempo real y documentación específica para facilitar la comprensión y el uso del sistema.

💡Diagnóstico y recuperación de errores

El diagnóstico y la recuperación de errores se refiere a la capacidad del sistema de informar claramente al usuario sobre un error y proporcionar una solución o forma de solucionarlo. En el video, se menciona que los mensajes de error deben ser claros, precisos y constructivos, con ejemplos de cómo se deben integrar en el contexto de la interfaz para que el usuario pueda identificar y corregir el problema de manera efectiva.

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