Upgrade to Pro — share decks privately, control downloads, hide ads and more …

No me hagas pensar

No me hagas pensar

Una presentación sobre usabilidad

Francisco Sevillano

October 17, 2012
Tweet

Other Decks in Design

Transcript

  1. @frsevillano Me llamo Francisco Sevillano, frsevillano en twitter. Soy programador.

    Los dos y pico últimos años he estado programando para iPhone y iPad. También, en el último año y medio o así he tenido la oportunidad de diseñar las interfaces de algunas de las aplicaciones en las que he trabajado. Es así como me empecé a interesar por la usabilidad y la experiencia de usuario. Durante todo este año he estado leyendo unos cuantos libros, artículos y blogs con el objetivo de dar esta presentación. He leído un montón de reglas, consejos y recomendaciones en todos ellos, pero creo que hay un principio que los puede resumir a todos ellos:
  2. me hagas Pensar No No me hagas pensar ¿Por qué?

    Por que cuando una persona utiliza una aplicación, no quiere pensar en nada que no sea terminar de ejecutar la tarea que está realizando. No soy tan bueno como para habérseme ocurrido este principio a mí. Lo he sacado del libro “Don’t make me think”, de Steve Krug.
  3. Este libro es probablemente el mejor libro que he leído

    sobre usabilidad. Sí alguien solo quiere leerse un libro sobre este tema, recomiendo encarecidamente que sea éste.
  4. “No me interrumpas” Como hemos dicho antes, una persona que

    está ejecutando una tarea no desea ser interrumpida. Cada vez que se muestra un mensaje de error, no se encuentra el botón deseado o no se comprende el contenido, la atención pasa de estar en la tarea que estaba realizando a la herramienta que está usando, perdiendo así el estado de productividad en el que nos encontrábamos. Por ello hemos de ayudar a la gente que usa nuestra aplicación a permanecer centrados en la tarea que están realizando, y no hacerles pensar. Para ello, he seleccionado cuatro puntos que nos ayudarán a conseguirlo:
  5. Promover el Aprendizaje Promover el aprendizaje, ya que es una

    herramienta muy potente que todas las personas tenemos.
  6. Promover el Aprendizaje Apoyar la Ejecución “Apoyar la ejecución”, ya

    que todas las personas ejecutamos las acciones siguiendo un patrón determinado. Conocerlo y comprenderlo hará nuestas aplicaciones más fáciles de usar.
  7. Promover el Aprendizaje Apoyar la Ejecución Comprender la Memoria Ya

    que nuestra memoria es una castaña, es necesario comprender sus limitaciones y ayudarla en todo lo posible.
  8. Promover el Aprendizaje Apoyar la Ejecución Comprender la Memoria Guiar

    al Ojo “Guiar al ojo” ya que el sentido de la vista es el que principalmente utilizamos y debemos darle las pistas adecuadas para que nos comprenda.
  9. Pasado Presente Aprendizaje El aprendizaje es la herramienta que traemos

    de serie que nos permite reutilizar el conocimiento de nuestras experiencias pasadas en las situaciones a las que nos enfrentamos en el presente. Por lo tanto es algo que debemos explotar al máximo si queremos que la gente use nuestra aplicación de una forma eficiente. ¿Cómo facilitamos el aprendizaje?
  10. Modelo Conceptual El modelo conceptual explica la función del sistema

    y los conceptos que la gente tiene que conocer para poder usarlo. Es decir, en el correo electrónico los términos “enviar”, “archivar”, “spam”, y “copia oculta” forman parte del modelo conceptual del mismo.
  11. Modelo de Implementación El modelo que solemos tener los desarrolladores

    en la cabeza es el de implementación, que representa cómo está implementado un sistema. Contendrá todas sus clases, esquema de bases de datos, etc. Este modelo es excesivamente complejo y no hay dios que lo entienda.
  12. Modelo refinado Por lo que hay que transformarlo en uno

    que represente solo los conceptos estrictamente necesarios para manejarse dentro del sistema. La idea aquí es extraer toda la complejidad posible.
  13. Igual que no necesitamos saber cómo funciona el motor de

    un coche por dentro para poder conducirlo,
  14. tampoco necesitamos conocer como está implementado un servidor de correo

    electrónico para poder usarlo. Solamente necesitamos los conceptos estrictamente necesarios.
  15. Consistencia = Menos esfuerzo Consistencia significa similaridad, coherencia, menos esfuerzo.

    Significa que el conocimiento que ya teníamos previamente va a poder ser aplicado en cierta medida a la nueva experiencia. Tenemos dos tipos.
  16. Interna Consistencia Interna Para que las personas sean capaces de

    adaptarse fácilmente a nuestra aplicación y puedan predecir dónde va a estar el contenido y los controles que están buscando, es necesario la apariencia, navegación y manera de operar sean similares a lo largo y ancho de nuestra aplicación.
  17. En este ejemplo de una página web, aunque quizá no

    se aprecien bien todos los detalles, vemos que contienen un montón de tipos diferentes de menús y de estructuras de contenidos. Esto hace que la persona que vaya a usar esto va a tener que aprender como utilizar cada parte del sitio web. No puede reutilizar el conocimiento que tiene del uso de una parte de la aplicación al resto, ya que son muy diferentes unas de otras.
  18. En cambio en esta otra vemos como sus partes siguen

    una estructura bastante parecida, con una apariencia similar. Esto hace que sea más fácil de aprender a usar, ya que lo que todo lo que hacemos en la aplicación se hace de una forma parecida a otra cosa que ya hemos hecho anteriormente.
  19. Lenguaje Además de apariencia, navegación y funcionalidad consistentes, otro punto

    importante donde es necesario ser consistentes es en el lenguaje, Es importante que utilicemos siempre las mismas palabras para referirnos a las mismas cosas, tanto si son acciones como si son objetos. Esto es conveniente ya que de otra forma la gente tendrá que pararse y pensar si "Adquirir" significa lo mismo que "Comprar" o si "Volver" es equivalente a "Cerrar".
  20. Consistencia Externa Además de utilizar formas y métodos similares en

    toda nuestra aplicación, debemos hacer que estos sean lo más familiares posibles a la gente que se enfrenta a nuestra aplicación. En vez de reinventar la rueda en cada pantalla o interacción, lo ideal es que nos ajustemos a estándares y patrones de diseño ya establecidos.
  21. Prácticamente todas las plataformas tienen unos estándares establecidos, es muy

    importante que intentemos seguirlos para que nuestra aplicación funcione de la forma que esperamos. Cada paso que demos en favor de la consistencia será un paso menos que tendrá que dar la persona para entender cómo funciona.
  22. La web es uno de los ejemplos más claros de

    uso de la consistencia externa. Hay un montón de patrones que se han convertido prácticamente en estándares como el logo arriba a la izquierda y que nos lleva a la página de inicio,
  23. o la utilización de un pie de página para dar

    acceso a partes de la página que no se encuentran en la navegación normal, y muchos otros.
  24. Riesgo bajo No quiero parecer estúpido No quiero tener miedo

    porque { Todo el mundo comete errores, y cuando cometemos un error, nos sentimos estúpidos. Si es un error que nos lleve tiempo subsanar probablemente nos sintamos frustrados. Una persona que tiene miedo de cometer errores que tendrá mucha más dificultad para aprender.
  25. No queremos que la gente tenga miedo a explorar nuestra

    aplicación. Queremos que se sientan cómodos cometiendo errores, sabiendo que será fácil recuperarse después de ellos. Aunque en la vida no existe un botón de deshacer, debería existir en todas y cada una de nuestras aplicaciones.
  26. Ejecución Apoyar la La siguiente forma de no hacer pensar

    a la gente que usa nuestras aplicaciones es apoyando la ejecución de acciones
  27. Formar Objetivo Ejecutar Acción Evaluar Resultado Cuando las personas desean

    realizar una acción, siempre siguen la misma secuencia: primero establecen un objetivo, se realiza la acción en cuestión y posteriormente se evalúa el efecto de la misma. Este patrón se repite en cada acción que realizamos y es importante que nuestras aplicaciones den soporte a esta forma de funcionar de nuestro cerebro.
  28. Intenciones de la persona Opciones disponibles Golfo de ejecución El

    golfo de ejecución es la diferencia que hay entre las intenciones de una persona a la hora de realizar una acción y de las acciones que se pueden realizar
  29. Estado del sistema Interpretación de la persona Golfo de evaluación

    El golfo de evaluación es el esfuerzo que debe poner una persona para interpretar el estado físico del sistema y determinar si sus intenciones se han cumplido o no.
  30. Visibilidad Qué puedo hacer Qué esta pasando para saber {

    ¿Cómo acercamos estos golfos? La forma más importante es hacer todo lo más visible posible. Tanto las opciones que hay disponibles en cada punto de la interacción como los resultados de cada acción. Así el usuario tiene claro en cada momento qué es lo que puede hacer y recibe una información clara de cuál ha sido el resultado de las acciones que ha realizado. Poder discernir claramente cuáles son las opciones disponibles en cada momento y los resultados de cada una de mis acciones.
  31. Funciones Controles 1 1 : Cada vez que el número

    de funciones excede al número de controles, esas funciones son difíciles de recordar. Por eso es importante, siempre que se pueda, minimizar el número de funciones con respecto a controles, y que esta relación tienda a ser 1:1.
  32. Correspondencias naturales Además de estar visibles, es importante tener en

    cuenta la relación que tienen estos controles con los movimientos que pueden realizar y sus efectos sobre el sistema. La manipulación de cada control debería seguir una correspondencia natural con el efecto que tendrá.
  33. Correspondencia Natural Es importante que los controles guarden una relación

    natural entre su situación, el movimiento que realizan y el efecto que van a tener sobre el mundo. Al igual que es el importante que los resultados de una acción guarden una correspondencia natural con el objeto que representan. Todo esto contribuye a que comprendamos mejor qué acciones se pueden hacer sobre qué objetos y qué resultados tuvieron nuestras acciones.
  34. Feedback Una vez hemos realizado una acción necesitamos recibir feedback.

    El feedback es la información que recibimos como reacción a nuestras acciones. Los principios de visibilidad y correspondencias naturales también aplican al feedback. Es decir, es importante que haya información visible que nos indique que la acción se ha realizado, y que esta guarde una correspondencia natural con la acción misma.
  35. Feedback RÁPIDO! Pero además de todo esto, el feedback tiene

    que ser rápido, muy rápido. Una persona espera el mismo nivel de feedback que obtendría en una conversación con otro ser humano, y cualquier cosa más lenta será demasiado lenta.
  36. <0.1 s Confirmar acción Seguir a la mano/puntero Máximo intervalo

    entre frames Si la respuesta a una acción tarda más de 0.1 segundos, la percepción de causa y efecto se habrá roto: la reacción del software no parecerá resultado de la acción del usuario. Por tanto hay que mostrar algún tipo de feedback antes de este tiempo. Si un botón no aparece pulsado antes de este tiempo es probable que vuelva a ser pulsado de nuevo. Si un objeto está siendo arrastrado y tiene un retraso de más de 0.1s por detrás de los movimientos del usuario, éste tendrá problemas problemas para ponerlo en el lugar que desea. También es el tiempo máximo que tenemos para mostrar dos frames de vídeo antes de que el cerebro se de cuenta.
  37. 1 s Completar acción Mostrar tiempo restante Prepararse para la

    interacción Otro intervalo importante es el segundo. Es la pausa máxima que se espera en una conversación con otra persona, y cuando se trata de un sistema interactivo, no es menos. Si cualquier tipo de interacción se alarga más de este tiempo, la persona se preguntará que está sucediendo. Por ello, tenemos como mucho un segundo para o bien hacer lo que se les ha pedido, o bien indicar cuánto van a tardar en realizarlo. Un segundo también es un intervalo importante porque es el mínimo que tarda una persona en responder intencionadamente a un evento inesperado. Por tanto tenemos un segundo para prepararnos para la interacción del usuario. Durante este segundo podríamos mostrar algún tipo de contenido estático que se asemeje a la vista que vamos a mostrar realmente, mientras se muestra el contenido dinámico. De esta forma nuestras aplicaciones parecerían mas rápidas.
  38. Manejo de errores Prevenir Detectar Perdonar Ayudar Un tipo muy

    común de feedback es el que damos cuando se produce un error. Cuando una persona comete un error se culpa a sí misma de ello, si ese error sucede de forma muy continuada probablemente piense que no es capaz de acometer esa tarea y se sienta frustrada. Nosotros no queremos que las personas se sientan estúpidas o frustradas, queremos que usando nuestra aplicación las personas se sientan inteligentes, poderosas, capaces de realizar cualquier tarea. Para manejar los errores de forma inteligente hay cuatro cosas que debemos hacer: prevenir para que nunca sucedan, detectar los errores una vez se produzcan, perdonar al usuario si ha cometido alguno y ayudarle a recuperarse del mismo.
  39. Prevenir Funciones obligatorias Una de las mejores formas de prevenir

    los errores es el interbloqueo de funciones o funciones obligatorias: permitir la ejecución de una función solo si se dan todas las condiciones necesarias. Por ejemplo: un microondas solo se puede poner en funcionamiento si la puerta está cerrada, y se parará automáticamente si la puerta se abre.
  40. Prevenir Funciones obligatorias De la misma forma un cajero automático

    solo te dará el dinero si has retirado previamente la tarjeta, evitando así que la olvides.
  41. Funciones obligatorias Prevenir Mirando ejemplos de aplicaciones podemos encontrar ejemplos

    como el de XCode que desactiva el botón de "parar ejecución" cuando no hay nada ejecutándose
  42. Funciones obligatorias Prevenir o en OpenOffice que un montón de

    elementos del menú están deshabitados si acabamos de comenzar a editar un documento.
  43. Valores por defecto Prevenir Otra forma importante de evitar errores

    es utilizando valores por defecto. Así impedimos que aparezca un error cuando el usuario se olvida de introducir alguno de los datos. Es importante elegir como valores por defecto los que más vayan a ser usados. Aquí vemos un ejemplo de Amazon, cuando vamos a adquirir un artículo, ya nos aparece seleccionada la cantidad como 1.
  44. Valores por defecto Prevenir Otro gran ejemplo es el de

    este sitio web de reservas de viajes en el que solo tenemos que introducir viaje de origen y destino, y todo lo demás ya está lleno por defecto.
  45. Limitar la entrada Prevenir La tercera forma en la que

    podemos evitar los errores es limitando la entrada de datos para que no se introduzcan valores que puedan causar error. Para ello utilizaremos controles que solo permitan la introducción de los datos en un rango y formato permitidos. Un buen ejemplo de esto es el UIPickerView de iOS que nos restringir los valores posibles a un conjunto dado evitando así que nadie pueda meter fechas incorrectas.
  46. Prevenir Limitar la entrada No sucede lo mismo en el

    sistema de citas de la seguridad social de Madrid, en el que fácilmente podemos introducir meses como día 12 del mes 24 de 1579, con lo que obtenemos un dichoso mensaje de error.
  47. Perdonar Deshacer acciones Como ya hemos visto, es importante que

    la gente no tenga miedo a usar y explorar nuestra aplicación. Sin miedo aprenderán más rápido y serán productivos con ella en menos tiempo. Para ello es necesario que los errores que cometan no tengan consecuencias demasiado serias. No queremos castigar al usuario cada vez que comete un error. Para ello es necesario crear aplicaciones en las que los errores no conlleven serias consecuencias. Por ejemplo. Cada vez que eliminamos un mensaje de GMail nos aparece el mensaje preguntándonos si deseamos deshacer la acción. No solo no hemos perdido nuestro email para siempre, sino que además podemos recuperarlo inmediatamente sin tener que ir a la papelera a buscarlo.
  48. Ayudar Proporcionar opciones Cuando una persona comete un error, con

    toda seguridad agradecerá cualquier tipo de ayuda que se le preste para continuar con la tarea que estaban intentando realizar. Por eso es muy importante incluir mensajes o acciones de ayuda que el usuario pueda realizar cuando ha cometido un error. Por ejemplo en Google Maps, si alguien busca un lugar y no se puede encontrar, se muestra un mensaje de ayuda que indica qué ha ido mal y cómo se podría solucionar. Además, incluye la opción de añadir ese lugar al mapa con lo que la próxima vez que esa misma persona u otra lo busque podrán encontrarlo.
  49. Memoria Comprender la La memoria es otro de los principales

    mecanismos con los que cuentan las personas para manejarse por el mundo. Por ello es fundamental que a la hora de construir sistemas interactivos entendamos cómo funciona para así ayudarla y aumentarla en vez de fastidiarla y confundirla.
  50. Corto plazo Largo plazo Jan 31 Disponemos de básicamente dos

    tipos de memoria, la memoria a corto plazo y la memoria a largo plazo. La memoria a corto plazo se utiliza en situaciones en las que la información es retenida en breves períodos de tiempo. Normalmente en un rango que va desde fracciones de segundo hasta un minuto como mucho. La memoria a largo plazo se utiliza para retener la información durante períodos más largos de tiempo: minutos, horas, días, años e incluso toda una vida.
  51. 3 - 5 elementos no relacionados Corto Plazo Las dos

    características principales de la memoria a corto plazo es su pequeña capacidad y su alta volatilidad. Su capacidad ronda los 4 elementos, más o menos uno. Esto es de 3 a 5 elementos simultáneos. Es muy fácil perder información que tenemos en esta memoria. A todos nos ha pasado alguna vez que vamos a la cocina a por algo y cuando llegamos allí no nos acordamos de qué era. O que estamos hablando de algún tema, nos interrumpen y después no conseguimos recordar qué era.
  52. Dónde estoy ? La principal implicación en el diseño de

    interfaces es que éstas deberían ayudar al usuario a recordar elementos de un momento al siguiente. Al igual que en la vida real olvidamos qué es lo que estábamos buscando cuando nos distraemos en Internet nos pasa lo mismo. Por eso es necesario que nos recuerden qué es lo que intentábamos encontrar.
  53. En cambio Pixmania si no encuentra ningún artículo relacionado con

    tu búsqueda no te dice siquiera qué estabas buscando.
  54. Modos Otro mal muy grande para la memoria a corto

    plazo son los modos. Cada vez que el número de funciones excede al número de controles, es difícil de recordar en qué modo estamos en cada momento y qué efecto tendrán las acciones que realizamos.
  55. “Perdón, era un vídeo” Un claro ejemplo de esto son

    las cámaras digitales ¿Cuántas veces habéis ido a hacer una foto, habéis pulsado el botón de disparar, y al mirar la cámara os habéis dado cuenta de que en realidad estabais grabando un vídeo? A mí me pasa continuamente. Al perro este, aparentemente, también.
  56. Largo Plazo Propensa al error Alterable El otro tipo de

    memoria que tenemos es la memoria a largo plazo. Lo que más la caracteriza es que es muy propensa al error y que sus recuerdos pueden ser alterados de forma posterior. Ya que nuestra memoria es tan mala, debemos hacer que los usuarios que usan nuestras aplicaciones tengan que recordar el mínimo número de cosas posibles, ya que lo más probable es que les sea bastante difícil hacerlo con exactitud. Un caso muy claro donde la muchas aplicaciones fallan, es en la parte de login o entrada al sistema. Cada sitio que usamos básicamente nos hace introducir una contraseña, y algunas de ellas incluso nos obligan a introducirla con un formato especial o son directamente ellas las que nos dan la contraseña. Es muy difícil tener que recordar la contraseña que le dimos a ese determinado sitio como para recordar encima el formato que le tenemos que dar.
  57. Nuestra habilidad para reconocer cosas que ya hemos experimentado es

    muy superior a nuestra habilidad para recordarlas. El reconocimiento es mucho más fácil ya que tenemos pistas que nos ayudan a buscar en nuestra memoria y encontrar la información relevante. Un ejemplo muy claro es el de la diferencia entre las interfaces de línea de comandos y las interfaces gráficas. Los primeros sistemas operativos tenían la línea de comandos como principal interfaz. Éstas requieren la memorización de decenas de comandos para su uso, lo cual los hacían muy difíciles de aprender y usar. Con la aparición de las primeras interfaces gráficas se eliminó esta necesidad de memorizar los comandos, poniéndolos en menús. Esta innovación se aprovechó de la capacidad de las personas para reconocer en vez de recordar, simplificando dramáticamente la usabilidad de los ordenadores.
  58. OjO Guiar al El sentido de la vista en el

    que más dependemos cuando usamos sistemas interactivos. Es importante conocer un poco cómo funciona para hacerle la vida más fácil, y saber cómo guiarle a través de la interfaz.
  59. La jerarquía visual comunica qué es IMPORTANTE La principal herramienta

    para guiar el ojo es la utilización de la jerarquía visual. Ésta nos permite organizar el contenido de forma que se reconoce la importancia relativa de cada uno de los elementos de una forma rápida. Gracias a la jerarquía visual hacemos que la información sea más fácil de extraer, que las acciones que el usuario puede tomar el usuario y el resultado de sus acciones, así como de los mensajes de error sean más visibles. Ahora bien, a la hora de crear una jerarquía visual, hemos de proporcionar importancia a unos elementos, y quitársela a otros. ¿Cómo conseguimos que unos elementos destaquen sobre otros?
  60. Tamaño Inconscientemente damos más importancia a las cosas que tienen

    un tamaño más grande, y menos importancia a las que tienen un tamaño más pequeño. Sino os lo creéis, preguntadle a las mujeres.
  61. Color La segunda gran manera de resaltar unos elementos sobre

    otros es utilizar el color. Utilizando un color diferente en algunos elementos podemos dotarles de importancia y hacer que resalten sobre los demás.
  62. Es importante no intentar dar importancia a demasiados elementos en

    la misma vista, o será difícil distinguir cuál es el importante. Como pasa en esta web que estamos viendo. También hay que tener en cuenta que el contraste ha de hacer al elemento lo suficientemente diferente con el resto como para que parezca que ha sido hecho así a propósito.
  63. Una forma fácil de evaluar la jerarquía visual de una

    vista es entrecerrar los ojos. Así podemos ver asegurar si la disposición de los elementos crea una una jerarquía visual lo suficientemente fuerte. Bueno si eres miope como yo con quitarse las gafas vale.