Usabilidad web: ¿Qué es UI y UX? Diferencias

He decidido hacer esta entrada porque todavía hay mucha gente que suele confundir dos términos que son parecidos, pero que no significan lo mismo.

UI, que se le conoce como Interfaz de usuario y UX, que es Experiencia de Usuario.

ux y ui: diferencias

¿Qué es UI? (Interfaz de usuario)

La interfaz del usuario hace referencia al conjunto de elementos de la pantalla que hacen que el usuario interactúe con el sitio web. El experto en usabilidad y uno de los mayores referentes en UI, Jakob Nielsen ha desarrollado una serie de mejoras. Según él, los elementos más importantes de una IU son:

  • Propósito del sitio: tiene que quedar claro a quién pertenece la web y qué funciones permite realizar.
  • Ayuda al usuario: el sistema de navegación tiene que estar a la vista, y también tiene que incluir un sistema de búsqueda adicional.
  • Mostrar el contenido: tiene que estar explicado de manera clara y con elementos de texto que ayuden a su lectura (como títulos, negritas, etc.).
  • Diseño gráfico funcional: los elementos gráficos deben ir dirigidos a ayudar al usuario en encontrar lo que quiere, y no solamente como adorno.

 

Componentes de la UI (Interfaz de Usuario)

La UI, principalmente presenta las posibilidades de interacción junto con el diseño visual. Esto quiere decir, que las decisiones de la Arquitectura de Información y el Diseño de Interacción se reflejan en la interfaz.

La arquitectura establece la estructura, además se piensa en cómo se comporta el sistema en respuesta al usuario y por último tiene una serie de características: colores, texturas y gráficos que lo hacen estético.

Según Usability.gov, los elementos que generalmente se presentan en una UI son los siguientes:

  • Controles de Input: botones, campos de texto, casillas de verificación, botones de radio, listas drop down, campos de fecha…
  • Componentes de Navegación: migas de pan, sliders, formularios de búsqueda, paginación, tags, iconos…
  • Componentes de Información: ayudas adicionales, iconos, barras de progreso, notificaciones, cajas de mensajes.
  • Contenedores

Principios del Diseño de UI (Interfaz de Usuario)

Según Larry Constantine y Lucy Lockwood, existen ciertos principios para el diseño de interfaz centrado en el usuario. Estos principios son:

  1. Estructura: El diseño debe organizar la interfaz de usuario a propósito, de manera significativa y útil basada en modelos claros y consistentes que son evidentes y reconocible para los usuarios, poniendo cosas relacionadas entre sí y que separa las cosas no relacionadas, diferenciando cosas diferentes y hacer cosas similares se parecen entre una y otra. El principio de estructura concierne a la arquitectura general de la interfaz de usuario.
  2. Simplicidad: El diseño debe facilitar las tareas sencillas y comunes, comunicarse de forma clara y sencilla en el propio idioma del usuario y proporcionar buenos accesos directos que estén significativamente relacionados con procedimientos más largos.
  3. Visibilidad: El diseño debe hacer visibles todas las opciones y materiales necesarios para una tarea determinada sin distraer al usuario con información superflua o redundante. El buen diseño no abruma a los usuarios con alternativas o confunde con información innecesaria.
  4. Retroalimentación: El diseño debe mantener a los usuarios informados de las acciones o interpretaciones, los cambios de estado o condición, y los errores o excepciones que son relevantes y de interés para el usuario a través de un lenguaje claro, conciso y claro que sea familiar para los usuarios.
  5. Tolerancia: El diseño debe ser flexible y tolerante, reduciendo el costo de los errores y el mal uso al permitir deshacer y rehacer, y al mismo tiempo evitar los errores siempre que sea posible, tolerando entradas y secuencias variadas e interpretando todas las acciones razonables.
  6. Reuso: El diseño debe reutilizar los componentes y comportamientos internos y externos, manteniendo la coherencia con el objetivo en lugar de consistencia meramente arbitraria, reduciendo así la necesidad de los usuarios a repensar y recordar.

 

¿Qué es la UX? Experiencia de usuario.

La experiencia de usuario hace referencia a las sensaciones que experimenta el usuario antes, durante y después de interactuar con un sitio, es decir, son las sensaciones que percibe y hace que el usuario se sienta satisfecho y feliz. Si esto ocurre, estaremos hablando de que ha producido una buena buena experiencia, que hemos hemos aplicado la accesibilidad y hemos hecho el sitio web lo más usable posible.

La experiencia de usuario, como se refiere al análisis del comportamiento del usuario, tiene actitudes relacionadas con la psicología:

  • La percepción. Tenemos que saber qué nos llama la atención, cómo nos afectan los colores y cómo desplazamos la mirada por la pantalla.
  • Las emociones. Las emociones no son reacciones automáticas, y por lo tanto hay que entender cómo se generan y qué implicaciones tienen. Las personas nos dejamos guiar más por las emociones que por cualquier otra cosa, y precisamente por eso es tan importante tenerlas en cuenta.
  • La memoria. Cuando diseñamos una web tenemos que pensar en las limitaciones de las personas para recordar. Muchas veces no se tienen en cuenta los caminos para que el usuario vuelva al punto de partida, y eso puede hacer que se sienta confuso.
  • La mentalidad. El usuario tendrá creencias, estereotipos, su interpretación de la sociedad y de las personas que lo rodean. Siguiendo en esta línea, vemos por qué cada vez más los usuarios buscan valoraciones de otras personas acerca de un producto en la red: no es solamente desconfianza, también implica qué prejuicios y creencias tiene.
  • La motivación. El usuario tiene que estar motivado durante todo el tiempo que esté en una web, no solamente al principio (de lo contrario, puede irse). Actualmente existen muchas empresas que usan el Gaming para tener a sus usuarios motivados y entretenidos.
  • El aprendizaje. Desde el momento en que un usuario entra en una página web se convierte en un aprendiz y eso significa que tenemos que enseñarle los pasos que tiene que dar para que consiga su objetivo. Además, se tiene que estructurar la información para que el usuario entienda fácilmente todo el contenido de la web.

Principios de la UX. (Experiencia de usuario)

 

  1. Esté fuera del camino de las personas: En diseño, mucho puede ser excesivo. En realidad las personas saben lo que desean y es mucho mejor hacer esa experiencia de la manera más fácil posible, sin complicaciones.
  2. Cree jerarquías que vayan de acuerdo con lo que las personas necesitan: si el principio 1 es hacerlo todo más simple, es importante que lo que las personas encuentren tenga una organización similar a sus necesidades.
  3. Limite las distracciones: si usted tiene una idea clara de qué desea que los usuarios hagan, tenga cuidado con lo que pone al lado, pues puede lograr resultados contraproducentes. Un diseño limpio y sin distracciones es un buen aliado.
  4. Provea de manera fuerte la esencia de la información: lo que más puede limitar una buena experiencia es no tener todo el conocimiento o contenido adecuados. Por ello, el diseño debe incluir lo necesario para la navegación y los contenidos prometidos o esperados por el usuario.
  5. Provea signos y pistas: hay que aprovechar todos los elementos a la mano, en especial los visuales, lo cual generalmente es un excelente complemento de la información adecuada.
  6. Es necesario el contexto: piense que no todos tienen el mismo nivel de conocimiento e información, por lo que muchas veces el contexto es parte importante para el desarrollo de la experiencia. Casi siempre todo necesita un porqué.
  7. Use el contenido constantemente: crear alertas y comunicar todo el tiempo en qué parte del proceso o del sitio se encuentra el usuario es vital para la buena experiencia.
  8. Haga reversibles las acciones: si hay algo que puede ser difícil de asumir para un usuario es que lo que hizo en el sitio web no pueda cambiarse o requiera muchos pasos para lograrlo. Por ello, es necesario dar la posibilidad de deshacer algunas decisiones, desde la simple de regresar a la página anterior hasta cancelar un pedido en una tienda en línea.
  9. Establezca un canal de retroalimentación: este puede ser uno de los canales más eficientes para saber lo que está sucediendo en su sitio web con la experiencia de usuario. Mantenga siempre una comunicación abierta. Si muchos usuarios ‘están equivocados’ o ‘no captan’ lo que usted está tratando de ofrecer o comunicar, lo más probable es que no sean ellos los del error.
  10. Es importante generar una primera buena impresión: lo que hace que los usuarios vuelvan y se conviertan en usuarios, lectores o visitantes fieles de un sitio es su experiencia. Generar buenos momentos y de tal forma buenos recuerdos impulsa esa fidelidad, y también el que comparta el sitio con otros.

Conclusión entre UI y UX

Por lo tanto la experiencia de usuario es lo que siente el usuario de interactuar con un producto, mientras que la interfaz de usuario es una capa visual de colores, texturas, formas y elementos. Por eso es algo que muchas personas suelen confundir con facilidad, porque digamos que una se integra dentro de la otra.

Es decir, la diferencia entre la interfaz de usuario y la UX o experiencia de usuario sería esta: El diseño de interacción se ocupa de decidir cuál será el recorrido y dónde se deberán situar los botones que desencadenarán las diferentes acciones, es la parte de estrategia y la experiencia de usuario trata sobre los aspectos relativos a esos procesos o acciones que se desencadenan, se ocupa de qué es lo que sucede cuando se activan los botones o mecanismos, y sería la parte mecánica del proceso.

Entradas relacionadas:

Accesibilidad y usabilidad web: Diferencias

Usabilidad web: ¿Qué el es enfoque “Mobile First”?

Responsive Design. ¿Qué es?

Responsive Web Design (RWD) es una técnica de diseño y desarrollo de sitios y aplicaciones web que permite que las páginas se adapten al tamaño, la resolución y orientación de la pantalla, y por tanto al dispositivo del usuario. Y todo ello con un código único, una única página, una única URL.

Boston Globe

Boston-Globe-ejemplo-de-Responsive-Web-Design

Responsive Design. ¿Cómo se hace?

Esta flexibilidad se consigue mediante el uso de un código HTML único pero que se presenta de manera diferente gracias a:

  • La separación entre el contenido y la presentación: todos los estilos están definidos en las CSS.
  • Layouts basados en grids: la información se organiza en ejes verticales y horizontales. Tendremos definidos diferentes layouts en diferentes CSS, por ejemplo uno de 3 columnas, uno de 2 columnas y uno de 1 columna.

 

layout_rwd

 

  • Fluids Grids, es decir, el uso de medidas relativas que permitan que el contenido se pueda adaptar realmente como se ve en la imagen anterior. Permite utilizar todo el espacio disponible y evitar el desplazamiento horizontal.
  • Media Queries, permite cargar dinámicamente las diferentes CSS que hemos definido en función del tamaño de pantalla, su resolución o su orientación.

<link rel="stylesheet" type="text/css" href="style2col.css" media="all and (min-width: 400px) and (max-width: 800px)" />

En este ejemplo se especifica la CSS a utilizar (layout de 2 columnas) con un viewport (la parte de pantalla donde se representa el documento) de una anchura entre 400px y 800px.

  • Configuración del meta viewport: mediante este meta indicamos que nuestra web es flexible para adaptarse a los diferentes anchos y resoluciones de pantalla, le indicamos al navegador que no aumente o reduzca la página, que use el zoom por defecto.

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

  • Imágenes y vídeos de tamaño flexible, que también se adapten al espacio disponible. Se puede conseguir de diferentes maneras, cada una con sus ventajas e inconvenientes.

 

