Usabilidad

Carlos Fontela cfontela@fi.uba.ar

A3F

Temario
Introduccin Malos y buenos ejemplos: reales y posibles Usuarios e interfaces de usuario Usabilidad en general y tpicos Mximas, principios y guas de diseo Metodologa de diseo de interfaces

1c2010

A3F

Por qu usabilidad (1)

Usabilidad =
Facilidad con que los usuarios pueden usar y aprender a usar una aplicacin + Comodidad en el uso (sobre todo rapidez y efectividad)

A veces se hace nfasis en experiencia del usuario (UX)

Los vamos a considerar sinnimos

Usabilidad y desempeo
Desempeo terico Desempeo del usuario

Usabilidad y funcionalidad
Funcionalidad correcta funcionalidad usable en forma eficiente y sencilla
1c2010

A3F

Por qu usabilidad (2)

UX => privilegiar aspectos ingenieriles
El arte, la vistosidad y el entretenimiento son importantes, pero no son lo central No son aspectos de incumbencia tcnica Es la parte que ms se comenta de la Web

Malas interfaces de usuario cuestan dinero

Incluso vidas
1c2010

A3F

Por qu usabilidad (3)

Entre desarrolladores de software
Lo habitual es no pensar en la usabilidad y s en la tecnologa O pensar que los usuarios tienen el mismo perfil que ellos

Consecuencias
Grandes manuales, que nadie lee
Y papelitos pegados al borde del monitor

Costos de soporte al cliente Improductividad en las empresas usuarias Frustracin

1c2010

A3F

Por qu usabilidad (4)

UX y discapacidad
Discapacidades fsicas permanentes o temporarias Discapacidades intelectuales o de formacin Todos estamos en desventaja en algunas situaciones Estados de nimo Diferencias culturales Prejuicios

Buenas interfaces de usuario deben garantizar productividad y economa

1c2010

A3F

Por qu usabilidad (5)

Algunas frases
Dont make me think (Steve Krug) Cuando todo falle, lea las instrucciones (Ley de Murphy) No me sorprendas (Steve McConnell) Vice-presidents are not users (Jackob Nielsen) El programa funciona bien. Lo que pasa es que usted est cometiendo el tpico error que cometen todos. (Steve McConnell)

No es un tema dogmtico, con verdades inmutables

1c2010

A3F

Contexto
Poca gente piensa en UX Entre los ingenieros? UX esttica UX =>
Productividad Menores costos

1c2010

A3F

UX y tipos de aplicaciones
Sitios web institucionales: Foco en imagen de la compaa, la calidad de la informacin de productos y servicios Sitios web comerciales: Foco en concrecin de operaciones comerciales y la fidelizacin Aplicaciones internas (pueden ser web) Foco en mejora de productividad, costos de aprendizaje, costos de soporte
1c2010

A3F

Los impulsores
Jakob Nielsen Donald Norman Jeff Johnson Ben Schneiderman Bruce Tognazzini En la Argentina:
UNLP Grupo Interaccin-Sur

1c2010

10

A3F

Las bases

1c2010

11

A3F

Malos y buenos ejemplos

Para analizar y debatir Se sugiere entrar en la Web y navegar un poco, con actitud crtica Pensando en usuarios reales

1c2010

12

A3F

Sitios de gobierno (1)

Caso AFIP
http://www.afip.gov.ar/ Buscamos algo?

Sitio del gobierno federal argentino

http://www.argentina.gov.ar/argentina/tramites/ Buscamos algo?

Caso DNV
http://www.vialidad.gov.ar/ Veamos estados de rutas en Ro Negro, Santa Cruz, Chubut, Baha Blanca?
1c2010

13

A3F

Sitios de gobierno (2)

Caso Ruta 40
http://www.ruta40.gov.ar/ Naveguemos un poco

Caso GCBA
http://www.buenosaires.gov.ar/ Veamos el mapa interactivo

Se supone que el gobierno debe pensar en TODOS los ciudadanos

Pero a veces pareciera que los sitios estn diseados para expertos
1c2010

14

A3F

ATM y home banking

Por qu son tan distintos? El servicio no est disponible. Intente ms tarde.
Cunto ms tarde? Cul servicio no est disponible? Y si tengo que hacer un pago hoy?

No se pudo procesar su transaccin

Qu pas? Qu debo hacer?

1c2010

15

A3F

Ventanas emergentes
Volvieron? Hace unos aos eran el paradigma del mal gusto Veamos en lnea:
http://www.clarin.com/ http://www.lanacion.co m.ar/
1c2010

16

A3F

Problemas de consistencia

1c2010

17

A3F

Usuarios sin informacin

1c2010

18

A3F

Informacin falsa
Especialidad de Windows
searching database for matches

Es til?
Para qu? Para quin?

1c2010

19

A3F

Infografa diarios: inicios

1c2010

20

A3F

Infografas on line hoy

Veamos http://mytimes.com/

Estilo Web 2.0?

Web 2.0: el usuario genera informacin

1c2010

21

A3F

Google Maps
Veamos en http://maps.google.com/ Concepto de zoom semntico Estilo Web 2.0?
Web 2.0: el usuario genera informacin

1c2010

22

A3F

GapMinder
Veamos http://www.gapminder.org/ Estilo Web 2.0?
Web 2.0: el usuario genera informacin

Opinin?

1c2010

23

A3F

Complicaciones constantes
Las distintas plataformas y sus cambios complican Tarea:
Probar Hotmail en Ubuntu/Firefox y Windows/Firefox Probar sitios web con Chrome Probar abrir un docx con Word de OfficeXP

1c2010

24

A3F

Votos y UX
Boleta de las elecciones de 2001, en Florida, Estados Unidos

Cmo la vea el votante, segn los crticos

1c2010

25

A3F

