1. Diseño para personas#

En este tema se presentan los conceptos generales y más teóricos del diseño de interfaces y específicamente de interfaces web. Aprenderás a:

  1. Pensar en el usuario

  2. Entender los conceptos básicos de Usabilidad y Accesibilidad

  3. Usar las pruebas de usuario y la validación externa para mejorar tus diseños web

Esfuerzo Necesario

El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.

La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.

1.1. Piensa en el usuario#

  1. Pensar en el usuario :

    1. Ponérselo fácil

    2. Entender el sistema (verlo y entenderlo)

    3. Informar del estado actual

    4. Ser consistente (acción -> efecto)

  2. Diseño iterativo: pensar -> hacer -> evaluar -> actuar

  3. Somos cazadores de información ( Information Foraging Theory )

    1. En el fondo somos animales (que necesitan comer para sobrevivir)

  4. Queremos el máximo valor, al menor coste

    1. Vamos husmeando para satisfacer nuestros intereses

    2. Analizamos los costes:

      1. en tiempo

      2. en oportunidad

      3. y en esfuerzo necesario

    3. Estimamos los costes, para obtener el máximo beneficio (no 100% objetivo)

  5. En la web: navegación en forma de F ( F-shapped pattern )

T01-A01. Pensar como un usuario

Supongamos que estamos diseñando una web para comprar billetes de tren. Aplica unas cuestiones sobre diseño enfocado en el usuario:

  1. ¿Quiénes son los usuarios?

  2. ¿Cuáles son sus tareas y metas?

  3. ¿Qué nivel de experiencia tienen los usuarios?

  4. ¿Qué funciones se necesitan?

  5. ¿Qué información necesitan los usuarios y de que manera?

  6. ¿Cuáles son los casos más adversos?

  7. ¿Se realizarán varias tareas a la vez?

1.2. Usabilidad#

  1. ¿ Qué es ?

  2. Facilidad de Uso: de un objeto (o una página web)

  3. Características de la interfaz + Contexto Usuario: las dos importan

  4. Diseño (pensar en el problema) vs Desarrollo (programar la solución)

  5. Componentes:

    1. Facilidad de Uso. ¿Lo podria usar mi madre?

    2. Eficiencia. ¿Va a tardar poco?

    3. Memorabilidad. ¿Tardará aún menos la semana que viene?

    4. Errores. ¿Cuántos errores tiene mi web? ¿De qué tipo son?

    5. Satisfacción. ¿Me gustó la experiencia?

  6. Usability 101 ( y las cinco W )

    1. Qué es

    2. Porqué importa

    3. Cómo mejorarla

    4. Cuando aplicarla

    5. Donde probarla

T01-S02. Revisión Básica de Usabilidad

  1. Visita la web del instituto.

  2. ¿Crees que es fácil de usar? ¿Porqué?

  3. Busca información del ciclo que estudias, ¿fue rápido?

  4. Busca el teléfono del instituto, ¿tardaste mucho?

  5. Tiene algún error la web

  6. ¿Alguna propuesta de mejora para facilitar el uso?

  7. Y para hacer alguna tarea más rápido

  8. Si evaluaras del 1 al 10 tu nivel de satisfacción por el uso, ¿cual sería? ¿porqué?

  9. Cual sería una web a la que tú le darías un 10 en satisfacción por el uso

  10. ¿Cual sería el problema principal que tiene que resolver la web del instituto?

1.3. Accesibilidad#

  1. ¿ Qué es la accesibilidad web ? Web utilizable (por cuanta más gente mejor)

  2. Componentes:

    1. Tecnológicos: Hardware y Software

    2. Conexión: latencia y velocidad

    3. Persona: madurez y necesidades

  3. Accesibilidad Universal: aprender de la discapacidad

  4. Tipos de limitaciones:

    1. Visuales

    2. Motrices

    3. Auditivas

    4. Cognitivas

  5. Problemas y soluciones

    1. Manejable (de forma directa o con ayudas técnicas)

    2. Navegable. Mapa de navegación claro y fácil encontrar recursos

    3. Comprensible. Complejidad de contenidos adecuada

  6. Guía de Accesibilidad de Contenido ( WCAG )

    1. Perceptible. Que pueda ver el contenido (en diferentes contextos)

    2. Operable. Que pueda manejar la interfaz

    3. Entendible. Que se entienda cómo está organizada la web

    4. Robusto. Que funcione con diferentes dispositivos y conexiones

  7. Uso más habitual: lectores de pantalla

