PDF de programación - Usabilidad y proyectos web - La experiencia desde las trincheras

Usabilidad y
proyectos web

La experiencia desde las trincheras

Joaquín Márquez Correa

Quién soy

1ª parte

La usabilidad

No me hagas

Pensar

Steve Krug

¿De qué se ocupa

el especialista en usabilidad?

Clarifica Misión y Visión
Contenido y funcionalidad
Organización, navegación, rotulado y
búsqueda
Proyecta cambios y crecimiento

Es decir...

Entiende a la organización y al usuario
Logra el equilibrio necesario
Anticipa la forma de pensamiento del
usuario
Sienta las bases de la aplicación final

¿Por qué?

Internet no es simple
Es un medio nuevo, al que no estamos
acostumbrados
Cambia nuestros parámetros de
comportamiento (coger un producto vs.
mover el ratón)

¿Por qué?

¿y si ocurriera lo mismo en el mundo “offline”?

• y si la gente no lograra saber qué están

poniendo en el cine...

• y si los carritos del supermercado fallaran y

se rompieran en medio de los pasillos...

¿Cuándo?

Antes de empezar nada

• misión y visión

Junto a las primeras ideas

• contenido y funcionalidad
• concepto creativo

Durante el proyecto

velar por la usabilidad

¿Quién?

Especialista

• Informático
• Periodista
• Bibliotecario
• Diseñador

Alguien con suficiente “sentido común”...

el menos común de los sentidos.

Roles

Arquitectura de información: ordenar
los contenidos
Diseño de interacción: pintar pantallas
y procesos
Evaluación de usabilidad: buscar
errores y dar soluciones

Actividades

Análisis

• de una solución existente
• de las necesidades de la organización
• de las necesidades del usuario

Categorización

• validación / propuesta de contenidos

Prototipado o diseño de estructura

navegación

La fórmula correcta

Cliente

Usuario

Tengo

WEB

Quiero

Principios básicos

Simplicidad
Apoyo
Familiaridad
Obviedad

Estimulante
Satisfacción
Disponibilidad
Seguridad

Análisis

Conocer al usuario

Ponerse en su lugar
Entender sus necesidades y
problemas
Desarrollar empatía

Análisis

¿Qué quieres que haga el sitio/
sistema/producto por ti?
¿Dónde vas a usar este producto? ¿En
qué entorno?
¿Qué es lo que más usarías/desearías?
¿Cómo haces estas tareas hoy, sin esta
solución?
¿Qué te gusta y qué te molesta de la
forma en que haces estas tareas
actualmente?

Definición de contenido

Hacer un listado de todos los contenidos que

se quieren, sin jerarquías
• Entrevistas con decisores de la

organización

Establecer los objetivos concretos del

desarrollo

ej.: cambiar los usuarios de sucursales en
usuarios virtuales.
ej.: transformar en digital un proceso que
se hace de forma manual

Definición de contenido

Hacer un listado con lo que los usuarios

quieren

Entrevistas personales
Focus group
Encuestas masivas
Observación de campo

Definición de contenido

El 80% de las necesidades
de información puede ser
satisfecho por el 20% de los
contenidos/funcionalidades

Ese 20% es el más
importante

80 / 20

“Muchas arquitecturas
se derrumban bajo el
peso de su propio
contenido”

Louis Rosenfeld

Prototipado

Los planos de la casa

¿Para qué?

Diseñar la interfaz de usuario
Diseñar la interacción del usuario

¿Para quién?

cliente, diseñadores, maquetadores,
usuarios (test)

Prototipado

Centrarse en el usuario y su experiencia

(user experience)

yo no soy el usuario
mi jefe no es el usuario
el programador no es el usuario
el consultor de negocio no es el
usuario
el consultor de marketing no es el
usuario

Prototipado

Iterar
Evitar la superespecialización

• permitir un detalle progresivo
• empezar con un prototipo horizontal
• continuar con prototipos verticales

Ser “perezoso”

hacerlo rápido con poco consumo de
recursos
hacerlo “en bruto”

Prototipado

Diseño de interacción

Diseñar el comportamiento de los procesos
interactivos:

Suscripción (registro, alta)
Personalización (mi página)
Comunicación (mail, envío de mensajes)
Colaboración (foros, publicación)
Transacción (liquidaciones, operaciones)

Diseño de interacción

A tener en cuenta:

Lógicos
Similares a la “vida real”
Pocos pasos
Minimizar las probabilidades de error
Programación sólida

Evaluación

Información del estatus del sistema. (¿qué está
sucediendo, en qué paso voy del proceso, dónde
estoy?)
Coincidencia con el mundo real del usuario
(lenguaje acorde, procesos “familiares”)
Control y libertad del usuario (¿puedo volver,
terminar un proceso, recuperar un error cometido?)
Consistencia y estándares (navegación consistente
y coherente, nombres adecuados)

Evaluación

Prevención de errores (evitar que se cometan
errores, explicaciones claras, programación sólida)
Reconocimiento más que memoria (opciones claras,
obviedad)
Flexibilidad y uso eficiente (“favoritos”, enlaces
permanentes, para usuarios más avanzados)
Diseño práctico y simple (evitar “ruido”, contribuye
al objetivo)
Ayuda
Compatibilidad

