Módulo 4: Usabilidad Web

Módulo 4 /

Usabilidad en la Web

“Algunos conceptos que todo webmáster debe conocer”

Usabilidad

Tipografía

El tratamiento tipográfico para la Web es diferente al tradicional para impresos.

01

Usabilidad

Tamaño tipográficoUtilice en la hoja de estilos únicamente medidas relativas, como em, para asignar tamaño a los textos.

Usabilidad

Alineación de párrafos

Utilice para los párrafos de prosa alineación al margen izquierdo y evite el uso de alineación justificada.

Usabilidad

Usabilidad

Tamaño tipográfico y retícula

Asigne medidas en em para el ancho y el alto de las cajas de composición de la retícula.

Usabilidad

Usabilidad

Usabilidad

Fuentes tipográficas comunes

Asigne únicamente fuentes tipográficas comunes en la hoja de estilo para todos los textos.

Usabilidad

Usabilidad

Renglones de tamaño medio

Diseñe el texto de prosa para renglones de tamaño medio 60-80 cpl (caracteres por línea).

Usabilidad

Usabilidad

Usabilidad

Usabilidad

Imágenes

Además de textos, los sitios web transmiten en gran parte su información gracias a las imágenes. 02

Usabilidad

Pie de foto

Diseñe un estilo para los textos explicativos que sirvan como pie de foto.

Usabilidad

Usabilidad

Imágenes como textos

Evite el uso de textos falsos, es decir, imágenes como textos.

Usabilidad

Usabilidad

Usabilidad

Favicon

Diseñe el icono de favoritos, conocido comúnmente como favicon.

Usabilidad

Usabilidad

Audio

El diseñador de interfaz deberá tener en cuenta que el audio para la web tiene un tratamiento que debe cumplir con criterios de usabilidad, que muy frecuentemente no son en tenidos cuenta.

03

Usabilidad

Botones con sonido

Evite programar botones con sonido.

Usabilidad

Usabilidad

Sonido de fondo

Evite usar sonidos de fondo.

Usabilidad

Usabilidad

Estándares

Asumir los estándares web, emitidos por el Consorcio W3C, generará para todos los proyectos actuales, continuidad en el futuro. 04

Usabilidad

Estándares del W3C

Use los estándares de la W3C: XHTML para el contenido y CSS para la presentación.

Usabilidad

Usabilidad

Doctype

Declare el DOCTYPE o tipo de documento en cada una de las páginas web del sitio.

Usabilidad

Usabilidad

Convenciones web

Haga uso de las convenciones web.

Usabilidad

Usabilidad

Usabilidad

Usabilidad

Usabilidad

Independencia de dispositivo

Diseñe con independencia de dispositivo.

Usabilidad

Usabilidad

Hojas de estilo para impresión

Desarrolle páginas que puedan imprimirse correctamente, usando hojas de estilo para impresión.

Usabilidad

Usabilidad

Hipervínculos y navegación

La web está constituida esencialmente por hipervínculos. Del buen tratamiento que se les dé, dependerá el éxito de la navegación de los usuarios y una muy buena parte de la usabilidad del sitio.

05

Usabilidad

Falsos hipervínculos

Evite diseñar señales engañosas de hacer clic.

Usabilidad

Usabilidad

Estado de hipervínculos

Realice un diseño diferencial para todos los estados de hipervínculos.

Usabilidad

Usabilidad

Ubicación del usuario

Proporcione información sobre la ubicación del usuario a través de variaciones tipográficas o recursos gráficos.

Usabilidad

Usabilidad

Hipervínculo a la página de inicio

Habilite el acceso a la página de inicio, mediante hipervínculo en el logotipo y con un vínculo de texto rotulado como “inicio”.

Usabilidad

Usabilidad

Salto de bloques repetitivos

Habilite la posibilidad de saltar vínculos de navegación repetitivos.

Usabilidad

Usabilidad

Interacción

Los usuarios no únicamente leen, también interactúan con la interfaz, por ello es importante tener en cuenta las siguientes recomendaciones, para hacer una web más fácil de usar. 06

Usabilidad

Longitud del cuadro de búsqueda

Diseñe el cuadro de búsqueda para un máximo de 30 caracteres.

Usabilidad

Usabilidad

Diseño GUI personalizado

Evite incluir en la página, elementos de Interfaz Gráfica de Usuario (GUI) rediseñados y personalizados.

Usabilidad

Usabilidad

Posicionamiento

El posicionamiento orgánico en motores de búsqueda, SEO, debe empezar desde la misma arquitectura de información de un sitio, seguir con el diseño de interfaz y codificación, y por supuesto en la escritura de contenidos.

07

Usabilidad

URL complejos

Habilite un sistema de URL inteligentes para cada página web: cortas y significativas.

Usabilidad

Usabilidad

Titulo de la ventana

Asigne el título de la página web al título de la ventana y asegúrese que este título sea el encabezado de primer nivel

Usabilidad

Usabilidad

Mapa del sitio dinámico

Programe un mapa de sitio dinámico en XML y regístrelo en las herramientas de webmáster de Google.

Usabilidad

Usabilidad

Bibliografía imprescindible

Además de Internet, podemos encontrar mucha información en varios libros sobre el tema de usabilidad. Aquí te mostraremos algunos de ellos. 08

Usabilidad

Usabilidad

Módulo 5 /

Evaluación heurística de la Usabilidad

“Realiza pruebas de usabilidad como un experto”

Heurísticas

Qué es una evaluación heurística

La evaluación heurística o evaluación del experto es una manera muy rápida, eficaz y económica de descubrir los errores de usabilidad de un sitio web. 01

Fin del curso

¡Muchas gracias!

Sí, gracias por hacer un mundo más accesible, usable, más cálido y agradable

para tus semejantes, hermanos en la vida.

Más info…

Mario Carvajal

mario@astrolabio.com.coSkype: astromarioMSN: astromario@hotmail.comTel: +57 (1) 341948Cel: +57 (315) 4109020Bogotá, Colombia

www.astrolabio.com.co