Usabilidad en el desarrollo de software

usabilidad hernán schmidt
@lagartoflojo

Hola, mi nombre es Hernán Schmidt.
Gracias por venir hoy.
El profesor Neyem me pidió que les hablara sobre la
usabilidad de software.
Desde junio he estado trabajando en mi memoria y he
estado aprendiendo sobre usabilidad, y gracias a
eso logré hacer que mi aplicación sea muy fácil de
usar, cosa que en proyectos anteriores no había
logrado.
En esta presentación voy a contarles sobre la
importancia de la usabilidad de software, y darles
algunos tips para que la logren en sus propios
proyectos.

Antes de empezar, déjenme contarles un poco sobre
Familink, que es mi proyecto de memoria.
Se trata de una aplicación web para jardines infantiles
que permite a los padres comunicarse muy
fácilmente con las educadoras de sus hijos.
La idea es que los papás ingresen al sistema usando
sus celulares, y que las educadoras tengan tablets
para actualizar la información de los niños.
Las personas que usarán esta aplicación son de
distintas edades y con variadas habilidades técnicas.
Serán personas que no tienen tiempo para perder
descrifrando cómo usar un sitio web, ni para leer
manuales, y menos para asistir a capacitaciones.
Entonces me di cuenta que era importantísimo que
Familink sea muy fácil de usar, así que durante el
desarrollo de esta aplicación empecé a tomar más
seriamente el tema de la usabilidad de software.

aviso
de utilidad
pública
Así que les hago un aviso de utilidad pública: yo no
soy un experto en este tema, pero sí me interesa
muchísimo, lo he investigado y lo he puesto en
práctica, y les voy a contar un poco de lo que he
aprendido durante estos últimos meses.

u·sa·bi·li·dad:

la facilidad con que las
personas pueden utilizar un
software con el fin de alcanzar un
objetivo concreto

Ahora que está claro que no sé mucho sobre
usabilidad, déjenme explicarles qué es la usabilidad.
(leer)
Veamos qué significan cada unas de las palabras
marcadas...

iz aj e
nd
pre cia
a en
efici
facilidad memorable
erro
sa res
tis
f ac
ció
n

La facilidad es qué tan fácil de usar es el software, y
se puede medir según distintas variables:
- Aprendizaje: Qué tan rápido se aprende a usar el
software por primera vez
- Eficiencia: Una vez que ha aprendido a usarlo, qué
tan rápido se pueden realizar distintas tareas
- Memorable: Qué tan fácilmente se retoma el
software luego de un tiempo sin utilizarlo
- Errores: Cuántos errores cometen los usuarios, qué
tan severos son, y qué tan fácilmente pueden
recuperarse de ellos
- Satisfacción: Qué tan agradable es usar el software

ustedes no son
personas

Cuando decimos “personas”, nos referimos a los
usuarios del sistema. NO a ustedes, NO a los
desarrolladores.
En general,quienes hacen aplicaciones no son
quienes las usarán.
Y lamentablemente tenemos la tendencia a pensar
que todo el mundo usa los sitios o las aplicaciones
como nosotros.
Entonces, cuando se encuentren con alternativas de
cómo hacer cierta interfaz, no sirve de mucho que
los desarrolladores gasten tiempo y energía
discutiendo cuál es más fácil de usar, porque su
opinión no vale, la que vale es la de los usuarios.
Y para saber qué opinan los usuarios, hay que hacer
pruebas de usabilidad, que veremos más adelante.

alcanzar
un
objetivo

Los softwares existen para algún propósito. Un
software sin propósito no lo usaría nadie.
Las personas NO están usando nuestra aplicación por
el mero gusto de usarla
Las personas que están usando nuestro programa
están ahí para cumplir un objetivo específico, y es
nuestro deber hacer que lo alcancen lo más fácil y
rápidamente posible.
Si los usuarios sienten que les cuesta mucho alcanzar
sus objetivos, va a cerrar su programa o se irán de
su sitio, y buscarán una alternativa.