¿Mucha información
para tan poco tiempo?

“Arquitectura de Información”
Louis Rosenfeld & Peter Morville
(O’Reilly).
“No me hagas pensar”
Steve Krug (Circle).
“Web site usability handbook”
Mark Pearrow (Charles River media).

• “Designing web usability”

Jakob Nielsen (New Riders).
“Arte y Ciencia del Diseño Web”
Jeffrey Veen (New Riders).

¡Gratis!

www.terremoto.net
www.grancomo.com
www.nitroglicerine.com
www.veaseademas.com
www.seisdeagosto.com
www.nosolousabilidad.com
www.nethodical.com
www.cadius.org
www.jmarquez.com

developer.yahoo.com/ypatterns/
www.hcibib.org/hci-sites/GUIDELINES.html
usableweb.com
usability.gov

2ª parte

Las trincheras

¿Trincheras?

La práctica difiere de la teoría
Casi nunca hay tiempo
Todo es para ayer
El presupuesto no cubre la investigación
Varios proyectos a la vez
Soluciones antes que reflexiones

Sí, trincheras

Tampoco está tan mal…
Ágil, desafío constante, experiencia (a
golpes, pero experiencia)
Variedad de clientes
Variedad de problemas
Creatividad a tope

Los proyectos

Manifiesto

La usabilidad viene de serie
No es una etapa más, debe estar inmersa en
todo el proceso
No es un opcional, está en el paquete
Desarrollamos (y diseñamos) productos, no
capas de pintura

Manifiesto

Todos hacemos usabilidad y no tomarla en
cuenta es hacer un mal trabajo.
¿Queremos hacer productos que funcionen
mal?
¿Queremos hacer productos que no se usen
o sean un dolor de cabeza para los usuarios?

Qué es un proyecto

Un desarrollo
Una página web
Una aplicación

Un trabajo con recursos, tiempos,
objetivos, fases y resultados

Tipos de proyectos / tamaño

Webs boutiques / escaparates
Webs transaccionales
Portales
Herramientas, aplicaciones

Tipos de proyectos / organización

De clientes:

• Sólo necesidades, pide consultoría.
• Ideas concretas, pide realización
• Solución existente, necesita renovación

Propios:

Proyecto de I+D
Idea propia
Startup: idea + financiación= empresa

Usabilidad en el día a día

Cuando la usabilidad es parte del equipo

• Momentos de diseño
• Momentos de validación
• Momentos de soporte

Cuando la usabilidad participa de forma

puntual
• Como validación
• Como auditoría

Cuando la usabilidad
es parte del equipo

Participación en el concepto
Liderazgo del equipo
Interlocutor entre negocio, diseño y
tecnología
Exposición al cliente

TODOS deben participar

Cuando la usabilidad
es parte del equipo

Presente en todo momento:

• Con el cliente
• Con el diseño
• Validando el trabajo
• Dando soporte a la implementación

¿Ejemplos?

Uno de I+D

La Coctelera

¿qué es lacoctelera.com?

servidor de blogs para personas normales

…que se ha convertido en una gran comunidad

La Coctelera

lacoctelera.com

45.000 cuentas creadas
350.000 posts
900.000 comentarios
35.000 amigos

La Coctelera

Usabilidad de serie
En cada fase, en cada nueva
implementación
Desde el concepto “para personas”, el
usuario en el centro del desarrollo
Sin usuarios, no tiene sentido, no funciona.

Uno transaccional

Camper e-shop

Año 2003
Tienda online
Hecha en Flash(!)
Usabilidad se adaptaba al cliente
Concepto: fácil de usar, agradable, como los
zapatos de la marca

Camper e-shop

Tareas de usabilidad:
Diseño del concepto
Organización de contenidos
Diseño de interacción

Camper e-shop

Camper e-shop

Uno de portales
y herramientas

OniWay Intranet

Rediseñar una solución existente que no

funcionaba: los usuarios, no la utilizaban.

Antigua intranet

Nueva intranet

1. Dispersa
2. No estructurada
3. Difícil de encontrar

información

4. Navegación inconsistenta
5. No escalable
6.

Complicada de mantener

1. Unificada
2. Estructurada
3.

Fácil de encontrar
información

4. Navegación consistente
5. Escalable
6.

Simple de mantener

OniWay Intranet

Acciones:

Entrevistas con usuarios (entender
porqué no se usaba)
Redistribución de los contenidos de
acuerdo con las necesidades de los
usuarios
Rediseño de interfaz
Nuevas funcionalidades

OniWay Intranet

Uno de startup

11870.com

11870.com

Desde la concepción de la idea de negocio,
dos especialistas en experiencia de usuario
Parte activa de la empresa
Idea de negocio basada en utilidad para el
usuario
Un año de trabajo

11870.com

Definición de usuarios objetivos
Creación de “personas” (¡yo!)
Entrevistas con usuarios
Prototipado
Primero función, luego forma
150 usuarios en beta privada

11870.com

Lanzado hace una semana
Éxito arrollador:
+ de 1400 usuarios
+ de 3000 sitios

¿Preguntas?

¡Gracias!