Uso de las imágenes

  • La imagen se define como fondo de un elemento en las CSS (background-image) Se tienen diferentes versiones de la imagen a diferentes tamaños, en cada CSS se carga una de ellas. Para ello, hay que tener en cuenta la accesibilidad de las  imágenes y usar el texto alternativo según la imagen que corresponda.
  • La imagen se incluye en el código HTML con el elemento IMG pero se define su anchura y altura en las diferentes CSS. El gran inconveniente es que aunque muestras la imagen a diferente tamaño en realidad se carga siempre la de mayor peso.
  • Los logotipos e iconos se incluyen con SVG adaptándolos mediante media queries. Media Queries son recomendación del W3C desde junio de 2012.

 

Enfoque “Mobile First”

Desde 2009 Luke Wroblewski viene defendiendo un enfoque Mobile First, basado en el principio de Mejora Progresiva. Pensar primero en la versión móvil y después ir añadiendo complejidad mediante Media Queries, que serán ignoradas por los navegadores que no las soporten.
Este enfoque, dada las limitaciones de las pantallas pequeñas, te permite centrarte y priorizar las tareas claves para los usuarios

Los dispositivos móviles requieren que los equipos de desarrollo de software se centren únicamente en los contenidos y en las acciones más importantes de la aplicación. Simplemente no hay espacio en una pantalla de 320x480px para los elementos innecesarios. Hay que priorizar.
Así que, cuando un equipo diseña primero para el móvil, el resultado final es una experiencia centrada en las tareas clave que los usuarios quieren lograr, sin distracciones. Eso es bueno para la experiencia de usuario y bueno para los negocios.

Relación entre Responsive Design y accesibilidad

Parten de un enfoque o filosofía similar: defienden una web única, que los sitios sean flexibles, independientes del dispositivo y a disposición de todos los usuarios.

Hay ciertos requisitos de accesibilidad, a nivel de código, que tienen gran impacto en la accesibilidad de las páginas y que deben tenerse en cuenta desde el comienzo del desarrollo: el uso de estándares, la separación entre el contenido y la presentación, el uso de medidas relativas, evitar las tablas para maquetar o la definición de jerarquías de información estructuradas correctamente.

Por otra parte, también hemos comentado que la metodología Mobile First va más allá de la mera adaptación del sitio al tamaño de pantalla.

Esto ayuda a priorizar contenidos y funcionalidades eliminado lo innecesario: las páginas son más cortas y sencillas y la navegación más racional. Como resultado tendremos sitios más fáciles de navegar y entender, con menor carga cognitiva y visual.

Favorece a todos los usuarios, pero sin duda especialmente a los usuarios con diversidad funcional cognitiva, a los usuarios que utilizan lectores de pantalla o a los usuarios que tienen una diversidad funcional física y utilizan dispositivos de entrada alternativos.

¿Cómo puede favorecer a la accesibilidad de un sitio que este sea Responsive Design?

Tener en cuenta el Criterio 1.3.1 para:

  • El contenido y la presentación están separados, los estilos están definidos en las CSS y no se usan tablas para maquetar. Todo ello beneficia a las personas con diferentes discapacidades al permitir a los agentes de usuario adaptar el contenido de acuerdo a sus necesidades.
  • Tendencia a tener la información estructurada y jerarquizada más correctamente
  • Tendencia al uso de elementos semánticos para poder definir sus estilos en las CSS. Indicar explícitamente la función estructural o valor semántico del contenido permitirá que esta información se pueda determinar mediante software favoreciendo la accesibilidad.
  • Tendencia a un mayor respeto por los estándares web, lo cual maximizará la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas (pauta 4.1)
  • El diseño flexible y la definición de tamaños relativos permiten que el texto se pueda ampliar sin desbordamientos y hacer zoom con garantías (criterio de conformidad 1.4.4)
    • El tamaño flexible de las imágenes y vídeos permitirá que se adapten mejor al espacio disponible sin que se superpongan con otros contenidos.
    • Mejor experiencia para los usuarios con baja visión que suelen tener resoluciones de pantalla más bajas y suelen ampliar la pantalla.
  • Además, el diseño flexible y que no se usen tablas para maquetar ayuda a garantizar un orden de lectura correcto.
  • Se tiene muy presente que el sitio se visualizará en distintos dispositivos y por tanto:
    • Es más probable que tu sitio no sea operable solo con el ratón, la forma de interactuar ahora es muy variable y esto ayuda al diseño inclusivo.
    • Es más probable que mejores el contraste de color, que suele ser más pobre en los dispositivos móviles ya que bajamos el brillo para ahorrar batería, además de que son habituales los reflejos en la pantalla (criterios de conformidad 1.4.3 y 1.4.6)
    • Mayor uso de la técnica de Mejora Progresiva, que consiste en una implementación básica, que funciona a través de múltiples dispositivos y con una amplia gama de tecnologías de asistencia, añadiendo después más funcionalidades para los dispositivos que las soportan.
  • Focalizarse solo en lo necesario, priorizar y simplificar, dará como resultado sitios más fáciles de navegar y entender, con menor carga cognitiva y visual, mejorando la legibilidad y la accesibilidad.
    • Mayor uso de la técnica de Revelación Progresiva, que se basa en diferenciar el contenido primario del secundario. El contenido primario aparece inmediatamente en el flujo normal de la página y es muy visible. El objetivo es mostrar solo lo relevante para el usuario en este momento. Nos beneficia a todos, pero especialmente a los usuarios con discapacidad cognitiva o con déficit de atención, y bien hecho facilita la navegación a los usuarios de lectores de pantalla o a las personas con diversidad funcional motriz.

Usabilidad web: Principios de diseño inclusivo

Introducción

Los principios de diseño inclusivo toman como elemento principal a los usuarios.

La base es diseñar teniendo en cuenta las necesidades de las personas con diversidad funcional permanente, temporal o contextual.

Van dirigidos a toda aquella persona que tenga que ver con el mundo del diseño y el de desarrollo de sitios web: diseñadores, profesionales de la experiencia del usuario, programadores, managers de productos, innovadores, artistas, pensadores…

Principios del diseño inclusivo

Los principios

Proporciona experiencias comparables

Asegúrate que la interfaz permite hacer tareas de manera conveniente para todos, sin perder la calidad del contenido.

Sea por circunstancias, contexto, o decisión propia, las personas son diversas. Usan métodos y herramientas distintas para interactuar con una aplicación. Lo que la interfaz ofrece a cada uno debe ser comparable en valor y calidad.

Ejemplos:

  • Contenido alternativo: Un alternativo básico, sea texto “alt” o una transcripción, descripción auditiva, o lenguaje de signos, hacen contenido accesible.
  • Caracteristicas de ergonomía: Proporcionar subtítulos sincronizados y poder personalizarlo hace un video accesible.
  • Establecer notificaciones y mensajes: Por ejemplo, para los usuarios ciegos aplicar los atributos ARIA

 

Considera la situación del usuario

Asegúrate de que la interfaz proporcione una una buena experiencia de usuario en cualquier situación.

Hay usuarios principiantes, los hay expertos, en el trabajo, en casa, viajando o bajo presión. Cada situación tiene su impacto. Para los que ya tienen dificultad en interactuar, por ejemplo por personas con diversidad funcional motriz, o si existen problemas con el uso del teclado, este impacto puede hacer la interfaz aún más difícil de usar.

Ejemplos:

  • Contraste de colores: Usar contrastes altos.
  • Ayuda contextual: La ayuda contextual es importante para los usuarios. Siempre es bueno esa información adicional que nos ayuda a saber qué estamos haciendo, por ejemplo, cuando estamos ante un formulario de inscripción y especificamos que el campo de “Contraseña” tenga 8 caracteres. Es muy importante para los usuarios que usen lector de pantalla.
  • Subtítulos: Cuando estemos en un lugar público y no queremos molestar a nadie es importante poner subtítulos y quitar el volumen.

Sé consistente

Usa convenciones, de manera consistente.

Los componentes de la interfaz reflejan patrones establecidos y conocidos que resultan obvios en funcionalidad, comportamiento, aparencia y estilo escrito. Se deben decir las cosas de la misma manera y los usuarios deben poder realizar acciones similares.

  • Patrones de diseño coherentes: Usa patrones de diseño consistentes para reforzar la comprensibilidad y familiaridad.
  • Consistencia de lenguaje: Usa lenguaje sencillo de manera consistente, incluso texto importante para usuarios de lectores de pantalla como el texto alternativo, encabezados, y etiquetas de controles. También es importante usar elementos del estilo como un resumen, bien señalado como tal, al principio de secciones, o destacar términos definidos en listados.
  • Arquitectura consistente: Usa arquitectura consistente en plantillas de paginas, para facilitar navegación y comprensión rápida.

 

El usuario manda

El usuario es que el manda. Debe poder interactuar con el contenido de la manera que le convenga.

Tiene que tener la posibilidad de trabajar para cambiar las características de la interfaz, como orientación de la pantalla, tamaño del texto y el contraste de colores.

Ejemplos:

  • Desplazamiento: El ‘Desplazamiento Infinito’ (cuando se agrega contenido automáticamente) puede implicar problemas para usuarios que usan el teclado, porque nunca pueden pasar el flujo de contenido. Permite desactivarlo poniendo un botón para actualizar.
  • No ponga animaciones: Para algunos usuarios pueden distraer y marear. Si empiezan automáticamente, deben de poder pararlas.
  • Permite hacer zoom: Hay muchas razones para querer hacer zoom en una pagina. Asegúrate de que el contenido no se esconde cuando se hace zoom.

 

Ofrece opciones

Proporciona diferentes maneras de cumplir las tareas.

Normalmente hay más de una manera de cumplir una tarea, y no se puede saber cual será la preferida por un usuario. Proporciona alternativas para la maquetación de información, y los procesos para cumplir tareas. Ofrece opciones que permita al usuario elegir la que le conviene en cada contexto.

Ejemplos:

  • Diversas maneras para hacer una acción: Ofrece maneras distintas para hacer una acción. Por ejemplo para borrar un objeto,se puede permitir una interacción directa, sea un gesto en pantalla táctil o una tecla de atajo, así que seleccionar objetos y tocar una botón de borrar – cómo se ve en clientes de correo.
  • Maquetación:  Hay usuarios quienes prefieren imágenes grandes, o contenido en bloques pequeños.
  • Alternativas accesibles: Hay muchas maneras de presentar la información. Esta información que presentamos, debe favorecer y debe estar disponible para todos los usuarios. Esas alternativas pueden ayudar a todos los usuarios, no sólo a un grupo determinado, (por ejemplo a los usuarios que usan lector de pantalla).

 

Prioriza el contenido

Ayuda al usuario a enfocarse en tareas, funciones y contenidos importantes para destacarlos en el contenido y la maquetación.

Puede ser más difícil entender una interfaz si las partes más importantes no se destacan. Un sitio puede ofrecer mucha información y funcionalidad, pero debe permitir al usuario enfocarse en una cosa a la vez. Identifica la función clave de la interfaz, el contenido y los controles que se dirigen a esta función.