UX en la vida diaria
Conocemos todas las funciones de nuestro celular? Usamos con naturalidad nuestro DVR? Sabemos cmo sacar la rueda de auxilio del auto sin leer el manual? Nos sentimos cmodos con los menes de opciones telefnicas? Se le ocurren otros ejemplos?

1c2010

26

A3F

Usuarios e interfaces de usuarios

A modo de caracterizacin y clasificacin

1c2010

27

A3F

Son iguales los usuarios?

S
Todos somos personas Vemos formas, colores Formamos conceptos y recordamos etc.

No
Discapacidades fsicas permanentes o temporarias Discapacidades intelectuales Estados de nimo Diferencias culturales, prejuicios etc.
1c2010

28

A3F

En el tiempo
Early-adopters
Entusiastas de las computadoras y aparatos electrnicos Orgullosos de descubrir cmo resolver un problema complejo en el uso No se quejan de sus dificultades

Usuarios comunes
Mayora hoy en da Poca paciencia para resolver problemas de UX Aunque se enfrentan con celulares, equipos de msica, etc. Usabilidad puede seducirlos
1c2010

29

A3F

Segn su experiencia
Experto
no tolera rodeos para hacer las cosas le molestan las ayudas no solicitadas

Novato
suele recurrir a la ayuda es paciente y no tiene apuro

Intermedio
es el ms frecuente en aplicaciones masivas y la Web

No existe el usuario tipo

1c2010

30

A3F

Segn las aplicaciones

Usuario cautivo Usuario semi-cautivo Usuario libre para comprar Usuario independiente

1c2010

31

A3F

El usuario web (1)

Tiene el control total:
Decide cundo entra al sitio y cundo sale Decide si usa un servicio o no Se molesta cuando lo fuerzan a permanecer en un sitio, le complican las cosas, es lento, le cuesta encontrar lo que busca Prefiere velocidad y contenidos concisos a un diseo muy creativo (?)

1c2010

32

A3F

El usuario web (2)

Suele ser paciente mientras es principiante O cuando le interesa mucho el contenido Con la experiencia, la paciencia se le agota En general, es raro que un usuario llegue a mi sitio como el primero visitado en su vida:
Rara vez es novato Rara vez es paciente Tiende a hacer comparaciones

Pretende que los distintos sitios se comporten de manera parecida y se manejen por estndares de facto
1c2010

33

A3F

Por qu pensar en el usuario?

Usuario cautivo: se va a lograr mejorar el aprendizaje y la productividad Usuario semi-cautivo: es la mejor defensa cuando aparece la competencia Usuario libre para comprar: es nuestro mejor vendedor, y en el futuro se puede pasar a la competencia Usuario independiente: no le cuesta abandonarnos
1c2010

34

A3F

Estilos de IU
Consolas de texto Consolas grficas Web Rich Internet Applications Web 2.0 Dispositivos mviles Interfaces avanzadas
1c2010

35

A3F

Lenguajes de comandos (1)

Ejemplos
DOS Unix

1c2010

36

A3F

Lenguajes de comandos (2)

Ventajas
Rpido y flexible para expertos Programable por macros

Desventajas
Difcil para novatos Alta tasa de error y manejo pobre de los errores Requiere aprendizaje y memorizacin
1c2010

37

A3F

Menes (1)

1c2010

38

A3F

Menes (2)
Ventajas
Organizacin y agrupacin de la informacin Poco aprendizaje Muestra todas las opciones Permite la existencia de opciones por defecto Reduce la necesidad de teclear

Desventajas
Dependiente de un buen diseo No se puede usar si hay muchas opciones Lento para expertos Menes dinmicos con opciones ocultas
1c2010

39

A3F

Atajos de teclado
Ejemplos
En casi todas las interfaces con menes Comandos de tecla en viejos procesadores de texto

Ventajas
Fcil de implementar Fcil aprendizaje Fcil para usuarios expertos

Desventajas
Difcil de recordar qu hace cada tecla o combinacin Nmero de opciones limitado

1c2010

40

A3F

Preguntas y respuestas (1)

Ejemplos
Wizards de Microsoft: la computadora pregunta y el usuario contesta.

1c2010

41

A3F

Preguntas y respuestas (2)

Ventajas
Fcil de implementar Fcil para usuarios inexpertos

Desventajas
Difcil de corregir errores A veces, imposible volver para atrs Lento para usuarios avanzados

Deben usarse para tareas poco frecuentes Debe haber una opcin rpida para usuarios avanzados
1c2010

42

A3F

Formularios (1)
Ejemplos
Cajas de dilogo de Windows, Mac, Gnome, KDE, Pginas web

1c2010

43

A3F

Formularios (2)
Ventajas
Organizacin y agrupacin de la informacin Son familiares a casi cualquier usuario Simplifica la entrada de datos Pueden contener botones de opcin, menes desplegables, cuadros de texto, etc.

Desventajas
Lento para expertos Consume espacio en pantalla
1c2010

44

A3F

Manipulacin directa (1)

1c2010

45

A3F

Manipulacin directa (2)

Ventajas
Desde el punto de vista del usuario, orientado a objetos y no a procedimientos Fcil de aprender, intuitivo Rpido para los objetos disponibles Subjetivamente ms ameno de usar

Desventajas
No tan bueno para objetos no disponibles Limitado Difcil de implementar
1c2010

46

A3F

WYSIWYG (1)
Ejemplos
Procesadores de texto Herramientas de programacin web

1c2010

47

A3F

WYSIWYG (2)
Ventajas
Correspondencia con el resultado real (What You See Is What You Get)

Desventajas
Dificultades cuando se desconoce la plataforma del cliente Difcil de implementar Depende de la calidad de la imagen No muestra la estructura subyacente
1c2010

48

A3F

WYSIWYG (3)
WYSIWYG con estructura

1c2010

49

A3F

Hipertextos e hipermedia (1)

Ejemplos
Web tradicional Ayudas en lnea

