Gracias por venir hoy. El profesor 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.
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. En esta presentación les voy a contar un poco de lo que he aprendido durante estos últimos meses.
con el fin de alcanzar un objetivo concreto u·sa·bi·li·dad: u·sa·bi·li·dad: Entonces qué significa “usabilidad”? (leer) Veamos qué significan cada unas de las palabras marcadas...
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
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.
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, van a cerrar su programa o se irán de su sitio, y buscarán una alternativa.
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). (leer) 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.
que nuestras aplicaciones sean fáciles de usar? Total, la gente puede leer 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...
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.
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.
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...
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.
fuera lo demás. “ ” – robert hoekman jr. Esta es otra cita de Robert Hoekman Jr. (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í:
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...
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 … y luego, reducirla a la mitad nuevamente...
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 Hasta que se queden con algo así. Eliminando las features extras, terminamos con algo así:
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.
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.
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.
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.
nombre de Cacoo. La gracia de Cacoo es que es como un Google Docs para mockups: sus archivos se almacenan online y pueden colaborar al mismo tiempo entre varias personas.
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.
¿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.
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. Y ni siquiera es necesario hacer estas pruebas con un prototipo, se pueden hacer con sus dibujos o con sus mockups impresos. 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:
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.
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.
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.
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.
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.
hagan las pruebas, van a necesitar una serie de cosas. Primero, estarán ustedes, que harán de guía, dirigiendo al participante o usuario a través de las pruebas. Para hacer más fácil la tarea del guía, necesitarán un libreto que se lee al usuario y le da una serie de indicaciones. Este libreto está en el libro Rocket Surgery Made Easy y yo lo traducí al español, si quieren una copia lo podría subir al sitio del curso. Necesitarán además imprimir las tareas que realizará el usuario, y por último un cuaderno para tomar apuntes.
s c r i t o r i o Lo ideal es grabar todas las pruebas de usabilidad. Así las pueden volver a ver y mostrárselas al resto del equipo. Si están probando una aplicación o un sitio móvil, necesitarán una cámara de video, además del dispositivo en que van a probar. Si están probando un sitio web o un software de escritorio, necesitarán algún software de grabación de pantalla. Es importante en cualquier caso grabar no sólo lo que hace el usuario, sino también lo que dice.
hacer pruebas de usabilidad en papel, con los dibujos o con sus mockups impresos. Para esto también necesitarán una cámara, los prototipos, y una persona adicional que actuará de computador, y será quien cambie las pantallas cuando el usuario interactúa con el sistema.
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.
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.
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.
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...
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...
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.
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:
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.
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í!”
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...
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.
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.
que usen en sus interfaces. 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:
mayoría de los ingenieros es que nos cuesta mucha hacer que nuestros sitios se vean bonitos. Si bien la estética no está directamente relacionada a la usabilidad, sí afecta la opinión que se hacen las personas de nuestras aplicaciones.
expertos de usabilidad más respetados y famosos, no se podría categorizar precisamente de “bonito”. Por suerte desde hace poco existen dos frameworks que los ayudarán a hacer que sus sitios se vean bien.
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/multipli cawebprendedorsoftwarepersuasivo Lean Usability http://www.slideshare.net/glusman/lean- usability
hernan
imai448
ymachida
toshi0607
re_taro
pfn
sygyzmundovych
kkamegawa
minako__ph
ryosukeigarashi
maimyyym
eller86
10xinc
eileencodes
tammyeverts
lara
danielanewman
holman
csswizardry
yeseniaperezcruz
erikaheidi
smashingmag
andyhume
jakevdp
