Alexa Zárrate DíazDecana Comunicación Digital, UANBogotá, Diciembre 02 de 2008

Definiciones de Usabilidad.Para qué la Usabilidad. Importancia de la Usabilidad en el

diseño web.Principales errores en el diseño web.Primeras recomendaciones.Tiempos de respuesta.Vínculos.

Arquitectura de Información.

La Usabilidad (Usability, el término en inglés) surge a partir del nacimiento y desarrollo de Internet como red de comunicación.

La norma ISO 9241, de la Organización Internacional de Normalización: “el grado en el que un determinado producto puede utilizarse por los usuarios a los que está dirigido, para que éstos logren sus objetivos con efectividad, eficiencia y satisfacción en un contexto de uso concreto”.

Efectividad: mide la exactitud en que los usuarios logran sus objetivos.

Eficiencia: mide los recursos con los que se han logrado o no, los objetivos.

Satisfacción: mide el grado de confort y aceptación del usuario.

La usabilidad dirige la web. Si el cliente no puede encontrar un producto, no lo podrá usar.

En el entorno de la web, el poder está en manos de los usuarios. El usuario, que es quien hace clic en el ratón, es quien decide todo.

Es tan fácil ir a cualquier otra parte, que la competencia de todo el mundo está a un solo clic.

¿Por qué los usuarios van a perder el tiempo en algo que sea confuso, lento, o que no satisfaga sus necesidades?

En el diseño de productos físicos y software, los usuarios pagan de antemano y experimentan la usabilidad después.

En la Web, los usuarios experimentan primero la usabilidad y pagan después.

Esencialmente, hay dos enfoques básicos en el diseño: el ideal artístico de expresarse y el ideal técnico de resolver un problema a un cliente.

El objetivo principal de la mayoría de los proyectos web consiste en facilitar a los clientes la labor de llevar a cabo tareas útiles.

Modelo de negocio: tratar la Web como un simple folleto, en vez de algo que va a cambiar la forma de dirigir la empresa en la economía en red.

Gestión de proyecto: gestionar un proyecto web como un proyecto corporativo tradicional. Un sitio web debe ser gestionado como un proyecto específico de interfaz de cliente.

Estrategia de vinculación: tratar el sitio como el único importante, sin vínculos a otros sitios y sin puntos de entrada bien diseñados para que otros coloquen sus vínculos. Recuerde que el hipertexto es la base de la Web, y que ningún sitio es una isla.

Más navegación menos contenido: hay muchos sitios que destinan más espacio a la navegación que a la información que supuestamente hizo que el usuario los visitara.

La navegación es un mal necesario y no un fin en sí misma. Por eso, hay que atenuar sus efectos.

La mayor parte del espacio de la pantalla acaba siendo usado para cosas diferentes de las que el usuario estaba buscando.

De los 480.000 píxeles de una pantalla de 800 x 600, sólo el 20 % se usa para contenido de interés del usuario.

La mayoría de las páginas web sólo funcionan bien en un monitor de 17 pulgadas que se ejecute a una resolución de al menos 1024 x 768 píxeles.

Todo lo que quede por debajo no es válido. Los usuarios tendrán que desplazarse por la pantalla para ver todas las partes de la página.

El espacio en blanco es necesario para ayudar a entender a los usuarios el agrupamiento de la información.

Sería un error diseñar páginas abiertamente compactas.

Si tiene la opción de separar dos segmentos de contenido con una línea gruesa o con espacios en blanco, escoja los espacios en blanco, que no toman tiempo para descargarse.

Como norma, el contenido debe ocupar al menos la mitad del diseño de una página y, preferiblemente, hasta un 80 %.

La navegación debe mantenerse por debajo del 20 % del espacio de las páginas de destino, aunque las opciones de navegación pueden alcanzar proporciones más altas en las páginas de inicio o de navegación intermedias.

Sería mejor eliminar la publicidad.

Si necesita tener anuncios, deberá considerarlos como parte de la estructura de la página, junto a las opciones de navegación, lo que implica que el diseño de la navegación tendrá que reducirse.

Un principio general de todo el diseño de interfaces de usuario consiste en ver los elementos de diseño y eliminarlos uno por uno.

Si el diseño también funciona sin un elemento de diseño, acabe con él. Simplicidad es mejor que complejidad.

5 bytes de info. = 1 milisegundo de descarga.

Es necesario diseñar páginas que funcionen en pantallas pequeñas.

Tenga en cuenta a los usuarios que acceden a Internet desde un dispositivo de mano, un teléfono móvil Nokia o su automóvil.

Hay que diseñar para todas las resoluciones de pantalla (páginas independientes de la resolución, que se adapten al tamaño de la pantalla en que se visualizarán).

