Triangulitos, Columnas y Más: Aciertos de Usabilidad de un Menú Desplegable – Vol. 1

Ayer ingresé desde mi teléfono celular al sitio web del Festival de Jazz de Buenos Aires y me gustó mucho la usabilidad del menú. Resulta que el festival tiene varias sedes y artistas, y el sitio tiene la capacidad de mostrarle al usuario la información de distintas formas, otorgando una excelente experiencia de usuario.

Aprovecho para mencionar que utilizaré reglas heurísticas de usabilidad de Jakob Nielsen, principios de interacción de Bruce Tognazzini y principios heurísticos de Donald Norman para analizar la usabilidad de este sitio web.

Debajo tenemos una captura de pantalla con el menú superior – plegado – presentado como un elemento flotante.

post57_menujazzba1-2
Figura 1

Desde el comienzo podemos notar una muy buena práctica de usabilidad pues aparece la palabra Menú justo al lado del ícono del Hamburger Menu. Aparecen ambas referencias al menú sin comprometer la carga cognitiva del diseño.

Al presionar cualquiera de estos dos elementos se despliega debajo el menú, como se ve en la figura 2.

Continue reading Triangulitos, Columnas y Más: Aciertos de Usabilidad de un Menú Desplegable – Vol. 1

Illusion of Completeness: Destapando el Casillero Semi Cubierto

El otro día quise compartir un hipervínculo con mi celular y me pareció muy acertada la usabilidad del elemento interactivo que apareció. Este fue un ejemplo de cómo utilizar el concepto del ‘Illusion of Completeness’ adecuadamente para mejorar la experiencia de usuario.*

Siguiendo los principios heurísticos de Donald Norman, podemos decir que si hay Illusion of Completeness no se respeta el principio de Visualización de las Cosas:

Esto se debe hacer desde el lado de la operación para que el usuario sepa lo que es posible y cómo debe hacerse; y desde el lado de la evaluación para que el usuario pueda conocer el efecto de sus acciones. Las acciones del sistema deben corresponder con las intenciones y expectativas del usuario; y el estado del sistema debe ser visible (Fuente: notas de Gonzalo Auza para el curso de UX del Instituto Tecnológico Buenos Aires).

En mi caso, al mantener presionado el hipervínculo con mi dedo durante un segundo, lo que se conoce en inglés como ‘tap and hold’, apareció un rectángulo dividido en varios casilleros para que yo elija uno.

Captura de pantalla
Figura 1: Al hacer ‘tap and hold’ en la URL, apareció debajo un elemento con cuatro íconos.

Aparecían cuatro opciones visibles, pero lo interesante es que a la derecha del rectángulo parecía haber una opción más, semi escondida (mirar debajo la Figura 2 por favor).

Continue reading Illusion of Completeness: Destapando el Casillero Semi Cubierto

Diseñando para el Error – Volúmen 3

En dos posts anteriores, titulados “Diseñando para el Error – Volúmen 1” y “Diseñando para el Error – Volúmen 2”, les comenté parcialmente acerca de la usabilidad de una página de reunión web (ver debajo).

Captura de pantalla

Debajo enumero los últimos tres ítems presentes en la captura de pantalla.

Voy a utilizar reglas heurísticas de usabilidad de Jakob Nielsen, principios de interacción de Bruce Tognazzini y principios heurísticos de Donald Norman para explicar cada punto (este post está orientado a heurísticas generales y no directamente relacionadas al diseño para el error):

Continue reading Diseñando para el Error – Volúmen 3

Formularios y Experiencia de Usuario: Es Posible una Feliz Convivencia

Mi amiga Rocío me recomendó un artículo interesantísimo de Andrew Coyle en donde alista – acompañado de fotografías – buenas prácticas de usabilidad para el diseño de formularios.

Voy a nombrar solo una de ellas: “Use the field length as an affordance”.

captura de pantalla
Fuente: Andrew Coyle en https://uxdesign.cc/design-better-forms-96fadca0f49c#.v1w7dnajn

Aplicando el concepto de ‘affordance’, que se traduce como Ofrecimiento en español y tan bien describe Donald Norman en su libro The Design of Everyday Things, utilizar el largo de un campo para indicar al usuario el largo de la respuesta es una excelente práctica de usabilidad.

Si bien este detalle puede pasar desapercibido y parecer irrelevante, hace a la experiencia de usuario sin lugar a dudas.

En fin: ¡Recomendadísimo el artículo! https://uxdesign.cc/design-better-forms-96fadca0f49c#.v1w7dnajn