1c2010

50

A3F

Hipertextos e hipermedia (2)

Ventajas
Facilidad de navegacin Independencia de la secuencialidad

Desventajas
Depende de un buen diseo Tendencia a sobrecargar de vnculos

1c2010

51

A3F

Web rica (1)

Rich Internet Applications (RIA)
Ajax Flash Java web start Microsoft Silverlight

No parece web
Experiencia del usuario similar a aplicaciones de escritorio

Ojo que hay desventajas de usabilidad

Botn Atrs, Favoritos, relacionados con URL GapMinder lo ha solucionado bastante bien
1c2010

52

A3F

Web rica (2)

1c2010

53

A3F

Web 2.0
Mucho ruido No muy bien definida Idea: aplicaciones web en las que el usuario tiene un rol de generador de contenido
Wikipedia: http://es.wikipedia.org/wiki/Wikipedia:Portada Ver GapMinder: http://www.gapminder.org/

1c2010

54

A3F

Web 2.0: de qu hablamos?

Si hay 2.0 es porque hubo una Web 1.* Participacin del usuario:
Hasta qu punto? Desde qu poca?

SaaS y Web 2.0

Definamos SaaS

1c2010

55

A3F

Dispositivos mviles (1)

Ventaja fundamental
Movilidad

Limitaciones
Manipulacin de texto Grficos, si los hay

Cada vez son mejores

1c2010

56

A3F

Dispositivos mviles (2)

1c2010

57

A3F

Computadoras empotradas
Ventajas
Informacin contextual

Contras
Limitaciones de IU Pocas posibilidades de introducir datos

1c2010

58

A3F

Interfaces avanzadas
Reconocimiento de escritura con lapicera Reconocimiento de gestos Reconocimiento de voz Interfaces 3D Realidad virtual Problemas
Falta de costumbre del usuario Usuarios con carencias Feedback
1c2010

59

A3F

Tendencias
Todas las interfaces actuales son variaciones de la Xerox Star de fines de los 1970
Luego copiada por Apple, Microsoft, etc. Conocida como GUI (graphical user interface) O como WIMP (windows, icons, mouse pointer)

El diseo de estas IU se hizo con UX en mente En la Web hay un modelo darwinista

1c2010

60

A3F

Hay una IU mejor?

Eleccin de IU depende de:
Tipo de usuario Tipo de tarea Medios de control disponibles

Los estilos de IU no se usan aisladamente

1c2010

61

A3F

Usabilidad

Recapitulacin, para comprender mejor Algunos tpicos de UX

1c2010

62

A3F

Definiciones (1)
Es el grado de efectividad de la interaccin entre operadores y sus mquinas
Jakob Nielsen (creador del trmino usability)

usabilidad es algo que funciona bien: significa que una persona de capacidad y aptitudes medias (o incluso por debajo de la media) pueda usar algo, tanto si es un sitio Web, un mando a distancia o una puerta giratoria, para lo que se supone que sirve, sin frustrarse mientras lo hace.
Steve Krug
1c2010

63

A3F

Definiciones (2)
lo que hace que algo sea usable es la ausencia de frustracin en el uso
Jeffrey Rubin & Dana Chisnell

Uno de los productos ms desafortunados es el tipo de ingeniero que no se da cuenta de que para aplicar los frutos de la ciencia para beneficio de la especie humana, debe conocer, no slo los principios de la ciencia, sino las necesidades y aspiraciones, las posibilidades y fragilidades, de aquellos a quienes debe servir.
Vannebar Bush
1c2010

64

A3F

Definiciones (3)
La PC es la ms frustrante de las tecnologas
Donald Norman

La verdadera usabilidad es invisible. Si algo anda bien, nadie se queja.

Jeffrey Rubin & Dana Chisnell
1c2010

65

A3F

Especialistas en UX
Profesionales de sistemas e informtica Comunicadores sociales Diseadores grficos Socilogos Especialistas en marketing

=> Es un campo multidisciplinario

1c2010

66

A3F

Aspectos de UX
Accesibilidad Navegabilidad Productividad Contenido de calidad Optimizacin Hay que lograr un equilibrio entre las cuestiones en conflicto y con los objetivos estratgicos

1c2010

67

A3F

Accesibilidad (1)
Diseo flexible y accesible
Menos importante en aplicaciones internas

Para todas las configuraciones

Distintos sistemas operativos Distintos navegadores y versiones Distintos tipos de IU Resoluciones de pantalla Velocidades de acceso

Para usuarios con carencias

Problemas de odo, visin, movilidad, motricidad fina, etc. Dificultades de lectura o comprensin A veces las carencias son temporales o de ambiente
1c2010

68

A3F

Accesibilidad (2)
WAI (Web Accesibility Initiative) de la W3C
http://www.w3.org/WAI/ Define distintas prioridades, acumulables Otorga sellos de conformidad

Se busca que todos tengan acceso a la Web y a las aplicaciones corporativas, independientemente de sus capacidades
Y de paso ayudamos a todos

1c2010

69

A3F

Navegabilidad
Consistencia con el resto de la aplicacin o sitio Mltiples formas de acceder a la informacin o a la funcionalidad Importante resolver los problemas del usuario, sus actividades habituales Lo ampliaremos en el captulo de Guas y principios

1c2010

70

A3F

Productividad
Minimizar el esfuerzo del usuario
Laboral e intelectual Steve Krug: Dont make me think!

Especialmente importante con usuarios cautivos Lo ampliaremos en el captulo de Guas y principios

1c2010

71

A3F

Contenido de calidad
Tiene que ver con UX? A veces s, cuando la arquitectura de la informacin lgica facilita o dificulta las acciones del usuario No es tema de este curso

1c2010

72

A3F

Optimizacin (1)
Tiempos de respuesta Tiempos de ejecucin de tareas del usuario Tiempos de descarga en la Web Uso de recursos de la PC del usuario