Los usuarios siempre piden que se aceleren las descargas de las páginas.

Las investigaciones muestran que los usuarios necesitan tiempos de respuesta de menos de 1 segundo al ir de una página a otra.

En la actualidad, esto todavía no es posible.

Sólo emplee efectos multimedia cuando verdaderamente contribuyan a la comprensión de la información.

Un segundo es el límite para que el usuario piense que no hay interrupción.

Diez segundos es el límite máximo para mantener la atención del usuario centrada en el diálogo (50.000 bytes).

En demoras mayores, los usuarios se ocupan de otras tareas esperando a que la computadora termine.

Variables que determinan el tiempo de respuesta: El rendimiento del servidor. La conexión del servidor con Internet. La propia Internet. La conexión del usuario con Internet. La velocidad del navegador y de la computadora del

usuario.

Cada uno de estos pasos añade su propia demora a la hora de mostrar una página web.

Lamentablemente, las demoras son acumulativas.

Conclusión: las páginas web deben ser diseñadas pensando en la rapidez.

Los vínculos son la parte más importante del hipertexto: conectan las páginas y permiten a los usuarios ir a nuevos sitios de la Web.

Evite el uso de Haga clic aquí. Estas palabras no proporcionan información.

En vez de decir: Para obtener información sobre el caso Granda, haga clic aquí,

es mejor poner: Información adicional sobre el caso Granda.

De ser posible, incluya también texto que resuma el tipo de información disponible.

Los títulos de vínculo deben tener menos de 80 caracteres. Cuanto más cortos, mejor.

No hay que añadir títulos a todos los vínculos. A menudo, el texto del ancla es lo suficientemente descriptivo.

El vínculo con título se reservará para información complementaria.

Colores de los vínculos: Los vínculos con páginas no vistas

aparecen en azul. Los vínculos con páginas ya visitadas

aparecen en rojo o en morado. Cuando se emplean colores no estándar,

los usuarios se desorientan

Algunos diseñadores evitan los vínculos externos, con la teoría de mantener cautivo al usuario.

El usuario nunca está cautivo: siempre puede escribir un URL en la barra de navegación.

Los vínculos externos constituyen una parte muy barata del valor añadido del contenido.

Es un deber proporcionar los mejores vínculos con los destinos más valiosos y de mayor utilidad.

Cualquier valor que el usuario derive del sitio externo, repercutirá positivamente en su sitio, ya que ha sido usted quien ha proporcionado esta guía.

Si el usuario siente que consigue buenos resultados al visitar su sitio, volverá más veces.

Los vínculos se volverán contenido, y se convertirán en un motivo para apreciar y utilizar su sitio.

Se deben seleccionar minuciosamente. Es mejor enlazar con un número

reducido de páginas externas muy importantes, que con todos los sitios alternativos que pueda haber en la Web.

Los usuarios sólo tienen tiempo de explorar un 10 % de los vínculos.

Por ello, conviene incluir un vínculo a un supersitio relacionado con su tema.

El número de páginas aumenta cada día y se calcula que crecen en alrededor de 50 páginas y 500 enlaces sólo durante el tiempo que toma leer una sencilla oración.

Se ocupa de la organización de los contenidos en la web.

Richard Saul Wurman fue el primero en utilizar el término “arquitectos de la información”.

Wurman los definió como: “… personas que organizan los patrones inherentes en los datos, que hacen claro lo complejo…". "… una persona que crea el mapa o la estructura de información que permite a otros encontrar su camino personal al conocimiento…”

Un Arquitecto de información debe tener conocimientos de diferentes disciplinas: Diseño Gráfico: habilidad de establecer

relaciones entre los elementos visuales y determinar su total integración dentro del Web.

Documentación e información: la documentación se basa en el estudio y creación de medios de acceso a la información, así como determinar la forma más apropiada de organizarla.

Periodismo: la habilidad para comunicar y escribir. Se deben considerar las diferencias entre los estilos de redacción para Web e impreso.

Marketing: conocimientos sobre investigaciones de usuarios o audiencias y la identificación de segmentos atractivos del mercado. El Web como producto no puede permanecer ajeno a esto.

Informática: resulta de suma importancia el conocimiento del entorno tecnológico de la Web. A partir de ello, pueden establecerse limitantes y definir el alcance de lo que se desea implementar en el sitio.

Ingeniería en usabilidad: comprende la habilidad y los métodos para evaluar el funcionamiento del sistema, desde la curva de aprendizaje hasta los errores más frecuentes que cometen los usuarios.

Organizar la información de manera que los usuarios puedan encontrar las respuestas correctas a sus interrogantes.