“ La aplicación no es
un objetivo – es un
obstáculo entre los
usuarios y sus
objetivos.
– robert hoekman jr.
”
Esta cita es de Robert Hoekman Jr., el autor de uno de
los libros más famosos de usabilidad, “Designing the
Obvious” (Diseñando lo obvio). Creo que todos los
desarrolladores deberían tenerla como fondo de
pantalla.
---
O sea, si queremos dejar a nuestros usuarios
contentos, tenemos hacer lo posible para que no
sufran con este obstáculo que es nuestra aplicación.

¿por qué
usabilidad ?

Ya, entonces ¿por qué es importante que nuestras
aplicaciones sean fáciles de usar?
Total, la gente puede leerse el manual. O ver esos
videos-tutoriales que gastaste tanto tiempo
haciendo. O filo, deberían probar con todos los
botones hasta que la aplicación haga lo que querían.
¿Cierto?
Pero la gente no tiene tiempo para hacer esas cosas.
Ni la paciencia. Ni las ganas. Si ellos están
invirtiendo tiempo en probar tu aplicación, lo mínimo
que deberían hacer ustedes es invertir en que la
puedan usar. Además, si no les gusta su aplicación,
lo más probable es que la desinstalen y se vayan a
la competencia.
Les preparé una una pseudo demostración de por qué
es importante la usabilidad...

APLICACIÓN USABLE
=
USUARIOS FELICES

Una aplicación usable deja felices a nuestros usuarios.

USUARIOS FELICES
=
USUARIOS QUE PAGAN

Cuando los usuarios están felices, están dispuestos a
pagar por nuestra aplicación.

USUARIOS QUE PAGAN
=
MÁS DINERO

Cuando los usuarios pagan, nosotros recibimos plata.

MÁS DINERO
=
MAYOR CAPACIDAD
DE MEJORAR
LA APLICACIÓN

Y con plata, tenemos una mayor capacidad de mejorar
la aplicación y hacerla más usable.
Y podemos aprovechar de invitar a nuestra polola a
comer.
Así que la usabilidad genera un círculo virtuoso que
trae puros beneficios.

¿
cómo hago
una aplicación que sea
fácil de usar
?
La pregunta del millón es entonces...
¿cómo hago una aplicación que sea fácil de usar?
La respuesta es, como en casi todas las cosas,
investigando, practicando, y probando.
No existen reglas sobre usabilidad. Existen buenas
prácticas, pero tal como la programación, es un arte,
no una ciencia exacta.
Les voy a dar algunos tips prácticos que creo que les
servirán para hacer más usables sus aplicaciones en
el futuro.
Lo primero que hay que tener en cuenta es que la
usabilidad no es un agregado, no se puede “instalar”
al final, cuando la aplicación está lista.
La usabilidad debe considerarse desde el comienzo
del desarrollo.
Éstas son algunas cosas que debieras hacer antes de
ponerte a programar.

1. Define las
features

Lo primero es definir qué vas a desarrollar, es decir,
qué features va a tener tu aplicación.
Normalmente, pensamos que mientras más features
mejor, ya que mientras más cosas hace nuestra
aplicación, más le va a gustar a los usuarios.
Pero la verdad es otra...

usabilidad ≈ 1
features

Para los usuarios, mientras más features tenga una
aplicación, más difícil es de usar. Considera que
cada función se traduce en un botón más, en una
página más, en más configuraciones; es decir en
más cosas que pueden distraer y confundir a los
usuarios.
Y la gente prefiere decisiones inequívocas, que
requieran de poca o ninguna reflexión, y si los
bombardeas con botones y pantallas, les estarás
dando todo lo contrario.

“ Una aplicación
obvia se enfoca en
lo importante y deja
fuera lo demás.
– robert hoekman jr. ”
Esta es otra cita de Robert Hoekman Jr. para poner de
fondo de pantalla
(leer)
O sea, si quieren hacer una aplicación usable, tienen
que dejar sólo las features que son realmente
importantes, y olvidarse de esas que son agregados
“bakanes”.
Por eso, si tienes una lista de features que se ve así:

Features ='(
●
Site Management
●
Control multiple websites and stores from one Administration Panel with ability to share as much or as little information as needed
●Administration Permission System Roles and Users
●Web Services API for easy integration between Magento and any third-party application

●Fully 100% customizable design using templates

●Customer Groups

●
One-Click Upgrades
●
Content Management System for Informational Pages
●Google Website Optimizer Integration for A/B and Multivariate Testing

●
International Support
●Support for localization, multiple currencies and Tax rates

●
Includes support for WEEE/DEEE in EU
●Configurable List of Allowed Countries for:

●
Site Registration
●Shipping Destination Addresses with ability to specify per shipping method

●Billing Addresses with ability to specify per payment method

●
Search Engine Optimization
●100% Search Engine Friendly

●Google Site Map

●
Search Engine Friendly URL’s
●
URL Rewrites give full control of URL’s
●
Meta-information for products and categories
●Auto-generated Site Map for display on site

●
Auto-Generated Popular Search Terms Page
●Analytics and Reporting

●Integrated with Google Analytics

●
Admin Dashboard for Report Overview
●
Sales Report
●RSS feed for New Orders

●
Tax Report
●
Abandoned Shopping Cart Report
●Best Viewed Products Report

●eCommerce Platform for Growth

●
Best Purchased Products Report
●Low Stock Report

●Search Terms Report

●
Product Reviews Report
●RSS feed for New Reviews

●Tags Report

●
RSS feed for New Tags
●Coupon Usage Report

●
Total Sales Invoiced
●Total Sales Refunded

●
Marketing Promotions and Tools
●Catalog Promotional Pricing by percentage or fixed amount with ability to restrict to stores, categories, products

●Flexible Coupons (pricing rules) with ability to restrict to stores, customer groups, time period, products, and categories

●
Free Shipping Options
●Multi-Tier Pricing for quantity discounts

Imagínense la cantidad de código, botones y
configuraciones que tiene que haber para que todas
estas cosas funcionen bien.
Hagan el ejercicio de reducir la lista a la mitad...

Features ='(
●
Site Management
●


●Customer Groups

●
One-Click Upgrades
●

●

●

●
Site Registration


●

●Google Site Map

●
●
●

●


●
●
Sales Report

●
Tax Report
●


●
●Low Stock Report


●

●Tags Report

●

●

●


●

… y luego, reducirla a la mitad nuevamente...

Features ='(
●
Site Management
●


●Customer Groups

●
One-Click Upgrades
●

●

●

●
Site Registration


●

●Google Site Map

●
●
●

●


●
●
Sales Report

●
Tax Report
●


●
●Low Stock Report


●

●Tags Report

●

●

●


●

Hasta que se queden con algo así.
Eliminando las features extras, terminamos con algo
así:

Features
1. Site Management
2. Control multiple websites and stores from
one Administration Panel with ability to share
as much or as little information as needed
3. Administration Permission System Roles and
Users
4. Web Services API for easy integration
between Magento and any third-party
application
5. Fully 100% customizable design using
templates
6. Customer Groups
7. One-Click Upgrades

¿Mucho mejor, no?
Piensen que esto de reducir la lista de features no sólo
le trae beneficios de usabilidad a los usuarios, sino
que a ustedes como desarrolladores también.
- Desarrollar menos features toma menos tiempo
- Puedes dedicarle más tiempo a las features
realmente importantes
- En menos features hay menos probabilidades de que
ocurran bugs, habrá menos código que mantener, y
reducirán las posibilidades de que algo salga mal
- Por último, tendrás que escribir menos
documentación y no gastarás tanto tiempo en
servicio técnico.

2. Haz
mockups

Lo segundo es que antes de ponerse a programar,
dibujen su visión de cómo se verá la aplicación, o
sea hagan mockups.
Usen un solo lápiz, un solo color, no compliquen las
cosas. La idea es plasmar lo que tienen en la cabeza
en papel, lo que les permitirá evaluarlo mucho más
fácilmente.