1c2010

73

A3F

Optimizacin (2)
La velocidad es la caracterstica ms deseada segn las encuestas a usuarios Espera de 10 segundos es aceptable para retener la atencin del usuario Al usuario no le interesan las razones tcnicas por las cuales la aplicacin es lenta
1c2010

74

A3F

Lectura en la Web (1)

Tendemos a pensar en usuarios que leen todo lo que escribimos y que analizan las opciones antes de cada clic Pero no es as!: los usuarios no leen, picotean Tendemos a pensar que los usuarios son como nosotros

1c2010

75

A3F

Lectura en la Web (2)

Excerpted from Dont Make Me Think! A Common Sense Approach to Web Usability A Circle.com Library book, published by New Riders 2000 Steve Krug

1c2010

76

A3F

Picoteo (1)
Si queremos leer un documento largo, lo imprimimos Habitualmente, estamos apurados Sabemos que no es necesario leer todo Somos expertos en picotear

1c2010

77

A3F

Picoteo (2)

Excerpted from Dont Make Me Think! A Common Sense Approach to Web Usability A Circle.com Library book, published by New Riders

1c2010

78

2000 Steve Krug

A3F

Soluciones subptimas
Los usuarios se quedan con la primera opcin razonable que encuentran Encontrar la mejor solucin lleva trabajo Habitualmente equivocarse no es costoso
Un clic en el botn Atrs soluciona el error Excepciones: transferencia de dinero

Estamos acostumbrados a que las aplicaciones mal diseadas nos hagan equivocar

1c2010

79

A3F

Observacin de usuarios
Las opciones por defecto son consideradas primero
Y el usuario tiende a creer que se aplica a l

Los usuarios no son buenos recordando informacin demasiado precisa Los usuarios disgustados trabajan peor
O no vuelven

1c2010

80

A3F

Trabajar a nuestra manera (1)

Aplica al software, la Web, electrodomsticos, Usamos todo sin saber bien cmo funciona
A veces sin saber para qu sirve

1c2010

81

A3F

Trabajar a nuestra manera (2)

Cuando algo funciona, nos apegamos a esa manera de trabajar
No buscamos una manera mejor Es bueno ver cmo los usuarios logran hacer cosas que no previmos o de una forma que no previmos Puede ser negativo si lleva a ms errores

1c2010

82

A3F

Severidad de los problemas

Frecuencia: cuntos usuarios van a encontrar problemas Impacto
Irritacin menor o prdida de horas de trabajo?

Persistencia
O recurrencia Tiene que ser muy mala la UX para que el usuario cometa el mismo error una y otra vez

1c2010

83

A3F

Mximas, principios, guas

A modo de recomendaciones

1c2010

84

A3F

Recomendaciones vs. Opiniones

No es sencillo desarrollar una buena UX
Sobre todo para desarrolladores

Todos tienen sus opiniones sobre UX y cmo lograrla => seguir las recomendaciones de expertos

1c2010

85

A3F

Guas de diseo (Nielsen)

Buen modelo conceptual Hablar el lenguaje del usuario Utilizar principios de diseo grfico Implementar estndares Minimizar memoria de corto plazo Proveer feedback Prevenir errores y facilitar su correccin

1c2010

86

A3F

Mximas (Nielsen)
Su mejor impresin no es lo suficientemente buena El usuario tiene siempre la razn El usuario no siempre tiene la razn Los usuarios no son diseadores Los diseadores no son usuarios Los gerentes no son usuarios Less is more Los detalles importan La ayuda no se tiene en cuenta
1c2010

87

A3F

Caractersticas (Patton)
La interfaz debe
Seguir estndares Ser intuitiva Consistente Flexible Cmoda Correcta til

1c2010

88

A3F

Guas de diseo (Johnson)

Centrase en los usuarios y sus tareas, no en la tecnologa Le Corbusier: tener en cuenta primero la funcin y luego la presentacin Considerar la visin del usuario sobre la tarea No complicar la tarea del usuario Promover el aprendizaje

1c2010

89

A3F

Lecciones (Krug)
Las aplicaciones web deben ser autoexplicativas No me hagas pensar No hagas que pierda mi tiempo Los usuarios confan en su botn Atrs Somos criaturas de hbitos No tengo tiempo para charlar en la Web No te olvides de colocar una opcin de bsqueda Formamos mapas de sitio mentales Haz fcil ir a la pgina de inicio
1c2010

90

A3F

Krug: UX intuitiva y consistente

Recordar que hay distintos tipos de usuarios Identificar bien el nuestro Consistencia interna y con otras aplicaciones para el mismo nivel de usuario
Terminologa Menes y atajos Ubicacin de los botones tpicos Etc.
1c2010

91

A3F

Krug: flexibilidad y comodidad

A los usuarios les gusta poder elegir Sin caer en complejidad excesiva
Varias opciones para hacer lo mismo tambin pueden confundir

Flexibilidad => mayor complejidad de prueba Correcto manejo de errores Posibilidad de deshacer la mayor parte de las operaciones
Y avisar antes en las que no se pueden deshacer

Desempeo acorde al usuario

1c2010

92

A3F

Krug: UX correcta y til

Que haga lo que el usuario espera Que no engae Que respete lo que dicen los manuales y las especificaciones Buen uso del idioma No incluir caractersticas innecesarias
1c2010

93

A3F

Atributos de UX (1)
Basada en modelo del usuario Proveer feedback Hacer las cosas visibles Fcil de aprender y fcil de recordar Predecible

1c2010

94

A3F

Atributos de UX (2)
Pocos errores Eficiente Flexible Que parezca inteligente Que al usuario le sea til Que al usuario le guste
1c2010

95

A3F

Definicin de objetivos (1)

Simplicidad
Fcil aprendizaje y utilizacin Forma de expresin entendible para el usuario