Ejemplos:

  • Enfoque en la tarea actual: Muestra funcionalidades y contenido cuando son relevantes, no todos al principio.
  • Prioriza tareas: Ejemplo: Una app de correo permite principalmente leer y escribir mensajes. Entonces, haz que el botón para enviar un nuevo correo este siempre disponible. Igualmente, pon la bandeja de entrada antes de otros listados como los correos enviados o el spam. Es decir, dar prioridad a las acciones más importantes.
  • Ordenar el contenido: Es muy importante ordenar el contenido, tanto visualmente como en el orden del contenido en el código fuente.
  • Usa un lenguaje claro: En el texto de los enlaces, encabezados, y botones usa un lenguaje sencillo y claro, poniendo primero la información más importante. Eso facilita el escaneo del texto, sea visualmente o por audio, por ejemplo con un lector de pantalla.

 

Agrega valor

Considera el valor de funciones y características, y cómo mejoran la experiencia de usuarios diversos.

Funciones y características deben mejorar la experiencia del usuario, proporcionando maneras eficaces de encontrar e interactuar con el contenido. Considera funcionalidades de dispositivo cómo interreacción por voz, géolocalizacion, la camera, o vibración, y cómo integración con dispositivos conectados pueden ofrecer opciones más convenientes.

Ejemplos:

  • Integración con dispositivos conectados, o “pantalla segunda”: Usa la interacción por voz para controlar contenido multimedia o buscar contenido, que ayuda a la gente que puedan tener dificultades con otras interfaces.
  • Integración con funcionalidades de la plataforma: Utiliza la vibración para que salten las notificaciones para personas con dificultades auditivas, y geolocalización para facilitar el uso de servicios locales para usuarios con dificultades para moverse.
  • Facilita tareas: Permite ver contraseñas para que los usuarios sepan si las han escrito bien. Permite la identificación por huella digital así como por contraseña.

 

 

 

 

 

Accesibilidad web: Marcador de posición en los formularios

Los marcadores de posición en los campos de formulario son perjudiciales

El texto del marcador de posición dentro de un campo de formulario dificulta que las personas recuerden qué información pertenece a un campo, así como verificar y corregir los errores.
También plantea cargas adicionales para los usuarios con dificultades visuales y cognitivas.
Las descripciones o consejos ayudan a aclarar qué se incluye dentro de cada campo de formulario y, por lo tanto, mejorar las tasas de finalización y conversión.

marcador de posición en los formularios

Desafortunadamente, los marcadores de posición en los campos de formulario a menudo perjudican la usabilidad.

Etiquetas y marcadores de posición

Las etiquetas le dicen a los usuarios qué información pertenece a un campo de formulario determinado y generalmente se ubican fuera del campo de formulario. El texto del marcador de posición, ubicado dentro de un campo de formulario, es una sugerencia, descripción o ejemplo adicional de la información requerida para un campo en particular. Estas sugerencias generalmente desaparecen cuando el usuario escribe en el campo.

Marcadores de lugar que reemplazan etiquetas

Algunos formularios reemplazan las etiquetas de campo con texto de marcador de posición en el campo para reducir el desorden en la página o acortar la longitud del formulario.

A continuación, voy a enumerar 7 razones principales por las que los marcadores de posición no deben usarse como reemplazos de etiquetas de campo.

1. El texto de marcador de posición que desaparece afecta a la memoria a corto plazo

Si el usuario olvida la pista, lo que la gente suele hacer al completar formularios largos, debe borrar lo que escribió y, en algunos casos, hacer clic fuera del campo para volver a mostrar el marcador de posición. En un mundo ideal, los usuarios estarían completamente enfocados al completar un formulario.

En formularios simples, de uso frecuente, con uno o dos campos, como un cuadro de búsqueda o un formulario de inicio de sesión, los usuarios pueden adivinar a qué se deben ingresar.

2. Sin etiquetas, los usuarios no pueden verificar su trabajo antes de enviar un formulario.

La falta de etiquetas hace que sea imposible para los clientes mirar el formulario y asegurarse de que sus respuestas sean correctas.

Del mismo modo, los navegadores que completan automáticamente los campos de formulario pueden completar la información de forma incorrecta. Si no hay etiquetas, o si las instrucciones especiales ya no están visibles, los clientes deben revelar el texto del marcador de posición eliminando el texto de cada campo uno por uno para verificar que coincida con la descripción.

3. Cuando se producen mensajes de error, las personas no saben cómo solucionar el problema.

Si el formulario se ha completado, pero no hay etiquetas o instrucciones visibles fuera de los campos del formulario, los usuarios tienen que volver a cada campo para revelar la descripción a fin de corregir el error.

4. El texto del marcador de posición que desaparece cuando el cursor se coloca en un campo de formulario es irritante para los usuarios que navegan con el teclado.

Las personas que usan la tecla Tab se mueven rápidamente de un campo a otro, y no se detienen a estudiar el siguiente campo antes de buscarlo.

5. Los campos con cosas en ellos son menos perceptibles.

Los estudios de seguimiento de ojos muestran que los ojos de los usuarios se sienten atraídos por los campos vacíos.

6. Los usuarios pueden confundir un marcador de posición con los datos que se completaron automáticamente.

Algunos usuarios suponen que el texto del marcador de posición es un valor predeterminado y saltean el campo por completo. Lo más cómodo es dejar el campo vacío.

7. Ocasionalmente, los usuarios tienen que eliminar manualmente el texto del marcador de posición.

A veces, los marcadores de posición no desaparecen cuando los usuarios mueven el foco de entrada al campo. Si el marcador de posición permanece en el campo como texto editable, los usuarios se ven obligados a seleccionarlo manualmente y eliminarlo. Esto crea una carga innecesaria para los usuarios y aumenta el costo de interacción de rellenar el formulario.

A veces, el marcador de posición se atenúa cuando el cursor se coloca en un campo de texto. Desafortunadamente, este patrón de interacción es raro y los usuarios no están familiarizados con él: algunos todavía piensan que tienen que eliminar el texto manualmente. A menudo se requieren algunos intentos fallidos y muchos clics para darse cuenta de que pueden comenzar a escribir sobre el texto atenuado.

Texto de marcador de posición además de etiquetas

Usar texto de marcador de posición en combinación con etiquetas de formulario es un paso en la dirección correcta. Las etiquetas fuera de los campos del formulario hacen que la información esencial esté visible en todo momento, mientras que el texto de marcador dentro de los campos del formulario se reserva para información adicional.

Sin embargo, incluso al usar etiquetas, colocar sugerencias o sugerencias importantes dentro de un campo de formulario puede causar los 7 problemas mencionados arriba.

Si algunos de los campos requieren una descripción adicional que es esencial para completar el formulario correctamente, es mejor colocar ese texto fuera del campo para que esté siempre visible.

Marcadores de posición y accesibilidad

Un último tema a considerar es que el texto del marcador de posición generalmente es malo para la accesibilidad.

Tres de los mayores problemas de accesibilidad son los siguientes:

El color gris claro predeterminado del texto de marcador de posición tiene un contraste de color pobre en la mayoría de los fondos. Para los usuarios con problemas visuales, el contraste deficiente del color dificulta la lectura del texto. Debido a que no todos los navegadores permiten que el texto de marcador de posición tenga un estilo mediante CSS, este es un tema difícil de mitigar.

Los usuarios con dificultades motoras son los que lo tienen más difícil. Los marcadores de posición pueden ser problemáticos: los marcadores de posición que no desaparecen requieren más interacción con el teclado o el mouse para eliminarse.

Por otra parte, si hablamos de personas con problemas visuales, no todos los lectores de pantalla leen el texto del marcador de posición en voz alta. Los usuarios ciegos pueden perder la pista por completo si el software que utilizan no menciona el contenido del marcador de posición.

 

Accesibilidad web: Cómo funciona un lector de pantalla

Cómo funciona un lector de pantalla

Para aquellos usuarios que usan software de lectura de pantalla como JAWS, NVDA o VoiceOver para acceder a la información en la Web, la experiencia del usuario puede ser bastante diferente de la de quienes pueden ver visualmente el contenido.Pero la gente prefiere pasar directamente a los detalles técnicos:

  • ¿Qué teclas presionar?
  • ¿Con qué lector de pantalla debería probar?
  • ¿Qué navegador debería usar?

 

lector_de_pantalla

Si bien todas estas consideraciones son importantes, lo mejor es dar un paso atrás y preguntarnos:

¿Cómo es la experiencia y cómo puedo simular esa experiencia si puedo ver la pantalla?
Para ello, lo vamos a explicar con un ejemplo muy claro para que se entienda bien.

Una puerta abierta

Imagina que acabas de abrir una puerta y estás mirando una gran sala de conferencias.
En el centro de la sala hay una gran mesa de conferencias con 10 sillas (5 en cada lado de la mesa).

Sentados en la mesa hay 2 hombres y 2 mujeres. Las 4 personas están sentadas en el mismo lado de la mesa (están frente a la puerta en la que estás parado). En el otro extremo de la sala (detrás de la gente sentada en la mesa) hay 3 ventanas grandes que dan a un patio con bancos, flores y árboles pequeños.

En el lado derecho de la sala hay un mostrador con una cafetera y un microondas encima.

El lado izquierdo de la sala tiene un gran televisor de pantalla plana montado en la pared.

Suponiendo que no está familiarizado con el diseño de esta sala, ¿qué es lo primero que haría al abrir la puerta? Escanear visualmente la habitación de izquierda a derecha. Algunos la pueden escanear de derecha a izquierda. Otros pueden primero mirar la mesa en el centro y luego escanear el perímetro de la habitación.

Sin embargo, no importa cómo lo hagas, la mayoría escanearía la habitación de alguna manera con la vista para tener una idea rápida del diseño y el contenido de la sala.
El escaneo sólo puede tomar unos segundos y la mayoría ni siquiera se darán cuenta de que lo hicieron.

A continuación, nos podemos centrar en ciertos elementos de interés, como las personas sentadas en la mesa o en la televisión de pantalla plana.

Una habitación oscura

Ahora, imaginemos la escena y esta vez cuando abramos la puerta, la habitación estará completamente a oscuras. No hay luz y no se puede ver absolutamente nada a primera vista. Sin embargo, nos han dado una pequeña linterna y cuando la encendemos, la luz nos permite ver un área pequeña a la vez.

¿Cómo observarías ahora el contenido de la habitación?

Algunos pueden mover la luz de izquierda a derecha comenzando por los pies y alejándose.
También se puede empezar desde la parte posterior de la habitación y mover la linterna, mientras que otros pueden apuntar la linterna al azar en varios lugares de la habitación sin un patrón en particular. A medida que mueva la luz por la habitación, tendrá que construir un mapa mental o una imagen de lo que hay en la habitación y cómo está distribuida.
La construcción de este mapa mental llevará mucho más tiempo que el escaneo visual de la sala cuando todas las luces estaban encendidas.
A medida que movemos la linterna, tendremos que recordar cada cosa que hemos visto y cómo se relacionan todas juntas.

Si olvidamos dónde se encuentra algo, llevará más tiempo localizarlo:

¿el mostrador con la cafetera estaba en el lado derecho de la habitación o estaba en la parte de atrás? ¿Cuántas personas había en la mesa, 4 o 5?

Responder estas preguntas cuando puede ver toda la habitación a la vez requerirá poco esfuerzo, pero contestarlas cuando solo puede ver un área pequeña a la vez llevará mucho más tiempo.

Un escenario análogo

Este segundo escenario es análogo a cómo un usuario de lector de pantalla revisa una página web o una aplicación de móvil.

Si bien los comandos del teclado o los gestos táctiles pueden mover el software de lectura de pantalla alrededor de la página, solo es posible leer una cosa a la vez.
No hay forma de que el usuario con discapacidad visual tenga una visión general rápida (de 1 a 3 segundos) de la página, similar a lo que podría hacer alguien que pueda ver la pantalla.

Afortunadamente, si se utilizan técnicas de navegación de página accesibles como encabezados o regiones, esto puede ayudar a los usuarios del lector de pantalla a enfocarse en ciertas áreas de la página.

Volviendo a nuestro escenario de habitación oscura desde arriba, imagina que ahora hay pequeños puntos rojos de luz en los elementos clave de la habitación: como la mesa, el mostrador, la televisión y cada persona sentada en la mesa. Hay que usar la linterna para mirar alrededor, pero los puntos rojos le dan una idea de dónde se encuentran las cosas más importantes.

Otro desafío importante que pueden enfrentar los usuarios de lectores de pantalla es cambiar dinámicamente el contenido de una página.

Volviendo a los ejemplos de habitaciones claras y oscuras, imagina que uno de los hombres se levanta y se mueve al otro lado de la mesa.

Ahora hay 2 mujeres y 1 hombre en un lado de la mesa y 1 hombre en el otro lado.
En el ejemplo de la habitación iluminada, lo más probable es que notemos el movimiento mientras sucede. Incluso si no estuviéramos mirando directamente al hombre que se movió, probablemente notaríamos el movimiento por el rabillo del ojo y nos percatamos de lo sucedido.

En cuanto al ejemplo de la habitación oscura, sería muy difícil saber que algo sucedió a menos que tengas el haz de la linterna directamente sobre el hombre que se movió en el momento preciso.
Es más probable que nunca sepa que se movió hasta algún momento después, cuando mueve la luz sobre la silla que dejó libre.

En efecto, esto es lo que sucede cuando el contenido de la página cambia pero no alerta el software de lectura de la pantalla. Es posible que el usuario nunca sepa que algo cambió en la página a menos que se muevan a través de la nueva información y se den cuenta de que ahora es diferente.

Esto que he explicado se resuelve asegurando que con el contenido dinámico se usen técnicas como alertas o regiones en vivo que hacen que el software de lectura de pantalla anuncie la información actualizada al usuario.

En nuestro escenario de la habitación oscura, el hombre puede anunciar verbalmente que se está moviendo de un lado de la mesa al otro. Incluso si la luz no estuviera en él, escucharías el anuncio y entenderías mejor lo que está cambiando.

En una ilustración final, tomemos las ventanas que dan al patio. En el escenario de la habitación iluminada, se podrá ver rápidamente que las ventanas dan a un patio con bancos, flores y árboles. Sin embargo, en el ejemplo de la habitación oscura, incluso si apuntabas la luz hacia las ventanas, no podrías ver lo que estaba afuera.
Esto ilustra elementos visuales como imágenes que no tienen una etiqueta de texto asociada.
Por ejemplo, el software de lectura de pantalla puede identificar que una imagen está presente en una página, pero la única forma en que puede comunicar información sobre la imagen es a través del texto alternativo que se le asigna.
Sin la etiqueta de texto, el usuario del lector de pantalla no tendría idea de qué se muestra en la imagen. En el ejemplo de la habitación oscura, se podría colocar un letrero junto a las ventanas con una descripción de lo que aparece afuera. Cuando usemos la linterna, entonces podremos leer el letrero.

 

Usabilidad web: “Miro y entiendo” – Daniel Mordecki.

En esta entrada voy a hablar del libro de Daniel Mordecki “Miro y entiendo”.

Miro y Entiendo es una guía práctica de usabilidad. Parte de los conceptos teóricos y definiciones básicas, desarrolla las metodologías y técnicas centrales de la disciplina y aporta consejos prácticos para su utilización, con ejemplos y casos de la vida real.

miro_y_entiendoEl libro comienza con una gran pregunta:

¿Qué es la usabilidad?

“La usabilidad es la disciplina que tiene como objetivo reducir al mínimo las dificultades de uso inherentes a una herramienta informática, analizando la forma en que los usuarios utilizan las aplicaciones y sitios Web con el objetivo de detectar los problemas que se les presentan y proponer alternativas para solucionarlos, de modo de que la interacción de dichos usuarios con las aplicaciones y sitios Web sea sencilla, agradable y productiva.”

El autor indica que todos los profesionales de la usabilidad tienen que ser persistentes en la tarea de hacer sitios web fáciles de usar, y de ahí deriva algunos atributos de la usabilidad:

  • Todas las interfaces se pueden usar, por muy difícil que sea.
  • Los problemas de usabilidad nunca son catastróficos.
  • No hay una solución puntual

Nos cuenta que la usabilidad se pone de manifiesto por tres fases: la computación, la percepción y la interacción.

El Diseño de Interacción se basa en 4 pilares fundamentales:

Elementos de la experiencia de usuario

El modelo divide los elementos de la interfaz en 5 grandes grupos, que describiremos partiendo de los cimientos conceptuales y subiendo hacia las capas más concretas, donde se efectúa realmente la interacción en la práctica.

elementos de interfaz de usuario

 

En la primera capa se determinarán los objetivos que se pretenden conseguir con tres preguntas claves:

  • ¿Por qué necesitamos el sitio?
  • ¿Para quién es el sitio?
  • ¿Qué debe suceder para que estemos satisfechos?

El alcance de un sitio Web está determinado por los objetivos que un visitante podrá cumplir en él. Tiene una relación directa con los objetivos, pero mien-tras los objetivos reflejan el punto de vista de la organización, el alcance expresa el punto de vista de los usuarios del sitio.

La arquitectura de la información es la base que permite definir cómo se va a navegar el sitio.hay una fuerte relación entre la organización de categorías y la organización de menús.

El autor también plantea cómo se originan las búsquedas de los usuarios en función de las necesidades que se le presentran en el momento.

Un modelo de interacción supone un conjunto pequeño de funcionalidades básicas o primitivas sobre las que se construyen las funcionalidades más complejas.

Es el conjunto de primitivas que se van a utilizar para construir la interfaz y aplicarlas consistentemente a lo largo de todo el sitio o la aplicación.

La interfaz es, desde el punto de vista estrictamente técnico, el conjunto de puntos de contacto del usuario con el sitio a través de la computadora e incluye todo lo que el sitio emite o muestra (salida o “output”) y todo lo que el sitio recibe (entrada o “input”). Es lo que se muestra en la pantalla, sumado al conjunto de acciones que el usuario puede realizar utilizando el mouse y el teclado. Es la parte sensible (visible, tocable, audible) de la interacción.

Miro, leo, pienso: Tres niveles de interacción

Para crear páginas y sitios Web fáciles de comprender y usar es importante pasar al otro lado de la pantalla e intentar entender cómo los visitantes de esos sitios interactúan con ellos.

La interacción de los visitantes con un sitio web se concibe en tres niveles: mirar, leer y pensar. La interacción se desarrolla simultáneamente en los tres niveles, se combinan e interactúan permanentemente entre sí y el visitante obtiene su experiencia como un todo, sin necesidad de tener consciencia alguna sobre qué nivel fue el que aportó qué dato. Cada uno de estos niveles requiere un nivel de atención particular, un esfuerzo consciente particular y retorna al visitante un nivel de resultados particular. 

En este capítulo, lo que más me ha gustado es la facilidad que tiene para transmitir las ideas y conceptos de una forma sencilla y comprensible para todos, fruto posiblemente de su experiencia docente. Por ello, el libro está lleno de consejos prácticos, ejemplos y casos de la vida real, de la aplicación de la teoría en la práctica cotidiana.

Métodos de evaluación de Usabilidad

El autor nos habla entre otras cosas de Jakob Nielsen y los principios heurísticos, así como de técnicas que se usan para trabajar la usabilidad como el test con usuarios, el card sorting, la ley de Fitts, y las normas ISO.

Redactar para la Web

el autor nos hace una introducción de cómo los navegantes leen en Internet y nos proporciona una serie de consejos y características para leer en la Web (mapas de calor, estilos de escritura, técnicas de escritura y cómo organizar el contenido).

Formularios: la Web interactiva

El autor nos da consejos sobre cómo hacer formularios usables, cómo se estructuran, cómo poner las etiquetas, los mensajes de error, etc…

Por otro lado, para finalizar a modo de resumen, resaltar que Daniel Mordecki a lo largo de todo el libro hace uso de la metáfora para facilitar la compresión de los conceptos.

“Quien se focaliza en la tarea de barrer podrá inventar escobas más livianas, con cerda intercambiable y mango irrompible, pero jamás podrá inventar la aspiradora: esto está reservado a los que se focalizan en el objetivo de tener una casa limpia.”

El mensaje que emerge al final del libro es el absurdo de muchos rediseños web, el absurdo de destinar grandes cantidades de dinero y tiempo a cambiar por cambiar, y no a cambiar para mejorar, que es la misión de los profesionales de la usabilidad.

 

Usabilidad web: Mensajes de error en formularios

Mensajes de error en formularios

En esta entrada os voy a hablar de cual es la mejor manera de colocar los mensajes de error en los formularios.

¿Dónde colocamos los mensajes de error en los formularios?

Es importante conocer donde podemos colocar los errores, ya que si no se colocan donde los usuarios esperan verlos, les será imposible completar el formulario.

Cuando los usuarios cometen errores, deben comprender cuáles son esos errores para poder corregirlos y volver a enviar el formulario. Quieren completar el formulario, pero si hacerlo requiere mucho esfuerzo, se irán del sitio web.

¿En la parte superior o alineados con los campos erróneos?

Las dos ubicaciones más comunes para los mensajes de error se encuentran en la parte superior del formulario y en línea con los campos erróneos.

¿Qué ubicación es más intuitiva para los usuarios?

Mostrar todos los mensajes de error en la parte de arriba del formulario produce mucha carga cognitiva en la memoria del usuario. Esto obliga a los usuarios a recordar cada mensaje de error para cada campo erróneo.

Para reducir la carga cognitiva de los usuarios, hay que mostrar los mensajes de error alineados con los campos erróneos. Así pueden corregir los errores de forma más rápida y sencilla.

Ubicación de los mensajes de error de preferencia del usuario

Colocar los mensajes de error en línea con los campos erróneos es mucho más cómodo para los usuarios. Prefieren que los mensajes de error se ubiquen a la derecha del campo.

Los mensajes de error colocados a la izquierda del campo no son buenos para los usuarios. Los mensajes de error colocados sobre el campo causan mayor carga cognitiva seguida de mensajes de error debajo del campo, por lo tanto dificulta la usabilidad de los campos de formulario.