http://www.flickr.com/photos/jackdorsey/182613360/

Por ejemplo, éste es uno de los primeros dibujos que
Jack Dorsey hizo de Twitter, y como ven, tiene muy
poco detalle gráfico.
Lo que importa en un mockup son qué elementos van
dónde y con qué texto, no los colores ni si se ve
bonito.

Balsamiq Mockups
http://www.balsamiq.com

Cuando hayan terminado de dibujar, pueden hacer
mockups más elaborados que mostrarán mejor
cómo se verá la aplicación en el computador o en el
celular.
Les recomiendo el programa Balsamiq Mockups que
pueden bajar de esta dirección. Es totalmente drag
and drop, y viene con muchos elementos listos que
pueden usarse para hacer mockups de aplicaciones
nativas, web o móviles muy rápidamente.

3.
prototipos.
Haz
prototipos

Cuando ya tengan unos mockups listos, pueden hacer

La idea de los prototipos es hacer una interfaz funcional de la
aplicación de la manera más rápida y fácil posible.
Por ejemplo, si están haciendo una aplicación web, hagan el
HTML, el CSS, y algo de JavaScript. Pero no programen
nada del lado del servidor aún, o sea, no creen un
proyecto Rails ni Symfony ni nada por el estilo.
No tiene que verse como se verá la versión final, de nuevo,
la estética no importa a estas alturas.
Lo que importa es que se comporte como la versión final.
Los prototipos permiten revisar las interacciones dentro de la
aplicación. ¿Es tan fácil agregar un producto al carro y
completar el pedido como se lo imaginaban?
Además, podrán mostrarle la aplicación a sus amigos y a
potenciales usuarios para ver si funciona como esperan y
para que les den su opinión.

¿Por qué es tan importante hacer dibujos, mockups y
prototipos? ¿No es una pérdida de tiempo?
No, porque las cosas cambian. Muy pocas personas
hacen las cosas bien la primera vez.
Y cambiar mockups o prototipos es muy, muy barato.
Unos cuantos clicks y ya está todo arreglado.
Si lo primero que hacen es programar, y se saltan
hacer prototipos, lo que pasará es que cualquier
cambio les tomará mucho tiempo, ya que tendrán
que modificar código. Y modificar código es mucho
más lento y caro que mejorar unos dibujos.
Y lo más seguro es que tengan que cambiarlo de
nuevo.
Entonces, la idea de estos prototipos es que ya estén
más o menos seguros que cuando se pongan a
programar, no tendrán que cambiar nada.

4.
Realiza
pruebas de
usabilidad

Teniendo un prototipo, ya es muy fácil hacer pruebas
de usabilidad.
Las pruebas de usabilidad buscan encontrar
problemas de usabilidad en el diseño de nuestras
aplicaciones que nosotros no vemos.
Se trata de poner a unas cuantas personas al frente
de un computador o un celular, y pedirles que
realicen ciertas tareas, como por ejemplo agregar un
producto al carro de compras, y que a medida que
avancen nos vayan contando qué están pensando, y
por qué van haciendo click en las distintas cosas.
Ver a otras personas usar nuestra aplicación nos
permite darnos cuenta que cosas que nostros
considerábamos obvias, otros no las entienden.
Así se hace una prueba de usabilidad:

Usability Tests 101
1
so
Pa prepara
la lista de
tareas

Haz una lista de las cosas que quieres probar de tu
aplicación.
No esperes probar todo en una sola sesión, porque los
participantes se van a cansar y aburrir.
La prueba en total no debería durar más de 1 hora.
Las tareas deben dar sólo la información necesaria
para completarlas, pero no incluyan pistas.

Debes pedir una hora para
el pediatra de tu hijo. No
puede ser mientras está en
el colegio, y sale a las 2
de la tarde.

Pide la hora.

Por ejemplo...