El concepto de organizado cambia de un ser a otro. Lo que para unos puede resultar muy "lógico" puede que para otro no lo sea.

Conclusión: los sistemas de etiquetado y organización de la información están permeados por la perspectiva y el sentido de sus creadores.

Evitar la ambigüedad: un mismo vocablo puede tener múltiples interpretaciones en dependencia del contexto donde esté empleado.

Para crear y diseñar sistemas de organización de la información verdaderamente usables, es necesario situarse del lado del usuario.

Un sitio web está diseñado para múltiples usuarios, por ende, para múltiples lógicas. Así que ponerse en los zapatos del usuario no es una tarea sencilla.

Son tres y se usan con mucha frecuencia, a veces sin que se percate de ello: Esquemas alfabéticos de organización de la

información (EAOI). Esquemas cronológicos de organización de la

información (EAOI). Esquemas geográficos de organización de la

información (EGOI). Esquemas ambiguos de organización de la

información (EAOI). Esquemas híbridos de organización de la

información (EHOI).

Esquemas ambiguos de organización de la información (EAOI).

Los que organizan la información según el asunto o la materia.

Los que organizan la información atendiendo a determinados procesos o tareas.

Los que organizan la información según los intereses de la audiencia potencial. Abiertos/Cerrados.

Los que organizan la información a través de metáforas de la vida cotidiana.

Se diseñan para que el usuario sepa dónde está. Les da un entorno y capacidad de flexibilidad.

Elementos como gráficos, barras de menús horizontales y verticales y menús emergentes. Otros, como las tablas de contenido y el mapa del sitio, permiten el acceso al sitio.

Es determinante mantener al usuario informado sobre el lugar donde se encuentra situado dentro del sitio.

Sistemas de navegación jerárquicos

Sistemas de navegación globales

Sistemas de navegación locales

Sistemas de navegación específicos

Los usuarios visitan el sitio web por su contenido. Todo lo demás es accesorio. El diseño existe para permitir a la gente acceder al contenido.

Los estudios sobre usabilidad indican que los usuarios centran su interés en el contenido.

Al llegar a una nueva página, miran inmediatamente en el área de contenido principal de la página y buscan los titulares y otras indicaciones para saber de qué trata la página.

Sólo después, si deciden que el contenido no les interesa, buscarán en el área de navegación para ver si encuentran ideas sobre dónde ir.

El contenido es lo primero.

Los usuarios primero miran el texto y los titulares.

Es importante ser gramaticalmente correcto, pero también lo es presentar el contenido de un modo que atraiga a los lectores.

Debido a las molestias de leer en pantalla, los usuarios tienden a no leer por entero los flujos de texto.

En vez de ello, hojean el texto y seleccionan las palabras clave, las frases y los párrafos de interés, saltando las partes que no tienen tanta importancia.

Un estudio hecho por Jakob Nielsen muestra que el 79 % de los usuarios siempre hojean las páginas nuevas; sólo unos pocos las leen palabra por palabra.

Dado que muchos usuarios no tienen tiempo para leer material extenso, es importante empezar cada página por la conclusión.

Utilice el principio de la “pirámide invertida”.

A menudo, los usuarios que hojean texto sólo leen la primera oración de cada párrafo. Las frases temáticas son importantes, lo mismo que expresar una idea por párrafo.

Utilice estructuras de frases sencillas.

Limite el uso de metáforas, especialmente en los encabezados. Los usuarios pueden tomarlas al pie de la letra.

El humor debe utilizarse con cautela.

Limítese a los hechos.

Evite los juegos de palabras, que no funcionan con usuarios internacionales.

La información de interés para una minoría de lectores puede ponerse a disposición a través de un vínculo sin penalizar a todos los usuarios.

No se trata de segmentar una historia extensa lineal en múltiples páginas, sino de dividir la información en fragmentos coherentes, cada uno centrado en un tema determinado.

El principio rector debe ser el de permitir a los lectores seleccionar los temas de su interés y descargar únicamente esas páginas.

En otras palabras, la estructura del hipertexto debe basarse en un análisis de audiencia.

Diseño, velocidad y contenido fallan si los usuarios no pueden leer el texto.

1ª regla básica de legibilidad: utilice colores que tengan contraste entre el texto y el fondo.

La legibilidad óptima: texto negro sobre fondo blanco. Se conoce como "texto positivo".

Fondo negro con texto blanco también es muy bueno: "texto negativo".

Lo peor son las combinaciones de colores como texto rosa sobre fondo verde: tienen poco contraste, y los daltónicos no podrán leer. Los daltónicos confunden el rojo y el verde.