Flexibilidad de la Interfaz
Forma de interaccin preestablecida y planteada en trminos del usuario, no de la aplicacin

Confiabilidad
1c2010

96

A3F

Definicin de objetivos (2)

Consistencia en la presentacin y expresin de conceptos Transparencia
Visualizacin permanente del estado y comportamiento del sistema

Ergonoma
Adaptacin al estilo y perfil del usuario
1c2010

97

A3F

Dilogo simple y natural (Nielsen)

Control del dilogo por parte del usuario Distribucin adecuada de la informacin Preguntas lgicamente bien diseadas Escritura correcta

1c2010

98

A3F

Lenguaje del usuario (Nielsen)

Utilizacin del lenguaje del usuario Idioma Grado adecuado de informacin Entradas del usuario

1c2010

99

A3F

Uso de memoria (Nielsen)

Memoria de trabajo o de corto plazo es chica Priorizar el reconocimiento sobre el recuerdo Informacin de la navegacin y sesin Visualizacin de rangos de entrada admisibles, ejemplos, formatos No pedir la entrada del mismo dato 2 veces
1c2010

100

A3F

Consistencia (1)
Consistencia terminolgica Consistencia visual
Ejemplo: inconsistencia terminolgica en Macintosh

1c2010

101

A3F

Consistencia (2)

1c2010

102

A3F

Feedback (1)
Informacin de los estados de los procesos:
Menos de 0,5 seg: instantneo Hasta 5 seg es tolerable, pero se debera poner un reloj o similar Hasta 1 min debera ponerse una barra de progreso Ms de 1 min, avisar antes y poner barra de progreso y estimacin de tiempo faltante
Si es real!

searching database for matches

1c2010

103

A3F

Feedback (2)

Informacin del estado del sistema Utilizacin de aclaraciones, validaciones, confirmaciones y mensajes de cierre

1c2010

104

A3F

Salidas evidentes
Opciones bien visibles:
cancelacin salidas deshacer modificacin

1c2010

105

A3F

Mensajes de error
Forma de aparicin Informacin del error orientada al usuario Ayudar al usuario a resolver el problema Precisar en qu consiste el error

1c2010

106

A3F

Prevencin de errores
Correccin automtica de la entrada de usuarios Ejemplificacin y formatos de entrada Flexibilidad

1c2010

107

A3F

Ayudas
Se acude a la ayuda cuando hay problemas Los manuales no se leen voluntariamente o antes de comenzar a usar la aplicacin Diseo global de las ayudas:
Fciles de hallar Orientadas a las tareas del usuario Con ejemplos y pasos a seguir No demasiado largas Diagrama que muestre las partes del sistema
1c2010

108

A3F

Metforas y smiles
Globales
Billetera Telfono Papelera Changuito

Datos y funciones
To do list Buscar

Colecciones
Fichero Carpeta
1c2010

109

A3F

Metforas: ventajas
Se basan en modelos conceptuales
representacin mental de los objetos y su funcionamiento las personas tienen modelos preconcebidos que no habra que cambiar
se aplica tambin a modelos inicialmente malos

Libro Psicologa de los objetos cotidianos, Donald Norman

1c2010

110

A3F

Estndares externos
Es el caso de las metforas vistas Responden para el caso de la gente que ya se habitu a verlos En cada ambiente hay estndares de colores, conos, formas de realizar tareas y ubicacin en menes

1c2010

111

A3F

Estndares propios
Colores, tipos de letras y tamaos Formas de trabajar Metforas e conos Nombres iguales para iguales tareas y objetos Coherencia en general

Preferir los estndares externos: no ser demasiado creativos ni originales

1c2010

112

A3F

La atencin del usuario

Umbrales
Lo que est por debajo de un umbral (sonido, movimiento, color) no se le presta atencin Las cosas muy parecidas parecen iguales

Efecto cctel
Uno se puede concentrar en lo que le interesa Pero molesta el ruido de fondo No hay que permitir que los objetos compitan entre s por la atencin del usuario

Adaptacin sensorial
Habitualidad no sorprende
1c2010

113

A3F

Visin humana y colores

Espectro visible

Los colores son percibidos en la retina, con:

bastones: periferia, azules, distinguen grises conos: centro, rojos, distinguen mejor colores

Medio muy efectivo para mejorar interfaces

Pero el mal uso puede bajar mucho la usabilidad
1c2010

114

A3F

Colores (1)
Modelo HSV para los componentes del color:
hue, saturation, value matiz, saturacin, brillo

Matiz
lo define la longitud de onda es el color

Saturacin
pureza del matiz, menos blanco por ejemplo, el rojo es ms saturado que el rosa

Brillo o tonalidad
reflejo de luz en una superficie hay colores ms brillosos que otros
1c2010

115

A3F

Colores (2)
Conos focalizan la atencin en objetos del centro de la imagen y ven mejor rojos que azules
Los rojos parecen estar ms cerca que los azules Los azules en el centro son menos visibles Los objetos azules chicos son difciles de focalizar El azul es un buen color de contorno o de fondo Es difcil ver objetos con bordes y puntas azules No se deben usar azules en texto
1c2010

116

A3F

Colores (3)
Con la edad, empeora la vista de los bastones y la percepcin del brillo
Razn de ms para evitar azules opacos

Es ms difcil mantener el foco con colores saturados adyacentes

Conviene usar pasteles

Problemas con la distincin de los colores

10% de la poblacin Cuesta distinguir entre colores de bajo brillo

1c2010

117

A3F

Colores (4)
No hay que tomar colores adyacentes en el crculo de matices

1c2010

118

A3F

Colores: un ejemplo

Verde y rojo: todos los distinguen bien? Buen uso de significado de verde y rojo
Problemas culturales: en todos lados el rojo es smbolo de peligro?
1c2010

119

A3F

Ejemplos: contraste (1)