Por qué a la derecha del campo es mejor

Es importante entender por qué es preferible y esperado colocar los mensajes de error a la derecha del campo. De esta forma, los diseñadores pueden educar mejor a los demás sobre cómo se comportan los usuarios cuando toman decisiones de diseño.

El sistema de lectura occidental va de izquierda a derecha. Cuando los usuarios mueven los ojos de la entrada al mensaje de error, se produce una progresión natural que requiere poco esfuerzo mental y visual. Al mover los ojos desde el mensaje de error a la entrada para la corrección también sigue el flujo natural para releer el texto.

mensaje de error a la derecha del campo

Por qué a la izquierda del campo es peor

Colocar mensajes de error a la izquierda del campo va en contra del sistema de lectura occidental. Los usuarios mueven los ojos en la dirección opuesta al flujo de lectura natural cuando aparece el mensaje de error. En lugar de producirse una progresión natural, es antinatural y no es óptima, cuando los usuarios lo que desean es completar el formulario.

Tampoco es intuitivo porque los usuarios esperan elementos de mayor prioridad en el lado izquierdo. Colocar el mensaje de error a la izquierda lo hace más importante que el campo. Pero el campo es más importante porque los usuarios necesitan enfocarse en él para rellenarlo.

Mensaje de error a la izquierda del campo

Por qué sobre el campo aumenta la carga cognitiva

Los usuarios experimentan una mayor carga cognitiva con mensajes de error sobre el campo (es decir, formularios con etiquetas alineadas en la parte superior). Esto es causado por una combinación del mensaje de error y el texto de la etiqueta del campo que confunde a los usuarios.

La proximidad de los dos textos crea un ruido visual que distrae a los usuarios cuando intentan leer el mensaje de error o la etiqueta. Ver ambos textos en su campo de visión hace que sea difícil concentrarse solo en uno de ellos y puede confundirlos.

Mensaje de error encima del campo

Ubicación de los mensajes de error para formularios móviles

Las pantallas móviles carecen del espacio horizontal para mostrar un mensaje de error y un campo, uno al lado del otro. Esto significa que los mensajes de error a la derecha del campo no son la mejor ubicación en los formularios móviles. En su lugar, hay que colocar los mensajes de error debajo del campo.

Mensaje de error abajo del campo

Aunque no se corresponde con el flujo de lectura natural de izquierda a derecha del usuario, sí se corresponde con el flujo de lectura natural de arriba hacia abajo.

Cuando los usuarios leen texto, mueven los ojos de izquierda a derecha bajando una página. Los mensajes de error debajo del campo son menos incómodos que en el campo, porque siguen la progresión de lectura vertical.
Colocar el mensaje de error demasiado cerca de la etiqueta del campo después puede aumentar la carga cognitiva cuando los usuarios leen el texto.

A la derecha o debajo de campo: ¿Cuál es el mejor?

Ambos, a la derecha del campo y debajo del campo son ubicaciones óptimas para los mensajes de error.

¿Pero qué ubicación se debería usar? 

Si deseamos que la implementación tarde menos tiempo en hacerse para ordenadores y dispositivos móviles, la mejor opción es poner los mensajes de error debajo del campo. Implementarlos para ordenadores también los hará utilizables para dispositivos móviles. Si queremos implementar mensajes de error para ambos dispositivos, la mejor opción es colocarlos a la derecha del campo en el escritorio y debajo del campo para dispositivos móviles.

Colocación de mensajes de error intuitivos

Los mensajes de error deben corresponderse con el flujo de lectura del usuario, por lo que los errores requieren menos esfuerzo cognitivo para corregirlos. Cuando los usuarios trabajan y piensan menos, pueden completar el formulario más rápido. Cuanto más rápido ayudemos a los usuarios a superarlo, antes podrán pasar a lo que quieran hacer.

Si quieres saber más sobre los formularios puedes leer la entrada sobre los marcadores de posición.

 

Usabilidad web: Arquitectura de información. Fundamentos

¿Qué es la arquitectura de información?

La arquitectura de información es la disciplina que se encarga del estudio, análisis, organización, disposición y  estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información. Facilita de esta manera la localización (o el acceso) de la información contenida en ellos y mejora, así, su utilidad y su aprovechamiento por parte de los usuarios.

arquitectura de información: fundamentos

Arquitectura de información: Fundamentos

El arquitecto de información es la persona que debe identificar la misión (los objetivos) y la visión (las expectativas de los usuarios) de la pagina web, determinar los contenidos y funcionalidades de la página, facilitar el acceso mediante sistemas de organización, etiquetado, navegación y búsqueda y planificar en previsión de futuras modificaciones y crecimiento de la página.

Durante la fase de “estrategia” identifica los objetivos, en la fase de “alcance” las necesidades de los usuarios, en la fase de “estructura” especifica las funcionalidades y requerimientos de la web, en la fase de “esqueleto” el diseño de los sistemas de navegación, organización, etiquetado y búsqueda y en la fase de “interfaz” prototipa la página.

Tipos de necesidad de información

El objetivo habitual de un usuario al acceder a una web es satisfacer una necesidad de información y/o realizar una transacción (por ejemplo comprar un billete de tren).

Desde el punto de vista de las necesidades informativas, se pueden distinguir tres tipos:

  • Necesidad de información concreta (NIC): por ejemplo, “¿qué precio tiene este producto?”
  • Necesidad de información orientada a problemas (NIOP), por ejemplo, “¿cuál es la relación entre la usabilidad y la arquitectura de información?”
  • Necesidad de información exploratoria (NIE), por ejemplo “quiero escoger un buen hotel para este fin de semana”
  • Necesidad de información sobre búsquedas previas (NIBP), es decir, localizar información que ya había localizado previamente.

 

Las estrategias de las que dispone un usuario para satisfacer estas necesidades de información en una página web son:

  • Búsqueda, utiliza la caja de búsqueda y analiza e interacciona con los resultados.
  • Navegación, explora a partir de los enlaces de la web.
  • Ayuda, por comodidad o desesperación reclama que se le oriente y señale dónde se encuentra el contenido.

Componentes o anatomía de la arquitectura de información

Una buena arquitectura de información se sustenta en tres pilares: el contexto organizacional en el que se desarrolla, el contenido que alberga y los usuarios que la visitan y consultan.

Los sistemas, estructuras o recursos para estructurar una web y que definen la AI de un sitio se llaman componentes o anatomía de la arquitectura de información y son los siguientes:

  • Sistemas de organización
  • Sistemas de etiquetado
  • Sistemas de navegación
  • Sistemas de búsqueda
  • Vocabularios o lenguajes documentales

 

Sistemas de organización

Dependiendo de cómo organicemos la información contenida en una web lograremos que los contenidos que alberga sean más fáciles de encontrar por los usuarios. Para hacer un diseño adecuado del sistema de organización es necesario desarrollar correctamente los componentes que lo conforma:

  • Esquemas de organización: sistemas que organizan los grupos de ítems de información contenidos en una página web en grupos a partir de un criterio concreto:
    • Exactos: grupos bien definidos y mutuamente excluyentes, sirven para conocer cosas previamente conocidas:
      • Alfabéticos
      • Cronológicos
      • Geográficos
    • Ambiguos, para localizar contenidos que no conocemos:
      • Tema
      • Tarea
      • Audiencia
      • Metáfora, de la que no hay que abusar, pues si no está bien desarrollada su alta ambigüedad desorienta al usuario.
      • Híbrido, utilización de varios de los esquemas anteriores.
  • Estructuras de organización: sistemas que organizan los grupos de ítems de información resultantes de los esquemas mostrando las dependencias lógicas que existen entre ellos:
    • Estructura jerárquica, una buena arquitectura de información incluye una jerarquía o taxonomía entre sus componentes. Permiten al usuario ubicarse y obtener un modelo mental de la estructura del sitio que visita:Consejos:
      • Diseñarla teniendo en cuenta a los usuarios.
      • Las opciones principales deben estar siempre visibles.
      • Combinarla con los otros tipos de estructuras para ofrecer al usuario flexibilidad a la hora de localizar la información.
      • Las categorías que la conforman deben ser mutuamente excluyentes. Si muchos contenidos pertenecen a varias categorías la taxonomía termina perdiendo su valor para localizar la información.
      • Sobre la anchura (nº de ítems al mismo nivel) y profundidad de la estructura (niveles de división verticales) recomendada se han escrito ríos de tinta
      • Definir la estructura pensando en la escalabilidad del portal, que sea posible incluir nuevas categorías sin modificarla sustancialmente, sin provocar cambios en la imagen mental que tiene el usuario que ya la ha visitado y sin tener que introducir modificaciones visuales en la home.
    • Basada en registros (o en el modelo de base de datos), idóneo para los contenidos bien estructurados y homogéneos
    • Estructura hipertextual (o en red), que debe ser complemento de otros tipos de estructuras y no la única opción de organización de la información. Permite reflejar relaciones menos estructuradas y más creativas existentes entre los contenidos.
    • Estructura secuencial, con un principio y un final claro y un único itinerario de consulta o exploración
    • Estructura en tabla (o matriz), sólo para aquellos contenidos que admitan su representación en una tabla, y debe ser utilizado en combinación con otras estructuras.

Algunos problemas que debemos resolver al diseñar el sistema de organización son:

  • La ambigüedad del propio lenguaje lingüístico.
  • La heterogeneidad de los contenidos.
  • Las diferentes perspectivas, siendo imprescindible tener en cuenta a nuestro público objetivo.
  • Los intereses de la organización, que es necesario conocer a fondo.

El mejor consejo es que, dependiendo del contexto y los usuarios, elegir y articular aquellos sistemas que sean realmente útiles, intentando simultanear esquemas exactos y ambiguos para ofrecer al usuario diferentes vías para acceder y localizar la información. La combinación de diferentes estructuras, si se combinan adecuadamente, permiten obtener un sistema sólido, coherente y flexible.

Sistemas de etiquetado

A la hora de definir el sistema de etiquetado debemos tener cuidado con:

  • La ambigüedad intrínseca al lenguaje, tanto sintáctica, léxicas (sinonimia y polisemia) como semántica (uso de metáforas, ironía, etc.)
  • La arbitrariedad, evitando utilizar términos con un significado diferente con el que normalmente se asocian.
  • La desorientación que producen las etiquetas que no anticipan ni dan pista sobre lo que esconden.
  • Las etiquetas que utilizamos se asociación al branding de la empresa, y unas etiquetas mal elegidas pueden dar una mala impresión de la misma.

Todo ello puede suponer que el usuario abandone la página porque no encuentra lo que necesita.

Las etiquetas pueden ser textuales o icónicas, estas deben utilizarse siempre junto a las primeras porque son intrínsecamente ambiguas.

