Introducción a la Usabilidad

usabilidadherná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.

avisode utilidadpú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.

la facilidad con que las

personas pueden utilizar un

software con el fin de alcanzar un

objetivo concreto

u·sa·bi·li·dad:u·sa·bi·li·dad:

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...

facilidadaprendiza

je

eficiencia

memorableerroressatisfacció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

personasustedes no son

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.

alcanzarun

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.

usabilidad?

¿por qué

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 CAPACIDADDE 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.

fácil de usar?¿

cómo hagouna aplicación que sea

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 lasfeatures

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...

1features

usabilidad ≈

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...


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


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

así:

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

Features

¿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.Hazmockups

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 Mockupshttp://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.Hazprototipos

Cuando ya tengan unos mockups listos, pueden hacer prototipos.

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 deusabilidad

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

preparala lista detareas

Paso 1

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

buscavíctimas

participantes

Paso 2

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

pregunta:¿qué crees que es esto?

Paso 3

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

pide que completen cada tarea

Paso 4

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

da las gracias

Paso 5

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.

&tipstricks

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.

MASmenos es

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.

MAYORIAdiseña para la

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.

AYUDAal 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:

Triste, no?

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ÍAal 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é.

FRICCIONreduce la

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.

PALABRASelige sabiamente tus

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 Developershttp://www.netmagazine.com/features/top-25-books-web-designers-and-developers

● Jakob Nielsen's Websitehttp://www.useit.com

● Software Persuasivohttp://www.slideshare.net/davidboronat/multiplicawebprendedorsoftwarepersuasivo

● Lean Usabilityhttp://www.slideshare.net/glusman/lean-usability

&QA

Entonces, ¿tienen alguna pregunta?

hernán schmidthernán schmidt @lagartoflojo@lagartoflojo

Muchas gracias.

Introducción a la Usabilidad

Documents

Transcript of Introducción a la Usabilidad