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:
Pensar en el usuario
Entender los conceptos básicos de Usabilidad y Accesibilidad
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¶
Pensar en el usuario :
Ponérselo fácil
Entender el sistema (verlo y entenderlo)
Informar del estado actual
Ser consistente (acción -> efecto)
Diseño iterativo: pensar -> hacer -> evaluar -> actuar
Somos cazadores de información ( Information Foraging Theory )
En el fondo somos animales (que necesitan comer para sobrevivir)
Queremos el máximo valor, al menor coste
Vamos husmeando para satisfacer nuestros intereses
Analizamos los costes:
en tiempo
en oportunidad
y en esfuerzo necesario
Estimamos los costes, para obtener el máximo beneficio (no 100% objetivo)
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:
¿Quiénes son los usuarios?
¿Cuáles son sus tareas y metas?
¿Qué nivel de experiencia tienen los usuarios?
¿Qué funciones se necesitan?
¿Qué información necesitan los usuarios y de que manera?
¿Cuáles son los casos más adversos?
¿Se realizarán varias tareas a la vez?
1.2. Usabilidad¶
¿ Qué es ?
Facilidad de Uso: de un objeto (o una página web)
Características de la interfaz + Contexto Usuario: las dos importan
Diseño (pensar en el problema) vs Desarrollo (programar la solución)
Componentes:
Facilidad de Uso. ¿Lo podria usar mi madre?
Eficiencia. ¿Va a tardar poco?
Memorabilidad. ¿Tardará aún menos la semana que viene?
Errores. ¿Cuántos errores tiene mi web? ¿De qué tipo son?
Satisfacción. ¿Me gustó la experiencia?
Usability 101 ( y las cinco W )
Qué es
Porqué importa
Cómo mejorarla
Cuando aplicarla
Donde probarla
T01-S02. Revisión Básica de Usabilidad
Visita la web del instituto.
¿Crees que es fácil de usar? ¿Porqué?
Busca información del ciclo que estudias, ¿fue rápido?
Busca el teléfono del instituto, ¿tardaste mucho?
Tiene algún error la web
¿Alguna propuesta de mejora para facilitar el uso?
Y para hacer alguna tarea más rápido
Si evaluaras del 1 al 10 tu nivel de satisfacción por el uso, ¿cual sería? ¿porqué?
Cual sería una web a la que tú le darías un 10 en satisfacción por el uso
¿Cual sería el problema principal que tiene que resolver la web del instituto?
1.3. Accesibilidad¶
¿ Qué es la accesibilidad web ? Web utilizable (por cuanta más gente mejor)
Componentes:
Tecnológicos: Hardware y Software
Conexión: latencia y velocidad
Persona: madurez y necesidades
Accesibilidad Universal: aprender de la discapacidad
Tipos de limitaciones:
Visuales
Motrices
Auditivas
Cognitivas
Problemas y soluciones
Manejable (de forma directa o con ayudas técnicas)
Navegable. Mapa de navegación claro y fácil encontrar recursos
Comprensible. Complejidad de contenidos adecuada
Guía de Accesibilidad de Contenido ( WCAG )
Perceptible. Que pueda ver el contenido (en diferentes contextos)
Operable. Que pueda manejar la interfaz
Entendible. Que se entienda cómo está organizada la web
Robusto. Que funcione con diferentes dispositivos y conexiones
Uso más habitual: lectores de pantalla
T01-S03. Accesibilidad
¿Cómo usa la web un ciego?
¿Cómo la usa un sordo?
¿Algún periférico específico que ayude a una persona con discapacidad física?
¿Algún software específico?
¿Que configuraciones de accesibilidad tiene tu sistema operativo?
¿Qué dificultades puede encontrarse una persona mayor? ( Algunas reclamaciones )
¿Algún ejemplo concreto de mejora de perceptibilidad (guía WCAG)?
¿Algún ejemplo concreto de mejora de operabilidad (guía WCAG)?
¿Algún ejemplo concreto de mejora de entendibilidad (guía WCAG)?
¿Algún ejemplo concreto de mejora de robustez (guía WCAG)?
1.4. Guías de usabilidad¶
10 criterios de una buena interfaz: 10 Usability Heuristics / Español
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors
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¶
Lo que importa es probar con usuarios
-
Identifica problemas (lo antes posible)
Descubre oportunidades (para satisfacer necesidades ocultas)
Aprendemos de los usuarios
Elementos:
Investigador (facilitador)
Tareas a realizar
Participante (usuario)
Menos apariencia y más realidad:
Ideal presencial
Tareas reales (y sin condicionar)
Usuarios reales
En la práctica:
Con 5 usuarios llega ( 5 users )
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¶
-
Diseño Gráfico (arte)
Diseño UI (interfaz)
Diseño UX (experiencia)
Proceso de Diseño (es iterativo y continuo):
Objetivos
Investigación previa
Arquitectura del sitio. Estructura de la información (sitemap)
Wireframing (prototipos). Diseño Conceptual
Maquetación. Diseño Real
Criterios Generales de Diseño:
Usabilidad
Accesibilidad
Uso de Estándares
Velocidad
Actualizable
T01-A06. Revisar sitio web primer curso
¿Cómo diseñaste tu web de primer curso?
¿Cómo lo harías ahora si tuvieras que empezar?
¿Podrías hacer un boceto en papel del mapa del sitio?
¿Y de algunas de las páginas o la plantilla general del sitio?
¿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:
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)¶
Acciones orientadas a mejorar posicionamiento en buscadores (SEO: Search Engine Optimization)
Es diferente a mejorar el diseño en sí (pero sí tiene mucho que ver)
Depende del algoritmo de clasificación de cada navegador
Se puede posicionar:
de forma natural
de forma artificial (publicidad u otras técnicas)
Tipos de Mejoras:
Internas: mejoras en el diseño web (UI/UX/contenido)
Externas: valgo en función de lo quien y cuánto me enlaza (no es objetivo de este curso)
Nos importa el usuario (no el buscador), pero hay criterios comunes:
Buen Diseño: la interfaz (estructura, estilos y recursos)
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