Usability Tests 101
2
so
Pa busca
víctimas
participantes

Necesitas buscar gente con quien realizar la prueba.
No tienen que ser necesariamente de tu mercado
objetivo.
A veces no es fácil encontar personas que calcen el
perfil que nos gustaría, pero es mejor hacer pruebas
con cualquier persona que no hacer ninguna.
Puedes ofrecerles algo a cambio por participar: un
certificado de regalo, por ejemplo.
Les recomiendo practicar la prueba de usabilidad con
conocidos, así podrán pulir las tareas y llegar más
preparados a la prueba de verdad.

Usability Tests 101
3
so
Pa pregunta:
¿qué crees
que es esto?

En la prueba de usabilidad, no le debes decir nada a
los participantes sobre qué se trata ni para qué sirve
tu aplicación.
Sino que ábrela y pregúntales a ellos qué es lo que
creen que es, para qué sirve, y qué pueden hacer en
ella.
La primera impresión es muy importante, así que tiene
que quedarle claro a los usuarios para qué sirve una
aplicación.

Usability Tests 101
4
so
Pa pide que
completen
cada tarea

Ahora puedes ir tarea por tarea pidiéndole a los
participantes que las realicen.
Es posible que te hagan preguntas como “¿hago click
aquí?” pero no les contestes, diles algo como “haz lo
que harías si yo no estuviera aquí”.
La idea es ver si pueden ellos solos realizar las tareas
que les pides.
Pídeles que digan todo lo que están pensando, eso
hará mucho más fácil interpretar sus acciones.

Usability Tests 101
5
so
Pa
da las
gracias

Por último, dale las gracias.
En verdad que eso es todo, es muy fácil hacer estas
pruebas.
Y no se preocupen de no ser expertos, porque los
problemas de usabilidad serán evidentes.

5.
Itera,
itera,
itera

El quinto paso antes de ponerse a programar es
repetir todo lo anterior. Diseñar bien una aplicación
es un proceso iterativo, uno va construyendo sobre
lo que va aprendiendo.
Revisen la lista de features nuevamente. ¿Quizás
puedan sacar alguna más?
Mejoren sus dibujos y prototipos. Revísenlos de un día
para otro, porque con la mente fresca verán cosas
que se les habrán pasado por encima cuando los
hicieron.
Realicen regularmente pruebas de usabilidad. Steve
Krug, otro experto en usabilidad, recomienda
hacerlas como mínimo una vez al mes con 3
personas.
Sólo de esta forma podrán mejorar sus interfaces,
hacerlas realmente fáciles de usar, dejar a sus
clientes contentos, y aumentar significativamente las
probabilidades de éxito de sus aplicaciones.

while(true) {
chooseFeatures();
drawMockups();
prototype();
testWithPeople();
}

develop();

En resumen, elijan bien las features, dibujen sus
interfaces, hagan prototipos, y realicen pruebas de
usabilidad. Y repitan esto hasta que estén
satisfechos con el producto.
Recién ahí deberían empezar a programar.

tips
&
tricks
Ahora, ese proceso por sí solo no nos indica nada
sobre cómo diseñar las interfaces.
Así que aquí hay una lista muy rápida de algunos trips
que les servirán para hacer aplicaciones más
usables.

menos es
MAS
Esto es como lo que les dije sobre las features, y es
un problema que tendemos a sufrir, nos encanta
agregar cosas.
Pero mientras menos cosas haya en la pantalla, mejor
será la experiencia del usuario.
Tomen por ejemplo este servicio de listas de mails...

Que está lleno de cosas por todos lados. Está
relativamente claro dónde hacer click, pero al tiro me
distraen con más información, tengo que procesar
mucho, no sé qué es importante y qué no.
Esto se llama “carga cognitiva”.
Y compárenlo con éste...

El mensaje se entiende de inmediato.
De inmediato sé dónde hacer click si quiero empezar a
usarlo, y es difícil distraerme con otras cosas.

diseña para la
MAYORIA
y no para el caso borde