Amarillo sobre blanco no se ve Negro sobre blanco es muy visible Azul sobre blanco se ve bastante menos en el centro Ms saturado no mejora mucho Algo parecido pasa con el verde claro Pero no con el saturado El rojo bien saturado es mejor

1c2010

120

A3F

Ejemplos: contraste (2)

Amarillo sobre negro se ve muy bien Blanco sobre negro es muy visible, aunque menos que a la inversa Verde claro se ve menos en el centro Pero no el saturado El rojo bien saturado es mejor

1c2010

121

A3F

Ejemplos: contraste (4)

El azul de fondo es visible, pero cansa un poco Peor con letras negras Mejora con las amarillas Y no tan malo con azules menos saturados Con el rojo es de terror Y con el verde? Pero si se saturan menos...

1c2010

122

A3F

Legibilidad (1)
Colores de mucho contraste entre texto y fondo:
negro sobre blanco, mejor blanco sobre negro, casi igual, pero un poco ms lento y pasado de moda

Fondos claros Patrones de fondo suaves Texto quieto

1c2010

123

A3F

Legibilidad (2)
Texto alineado a la izquierda se lee mejor
en casos especiales se puede alinear distinto para lograr un efecto visual o encolumnar cifras

Cursivas se leen peor

slo para destacar algo

Texto en minsculas:
las maysculas se leen despacio
1c2010

124

A3F

Ejemplos: tipos de letras

No conviene mezclar muchos tipos de letras porque se leen peor LA LEGIBILIDAD EN MAYUSCULAS ES PEOR, SOBRE TODO EN ORACIONES LARGAS Las cursivas deben usarse en palabras o frases cortas, porque son menos legibles que las letras normales

1c2010

125

A3F

Bloopers de texto: redaccin

Inconsistencia terminolgica Terminologa poco clara
similares trminos para diferentes conceptos Ambigedades

Hablar difcil
jerga informtica
ingrese una cadena de caracteres

errores de programacin
type mismatch

Redaccin despreocupada
Estilos de redaccin inconsistentes Problemas de gramtica, ortografa y puntuacin
1c2010

126

A3F

Bloopers de texto: mensajes

Mensajes de error que no dan pistas
no se especifica la razn del error
no se pudo imprimir el archivo: por qu?

mensajes genricos: muchas posibilidades en la misma oracin

Ayuda que dice lo mismo que el comando Problemas con ttulos de ventanas
diferente del del comando igual al de otras ventanas
1c2010

127

A3F

Legibilidad: algunos tips

Brindar herramientas y recursos grficos que ayuden al usuario a encontrar rpidamente lo que busca Agrupar informacin Sacar elementos visuales que dificulten la visin o el trabajo del usuario, o que lo distraigan Pocos elementos multimedia en la pgina de inicio Omitir palabras sobreabundantes Evitar sinnimos
1c2010

128

A3F

Opciones
Un usuario puede concentrase bien en 72 Limitar los menes a 5 a 9 opciones O agrupar en 5 a 9 grupos de 5 a 9 opciones:
esto da entre 25 y 81 opciones en total

Usar botones de radio y de seleccin exclusiva cuando hay hasta 5 opciones No usar listas muy largas
De ser necesario, incluir teclas rpidas
1c2010

129

A3F

Ley de Fitts
Modelo del movimiento humano
Predice el tiempo que lleva moverse de un lugar a otro Funcin de la distancia y el tamao del objetivo

Corolario de la ley de Fitts:

El tiempo para llegar con un apuntador a un objeto depende de la proximidad, pero ms de la precisin requerida

Conviene tener los objetos ms usuales ms cerca y sus opciones ms grandes

Por ejemplo, en pginas web, botn atrs y elementos de navegacin

1c2010

130

A3F

Formularios (1)
Etiquetas de campos claras
descripcin del campo tipo de dato a introducir texto puro slo en campos de datos no estructurados

Campos obligatorios: indicar correctamente Tamao de campo acorde con dato a ingresar

1c2010

131

A3F

Formularios (2)
Distinguir campos que no se pueden modificar Proporcionar ayuda al lado de los campos a llenar Proporcionar valores predeterminados Validar luego de cargar cada dato Facilitar el desplazamiento con el tabulador
1c2010

132

A3F

Formularios (3)
Poner en grupos los elementos relacionados Activar de entrada el primer campo Teclas aceleradoras Campos alineados a izquierda y dispuestos verticalmente
1c2010

133

A3F

Formularios (4)
Ordenar campos segn algn criterio
frecuencia de uso elementos relacionados cerca oden de lectura habitual como lo quiere el usuario

Botones cerca del dato al que se aplican

1c2010

134

A3F

Formularios (5)
Casillas de verificacin
opciones en forma vertical minimizan el recorrido no conviene poner ms de 10 opciones

Botones de radio
opciones en forma vertical minimizan el recorrido poner siempre una opcin por omisin utilizarlos para preguntas por s o no en vez de casillas de verificacin o menes desplegables ventaja: estn todas las opciones a la vista no conviene poner ms de 8 opciones no mezclar con casillas de verificacin
1c2010

135

A3F

Formularios (6)
Menes desplegables
sirven como sucedneo de los botones de radio cuando hay muchas opciones, pero no ms de 15 priorizan el recuerdo sobre el reconocimiento

Listas desplazables
se pueden elegir varios elementos son una alternativa a las casillas de verificacin priorizan el recuerdo sobre el reconocimiento pocos usuarios se dan cuenta de cmo seleccionar varias opciones no contiguas
1c2010

136

A3F

Bloopers en formularios (1)

Qu problemas vemos?
1c2010

137

A3F

Bloopers en formularios (2)

Fecha de nacimiento: 4/21/81 Telfono:
510-642-5117

No es mejor as?
Fecha de nacimiento : Telfono :

/
)

/
A3F

1c2010

138

