Diseño de Interfaces Web

Usabilidad

Introducción
  • Objetivo de la asignatura: aprender a hacer páginas web usables, atractivas y accesibles.
  • No se trata de solo diseño gráfico; se centra en la usabilidad, accesibilidad y experiencia del usuario.
Glosario de Términos
  1. Interfaz web: Conjunto de elementos que permiten al usuario interactuar con un sitio web a través de un navegador.
    • Interfaz (RAE): conexión física o lógica entre un computador y el usuario.
    • GUI (Interfaz Gráfico de Usuario): elementos visuales que facilitan el uso de software.
Principios para la Creación de un Sitio Web
  1. Crecimiento del Internet: Se han creado millones de páginas que llevan a establecer estándares de diseño y funcionalidad comunes.
  2. Funcionalidad Clara: Es fundamental que los usuarios comprendan qué es el sitio y qué acciones pueden realizar en él.
  3. Navegación Visible y Completa: Los usuarios deben poder encontrar fácilmente lo que buscan; se debe contar con un sistema de búsqueda eficaz.
  4. Contenido Expuesto: Debe ser claro, con títulos comprensibles y enlace a secciones más usadas.
  5. Diseño Visual: Los elementos gráficos deben ser funcionales y no meramente decorativos.
  6. Evaluación y Mantenimiento: Las interfaces deben ser revisadas y mejoradas constantemente.
Usabilidad
  1. Definición: Capacidad de un software para ser comprendido, aprendido, usado y ser atractivo para el usuario en condiciones específicas de uso (ISO/IEC 9126).
  2. Atrributos de la Usabilidad:
    • Cuantificables Objetivos: Eficacia y eficiencia en la tarea del usuario.
    • Cuantificables Subjetivos: Satisfacción del usuario.
  3. Importancia de la Usabilidad: Mejora calidad del producto, reduce gastos de mantenimiento, disminuye costos de producción.
    • Caso Ejemplo: Rediseño del sitio web de IBM incrementó las ventas en un 400%.

Diseño Centrado en el Usuario (DCU)

Fases del DCU
  1. Planificación
  2. Diseño (con múltiples pasos como modelado de usuario, diseño conceptual, de interacción y visual)
  3. Prototipado
  4. Evaluación
  5. Implementación y Lanzamiento
  6. Mantenimiento y Seguimiento
Conocimiento del Usuario
  • Visión: ¿Cómo ve el usuario la interfaz?
  • Pensamiento: ¿Cómo procesan la información?
  • Acción: ¿Qué decisiones toman al interactuar?

Métodos de Evaluación

Técnicas de Evaluación
  1. Card Sorting: Agrupar tarjetas que representan elementos de la interfaz por similaridad.
  2. Evaluación Heurística: Inspección del sitio web evaluado mediante expertos basados en principios de usabilidad reconocidos.
  3. Tests de Usuarios: Observación directa de usuarios reais interactuando con el diseño.
  4. Eye-tracking: Tecnología que analiza cómo los usuarios visualizan y navegan por la interfaz.
  5. Feedback: Recolección de opiniones e información de los usuarios.
  6. Analítica Web: Análisis de datos de acceso y comportamiento de los usuarios en el sitio web.
  7. Test A/B: Comparación de dos versiones de una página para ver cuál tiene un mejor rendimiento.
Aplicaciones Prácticas
  • Proyecto final: Creación de un sitio web para una empresa innovadora, siguiendo préstamos prácticos y teorías aprendidas.
    • Ejemplos de sectores: salud, movilidad, educación, energía, seguridad.
Principios de Usabilidad
  1. Visibilidad del Estado: Mantener al usuario informado sobre lo que ocurre en el sistema.
  2. Adecuación al Mundo Real: Utilizar un lenguaje comprensible.
  3. Prevención de Errores: Diseñar para evitar situaciones que causen errores.
  4. Flexibilidad y Eficiencia: Interfaces fáciles para principiantes y que ofrezcan atajos para usuarios avanzados.
  5. Consistencia: Mantener el mismo estilo y estructura a lo largo de toda la interfaz.
Conclusión
  • Mantenimiento y evolución continua de los sitios web, teniendo en cuenta el feedback de los usuarios.
  • Importancia de usar datos y métodos de evaluación para mejorar la usabilidad de manera continua.