Los sistemas de etiquetado con formato textual que deben planificarse son:

  • Enlaces contextuales. Deben identificarse visualmente como tales, diferenciar los que sean externos y utilizarse de forma consistente. No deben ser ambiguos y se debe tener en cuenta el contexto en el que se insertan, siendo además independientes del mismo.
  • Títulos. Deben estructurar coherentemente el contenido y su diseño debe reflejar su jerarquía. Tienen que ser descriptivos y coherentes con los literales utilizados en los otros sistemas de etiquetado. Deben ser consistentes a lo largo del sitio tanto en su ubicación como en su aspecto.
  • Opciones del sistema de navegación. Deben ser consistentes y coherente siguiendo un mismo patrón visual y de ubicación a lo largo de todo el sitio. Deben describir adecuadamente los contenidos que incluyen y ser entre ellos lo más excluyentes posibles.
  • Términos de indización. Son el conjunto de etiquetas utilizadas para describir cualquier tipo de contenido en un entorno web y facilitar su localización, búsqueda y recuperación. Su enlace permite acceder al listado de todos los contenidos indizados con ese término y además alimentan el índice inverso del sistema de búsqueda. Cuando los propios usuarios o los autores de los contenidos proponen las etiquetas (tag) hablamos de marcadores sociales. Una folksonomía es el resultado de la agregación de las etiquetas o tags propuestos por uno más usuarios. Se pueden visualizar en forma de listado, nubes de etiquetas, los más populares, etc.

Consejos y recomendaciones

  • Acotar el significado de las etiquetas teniendo en cuenta a los usuarios.
  • Diseñar el sistema de etiquetado de forma global y no etiquetas de forma aislada.
  • Mantener la consistencia tanto en el literal como en el formato.
  • Usar el mismo registro: si usas “linfoma” no uses “dolor de cabeza” sino “cefalea”.
  • Reconocibles por ser conceptos familiares, el usuario no debe tener que aprender su significado.
  • Utilizar estrategias para desambiguar las etiquetas, por ejemplo mediante el contexto (acompañada de otros elementos similares; mediante un texto que la acompañe, etc.)

Orientaciones metodológicas

  • Crear una tabla con tres columnas: etiqueta, explicación de la etiqueta y contenido que representa, para detectar inconsistencias y duplicidades.
  • Involucrar a los autores de contenidos.
  • Involucrar a los usuarios con pruebas de cardsorting.
  • Ver cómo etiquetan nuestros contenidos los usuarios por ejemplo en Del.icio.us
  • Analizar los términos que utilizan los usuarios en el buscador de nuestra web.
  • Aprovechar tesauros y vocabularios controlados ya existentes que podamos adaptar y refinar, pero siempre deben coincidir con nuestra audiencia.

Sistemas de navegación

Son estructuras que ordenan y agrupan los contenidos de una página web bajo unas categorías que forman una clasificación. Nos permiten:

  • Identificar las relaciones entre los contenidos de la web y entre esos contenidos y la página que se está visitando en ese momento.
  • Habilitar y facilitar la navegación entre esos contenidos
  • Orientarnos, saber dónde estamos, que hay aquí, de dónde venimos y cómo podemos ir hacia donde deseamos ir.
  • Formar una imagen mental del tamaño y estructura del sitio.

 

Los usuarios pueden navegar de formas muy distintas: con dirección, cuando buscan una información determinada, sin dirección, cuando ojean la web sin un objetivo claramente preestablecido, además puede navegar en amplitud o en profundidad.

Tipos de sistemas de navegación

  • Sistemas básicos
    • Sistemas integrados
      • Sistemas constantes (o globales)
      • Sistemas locales, deben estar correctamente articulados con el sistema constante.
      • Sistemas contextuales, que permiten identificar contenidos relacionados y enlazar con ellos. Es importante que los contenidos o páginas críticas se enlaces desde otros contenidos.

      Se deben articular estos tres sistemas sin saturar de enlaces y sin que ocupen todo el espacio de la página. Deben situarse de forma consistente, fija y diferenciada entre ellos.

    • Sistemas complementarios, son recursos para localizar información y para orientarse que suelen ser páginas propias e independientes.
      • Mapa del sitio
      • Índices, listado de términos que representan el contenido del sitio, normalmente ordenados alfabéticamente
      • Guías, para introducir a los nuevos usuarios en los contenidos y la funcionalidad de una parte concreta del sitio: wizards, configuradores, visitas guiadas, tutoriales, etc.
  • Sistemas no básicos
    • Sistemas de personalización, estructuras de navegación proactivas que se autodiseñan en función de lo que espera el usuario, ofreciéndole enlaces a partir de su perfil. El principal problema es que los comportamientos pasados no son garantía de inferir sus comportamientos futuros.
    • Sistemas de customización: estructuras reactivas que permiten que el usuario pueda diseñar su propio sistema de navegación. El principal problema es que a los usuarios les pasen desapercibidas estas opciones, que si sus necesidades cambian deben redefinirlas o que simplemente no tengan tiempo de hacerlo.
    • Sistemas de navegación visual, permiten explorar usando recursos icónicos o visuales.
    • Sistemas de navegación social, inferidos a partir del comportamiento de la mayoría de usuarios que visitan la página (lo más popular, lo más comprado, etc.)

Recomendaciones

  • Utilizar recursos de contextualización que permitan al usuario saber dónde se encuentra, adónde puede ir y la relación del contenido con el resto del sitio: incluir siempre el logo de la organización, marcar visualmente las opciones de menú donde nos encontramos, incluir migas de pan, etc.
  • No anular funcionalidades del navegador. Al posicionar el cursor sobre un enlace la URL debe verse en el pie del navegador; no eliminar las barra de menú del navegador al abrir una ventana nueva; no impedir al usuario que utilice el menú contextual del botón derecho; no impedir que la página muestre el scoll cuando sea necesario; permitir que los enlaces visitados cambien de color, etc.
  • Diseño de navegación: incluir siempre un mapa web. Si se usan menús desplegables es mejor que se desplieguen al activarlos y se mantengan desplegados (Chaparro, Minnaert y Phipps, 2000).

    Sistemas de búsqueda

    Utilizados normalmente para localizar información a partir de una necesidad concreta. Ofrecen los resultados que coinciden con los definidos por el usuario en la ecuación de búsqueda. Los problemas a superar son:

    • Ruido: contenidos recuperados no pertinentes, se mide con el índice de precisión.
    • Silencio: documentos pertinentes no recuperados, se mide con el índice de exhaustividad.

    Los sistemas de búsqueda pueden ser:

    • Reactivos: reaccionan frente a la conducta informativa del usuario.
    • Proactivos: ofrecen proactivamente la información al usuario sin que tenga que reclamarla continuamente:
      • Sistemas de difusión selectiva de información (DSI), ofrecen una actualización informativa automatizada sobre un tema concreto a partir de la sindicalización de contenidos.
      • Sistemas de workshop, suministran automáticamente la información dentro de un proceso a partir del perfil del usuario.
      • Agentes inteligentes: infieren el perfil de interés informacional de un usuario a partir de criterios como su histórico de comportamiento o su similitud con el de otros usuarios.
    • RSS, es reactivo porque has de suscribirte y proactivo porque desde ese momento los recibes automáticamente.

 Recomendaciones

  • Evaluar la necesidad de un vocabulario controlado y definir los metadatos implicados en su descripción.
  • Seleccionar como términos de indización ciertos componentes de los contenidos (título, url, etiquetas de los enlaces o títulos de las imágenes)
  • Si se indiza el texto completo de todos los contenidos, introducir recursos como la búsqueda por campos para refinar el resultado y evitar una tasa de ruido elevada.
  • Evaluar si se indiza sólo algunos contenidos, algunas zonas de esos contenidos o algunos componentes determinados de ellos.
  • Indizar los contenidos según el tipo de usuario o audiencia al que va dirigido.
  • Inferir patrones en el comportamiento de los usuarios.
  • Tratar de indizar las páginas según el tipo de contenido.
  • Incluir siempre que se pueda:
    • corrector ortográfico: corrigen automáticamente la ortografía dando alternativas.
    • herramientas fonéticas: para identificar términos con grafías diferentes pero fonéticamente idénticas
    • herramientas de procesamiento del lenguaje natural: obvian las palabras vacías e introducen AND entre los términos propuestos.
    • en función del proyecto, evaluar la inclusión de sugerencias de términos en la caja de búsqueda, que se va adaptando a lo que se escribe y que permiten identificar las búsquedas con más resultados.
  • Poder refinar y mejorar manualmente los resultados de las búsquedas más habituales.
  • Formar a los autores del contenido sobre cómo deben redactar los títulos o etiquetar el contenido.
  • La caja de búsqueda debe estar identificada como tal y cerca del sistema de navegación.
  • Diseñar la interfaz de búsqueda teniendo en cuenta a los usuarios, el tipo de necesidad informativa, la cantidad de información recuperada y el tipo de contenidos a recuperar.
  • En la página de resultado:
    • indicar los términos por los que se ha buscado
    • indicar el número de resultados mostrados y encontrados
    • poner en negrita las coincidencias
    • permitir refinar la búsqueda (no solo semánticamente sino por fecha, lengua, tipo de documento, etc.)
    • permitir realizar búsquedas sólo en los resultados.
    • permitir personalizar el número de resultados a mostrar.
    • poder imprimir o enviar por email los resultados
    • poder guardar la búsqueda, para ello es necesario que sea mediante GET para que tenga una URL propia.
    • ofrecer opciones de ordenación (por precio, por relevancia, por cronología, etc.)

Vocabularios o lenguajes documentales

La indización es la operación en la que se asigna a cada contenido una serie de términos (palabras clave) que representan el tema o temas sobre los que versa. Es una operación de análisis. La clasificación es la operación por la cual se asigna a cada contenido un único término que representa el tema principal sobre el que versa ese documento. Es una operación de síntesis.

La información resultante de la indización y la clasificación suele incorporarse al contenido mediante metadatos asociados para que funcione con los sistemas de organización, etiquetado, navegación y búsqueda.

Un lenguaje documental se constituye a partir de un subconjunto de términos del lenguaje natural (acompañados a veces de números como en el caso de las clasificaciones) para facilitar la búsqueda y recuperación de la información contenida en los documentos.

Aunque el uso de un lenguaje documental reduce el ruido y el silencio en las búsquedas, su construcción y mantenimiento lleva asociado un coste de personal y de tiempo importante, además de que hay que asegurar que se hace correctamente. Por ello hay que evaluar con criterio la necesidad de ese esfuerzo y su viabilidad.

Un lenguaje documental está formado por:

  • El vocabulario del lenguaje documental: subconjunto del lenguaje natural. Se distingue:
    • el término de indización principal (descriptor): es unívoco. Identifica la representación estándar de ese concepto. Por ejemplo, “sacerdote”.
    • término de indización secundario: es sinónimo del principal y una buena representación del concepto que el primero también representa, pero se decide no identificarlo como la representación estándar. Por ejemplo: “cura”, “clérigo”
  • Relaciones semánticas entre los términos de indización, que pueden ser de:
    • Equivalencia: sinónimos, acrónimos, abreviaciones, variantes léxicas, posibles errores ortográficos, cuasisinónimos.
    • Jerarquía, que puede ser:
      • Genérica: soltero-hombre
      • Relación parte-todo: rueda-coche
      • Relaciones de instanciación: Mediterráneo-mar
    • Asociativa: por afinidad semántica o evocación. Por ejemplo, veneno-toxicidad.