Cursores
No son muy usables
difcil posicionar el cursor difcil saber el valor exacto que se est eligiendo valores continuos no son bien interpretados por algunos usuarios

1c2010

139

A3F

Tablas
Buenas para representar valores tipo planilla Mejoras de usabilidad
Alternar el color de fondo de las lneas Usar bordes cuando convenga Agrupar elementos con bordes de mayor grosor o con colores No abusar de colores y bordes
1c2010

140

A3F

Ventanas
Siempre totalmente dentro de la pantalla Nuevas ventanas cerca de la ventana madre o de datos relacionados Que quede claro si son modales Evitar sobrecarga de ventanas modales
1c2010

141

A3F

Bloopers de interaccin (1)

Mala presentacin de la informacin
sin opciones por omisin opciones desordenadas o que desaparecen muy rpido controles ubicados en distintos lugares segn las pantallas opciones importantes ubicadas donde el usuario no suele mirar o en competencia con otras opciones importantes
1c2010

142

A3F

Bloopers de interaccin (2)

Permitir que la implementacin dicte la interfaz
y enviar a los usuarios problemas de implementacin o abrumarlos con requisitos tcnicos

Cajas de dilogo
Sin posibilidad de cancelar
porque no anda o porque no est

Cancelacin y OK llevan al mismo resultado

1c2010

143

A3F

Bloopers de interaccin (3)

Qu problemas hay aqu?

1c2010

144

A3F

Navegabilidad Web
Empezar por una URL fcil de recordar
Sin caracteres extraos Sin nombres en idiomas extraos Puede hacer perder tiempo a los usuarios O directamente hacer que no lleguen

Ojo con RIA y URLs Navegacin familiar al usuario y que facilite el aprendizaje El visitante no tiene tiempo para aprender las particularidades de un sitio
1c2010

145

A3F

Recomendaciones en la Web (1)

Evitar scrolls horizontales No disear para pantallas de mucha resolucin No usar slo ltima versin de los navegadores y plugins Evitar sobrecarga de imgenes y otros medios
Repetir la misma Cachear Poner etiquetas ALT por si no se quiere esperar a la descarga
1c2010

146

A3F

Recomendaciones en la Web (2)

La pgina principal de un sitio o la de acceso a la aplicacin debe contestar las siguientes preguntas:
Qu es esto? Qu puedo hacer ac? Por qu debera usar este sitio / aplicacin y no otro? Por dnde empiezo?

1c2010

147

A3F

Recomendaciones en la Web (3)

Evitar demasiados
Demasiadas opciones Demasiadas ofertas Demasiadas palabras Demasiadas imgenes

No sabemos qu es importante y qu no Todo compite por nuestra atencin

1c2010

148

A3F

Bloopers en la Web (Johnson)

Estructura e interaccin
la estructura del sitio refleja la de la empresa el botn Atrs no lleva al usuario donde ste espera bsquedas complicadas

Vnculos
no llevan a ningn lado quedan ocultos por otros objetos sin informacin suficiente
1c2010

149

A3F

Metodologa

Diseo de la IU y desarrollo de software Distintos enfoques Distintos mtodos

1c2010

150

A3F

Contexto
Muchos gerentes consideran a los anlisis de usabilidad como un lujo que no pueden permitirse En general, a los problemas de usabilidad se les da baja prioridad Hay otras presiones: tiempo, entregas, interesados con intereses encontrados Los cambios tecnolgicos molestan

1c2010

151

A3F

Desarrollo de software y UX
Quin debe dirigir el desarrollo? Enfoques tradicionales
Desacoplar Centrado en ingeniera de software Centrado en UX

Todos son errneos

El producto es nico La interfaz de usuario no suele ser accidental El diseo de software no es algo menor
1c2010

152

A3F

Diferentes visiones
UX se refiere a cmo el producto se comunica con sus usuarios
Diseo de IU Diseo de interacciones Foco: lograr un producto que satisfaga al usuario Extremo: lo tcnico es accidental

Diseo tcnico se refiere a cmo trabaja internamente el producto

Sus partes, relaciones entre ellas, etc. Invisible al usuario Foco: lograr un producto que funcione, con buen desempeo, mantenible, etc. Extremo: IU es accidental
1c2010

153

A3F

Proceso de desarrollo y UX
No es buena idea incorporar usabilidad al final UCD (User Centered Design)
ISO 13407

UCD no implica minimizar el desarrollo de software

Pero pone el acento en UX

Otros nombres: Usability engineering, Human Factors Engineering,

De aqu en ms, sinnimos

1c2010

154

A3F

User-Centered Design (UCD)

Dos cosas:
Mtodos, tcnicas, procesos para desarrollar UX Filosofa que pone al usuario en el centro del proceso de desarrollo

Pilares
Enfoque temprano en el usuario y sus tareas Evaluacin del uso del producto por usuarios Diseo iterativo
1c2010

155

A3F

UCD
Se trabaja con el usuario durante el diseo Entender a los usuarios
Cmo trabajan Cmo piensan Cmo interactan con sus sistemas Su contexto
1c2010

156

A3F

Mtodos de UCD
Prototipacin Anlisis de tareas (Task Analysis)
Se lo llama tambin Usability testing Y evaluacin estadstica

Heurstica de la interfaz
o evaluacin por expertos

Estudios de seguimiento
Posteriores al desarrollo No es UCD en sentido estricto

Encuestas Muchos ms
1c2010

157

A3F

Eleccin de usuarios
Investigacin etnogrfica
Recoleccin de datos Quines son los usuarios Contexto de trabajo

Diseo participativo
Uno o ms representantes de usuarios dentro del equipo de desarrollo

Focus Groups
Para pruebas de concepto

Encuestas
Cuidado en la formulacin No es lo mismo que observar usuarios reales
1c2010

158

A3F