¿Cuál te pareció la recomendación menos sólida de todas?

Diseñando para el Error – Volúmen 2

En mi post anterior, titulado “Diseñando para el Error – Volúmen 1”, les comenté parcialmente acerca de la usabilidad de una página de reunión web (ver debajo).

Captura de pantalla

Debajo enumero los ítems 3 y 4 presentes en la captura de pantalla (en el post anterior describí los primeros dos ítems). En el siguiente y último post finalizaré el análisis.

Voy a utilizar reglas heurísticas de usabilidad de Jakob Nielsen, principios de interacción de Bruce Tognazzini y principios heurísticos de Donald Norman para explicar cada punto:

Continue reading Diseñando para el Error – Volúmen 2

Diseñando para el Error – Volúmen 1

El otro día estaba apurado por entrar a una conferencia web. Para ingresar, me habían pasado un link; al cliquearlo, la usabilidad de la página que se abrió me sorprendió para bien.

La persona que organizaba la reunión había creado dos reuniones – y consecuentemente dos links – y yo, al estar apurado sobre el comienzo de la reunión, había cliqueado el link incorrecto sin saberlo. Por eso tuve que recuperarme de mi error. ¡Lo bueno es que el sistema en este caso me ayudó primeramente a entender que había cometido uno!

Captura de pantalla

Debajo enumero los primeros dos ítems presentes en la captura de pantalla, para que este post no sea muy largo… En el siguiente post continuaré con el análisis.

Voy a utilizar reglas heurísticas de usabilidad de Jakob Nielsen, principios de interacción de Bruce Tognazzini y principios heurísticos de Donald Norman para explicar cada punto:

Continue reading Diseñando para el Error – Volúmen 1

Ejemplo de un Landing Page Respetuoso de Varios Principios Heurísticos de Usabilidad – Volumen 2

En mi post anterior, titulado “Ejemplo de un Landing Page Respetuoso de Varios Principios Heurísticos de Usabilidad”, les comenté parcialmente acerca de la usabilidad de un landing page con el cual me topé. En este post voy a continuar con los puntos que quedaron pendientes.

Captura de pantalla

Debajo enumero los últimos tres ítems presentes en la captura de pantalla (en el post anterior describí los primeros cuatro ítems).

Continue reading Ejemplo de un Landing Page Respetuoso de Varios Principios Heurísticos de Usabilidad – Volumen 2

Ejemplo de un Landing Page Respetuoso de Varios Principios Heurísticos de Usabilidad

Ayer estaba navegando en el sitio de InTechnic y apareció de repente una ventana modal que cubrió toda mi pantalla. Si bien esta no fue la situación más feliz, debo decir que la usabilidad de esta ventana era excelente.

Captura de pantalla

Debajo enumero los primeros cuatro ítems presentes en la captura de pantalla, para que este post no sea muy largo… En el siguiente post escribiré acerca de los últimos tres ítems.

Para explicar cada punto utilizaré reglas heurísticas de usabilidad de Jakob Nielsen, principios de interacción de Bruce Tognazzini y principios heurísticos de Donald Norman, entre otros conceptos.

Continue reading Ejemplo de un Landing Page Respetuoso de Varios Principios Heurísticos de Usabilidad

Un Formulario sin el Botón de ‘Guardar Cambios’: ¡Excelente!

El otro día estaba cambiando las configuraciones de un servicio online al cual me suscribí, y me sorprendieron gratamente con una funcionalidad que facilitó mucho mi navegación y mi experiencia de usuario.

Básicamente, quería desactivar algunas de las notificaciones por email que envía el sistema automáticamente, así no recibo demasiado correo electrónico. Entré a la pantalla de configuraciones, como se puede ver debajo.

Captura de pantalla.

Continue reading Un Formulario sin el Botón de ‘Guardar Cambios’: ¡Excelente!

Minimalismo y Plantación de Árboles, una Excelente Combinación para la Experiencia de Usuario

Una de las diez reglas heurísticas de usabilidad de Jakob Nielsen es aplicar el minimalismo en el diseño, para evitar información de más que pueda provocar distracciones y así disminuir la velocidad del usuario.

En ese sentido, el sitio mobile de Ecosia me pareció impecable: al ingresar, solamente tres elementos nos llaman la atención. Los enumero, siguiendo la captura de pantalla, debajo.

Captura de pantalla.
Al ingresar, solo podemos ver 3 cosas. ¡Excelente usabilidad!

Continue reading Minimalismo y Plantación de Árboles, una Excelente Combinación para la Experiencia de Usuario