Tipos de lenguajes documentales

  • Libres, por ejemplo extraer automáticamente de un texto las palabras que no pertenecen al fichero de palabras vacías.
  • Controlados:
    • Anillos de sinónimos, entre los términos se establecen relaciones de equivalencia pero no de jerarquía ni de asociación. Al hacer una búsqueda se recuperan también los indexados por sus sinónimos. Reduce el silencio en las búsquedas pero aumenta el ruido.
    • Fichero de autoridades, listado de términos principales(con sus respectivos sinónimos) para describir y normalizar un conjunto de entidades (personas, organizaciones, lugares geográficos) ante la variedad de homónimos, sinónimos o nombres con los que puede ser denominada una persona, entidad, obra, tema o concepto. Se utiliza especialmente en la catalogación de los fondos de las bibliotecas.
    • Lista de encabezamientos de materia (LEM), en el cual el encabezado condensa el tema del documento con uno o varios términos. Presentan relaciones asociativas, jerárquicas y de equivalencia. Se usan preferentemente en las bibliotecas y en los centros de documentación cuyos fondos son esencialmente enciclopédicos.
    • Taxonomías, sus términos presentan relaciones de equivalencia y jerarquía pero no asociativas.
    • Clasificación, representa entre sus términos relaciones asociativas, jerárquicas y de equivalencia y algunas veces asocia un código identificativo a cada uno de sus términos.La más utilizada en web es la clasificación facetada para poder clasificar simultáneamente desde distintos puntos de vista, o a partir de diferentes criterios, un mismo conjunto de objetos.Cada una de las clasificaciones o facetas es paralela a las demás en un mismo nivel semántico. Cada faceta sería una etiqueta del sistema de navegación global, o un campo de la base de datos; y las categorías de esa faceta serían las de uno de los sistemas de navegación local, o las de los posibles valores de un campo de la base de datos. Por ejemplo, cada faceta seria (corriente literaria, género literario, etc.) y las categoría (realismo, modernismo,…; novela, poesía,…).
    • Tesauro, se encuentran integrados en los sistemas de navegación y búsqueda. Sus términos presentan relaciones asociativas (términos relacionados, TR), jerárquicas (términos genéricos, TG y términos específicos, TE) y de equivalencia.

 

Usabilidad web: Pioneros y hacedores

Introducción

En esta entrada os voy a hablar del libro “Pioneros y hacedores”.

Pioneros y hacedores

El libro está compuesto por 19 capítulos de distintos autores, expertos en Arquitectura de Información, Diseño Centrado en el Usuario, Usabilidad y Accesibilidad, Ergonomía, Psicología, Diseño participativo y Co-desarrollo, oriundos de Centroamérica, Sudamérica, Norteamérica, Australia y Europa.

Los capítulos, tratan temas que van desde ergonomía física y cognitiva, al desarrollo de un videojuego y de un recurso educativo accesible; de métodos y dispositivos para evaluar la interacción con la nueva televisión interactiva a las técnicas de inspección e indagación heurística; de hacer páginas web accesibles y usables.

Capítulo 1: El botón de los $300, por Jared M.Spool

Nos cuenta el caso real de un e-commerce donde estudió la interacción de sus usuarios con los formularios de registro e ingreso. Finalmente, la modificación de un botón supuso un 45% más de usuarios que terminaban las compras y una ganancia adicional de 15 millones de dólares el primer mes tras el cambio, y 300 millones de dólares después del primer año.

Capítulo 2: Cómo usamos la web realmente, por Steve Krug

Steve Krug nos habla sobre las diferencias entre cómo creemos que la gente usa los sitios web y lo que sucede, y es que las páginas no se leen, se hojean; no tomamos óptimas decisiones, nos conformamos con lo suficiente; y no nos interesa averiguar el funcionamiento de las cosas, nos las arreglamos.

Si queréis más información sobre él, os dejo aquí las entradas en referencia a sus libros: “No me hagas pensar” y “Haz fácil lo imposible”

Capítulo 3: Mobile Sites vs. Full Site, por Jakob Nielsen

Defiende la necesidad de que los sitios web dispongan de una versión móvil. Nos habla de las buenas pautas a seguir en dicha versión y los desafíos que supone.

Capítulo 4: ¿Qué se mueve?, por Don Norman

Parte de una anécdota personal con un mando a distancia, que tenía solo dos botones y sin embargo los usuarios interpretaban de diferente manera, para reflexionar sobre la elección de las metáforas en un diseño adecuado de la interacción.

Capítulo 5: Diseño de interacción, prácticas de investigación y diseño en materiales digitales, por Jonas Löwgren

Presenta qué es el Diseño de Interacción y la naturaleza de la investigación actual en este campo, para desarrollar lo que podría (y quizás debería ser) el Diseño de Interacción.

Capítulo 6: Diseño participativo para la inclusión digital, por Stephen Grant, Laurel Evelyn Dyson y Toni Robertson

Ofrecen un panorama general del desarrollo histórico del proyecto llevado a cabo en la Universidad Tecnológica de Sydney (UTS) para aumentar la participación de los estudiantes aborígenes australianos en los cursos IT, y el modo en el que, gracias a su éxito, fue evolucionando hasta llegar a ser un programa permanente en la Facultad de Ingeniería y Tecnología Informática: el Programa de Participación Indígena en IT (IPIT).

Capítulo 7: Introducción a la Interacción Persona-Computadora, por Yusef Hassan Montero y Sergio Ortega Santamaría

Introducen y describen los conceptos y aspectos más relevantes de la disciplina Interacción Persona-Computadora, que estudia cómo las personas diseñan, implementan y usan sistemas informáticos interactivos, y cómo las computadoras influyen en las personas, las organizaciones y la sociedad. Aportan también una bibliografía para ampliar y profundizar en el conocimiento de la disciplina.

Capítulo 8: Entre la Arquitectura y la Información, por Jorge Arango

Nos ofrece una introducción a la disciplina Arquitectura de Información, el área de práctica profesional que busca traer orden y coherencia a los medios digitales para lograr que la información sea más fácil de encontrar, navegar y entender a través de múltiples canales y dispositivos.

Capítulo 8: Entre la Arquitectura y la Información, por Jorge Arango

Nos ofrece una introducción a la disciplina Arquitectura de Información, el área de práctica profesional que busca traer orden y coherencia a los medios digitales para lograr que la información sea más fácil de encontrar, navegar y entender a través de múltiples canales y dispositivos.

Capítulo 9: Accesibilidad y SEO, por Olga Carreras

Ya hice una entrada referente a este capítulo. Accesibilidad web: Cómo influye en el SEO

Capítulo 10: Desarrollo de un videojuego accesible, análisis del proceso de trabajo: El Caso Slalom, por Javier Mairena y Daniel Márquez

Nos habla de las claves y las dificultades para desarrollar un videojuego accesible, para lo cual será muy importante tener presente la accesibilidad desde el inicio del diseño hasta su publicación e implicar a todas las personas que forman parten del proyecto.

Los autores nos presentan un caso práctico, el desarrollo del videojuego Slalom (que se puede descargar gratis para Windows) Es un simulador del deporte “Slalom en Silla de Ruedas” practicado por personas con parálisis cerebral.

También nos ofrecen una bibliogafía muy interesante sobre recomendaciones publicadas por distintas entidades que pueden servir como guías para crear videojuegos más accesibles.

Capítulo 11: Lo que desconocemos que conocemos sobre accesibilidad y usabilidad, por Emmanuelle Gutiérrez y Restrepo

En este capítulo trata de acercar la accesibilidad a todo el mundo, mostrándola como algo más cercano al sentido común que a complicadas directrices que haya que seguir.

Mediante la comparación con las técnicas y prácticas habituales en la creación de documentos de texto, y siguiendo los tipos de contenido que suelen encontrarse en la mayoría de los sitios web hoy en día, especialmente aquellos que han sido creados mediante un gestor de contenidos, se analizan los criterios de conformidad que tienen su equivalente en dichas prácticas habituales y que, por tanto, todo desarrollador y diseñador conoce de antemano. Todos ellos tienen en realidad un conocimiento de accesibilidad y usabilidad que no sabían que tenían.

La autora nos muestra que con los conocimientos básicos para crear un documento de texto, bien formateado, legible y comprensible para nuestros destinatarios, conseguimos cumplir con 32 de los 61 criterios de conformidad de las WCAG 2.0. Es decir, cumplimos con el 52% de las pautas de accesibilidad para el contenido web. De los 25 criterios de conformidad de nivel A, cumplimos con 15, lo que significa cumplir con el 60% de ellos. De los 13 criterios de conformidad con nivel Doble A, cumplimos con 8, lo que significa cumplir con el 61,5% de ellos. De los 23 criterios de conformidad de nivel Triple A, cumplimos con 9, lo que significa cumplir con 39% de ellos.

Capítulo 12: Ergonomía física y cognitiva: los sistemas sensoriales humanos y la evaluación ergonómica de interfaces, por Sebastian Betti

Nos ofrece y explica una serie de criterios de conformidad para la evaluación ergonómica de las interfaces humano-computadora, que permiten reducir la carga del esfuerzo mental, visual y físico, y de este modo adaptarse mejor a las capacidades humanas.

Capítulo 13: Evaluación de la usabilidad con tecnología eye tracking. El caso de la TV conectada, por Mari Carmen Marcos y Verónica Mansilla

La tecnología Eye Tracking (ET) es una herramienta que complementa al test con usuarios para estudiar la usabilidad y la experiencia de usuario. La utilizaremos cuando nos interese conocer cómo miran los usuarios una interfaz cuando realizan determinada tarea.

Nos hablan de los modelos que existen, de los requisitos de los participantes y de la sala, de las métricas que obtendremos, de la calibración del ET o de los contratiempos que podemos encontrarnos. Otra parte importante del capítulo está dedicada al análisis de los datos obtenidos, que dependerá de si se ha hecho un análisis cuantitativo o cualitativo.

Nos presentan un caso de estudio concreto, aplicando la ET a la televisión conectada, que usa dos canales para recibir información, uno para los contenidos televisivos, y otro para los datos de Internet. Se estudió la interfaz de los menús, puesto que cada fabricante y cadena tienen su propia propuesta. Primero se hizo un test con usuarios en el que se detectaron muchos problemas de usabilidad. Uno de ellos era que los usuarios no lograban acceder con facilidad a un servicio concreto. Para profundizar en el motivo se llevó a cabo un test con ET. Nos cuentan los resultados y las dificultades del mismo.

Capítulo 14: Accesibilidad de un recurso educativo: El caso de la Mapoteca, por Manuel Razzari

Presenta como caso práctico la experiencia con el proyecto “Mapoteca” de educ.ar, una aplicación web para que estudiantes de nivel medio interactúen con mapas escolares. La aplicación sería distribuida en los 3.5 millones de netbooks de los alumnos de escuelas secundarias públicas.

Nos habla de los desafíos del proyecto, del marco de trabajo y de la importancia de elegir los componentes adecuados tanto en el back-end como en front-end, así como del testeo de la aplicación, tanto con usuarios reales como con herramientas de evaluación.

También nos describe los problemas detectados: los que habría sido necesario prever con suficiente antelación (como el uso del color); los que se podrían haber evitado formando adecuadamente a las personas que harán la carga de contenidos; los que son difíciles de imaginar hasta que se hace un test con usuarios; o los que simplemente no tienen una solución al alcance de todos, por ejemplo la solución de la aplicación de mapas de Apple 6, que no usa mosaicos de imágenes sino datos vectoriales, así VoiceOver te leerá las calles mientras desplazas el dedo, leyendo por tanto el contenido de cada zona del mapa.