Prototipo
Versin preliminar, intencionalmente incompleta y en menor escala de un sistema
distintas versiones, cada una ms detallada, correcta y completa que la anterior

Se debe poder desarrollar en poco tiempo: Medio para definicin de requerimientos del futuro sistema
funcional y flexible de modo que el costo de modificarlo sea mnimo

Debe brindar al usuario la implementacin de partes de un sistema

1c2010

159

A3F

Prototipos: medios
Baja fidelidad
Papel, con lpiz y goma Papel, con cola y tijeras Mago de Oz
para tareas de difcil implementacin

Alta fidelidad
Procesador de textos Softwares presentacionales Lenguajes de script Lenguajes de programacin
1c2010

160

A3F

Prototipos: fidelidad
Alta fidelidad
Especificaciones ejecutables Productos interactivos Fcil de analizar verticales y horizontales Fcil matchear modelo y aplicacin Sirven para aprendizaje y testeo Se ve mejor la interaccin y navegacin Hay herramientas para hacerlos

Baja fidelidad
Menor costo Ms espontneos Ms facilidad de cambio Pueden usarse previamente a los de alta fidelidad
1c2010

161

A3F

Prototipos: ventajas (1)

Se pueden ensayar implementaciones parciales alternativas Feedback antes de terminar el desarrollo Expone UX en etapas tempranas de diseo Los errores aparecen antes
en las pruebas de cada iteracin

Permite el desarrollo gradual de un sistema

1c2010

162

A3F

Prototipos: ventajas (2)

Evita la carga emocional negativa de las pruebas de UX al final del desarrollo
ms difciles y ms desmoralizantes

Aumenta el compromiso de los usuarios al mostrarle prototipos

sobre todo si recuerdan la mxima de que "el sistema final es el ltimo de los prototipos"
1c2010

163

A3F

Prototipos: problemas
Demandas poco realistas Dificultad para poner un punto final Cambios continuos en los requerimientos Prdida de tiempo en aspectos secundarios Se requiere un buen manejo de los usuarios por parte del diseador Confundir con ajustes finos al final del proceso
1c2010

164

A3F

Usability testing (UT)

Es una tcnica de diseo, no de pruebas Basada en la recoleccin de datos empricos de la observacin de usuarios Formal
Para confirmar o refutar hiptesis preestablecidas

Informal
Ciclo iterativo de tests con usuarios reales, para exponer deficiencias y gradualmente establecer la UX

Steve Krug: Es un antdoto para las discusiones religiosas

1c2010

165

A3F

UT: consideraciones
Hacerlo lo antes posible Probar con 3 a 5 usuarios El conductor de las sesiones debe ser calmo, paciente y escuchar con inters Que haya todo tipo de usuarios Que sean usuarios reales y representativos Probar las tareas clave Probar tareas completas
Preferible probar toda una tarea que un poquito de todas
1c2010

166

A3F

UT: procedimiento
Fijar objetivos y escenarios a testear Seleccionar usuarios representativos
Al azar o no

Construir una representacin del ambiente de trabajo Observar a los usuarios usar la representacin
Controlado por moderador, que puede dialogar con usuarios Filmar o grabar al usuario Registrar el uso del sistema

Recolectar datos cuantitativos de los tests Recomendar mejoras al diseo de UX Ver http://usabilitytestinghowto.blogspot.com/
1c2010

167

A3F

UT: evaluar
Tareas realizadas Lugar en que se realizan Tiempo de las tareas Frecuencia en que se realizan Aprendizaje Otras herramientas utilizadas Comunicacin entre los usuarios Reaccin ante errores
1c2010

168

A3F

Heurstica de la interfaz
Es un mtodo de evaluacin de interfaces ideado por Nielsen
Se basa en la metodologa ya vista en el captulo de Guas y principios

La hacen especialistas, sin intervencin de usuarios Es ms econmica que la evaluacin que involucra usuarios
pero no es con el usuario verdadero

Mejor si el experto es a la vez experto en UX y en el dominio de la aplicacin

1c2010

169

A3F

Sin embargo
Relevamiento y diseo se hizo
Sobre una representacin del producto Con algunos usuarios La observacin afecta los resultados

Cmo probamos el producto real? => Pruebas de UX

Ojo con los trminos: usability testing es una tcnica de diseo

1c2010

170

A3F

Pruebas de UX
El tester es el primer usuario del sistema, antes de los usuarios reales Los buenos testers funcionales tienen alta probabilidad de ser buenos testers de interfaces

1c2010

171

A3F

Pruebas de UX: tcnicas

Checklists de buenas prcticas Observacin directa y mtricas Encuestas a usuarios Comparacin Checklists de estndares

1c2010

172

A3F

Preguntas?

1c2010

173

A3F

Fuentes: Web
CS 160, Universidad de Berkeley
http://vis.berkeley.edu/courses/cs160fa06/wiki/index.php/Main_Page

Sitios especializados en usabilidad:

http://useit.com/ http://www.webword.com/ http://www.usableweb.com/ http://webpagesthatsuck.com/ http://www.usabilityfirst.com/
1c2010

174

A3F

Fuentes: organizaciones
UPA y UPA Captulo Argentina: http://www.upa.org.ar/
Asociacin de Profesionales de la Usabilidad Organiza el Da mundial de la usabilidad
http://www.diadelausabilidad.org.ar/programa_2009

Internet Society
Ms centrado en accesibilidad Hay captulo Argentina: http://www.isoc.org.ar/

Grupos en LinkedIn Human Factors and Ergonomics Society: http://www.hfes.org/

1c2010

175

A3F

Fuentes: libros
El ordenador invisible, Donald Norman The Design of Everyday Things, Donald Norman Usability Engineering, Jakob Nielsen Usabilidad: diseo de sitios web, Jakob Nielsen GUI Bloopers, Jeff Johnson Dont Make Me Think, Steve Krug

1c2010

176

A3F