T01-S03. Accesibilidad

  1. ¿Cómo usa la web un ciego?

  2. ¿Cómo la usa un sordo?

  3. ¿Algún periférico específico que ayude a una persona con discapacidad física?

  4. ¿Algún software específico?

  5. ¿Que configuraciones de accesibilidad tiene tu sistema operativo?

  6. ¿Qué dificultades puede encontrarse una persona mayor? ( Algunas reclamaciones )

  7. ¿Algún ejemplo concreto de mejora de perceptibilidad (guía WCAG)?

  8. ¿Algún ejemplo concreto de mejora de operabilidad (guía WCAG)?

  9. ¿Algún ejemplo concreto de mejora de entendibilidad (guía WCAG)?

  10. ¿Algún ejemplo concreto de mejora de robustez (guía WCAG)?

1.4. Guías de usabilidad#

  1. 10 criterios de una buena interfaz: 10 Usability Heuristics / Español

    1. Visibility of system status

    2. Match between system and the real world

    3. User control and freedom

    4. Consistency and standards

    5. Error prevention

    6. Recognition rather than recall

    7. Flexibility and efficiency of use

    8. Aesthetic and minimalist design

    9. Help users recognize, diagnose, and recover from errors

    10. Help and documentation

T01-S04. Leer con atención

Leer y revisar los ejemplos del artículo 10 Usability Heuristics

1.5. Test de Usuarios#

  1. Lo que importa es probar con usuarios

  2. Usability Testing 101 :

    1. Identifica problemas (lo antes posible)

    2. Descubre oportunidades (para satisfacer necesidades ocultas)

    3. Aprendemos de los usuarios

  3. Elementos:

    1. Investigador (facilitador)

    2. Tareas a realizar

    3. Participante (usuario)

  4. Menos apariencia y más realidad:

    1. Ideal presencial

    2. Tareas reales (y sin condicionar)

    3. Usuarios reales

  5. En la práctica:

    1. Con 5 usuarios llega ( 5 users )

    2. Lo más frecuente posible

T01-A05. Prueba de Usabilidad

Prepara una prueba con usuarios de la web de Renfe (y haz alguna prueba con un usuario que puedas observar)

1.6. Diseñar una Web#

  1. Diseño Web :

    1. Diseño Gráfico (arte)

    2. Diseño UI (interfaz)

    3. Diseño UX (experiencia)

  2. Proceso de Diseño (es iterativo y continuo):

    1. Objetivos

    2. Investigación previa

    3. Arquitectura del sitio. Estructura de la información (sitemap)

    4. Wireframing (prototipos). Diseño Conceptual

    5. Maquetación. Diseño Real

  3. Criterios Generales de Diseño:

    1. Usabilidad

    2. Accesibilidad

    3. Uso de Estándares

    4. Velocidad

    5. Actualizable

T01-A06. Revisar sitio web primer curso

  1. ¿Cómo diseñaste tu web de primer curso?

  2. ¿Cómo lo harías ahora si tuvieras que empezar?

  3. ¿Podrías hacer un boceto en papel del mapa del sitio?

  4. ¿Y de algunas de las páginas o la plantilla general del sitio?

  5. ¿Qué parte del diseño sería arte, cual interfaz y cual experiencia?

1.7. Verificación de Sitios Web#

Verificación y validación de sitios web:

  1. Validación HTML

  2. Validación CSS

  3. Validación Enlaces

  4. y más

T01-A07. Validación de una Web

Haz una prueba de validación (HTML, CSS, Enlaces o Móvil) de la web que tú quieras

1.8. Posicionamiento en Buscadores (Técnicas SEO)#

  1. Acciones orientadas a mejorar posicionamiento en buscadores (SEO: Search Engine Optimization)

  2. Es diferente a mejorar el diseño en sí (pero sí tiene mucho que ver)

  3. Depende del algoritmo de clasificación de cada navegador

  4. Se puede posicionar:

    1. de forma natural

    2. de forma artificial (publicidad u otras técnicas)

  5. Tipos de Mejoras:

    1. Internas: mejoras en el diseño web (UI/UX/contenido)

    2. Externas: valgo en función de lo quien y cuánto me enlaza (no es objetivo de este curso)

  6. Nos importa el usuario (no el buscador), pero hay criterios comunes:

    1. Buen Diseño: la interfaz (estructura, estilos y recursos)

    2. Buen Contenido: las letras

T01-A08. Averiguar 10 mejoras SEO

Dime 10 mejoras concretas en el diseño, que impactarán directamente sobre una mejora en el posicionamiento en los buscadores