7 Principios de Diseño para un software amigable
•
6 gostaram•9,885 visualizações
Principios de diseño, ideación, usabilidad, interacción, etc. para crear software con una mejor experiencia de usuario. Presentación creada y presentada junto con Alex de Fuenmayor para el BCN Dev Con 2012 de Barcelona.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a 7 Principios de Diseño para un software amigable
Semelhante a 7 Principios de Diseño para un software amigable (20)
Último
Último (20)
7 Principios de Diseño para un software amigable
- 1. 7 PRINCIPIOS DE DISEÑO para un software amigable 1
- 2. 2 http://www.straight.com/article-488581/vancouver/lift-restaurant-launches-ipad-menus-vancouver
- 3. 3 http://javlaskitsystem.se/2012/02/whats-the-waiter-doing-with-the-computer-screen/
- 4. 4
- 5. 5
- 6. El software es difícil de usar 6
- 7. POR CIERTO... Yo soy Javier Gala (@JaviGala) y él es Alex de Fuenmayor (@alexdef) 7
- 8. NUESTRA PROPUESTA • Principios de diseño • Fáciles de aprender e implementar • Mejorar la experiencia de usuario de las personas 8
- 9. IDEACIÓN Diseño es cómo funciona 9
- 10. La mayor parte de la gente comete el error de pensar que el diseño es cómo se ve. La gente piensa que es un barniz, que a los diseñadores les dan una caja y les dicen “¡Haz que quede bonito!”. Esto no es lo que creemos que es el diseño. No es sólo cómo se ve o cómo se siente. El diseño es cómo funciona. - Steve Jobs 10
- 11. 11
- 12. 12
- 13. Actores, contexto y problema 13
- 14. 14
- 15. PERSONAS 15
- 16. 16 http://shownd.com/niti/45399/Storyboarding-and-other-small-UX-projects-aftifacts
- 17. 17 http://emilyl1n.squarespace.com/uiux-design/sea-what-you-know-wip/13938645
- 18. EL DISEÑO ES CÓMO FUNCIONA • Describir el servicio desde la experiencia • Actores, contexto, problema • Contar una historia • No lo cuentes, dibújalo 18
- 19. ARQUITECTURA DE INFORMACIÓN Agrupaciones 19
- 20. 20
- 21. 21
- 22. 22
- 23. 23
- 24. 24
- 25. 25
- 26. 26
- 27. 27
- 28. 28
- 29. 29
- 30. 30
- 31. 31
- 32. AGRUPACIONES • Acercar lo relacionado, alejar lo diferente • Si está relacionado debe ser similar 32
- 33. 33
- 34. DISEÑO DE INTERACCIÓN Transiciones 34
- 35. Economía conductual 35
- 36. 36
- 37. 37
- 39. 39 http://www.webexhibits.org/colorart/ag.html
- 40. 40 http://www.simplifyinginterfaces.com/2010/12/why-evaluate-screens-in-shades-of-grey/
- 41. 41 http://www.simplifyinginterfaces.com/2010/12/why-evaluate-screens-in-shades-of-grey/
- 42. EN RESUMEN... • Cuando estamos concentrados prestamos poca atención al entorno • Nuestra visión periférica es “borrosa” 42
- 43. 43
- 44. 44 http://www.flickr.com/photos/joriel/2360038974/
- 45. 45
- 46. http://vimeo.com/32704624 46
- 47. TRANSICIONES • Hacen perceptibles los cambios • Capturan la atención • Ofrecen un refuerzo físico a la relación 47
- 48. 48
- 49. COHERENCIA VISUAL 49
- 50. 50
- 51. • Concepto • Color • Tipografía • Grid 51
- 52. 52
- 53. COLOR Percepción visual 53
- 54. 54
- 55. 55
- 56. 56
- 57. COMBINACIONES • Acroma • Analoga 57
- 58. • Contrastada • Complementaria 58
- 59. 59
- 60. 60
- 61. 61
- 63. OTRA PISTA 63
- 64. CONTENIDO La Tipografía como elemento básico del lenguaje 64
- 65. ¿QUÉ ES LA TIPOGRAFÍA? 65
- 66. ¿QUÉ ES LA TIPOGRAFÍA? “La Tipografía debe definir el blanco como la arquitectura define el espacio” - Albert Hollenstein 66
- 67. 67
- 68. 68
- 69. 69
- 70. Una misma TIPOGRAFÍA tiene varios usos 70
- 71. “Si todo está en negrita, nada lo está” Art Webb 71
- 72. “Se puede decir ‘Te quiero’ en Helvetica Extra light si quieres ir de fino o con Extra Bold si quieres ser intenso y pasional. Y puede que funcione.” - Massimo Vigneli 72
- 73. Te quiero / Te quiero 73
- 74. GRID Ordenando el mensaje 74
- 75. 75
- 76. 76
- 77. 77
- 78. 78
- 79. 79
- 80. “El diseño es como una madre, nadie se da cuenta cuando está, pero todo el mundo la echa de menos cuando no” - Santiago Borray 80
- 82. MÓVIL Y MAS ALLÁ Diseñando para múltiples dispositivos 82
- 83. 83
- 84. 84
- 85. EL PROBLEMA ¿Donde se usa? ¿Cuantas veces? ¿Cuanto tiempo? 85
- 86. 86
- 87. 87
- 89. Ver a través de los ojos de las personas que usan el servicio 89
- 90. 90
- 91. 91
- 92. ¿CÓMO SE HACE? • Establecer las tareas principales • Pedir a una persona que las lleve a cabo delante nuestro • Nos callamos y hacemos que hable él • ¡Podemos investigar nuestro servicio o los de la competencia! 92
- 93. TESTS AVANZADOS • Preparar un guión y probarlo antes • Usar personas similares a nuestros usuarios reales • Grabar la sesión • Un ayudante tomando apuntes • Evitar las preguntas dirigidas • Revisar la grabación cuanto antes con el equipo 93
- 94. PRIORIZAR • Frecuencia • Gravedad • Esfuerzo 94
- 95. PRUEBAS DE USABILIDAD • Ver a través de los ojos de los usuarios • Una persona usando nuestro servicio (o el de la competencia) delante nuestro • Sencillo, rápido y barato • Priorizar los resultados 95
- 96. 96
- 97. LOS 7 PRINCIPIOS • El diseño es cómo funciona • Agrupaciones • Transiciones • Color y grid • La tipografía como elemento básico del lenguaje • Diseñando para múltiples dispositivos • Pruebas de usuario 97
- 98. 98
- 99. GRACIAS @JaviGala @alexdef 99
Notas do Editor
- 7 Principios de Diseño para un software amigable, de Javier Gala (@JaviGala , http://javiergala.com ) y Alex de Fuenmayor (@alexdef) para el BCN Developers Conference 2012
- Estamos rodeados de una gran cantidad de tecnología que hace tiempo no habríamos podido imaginar... pequeños marcos digitales que son una ventana al mundo, teléfonos móviles con acceso a todo el conocimiento de internet...
- Sin embargo, una gran cantidad de esta tecnología es más difícil de usar que la anterior solución “ analógica ” , y en lugar de disfrutar “ soportamos ” aquella tecnología que prometía hacernos la vida más fácil. Aplicaciones para reservar mesa tan complicadas que al final los camareros terminan añadiendo notas con rotulador directamente sobre la pantalla...
- Ordenadores que tratan de comunicarse con nosotros de una forma incomprensible, sin hablar nuestro idioma... ¿qué quieren decir todas esas siglas? ¡ninguna persona educada nos hablaría así!
- Webs que deberían ser sencillas y que acaban siendo complicadas de utilizar... compartí el enlace de mi charla en twitter y algunos amigos me comentaron que habían tratado de votarme pero no habían podido, porque... ¿donde estaba el botón? (era la “ estrella ” , pero además había que “ logarse ” ; la “ estrella ” se iluminaba al tratar de votar pero el voto no se contabilizaba si no estabas “ logado ” ...)
- En definitiva, vivimos rodeados de un montón de tecnología maravillosa, pero hay que reconocer que esta capa de comportamiento que la recubre, el software, es difícil de usar.
- Alex y yo somos dos diseñadores que llevamos unos cuantos años trabajando en software, y hemos venido con una propuesta: creemos que el diseño del software es mejorable, y venimos con unos pocos principios para ayudar a que vosotros, que construís el software, lo hagáis más amigable.
- Venimos a hablar de “ principios ” , porque son generales y de aplicación amplia. También queríamos que fueran fáciles de aprender e implementar, porque esta charla va dirigida a aquellos que no pueden permitirse tener un diseñador siempre al lado. Y, finalmente, que mejoren la experiencia que las personas normales tienen al utilizar nuestro software.
- Empezaremos hablando de ideación, que es el proceso de gestación, desarrollo y comunicación de ideas... no me gusta mucho la palabra, pero habla de cómo llevamos la idea a un “ concepto expresable y comunicable ” ... cómo modelamos una idea para desarrollar un producto a partir de ella. En la “ ideación ” damos forma a nuestro servicio para comunicarlo, evaluarlo, definirlo... antes de saber cómo implementarlo, hay que saber bien qué queremos hacer.
- La ideación es puro diseño... y es importante empezar desmitificando el diseño, evitar identificar el diseño con el diseño visual... el diseño dice cómo debe funcionar un sistema. No se queda en sólo el aspecto que tiene. Lo más importante es diseñar el comportamiento, y esto lo llevan sabiendo hace tiempo en compañías como Apple.
- ¿Podemos describir el comportamiento de un sistema desde una descripción técnica? Desde luego no como personas. Este sistema está perfectamente descrito, pero... ¿esto funciona bien? ¿lo compraría?... Y sin embargo esta es la forma en la que solemos describir y comunicar nuestro software, con complejos documentos técnicos.
- El diseño es muy complicado de entender así, en estático, en documentos técnicos. El diseño es recibido e integrado por personas en su vida. Para entenderlo, hay que vivirlo, hay que experimentarlo (la figura anterior era un esquema del motor de esta motocicleta).
- Un diseño es experimentado por unas personas (actores), dentro de una serie de circunstancias (el lugar, la hora, la situación), que es lo que llamamos contexto... y finalmente tenemos un problema, que es la situación que queremos mejorar con nuestro servicio, de forma que nuestro cliente perciba un valor por el que está dispuesto a pagar.
- Actores, contexto, problema (o conflicto)... ¡esto es una historia! claro, las historias es la mejor forma que tenemos la gente de comunicarnos, y es simplemente natural que la descripción de servicios sea mediante historias.
- Para la primera parte de nuestra historia, los personajes, podemos usar “ personas ” . Es una técnica UX que consiste en crear usuarios “ de mentira ” (pero es importante basarlos en investigación real) para contar la historia de nuestro servicio y evitar hablar de “ usuarios elásticos ” , genéricos y sin definir.
- Una vez que tengamos los personajes hay que contar la historia, hablando del contexto y el problema... hay que definir “ escenarios ” de uso, un día en la vida del personaje en el que entra en contacto con nuestro servicio. Además de escribirlo podemos ilustrarlo haciendo “ storyboarding ” .
- Tampoco hace falta ser un gran dibujante, lo importante es contar la historia, ponernos en contexto, hablar del conflicto y su superación. Poco a poco iremos “ bajando ” a las pantallas, los componentes, de forma orgánica, cuando vayan siendo necesarios. Así definiremos el servicio desde el punto de vista de los usuarios y la vida real y sus situaciones, y no desde la tecnología.
- En resumen: debemos describir los servicios desde la experiencia, con sus actores, contexto y problema, generando una historia... dejar que las especificaciones fluyan de la historia, no de la tecnología. Y si puedes no lo cuentes, dibújalo.
- Pasemos ahora a la arquitectura de información, y vamos a hablar de una de las formas más sencillas de estructurar el contenido, agrupándolo.
- La Arquitectura de Información cubre el diseño de la información del servicio, tanto desde el punto de vista conceptual/estructural como su visualización. El libro básico de la AI es el famoso libro del “ oso polar ” de Peter Morville y Louis Rosenfeld, publicado por O ’ Reilly.
- Vamos a centrarnos en la disposición de elementos en pantalla. La posición de los elementos puede decir mucho sobre la relación que existe entre ellos, y una de las formas más sencillas de expresarlo es la agrupación.
- Para hablar de agrupación hay que empezar hablando de la Gestalt, la escuela alemana de la forma. Su máxima es que el “ todo ” es más que la suma de sus partes, y la “ forma ” es el producto del acto perceptivo. Nuestra percepción no es simple y objetiva, sino que construye sentido a partir de lo que percibimos.
- Vamos con un ejemplo... la imagen de la izquierda, un cubo de Necker, en realidad es una serie de líneas que describen rectángulos, triángulos y otros polígonos... pero sin embargo lo interpretamos como un cubo... bueno, en realidad como dos posibles cubos, se trata de una percepción biestable. Al final la percepción es una construcción, como podemos ver con el objeto físico imposible de su derecha. A partir de una serie de figuras geométricas construimos un cubo, aunque sea imposible en realidad.
- La Gestalt enuncia una serie de leyes fundamentales de la percepción. Una de ellas es la proximidad, por la cual tendemos a considerar relacionados los objetos cercanos. Objetivamente lo que vemos es una cierta cantidad de estrellas.
- Sin embargo nuestra percepción se encarga de agrupar en filas, columnas, y grupos de estas según su proximidad.
- Otra de las leyes fundamentales es la similitud... estos objetos están ahora equiespaciados, pero sin embargo consideramos que una de las filas es diferente a los demás, ya que sus componentes son similares entre sí y distintos al resto. Al percibir esa diferencia, entendemos que tendrán unas características diferentes al resto.
- ¿Donde podemos ver un ejemplo de estas leyes en el software? Sin ir más lejos en los formularios... en este ejemplo la distancia entre etiquetas y campos y similitud entre los mismos dificulta la comprensión del formulario.
- De hecho, si nos fijamos en la parte superior vemos que tras el nombre de nuestra empresa se pide una dirección. ¿Es la nuestra personal o la de la empresa? La proximidad nos está jugando una mala pasada, es fácil equivocarse e introducir la dirección de nuestra empresa (estudiando los campos considerados obligatorios veremos que es la personal).
- Si ordenamos, agrupamos campos similares, separamos los relacionados, y utilizamos el aspecto de los mismos para indicar los que esperan una información similar tenemos un formulario que parece un “ wizard ” , con grupos de datos bien definidos y más sencillos de interpretar.
- Aparece una idea de orden, relación entre información... se añade más información para interpretar el formulario utilizando los mismos elementos visuales.
- Utilizando correctamente la agrupación y la similitud podemos obtener estructuras con los mínimos elementos visuales y que comuniquen información de manera armónica y elegante, como en el elegante ejemplo de la aplicación del tiempo para iOS.
- En resumen, podemos indicar lo relacionado y lo diferente con la forma de mostrarlo, acercando los objetos relacionados, separando los diferentes; y usando un aspecto similar para elementos relacionados.
- Si queremos saber más sobre la Gestalt y la disposición de elementos en pantalla partiendo de principios psicológicos recomiendo el “ Designing with the mind in mind ” de Jeff Johnson, de donde he sacado buena parte de los ejemplos de esta sección.
- Ahora hablaremos del diseño de interacción, que estudia la forma en la que los usuarios interaccionan con la información dispuesta en pantalla (colocada siguiendo los consejos de la Arquitectura de Información), y aquí vamos a hablar de las transiciones.
- Pero antes de hablar de las transiciones en sí, un poco de teoría... empecemos hablando de economía conductual, una traducción del más elegante behavioral economics o “ economía del comportamiento ” . Es una ciencia experimental que estudia el por qué de la desviación entre nuestras decisiones económicas reales y las que predice la teoría económica clásica.
- Como por ejemplo por qué compramos un billete de lotería o contratamos un seguro, que son situaciones irracionales desde un punto de vista clásico de curvas de oferta y demanda, y valor percibido y costes. A veces tenemos comportamientos que parecen irracionales.
- Una de las cosas interesantes que nos dice la economía conductual es que el cerebro es un órgano de alto consumo, y tendemos a trabajar en modo de “ bajo consumo ” siempre que podemos, dedicando sólo el esfuerzo mínimo necesario a las tareas.
- Una de nuestras optimizaciones es la capacidad de concentración. Cuando realizamos una tarea nos centramos tanto en ella que podemos dejar de prestar atención al entorno, produciéndose la “ ceguera al cambio ” , como vemos en este experimento. Aproximadamente la mitad de las personas sufren de ceguera al cambio.
- Cambiemos de tercio. Ahora hablemos de otra característica, esta vez física. Nuestra retina tiene dos tipos de receptores, los conos y los bastones. Los “ conos ” son los que perciben mejor los detalles y el color, y se concentran mucho en una pequeña parte de la retina, la “ fovea ” , estando más dispersos en otras partes.
- El resultado es que nosotros pensamos que nuestros usuarios ven la pantalla perfectamente definida en todo su esplendor en todo momento.
- Lo que se ve en realidad es algo como esto... la percepción es más borrosa según nos alejamos del punto de atención. No nos damos cuenta por las “ saccades ” , los movimientos rápidos de nuestra vista, que cambian el foco a toda velocidad.
- En resumen, cuando llevamos a cabo una tarea enfocamos mucho nuestra atención, lo que se refuerza con nuestra borrosa atención periférica... ¿donde nos puede afectar esto?
- Por ejemplo cuando estamos en Internet tratando de llevar a cabo alguna tarea compleja... es habitual que las notificaciones o mensajes importantes pasen desapercibidos, ya que pueden aparecer lejos de nuestra zona de atención. Necesitamos alguna forma de ayudar a que nuestros usuarios distingan lo importante dentro de la información que ofrecen las webs.
- Encontrar el elemento diferente dentro de una estructura que ofrece tanta información puede ser como encontrar una aguja en un pajar. ¿Qué podríamos hacer para llamar la atención? Usar transiciones, como el cambio gradual de color. Nuestra visión periférica es muy buena detectando estos elementos que cambian de estado poco a poco.
- ¿Hay alguna otra forma de fijar la atención? Sí, el movimiento. Nuestra visión periférica está también muy adaptada a detectarlo... ya que al final se trata de una adaptación evolutiva. En el mundo físico las cosas no aparecen de repente, y detectar cómo se acerca un depredador que trata de sorprendernos puede ser vital, por eso el movimiento nos llama tanto la atención.
- ¿Sirve para alguna otra cosa la transición? Permite utilizar una metáfora física que nos ayude a relacionar elementos, que la interacción nos resulte más natural... una de las grandes sorpresas de la interfaz del primer iOS era esa sensación de “ fisicidad ” que transmitía.
- Como resumen, las transiciones nos permiten fijar rápidamente la atención del usuario y ofrecer un refuerzo físico de relación entre conceptos.
- Si queremos aprender algo más sobre las ilusiones cognitivas recomiendo el “ The invisible gorilla ” , con muchos ejemplos interesantes. Si queremos una explicación más completa de la economía conductual encuentro el “ Thinking fast and slow ” del premio nobel Daniel Kahneman imprescindible.
- Vamos a empezar a hablar ahora de diseño visual, y el primer punto que vamos a tratar es la coherencia visual. Lo importante va a ser que todos los elementos de un diseño colaboren entre sí hacia una idea principal.
- Al hablar de diseño visual no hablamos de si un diseño nos gusta o no. Hay diseños que “ funcionan ” basados en su coherencia interna, aunque sean imágenes imposibles.
- Hablamos de una serie de elementos que definen esta coherencia visual. Al primero le denominaremos concepto, que serán aquellos elementos que conocemos culturalmente.
- Un ejemplo sería el diseño de un hospital. Aunque no hayamos estado nunca en uno partimos de una serie de expectativas: sabemos que tendrá una cafetería (seguramente en la planta baja), que los empleados visten de blanco o de verde, que se debe mantener la voz baja, que tiene una entrada común y otra de urgencias... hay una serie de convenciones que nos han sido transmitidas y solucionan diversos problemas de interpretación.
- Los colores están asociados a emociones. Tenemos unas “ claves ” del color, adquiridas socialmente, que nos permiten interpretarlo.
- El blanco es el color de la pureza, y normalmente se asocia con acontecimientos agradables (bueno, nunca se sabe) como una boda
- El negro por otra parte representa la sobriedad, la formalidad, y es habitual asociarlo con momentos tristes o serios.
- Los colores se distribuyen en una rueda de color, y nos pueden evocar sentimientos de frío, calor, tristeza, energía... hay quien dice que se viste de amarillo para alegrarse el día.
- No siempre es sencillo combinar colores. Hay colores que van a ir bien juntos, en una buena “ combinación ” . Algunas son sencillas, como las de esta página, combinando distintos tonos de un mismo color...
- Y luego tenemos combinaciones contrastadas o complementarias, en las que combinamos colores con un color secundario o con el que está justo enfrente en la rueda cromática.
- También es importante que los colores tengan la misma saturación (cantidad de color) para que puedan combinar bien.
- Los colores deben estar igual de saturados para que “ encajen ” .
- Si tenemos problemas para encontrar buenas combinaciones de colores podemos utilizar servicios online como kuler, donde los diseñadores van indicando combinaciones armónicas de colores que han utilizado.
- También podemos acudir a libros especializados que nos van a ayudar a seleccionar colores, como este “ La armonía de los colores ” , de Tina Sutton.
- Ahora vamos a hablar del contenido, y vamos a centrarnos en la tipografía. La tipografía es la transmisora de nuestro mensaje, es nuestra voz en la pantalla, y debe ser expresiva.
- Hoy en día tenemos a nuestra disposición millones de tipografías distintas, y tenemos que conocer para qué sirven, para qué valen...
- Antes en los libros el espacio en blanco era caro y representaba calidad. Este pensamiento se mantiene hasta nuestro días, y cuando vemos llenar la página de letras queda “ barato ” , parece que queremos ahorrar papel.
- Aquí tenemos un ejemplo de un libro antiguo, en el que vemos cómo se cuidaban los espacios en blanco y se utilizaban tipografías diferentes para los títulos, había separación entre el título, la entradilla, una barra lateral con un añadido, etc.
- Ahora veamos tres ejemplos modernos. En un principio parecen correctos los tres, pero si prestamos atención veremos que hay uno que destaca, ya que utiliza correctamente todos los elementos tipográficos.
- Seguro que la gente de Flipboard no conocía esa página antigua, pero tenían claros los mismos conceptos y las mismas buenas prácticas tipográficas.
- Volviendo al lenguaje, recordemos que la tipografía tiene la capacidad de transmitir sensaciones y enfatizar. Es importante utilizar una tipografía que nos ofrezca estas posibilidades, contando con versiones en negrita y cursiva.
- La negrita destaca lo importante, llama la atención. Hay que destacar aquello que queremos que lean nuestros usuarios, pero no podemos usarla “ a granel ” .
- Las tipografías “ pesan ” , tienen alma, y afectan al mensaje.
- El mismo texto pero pesos distintos hacen que existan sutiles diferencias en el mensaje.
- Ahora vamos a hablar de orden. Vamos a hablar de las “ grids ” o rejillas que sirven para disponer los elementos en los diseños manteniendo una relación. Como todo el resto de los elementos, hay que conocer su uso correcto para luego romperlo cuando sea necesario.
- Las grids complejas son un elemento moderno, en un principio sólo se utilizaban grids simples basadas en proporciones como la proporción áurea.
- Hoy en día los medios modernos como los periódicos tienen una grid muy definida en la que aunque cambie el contenido nos resulta sencillo encontrar las secciones habituales. Volvemos a las convenciones de las que hablábamos antes con el ejemplo del hospital.
- Es en la web cuando empieza a aumentar el uso de las grids, que nos permite disponer elementos modulares de una forma armoniosa y alineada.
- También podemos encontrar grids para dispositivos móviles, como esta grid para un Nokia N95
- Con la grid vamos a disponer los elementos de una forma estructurada, ordenando y facilitando la transmisión del mensaje.
- La idea detrás de todo este tipo de coherencia que estamos viendo es reutilizar el conocimiento que los usuarios ya tienen aprendido de su propia experiencia y de su interacción con nuestro sistema y reutilizarlo (lo que llevado al extremo lleva al esqueumorfismo). Al final lo importante es conocer al usuario y crear un diseño que le sea útil y sencillo de comprender.
- Hay una línea muy fina que separa el arte del diseño, el límite entre lo funcional y lo estético, como ocurre en este exprimidor de Philippe Starck, del que se dice que es el mejor de los exprimidores manuales pero tiene una clara apuesta por la estética. Quizás él sea un privilegiado que puede andar sobre esta línea tan fina.
- Vamos a terminar hablando de la influencia que está teniendo el móvil en el diseño, sobre todo la obligación de hacernos pensar en múltiples dispositivos.
- Hoy en día el reto es el multidispositivo. Tenemos un contenido que tenemos que “ servir ” a una infinidad de dispositivos diferentes; móvil, tablet, desktop, y sus distintas resoluciones y orientaciones. La respuesta parece ser el “ responsive design ” , un único contenido con distintas formas de mostrarse según el dispositivo que lo ofrece. Sin embargo, en esto también hay que tener consistencia, y no ofrecer distintas funcionalidades según dispositivos, sin asumir situaciones sin tener datos.
- Finalmente el “ responsive ” se basa en una modularización de los contenidos y una priorización de los mismos, adaptando además la interface a las peculiaridades del dispositivo.
- Sin embargo, hay que recordar que el problema al que nos enfrentamos no se trata sólo de rellenar ventanas con un contenido que encaje perfectamente. El problema es crear un servicio adaptado a las necesidades de nuestros usuarios y el dispositivo por el que acceden. Debemos conocer el contexto; no son sólo los píxeles los que deben encajar.
- El problema no es servir imágenes que “ cuadren ” en la pantalla de nuestros dispositivos, sino ofrecerles a nuestros usuarios el contenido que necesitan de forma sencilla. El “ mobile first ” de Wroblewski ha sido una primera aproximación al problema, que debe ser “ Content first ” , o incluso “ experience first ” : hay que servir el contenido necesario para crear la experiencia que el dispositivo sea capaz de soportar.
- Nuestras ideas previas sobre cómo se usan los dispositivos están cambiando. El móvil ya no es para accesos rápidos en el metro, cada vez hay más gente que usa el móvil en periodos más largos ya que es personal y está a mano. Casi el 20% de los usuarios móviles de Facebook no acceden ya desde el ordenador. El 68% del uso de los smartphone ocurre en casa. El usuario accede al contenido desde muchas situaciones con el dispositivo que tiene más a mano.
- Como último punto hablemos de los usuarios, y una de las técnica básicas de investigación, las pruebas de usabilidad.
- Las personas que diseñan y programan el software no suelen ser quienes lo van a usar. No tenemos su vida, no entendemos sus problemas, y llevamos demasiado tiempo viendo el sistema como para “ verlo desde fuera ” . Tenemos que conseguir ver por los ojos de las personas que usan nuestro servicio.
- Uno de los pioneros de la usabilidad es Henry Dreyfuss, uno de los grandes del diseño industrial norteamericano. Para diseñar la cabina del “ Super Constellation ” hizo a sus investigadores volar en avión cientos de miles de kilómetros en varias compañías, luego construyó un prototipo de la cabina de su diseño en un almacén de Nueva York y contrató voluntarios, que llevaban su propio equipaje, a pasar largas sesiones dentro mientras eran observados por el equipo de investigación.
- Por suerte para los que trabajamos en entornos virtuales, nosotros podemos realizar estas mismas pruebas mucho más fácilmente, en una sencilla sala con un ordenador portátil, como estas pruebas que llevamos a cabo en InfoJobs.
- ¿Cómo se llevan a cabo los tests de usabilidad? Sencillo, vemos qué tareas principales se llevan a cabo en nuestro sistema, pedimos a alguien que las lleve a cabo delante nuestro, y dejamos que hable... se trata de algo barato, rápido y efectivo, que nunca entenderé por qué no se lleva a cabo más a menudo.
- No hay mucho más... se pueden hacer mejoras, como plantear un guión, utilizar usuarios parecidos a los reales, grabar la sesión, tener una persona de apoyo para que tome notas mientras llevamos la sesión, aprender a evitar las preguntas dirigidas y revisar las sesiones cuanto antes con todo el equipo de trabajo (desarrolladores incluidos).
- Por muy mal que hagamos un test de usabilidad, como resultado obtendremos una lista de información de errores y posibles mejoras. Parte de nuestro trabajo es saber priorizarlos de acuerdo con su frecuencia, gravedad, y esfuerzo requerido. En caso contrario, nos arriesgamos a tener una gran cantidad de cosas pendientes y no saber por donde empezar.
- Como resumen, las pruebas de usabilidad nos permiten extraer información sobre cómo ven los usuario nuestro servicio (o el de la competencia), siendo sencillo, rápido y barato. Una vez realizado el test es imprescindible una priorización de resultados para poder empezar a actuar.
- Si alguien tiene interés en el tema, recomiendo mucho los libros de Krug. Este “ Rocket Surgery Made Easy ” está centrado en cómo realizar pruebas de usabilidad y es ameno, directo y corto.
- Recordemos por última vez los 7 principios de los que hemos estado hablando...
- Al revisarlos emerge un octavo “ principio ” , la importancia que tiene entender cómo funcionan las personas, que son las “ receptoras ” de nuestros servicios, a la hora de diseñar nuestros productos... el hardware avanza rápidamente, cambia, salen nuevas plataformas... pero las personas llevan miles de años funcionando de forma similar, y hay que dedicar también tiempo a aprender cómo funcionan para poder diseñar software que les resulte amigable.
- Gracias a todos por vuestro interés, por favor compartid esta presentación con vuestros compañeros, y tratemos entre todos de crear un software más amigable.