Capítulo 15: Elaboración de una Normativa de Usabilidad y Accesibilidad Web: El caso de la web de la Ciudad de Buenos Aires, Verónica Traynor

La autora nos introduce en el Diseño Centrado en el Usuario, en una forma de trabajo evolutiva y en espiral que permite a los integrantes del equipo avanzar y aumentar la calidad de sus bocetos de un modo más certero; según los modelos mentales ya no de ellos mismos, sino de los usuarios finales. El eje pasa a ser el ser humano con sus necesidades de percepción, comprensión, operabilidad y aprendizaje. Todo gira en torno a la observación empírica y metodológica de personas aprendiendo e interactuando.

Nos habla de la observación como metodología: “existe una diferencia significativa entre lo que les sucede a los usuarios, lo que interpretan sobre lo ocurrido y lo que opinan que les sucedió” y de los colores como parte del diálogo: “dejamos de hablar de pintar un cuadro y pasamos a construir un semáforo. Bello, pero fundamentalmente claro”.

Por último incluye la normativa de Usabilidad y Accesibilidad Web, publicada en 2010, que deben cumplir los sitios web pertenecientes al Gobierno de la Ciudad Autónoma de Buenos Aires.

Capítulo 16: Internacionalización Web, por Claudio Segovia

Nos introduce en la internacionalización de un sitio web (que no se refiere simplemente a crear sitios multilingües) y por qué deberíamos tenerla en cuenta. Detalla diferentes aspectos a los que deberemos prestar atención.

Capítulo 17: Prácticas participativas en el Diseño de Interacción: El caso del Design Museum, por Mariana Salgado

Nos cuenta el proyecto “La vida secreta de los objetos” llevado a cabo en el Design Museum de Helsinki.

El eje de este proyecto fue que el contenido generado por los visitantes (in situ, online o en los talleres organizados) como comentarios, relatos, opiniones, poemas, recuerdos o sentimientos basados en los objetos expuestos (y que podían estar en forma de texto, sonidos, música, imágenes, vídeos, etc.) estuvieran también en la galería, a disposición de los visitantes y promoviendo su participación. Un nuevo concepto de museo abierto y participativo, donde el diálogo continúe después de la visita.

De esta manera se enriquecería la experiencia de la visita al museo por medio de la inclusión. Esta información subjetiva permitiría disfrutar de las obras expuestas de muchas maneras, dando lugar a un museo abierto, y por tanto más accesible e inclusivo de las diferentes voces de nuestra sociedad.

Capítulo 18: Diseño y desarrollo de un editor de texto accesible bajo modalidad open-source, por Nahuel González

El objetivo del proyecto fue desarrollar un editor de texto accesible open-source. Partiendo de una lista de necesidades que debería atender el software, el artículo describe todas las características de la aplicación final, que a la publicación del libro estaba en la versión 2.0 y que es utilizado por usuarios con diferentes tipos de discapacidad.

Capítulo 19: Las métricas de accesibilidad desde una perspectiva práctica: eXaminator, por Carlos Benavidez

Carlos Benavidez, el creador de la conocida herramienta de evaluación automática de accesibilidad eXaminator explica por qué eXaminator se planteó como una herramienta que ofreciera una puntación numérica de la accesibilidad de la página. Explica además cómo se calcula la puntuación que otorga así como las ventajas y las limitaciones de la herramienta.

Usabilidad web: Problemas con el editor Gutenberg

Introducción

Una de las partes más importantes de WordPress, aparte de todas las personas que trabajamos en ello, es el editor, ya que es donde escribes tus contenidos y puedes aportar y ayudar ofreciendo todo el conocimiento que tienes, con la idea de hacer un WordPress mejor para todos.

Pero desde que está la posibilidad de utilizar este editor, veo que aún le queda mucho por mejorar y, que usarlo así de primeras, el cambio impresiona bastante. Pero bueno, aún así intentaré mostrar los principales problemas que nos podemos encontrar.

Principalmente, si pensamos en personas con dificultades físicas y/o con dificultades visuales que usen el editor, el esquema mental que tenido en su mente durante tanto tiempo, en un segundo se desbarata. Con lo cual tiene que volver a empezar y adaptarse a un cambio tan brusco cuesta, como a todos, pero a ellos más aún, y claro, teniendo tantas cosas para mejorar, la frustración es aún mayor.

Problemas de usabilidad con Gutenberg

La primera impresión al usar Gutenberg hace ya unos cuantos meses, y reconozco lo que he usado poco, era que al existir la posibilidad de mover bloques, cualquier persona que use el teclado y le dé por error se puede llegar a confundir, sobre todo si es una persona con visión nula. Y para una persona con problemas físicos, lo que ocurre es que se aumenta la carga motora innecesariamente, al tener que volver a colocar el bloque en el lugar que le corresponde. Bueno, en este caso, no tanto.

Pero cuando tienes que modificar estilos, sí. Porque tienes que pasar los estilos en cada uno de los bloques para seguir, a menos que uses las flechas de dirección o usar los comandos de teclado asignados para ello. Que a fin de cuentas es lo que se hace con el editor actual, y no nos encontramos con el problema de que al usar el TAB hay que pasar por los bloques y cada una de las opciones que tiene, lo cual es bastante cansado.

Me falla la barra de herramientas fija en la parte superior

Sí, así, tal y como lo lees. ¿Por qué? Porque si nos fijamos bien en las diferentes opciones del bloque, en la primera de ellas que es “Cambiar tipo de bloque”. Según lo que quieras poner ya sea una lista, un encabezado o una cita, la mejor solución es usar el comando correspondiente, porque es un pérdida de tiempo usar la tecla TAB si el usuario se equivoca al elegir qué quiere.

Yo pregunto: ¿Es necesario pasar con el teclado todas las opciones que se ven al desplegar esa opción? NO. Esto puede ser muy cansado para el usuario. Es cierto que beneficia a las personas que usan el ratón y es bastante rápido, pero nos olvidamos de los usuarios que no pueden usar un ratón y el problema principal es que se aumenta la carga motora sin necesidad. No sólo con eso, sino con todo. Porque se tiene que usar constantemente para estar editando y modificando las cosas. Y, también, todo esto puede marear a un usuario ciego.

Pero investigando por estos lares, me he dado cuenta de que existe la opción de “Fijar la barra de herramientas”. En el menú de puntos de la esquina superior derecha, en Ajustes. 
Opción Fijar barra de herramientas

Inserción de imágenes

He creado esta imagen para hacer ver uno de los problemas principales de usabilidad, al menos para mí y para muchos usuarios.

Problema de usabilidad de Gutenberg

Y aquí me encuentro con otro problema: que una vez que insertas una imagen, le das a Intro, y te obliga a poner otra y no hay forma de salir de ahí, hasta que no pasas varias veces con el TAB. Te vuelves loca. ¿Y si yo quiero poner un párrafo o un encabezado inmediatamente después? Con lo cual esto es un problema grave de usabilidad. Te interrumpe cada vez que quieres hacer algo.

En las imágenes es importante añadir el texto alternativo para que las personas ciegas puedan hacerse una idea de cual es la información de la imagen. Una leyenda es añadir algo más de información cuando se trata de una información adicional de la propia imagen, como explicar un gráfico o una imagen compleja, por ejemplo.

Atajos de teclado

Cuando se va a buscar el menú de los atajos de teclado y quieres desplazarte hacia abajo para seguir viendo el resto de comandos, no se puede, es dependiente de ratón.

Y tampoco se sabe cuáles son los atajos para poner los encabezados, algo muy importante para llevar a cabo el orden necesario en cuanto a accesibilidad web, y por lo tanto para ayudar a las personas ciegas a navegar y a entender el contenido.

Inserción de Enlaces

A la hora de insertar un enlace también da problemas. Cuando insertamos un enlace, se inserta bien, pero no te deja abrirlo en una ventana nueva. Una vez lo pones, no puedes comprobar que funciona porque no te deja. Para comprobar que funciona nos tenemos que ir a la opción “Ver entrada” y ya sale, cuando debería dejar hacerlo desde el propio enlace.

Inserción de  vídeos y Opción Incrustados

Hay un problema de usabilidad bastante grande con la inserción de vídeos. Directamente, es que no se puede. Esto, desde un primer momento crea bastante confusión a los usuarios, porque por ejemplo, al insertar un vídeo usando la opción de Vídeo se espera eso, poder insertar un vídeo sin problemas.

En la pestaña Incrustados, que aparece en el menú de bloques de la esquina superior izquierda, en cuanto a los vídeos, me parece un error poner todo lo que corresponde a las redes sociales, vídeos, así como las diferentes plataformas de música y fotos. Hay que intentar ser coherentes con lo que estamos haciendo. Si ya tenemos la opción de Vídeo, que en un primer momento sirve para eso, no podemos confundir al usuario con la palabra Incrustados.

Es más, como sugerencia, diría que hasta podría clasificar las opciones en función de su finalidad: Fotos, audio, vídeos y Redes Sociales. Sería mucho más cómodo a la hora de hacer las búsquedas de lo que se necesite en el momento.

Además de esto, es muy posible que algunas de las opciones no sean accesibles y seguramente tendrán que mejorar muchísimo en cuestión de accesibilidad. Con lo cual, ese menú puede suponer una pérdida de tiempo para los usuarios.

Menú de bloques

En cuanto al menú de bloques, que está dividido en diferentes pestañas que su vez despliegan un menú con diferentes opciones, me quedaba con: Más utilizados, Bloques comunes, Formatos y Elementos de diseño. Incluso, me plantearía redistribuir los Elementos y eliminaría alguno que otro porque lo único que hace es entorpecer y complicar las cosas. De los Formatos en las tablas no se puede tabular y es dependiente de ratón, con lo cual es un problema grave de usabilidad.

Los Widgets están siempre y cuando se pueda añadir una barra lateral y al no poderse hacer, o al menos yo no lo he descubierto, no tiene mucho sentido.

Y la opción de Reutilizable no entiendo para qué sirve. No le encuentro ningún sentido.

Conclusiones

Para mi gusto y por facilidad a la hora de trabajar con Gutenberg, es mucho más cómodo trabajar como lo he explicado anteriormente, con la barra de herramientas fija en la parte de arriba.

Y yo pregunto: ¿Por qué no se añade directamente la barra de herramientas fija a la parte superior? Una funcionalidad tan importante como esta no debe pasar desapercibida para nadie y mucho menos estar escondida en un menú. Se debería incluir esta opción siempre y así no frustra tanto a los usuarios.

Por cierto, lo último que he visto ha sido dentro del menú de cada uno de los bloques, las opciones “Insertar antes” e “Insertar después”, lo cual está bastante bien y mejora algo las cosas cuando estamos editando.

Y para finalizar, comento lo que toda la comunidad de WordPress lleva diciendo desde hace ya algunos meses:

Gutenber no está preparado para implementarse, necesita mejorar mucho en accesibilidad y en usabilidad para que se asiente como editor de textos en WordPress.