2ª. No empleen gráficos de fondo. Los gráficos de fondo interfieren con la capacidad visual de ver las líneas en los caracteres y de reconocer la forma de las palabras. Además hacen pesada la página.

3. Utilicen fuentes lo suficientemente grandes. Los tamaños de fuente diminutos deben relegarse para notas al pie y textos que los usuarios no deben leer enseguida.

4. Que el texto esté quieto, que no se mueva.!!!

5. Alinear el texto a la izquierda: el ojo busca siempre el lado izquierdo.

La justificación crea espacios blancos a veces enormes entre las palabras de un mismo renglón, si hay palabras largas. Con el texto alineado a la izquierda, el usuario lee más rápido.

No debe haber partición de palabras en lo posible.

Resulta aceptable centrar o alinear a la derecha ciertos contenidos, pero no hay que hacer esto con bloques de texto.

El problema con las fuentes serifadas es que no hay suficientes pixeles disponibles para pintarlas en un tipo de 10 puntos. Sin embargo, es cierto que a la gente le atraen más las serifadas, lo que constituye una paradoja. Pero si trabajan con 10, 9 o menos puntos, usen NO serifadas.

UNA ÚLTIMA DIRECTRIZ DE LEGIBILIDAD:EVITEN ESTE USO DE LAS MAYÚSCULAS, QUE SE LEEN UN 10 % MÁS DESPACIO QUE este tipo de texto que alterna altas y bajas.

Permite investigar al usuario final y evaluar el sitio web.

Se practican tres modalidades: Técnicas de investigación. Técnicas de evaluación. Técnicas de prueba.

Técnicas de investigación: recopilan información de preferencias, hábitos y comportamientos de los usuarios.

Se emplean en las etapas iniciales del sitio.

Tipos de técnicas de investigación

Entrevistas: Se practica con usuario que tenga el perfil de la audiencia objetivo. Se indaga sobre necesidades, preferencias y otros aspectos.

Tipos de técnicas de investigación

Trabajo de grupo: Se practica con 10 usuarios. Se hace una selección de temas y se escucha al respecto.

Observación contextual: Es muy técnica y se practica para Intranets. Se analiza el comportamiento del usuario y su entorno para interactuar con el sitio.

Tipos de técnicas de investigación

Encuestas: Se aplica a una muestra seleccionada de la audiencia objetivo.

Journaled sesions: Ejercicios dirigidos para estudiar las experiencias de usuario una vez que han utilizado la web.

Análisis de logs: Revisión del número de visitas, páginas, secciones, tiempos de permanencia, entre otras.

Tipos de técnicas de evaluación

Permiten obtener una idea del estado del sitio según la experiencia del usuario.

Evaluación heurística: Cumplimiento de reglas definidas. La guía más conocida son las “10 heurísticas de Nielsen”.

Tipos de técnicas de evaluación

Chequeo cognitivo: valorar las plantillas con la finalidad de identificar imperfecciones y proceder a su mejora.

Evaluación de características: esta es una evaluación estratégica. A partir del análisis de las características y utilidades que ofrece un sitio al usuario, se mide accesibilidad y utilidad.

Tipos de técnicas de evaluación

Evaluación de consistencia: dirigida al aseguramiento, integración y coherencia de los contenidos y las interfases del sitio web.

Tipos de técnicas de prueba

Test de usabilidad: el evaluador solicita a perfiles predefinidos la realización de tareas y en momentos claves se hacen preguntas.

Sin embargo, existen varias formas para llevar un test de usabilidad, y esto depende del objetivo que se quiere evaluar.

Test de usabilidad

Lee y ubica: se analiza el grado de eficiencia de la arquitectura de información. Se solicita al usuario su criterio sobre la posible ubicación de un determinado contenido después de haber observado por unos instantes el sitio.

.

Test de usabilidad

Test de escucha (Listening test): se pide al usuario realizar una tarea genérica, por ejemplo, una compra en línea. Se observa el desenvolvimiento del usuario y se recogen las observaciones.

Test de usabilidad

Test de contenidos (Summary test): indaga sobre la información más relevante para el usuario y que le causa un mayor impacto. Se le pide que resuma todo lo que ha visto o recuerda del web, luego de interactuar con el sitio.

Test de usabilidad

Usability edit: se pide al usuario la identificación de secciones, aplicaciones o temas que no domina o entiende su función.

Test de usabilidad

Card-Sorting: se persigue con esta técnica el mejoramiento de la arquitectura de información. Se solicita al usuario el agrupamiento, clasificación y ordenamiento de conceptos y temas escritos previamente en tarjetas. Ofrece información sobre la lógica de procesamiento de la información que siguen los usuarios, por tanto, permite aplicar la misma lógica al sitio web.