Otra cosa que tendemos a hacer es pensar siempre
en el caso borde.
Nos hacemos preguntas como
¿Qué pasará cuando el usuario agrega mil productos
al carrito?
¿Qué pasará cuando tenga un millón de amigos en
Facebook?
Y empezamos a cambiar la interfaz para esos casos,
agregando acordeones o popups.
No lo hagan. La mayoría de los usuarios tendrá 5
productos en el carro, tendrá unos 400 amigos en
Facebook, así que diseñen su interfaz para que la
mayoría esté contento.
Luego, diseñen una solución alternativa para los casos
borde.
La idea es no abrumar al caso común con
workarounds que sólo le sirven al caso borde.

AYUDA
al usuario nuevo

No hay nada peor que inscribirse a un sitio por primera
vez y no tener idea qué hacer.
Puede hasta ser deprimente.
Imagínense incribirse a Facebook y que lo primero que
uno vea sea esto:

Entonces ¿qué hacen en Facebook?
Te ayudan a encontrar tus amigos: ingresas los datos
de tu email y al tiro te aparecerán sugerencias.
Tambén puedes ahí mismo cambiar tu foto de perfil, o
buscar a tus amigos por su nombre.

GUÍA
al usuario

Asimismo, puedes guiar a todos los usuarios, no sólo
a los nuevos.
No hagas al usuario leer manuales, sino que usa
pequeñas ayudas visuales que le digan al usuario
“hey, tienes que hacer click aquí!”

Por ejemplo, cuando Facebook quiere que hagas click
en alguno de los botones de arriba, le ponen un
numerito en rojo.
Capta tu atención y al hacerle click sabes de inmediato
el por qué.

reduce la
FRICCION

La fricción son todas esas cosas que nos estorban
cuando estamos tratando de hacer algo, que nos
hacen pensar dos veces o cometer errores.
Lo más típico son los mensajes de error o de aviso.
Por ejemplo, en Hotmail CADA vez que uno manda un
mail aparece esta pantalla...

Gracias, sí sé que se mandó mi email, acabo de hacer
click en “Enviar”.
Y me obliga a hacer otro click más para volver a la
bandeja de entrada.
O si quiero agregar el destinatario del mensaje a mi
lista de contactos, de nuevo tengo que hacer click.

En cambio, en Gmail, apenas mando un email me
devuelven a la bandeja de entrada y el mensaje de
confirmación aparece ahí mismo.
Además, en Gmail por el sólo hecho de enviarle un
email a alguien ya se agrega a la lista de contactos.
Me ahorré 2 clicks, y la interacción es mucho más
fluida.

elige sabiamente tus
PALABRAS

Elijan con mucho cuidado las palabras que usen en
sus interfaces.
Ellas deben transmitir claramente el mensaje que
ustedes quieren, no pueden ser ambiguas.
Por ejemplo, si al final de un proceso de compra, sale
un botón que dice:

¿Qué quiere decir?
¿Voy a anular la compra?
¿O voy a pagarla?
Este tipo de ambigüedades también genera fricción, y
hay que hacer lo posible por eliminarlas.

¿Quieres saber más?
● Robert Hoekman Jr., Designing The Obvious
● Steve Krug, Don't Make Me Think & Rocket Surgery Made Easy
● Top 25 Books for Designers And Developers
http://www.netmagazine.com/features/top-25-books-web-
designers-and-developers
● Jakob Nielsen's Website
http://www.useit.com
● Software Persuasivo
http://www.slideshare.net/davidboronat/multiplicawebprended
orsoftwarepersuasivo
● Lean Usability
http://www.slideshare.net/glusman/lean-usability

Q
&A
Entonces, ¿tienen alguna pregunta?

hernán schmidt
@lagartoflojo

Muchas gracias.

Usabilidad en el desarrollo de software

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (8)

Similar a Usabilidad en el desarrollo de software

Similar a Usabilidad en el desarrollo de software (20)

Usabilidad en el desarrollo de software