Usabilidad y Arquitectura del Software

Hasta hace poco asumíamos que la usabilidad únicamente estaba relacionada con la capa de presentación de nuestra aplicación, pero el otro día durante la clase, nuestro profesor dio un ejemplo que me hizo pensar. Estaba explicando cómo mejorar la usabilidad de una página web usando javascript y en lo que hizo yo vi claramente un patrón MVC, y me hizo pensar en la relación que tendría el concepto de usabilidad con la arquitectura que debemos usar para realizar nuestra aplicación.

Según Dick Berry, en su analogía del Iceberg de la usabilidad, los aspectos relacionados con la presentación de una aplicación sólo afectan en un 40% a la usabilidad, mientras que el 60% restante está influenciado por el modelo de usuario, es decir, los objetivos que el usuario quiere alcanzar con sus tareas.



Berry va aún más lejos y relaciona el modelo de usuario del que hablábamos con el modelo de la OOP (programación orientada a objetos). Según Berry es este modelo el que permite al usuario relacionar sus objetivos con la funcionalidad del sistema.

Si diseñamos un software pensando que la usabilidad estará contenida en la capa de presentación, a la hora de programar internamente la aplicación no la tendremos en cuenta y posiblemente cuando nos surja algún problema el diseño de las capas internas estará tan avanzado que será muy complicado hacer cualquier modificación y supondrá un coste muy alto.

Hasta hace relativamente poco tiempo esto no se tenía en cuenta, pero recientemente se está trabajando mucho en este campo, intentando relacionar los patrones que usamos para crear nuestra aplicación con la usabilidad que tendrá ésta depués.

Escenarios de usabilidad y Arquitectura del Sofware

Investigadores como Len Bass han inventariado una serie de momentos de interacción o tareas del usuario que, para que el sistema las pueda soportar, tienen que estar definidas en la Arquitectura del Software. Este listado puede consultarse en el documento CMU/SEI-2001-TR-005. Algunas de estas acciones son:

• Agregación de datos: Poder aplicar simultáneamente una acción a un conjunto de datos u objetos.
• Agregación de comandos: Agrupar acciones que se puedan ejecutar de una sola vez.
• Comandos de cancelación
• Uso de aplicaciones de forma concurrente
• etc

En el mismo trabajo Bass propone una solución en forma de patrón software para cada escenario. 

Por ejemplo para el caso de Agregación de datos propone definir 3 entidades distintas:

• Command Manager: Es el encargado de de manejar los comandos del usuario
• Grouping Manager: Maneja las definiciones de los grupos y la adición y borrado de los mismos de un grupo.
• User-visible applicacion data: Este componente da acceso al usuario a los datos de la aplicación.

Conclusiones

Como hemos visto los esfuerzos por incluir la usabilidad cada vez en etapas más tempranas del diseño del software es muy grande, e incluso ya hay algunos patrones estructurales que nos facilitan la labor, por lo que a partir de ahora deberíamos plantearnos usarlos en nuestros futuros desarrollos.

Aplicaciones para hacer prototipos web

Antes de empezar…¿Qué es un prototipo web?

Un prototipo web es un modelo inicial a partir del cual se empieza a desarrollar la idea original del diseño de un sitio web. 

Normalmente la técnica a seguir para la buena elaboración de un diseño web es ir haciendo prototipos de bajo nivel para ir corrigiendo posibles errores en la interfaz. Uno de los métodos para la búsqueda de errores es el test de usuarios. Con este test, un grupo de personas prueban el prototipo e intentan superar una serie de acciones que el desarrollador les ha propuesto. Si se encuentran errores, es fácil de corregir ya que estamos en una fase de prototipo a bajo nivel. Una vez que se crea que está todo correcto, se pasa a elaborar un prototipo a alto nivel, con más nivel de detalles. Este prototipo de alto nivel sería lo más parecido a un diseño web real.

Existen unas herramientas que se llaman Wireframes para la elaboración de prototipos que nos ayudan a realizar esta tarea. Aquí veremos algunas de las herramientas existentes para su elaboración:

PIDOCO

 iPLOTZ

HOT GLOO

 MockupScreens

Esto son solo unos ejemplos de herramientas para la creación de prototipos, pero existen muchísimas más herramientas en la web. 

Uso de colores en nuestras aplicaciones

El uso de colores en el diseño es algo muy importante y ha sido estudiado de forma muy rigurosa por muchas personas a lo largo de la historia. Los colores nos transmiten sensaciones, en parte por nuestra cultura, en parte por nuestra herencia biológica. Nosotros podemos intentar usar estas sensaciones en nuestro beneficio para promocionar nuestra web, aumentar nuestras ventas, mejorar la usabilidad, etc.

En esta entrada proporcionaremos una visión general de los sentimientos que evocan los colores y cómo podemos utilizarlos de forma inteligente.

Blanco

Es la suma de todos los colores. Evoca lo absoluto, la paz, la inocencia o la rendición. 

Presenta algo positivo, bueno para nosotros y los cuerpos que lo utilizan dan la idea de pureza y modestia.

Este color encaja con estilos minimalistas, generando piezas sencillas visualmente. En el diseño se asocia con corporaciones y con profesionalismo, generando un alto grado de confianza.

Negro

Es la ausencia de color. Se asocia con la serenidad, la tristeza y el misterio. Es un buen candidato cuando hay una gran cantidad de texto o fotografías. Grandes áreas rellenas de este color darán satisfacción y estilo.

Además se utiliza para resaltar a otros colores, cualquier color colocado sobre fondo negro aumenta mucho su visibilidad.

Rojo

Es el color de las emociones, pasión y la fuerza. Un color rojo vivo suele evocar sangre, ira, fuego y sexo. Si lo utilizamos en una tipografía clara y gruesa dotamos inmediatamente al mensaje de una connotación de aviso, de peligro dándolo urgencia e importancia.

Está muy relacionado con la energía por lo que es muy adecuado para asociarlo con coches, juegos, deportes y actividades de riesgo.

Además se usa para encaminar a las personas de forma rápida en una página web, por su alta visibilidad.

Azul

Es el color del cielo y del mar por lo que se suele asociar con la estabilidad y la profundidad. Representa lealtad, confianza, sabiduría, inteligencia, fe, la verdad, etc.

Se le considera un color beneficioso tanto para el cuerpo como para la mente, ya que puede retardar el metabolismo y producir efectos relajantes.

Es muy adecuado para temas relacionados con alta tecnología o alta precisión. Además es un color típicamente masculino y aceptado por los hombres, por lo que deberemos tenerlo en cuenta si nuestros usuarios potenciales son de este sexo.

Verde

Es el color de la naturaleza por excelencia. Representa armonía, crecimiento, exuberancia, fertilidad y frescura. 

Emocionalmente se relaciona con la seguridad, por lo que, en contraposición al rojo, se utiliza para mostrar confirmaciones o acciones bien realizadas.

Es el color más relajante para el ojo, algo que debemos tener en cuenta para no abusar de él si deseamos mantener al usuario alerta en nuestro producto.

Se asocia normalmente con medicinas, productos naturales, etc.

La Percepción visual en el diseño de interfaces

La percepción visual es muy interesante a la hora del diseño de interfaces web, software, etc. Esto es debido a que el diseñador puede mejorar la experiencia de usuario de las personas así como desviar su atención hacia una parte de la pantalla u otra. La captación de la atención de las personas en la pantalla es un tema que todo diseñador de interfaces debe estudiar y aplicar a sus trabajos.

Una teoría en relación a la percepción visual, es la teoría de la Gestalt. De esta teoría se derivan unas series de principios llamados “Principios de la Gestalt”. Estos son algunos ejemplos que se encuentran en una cierta página web:

 

-          Similitud: Es el principio donde los elementos que poseen cualidades similares son percibidos como parte de la misma forma. Los elementos del rectángulo rojo se agrupan por su similitud.

-          Proximidad: Es el principio donde los grupos de elementos se perciben asociados por su proximidad. En el rectángulo azul se aprecia que los elementos del menú se separan claramente del resto de la interfaz.

-          Cierre: Es el principio en el que tendemos a encerrar formas completando contornos. En el rectángulo amarillo se aprecia una línea que no está completa pero que se intuye que es una línea de separación.

-          Simetría: Este principio consiste en duplicar la imagen visual a lo largo de un eje de simetría. En la imagen superior se observa cómo los elementos presentan una cierta simetría (están los cuadros alineados y con tamaños similares) por lo que resulta ser una página más agradable de ver para el usuario.

CardSorting online

El CardSorting es una técnica del DCU creada para estudiar el modelo mental de los usuarios de nuestra aplicación. A los usuarios se les reparten tarjetas con los conceptos de nuestra aplicación que deseemos ordenar y éstos deben colocar las cartas en grupos que después analizaremos, para ver qué organización se repite más entre todas las personas y de esta forma crear una interfaz más orientada al usuario.

Esta técnica puede usarse tanto en persona como online, cada una con sus pros y sus contras. Buscando sobre este tema me topé con este artículo ( Online CardSorting ) en el que se trataba el tema y aquí os resumo un poco de lo mejor y lo peor de usar este método de forma online:

Pros

• Es más sencillo de organizar que el CardSorting físico. Para una persona u organización es mucho más sencillo definir los datos de las tarjetas en una herramienta online y mandar e-mails a los usuarios para que realicen la prueba. Si se hiciese fisícamente sería mucho más dificil organizar una reunión con tantas personas.
• Es más rápido y fácil obtener los resultados. Tanto el proceso de ordenado como el de análisis de resultados (sobre todo este último) se realiza por la herramienta, de tal forma que sólo debemos preocuparnos de establecer bien las tarjetas y de interpretar bien los resultados.
• Es mucho más sencillo reclutar participantes. Nos será más fácil convencer a una persona para que realice la prueba si le decimos que lo puede hacer cómodamente desde su casa.
• Es (normalmente) más barato. Nos ahorramos pagar gastos de transporte, comida, etc. a los participantes.

Contras

• No se obtiene tanta información. Únicamente sabemos dónde se han colocado las tarjetas, pero no tenemos al usuario para preguntarle por qué lo hizo así.
• No es tan natural como ordenar cartas reales. Si nuestros participantes no están familiarizados con la herramienta de CardSorting pueden encontrar dificultades a la hora de utilizarla.
• No es flexible. Únicamente podemos modificar las opciones que nos de la herramienta online, mientras que si lo hacemos de forma física podemos modificar el aspecto de las tarjetas, el color, el tamaño...
• No se puede modificar en cualquier momento. Físicamente si después de una sesión nos damos cuenta de que se nos ha olvidado una tarjeta podemos añadirla fácilmente. En las herramientas online lo normal es que una vez creado el CardSorting ya no se pueda modificar.
• Posibles fallos de la herramienta. Podría caerse el servidor por ejemplo.
• Coste de la licencia. Normalmente deberemos pagar a uno de los servicios online existentes una determinada cantidad para usar su herramienta.

Se recomiento usar el CardSorting online si necesitamos una gran cantidad de resultados o si nos es difícil concertar citas con todos los usuarios que necesitaríamos para el estudio.

Existe una tercera modalidad (además de la física y la online) llamada CardSorting Moderado, en la cual el entrevistador mantiene una videoconferencia con el usuario y observa cómo ordena las cartas gracias a un programa instalado en el ordenador de ambos. Este método une lo mejor de los dos anteriores ya que permite obtener tanta información como el físico, teniendo la ayuda de una herramienta informática que analice los resultados.

Herramientas de CardSorting Online

Algunas herramientas con las que podríamos realizar este proceso son las siguientes

OptimalSort

Es gratis para estudios pequeños (no más de 10). También tiene suscripciones anuales y mensuales.

WebSort

Es muy parecida a la anterior, nos permite estudios de hasta 10 participantes de forma gratuita y podemos pagar por 5 estudios o una suscripción mensual.

Esta es la herramienta que mi grupo y yo estamos usando en prácticas de Diseño de Interfaces y funciona muy bien.

LA IMPORTANCIA DE LAS PERSONAS EN LAS INTERFACES

A lo largo de la historia, las personas o usuarios no han sido tenidos en cuenta a la hora del desarrollo de dispositivos o software. Si los desarrolladores no prestaban mucha atención al usuario final o a la experiencia de usuario, entonces ¿Cuáles eran sus preferencias? .Dichas preferencias iban encaminadas a las funcionalidades que podría ofrecer el dispositivo o software. Afortunadamente esta tendencia fue cambiando hasta llegar a nuestros tiempos donde el papel del usuario es muy importante. 

En la fase de diseño de un software, se tiene un especial cuidado en la interfaz. La interfaz es la capa que comunica a la persona con el ordenador. Esa capa tiene que ser lo más amena posible para el usuario para que se sienta cómodo utilizando la máquina y para que tenga una grata experiencia de usuario.

 Para saber quién va a utilizar cierta interfaz se utiliza un método denominado modelado del usuario. Este método consiste en la definición de clases o perfiles de usuarios en base a atributos comunes. Los atributos sobre los que se hará la clasificación dependen de la información que se tenga, pero normalmente se tratarán de atributos tales como necesidades de información, condiciones de acceso, experiencia y conocimientos. El diseñador tendrá en mente para quién diseña y qué espera encontrar del usuario. El diseño del software debe ir orientado al usuario según los modelos definidos para cada perfil estudiado. Este método plantea un problema y es que cuando la población que se quiere estudiar es muy extensa, la catalogación puede no ser viable. En estos casos es conveniente hacer uso del enfoque 'persona', ideado por Cooper.

Esta técnica de modelado del usuario se basa en la definición de usuarios llamados personas que representan patrones de conducta, objetivos y necesidades. A estas personas se les da una identidad inventada, pero todos los demás atributos tienen que ser reales como sus necesidades.

Otro factor importante es este método son los escenarios. Los escenarios son las situaciones de uso del sitio. Es en qué contexto se va a dar la interacción entre la persona y el ordenador.

El modelado de usuarios sirve como ayuda a la hora del diseño de una aplicación, permitiendo al desarrollador realizar un diseño centrado en el usuario.

Diseño Centrado en el Usario, Apple un caso de éxito

Hace poco terminé de leer la biografía de Steve Jobs y no se me ocurría una forma mejor de inaugurar este blog que hablando de este genio que revolucionó el mundo de la tecnología y la concepción que tenemos sobre ella. Antes de Steve la tecnología era eso, tecnología, con toda la carga de engorrosa complejidad que conlleva la palabra. Los ordenadores estaban pensados y creados por ingenieros que deseaban crear una máquina potente, que realizase muchos cálculos en cada vez menos tiempo sin importar mucho la forma en que conseguíamos hacer esto, ni lo difícil que pudiese ser para el usuario final el manejo de estos ordenadores.

"Si el usuario quiere hacer uso de nuestro sistema, que aprenda a utilizarlo"

Ésta podría ser la máxima de la creación de ordenadores por aquella época, los usuarios rápidamente pensaban que eso era lo mejor que podía hacerse y se tenían que resignar a utilizarlo. Además estos ordenadores estaban destinados a las empresas, no se pretendía que una persona normal y corriente pudiese usar un ordenador en su casa, ¡eran demasiado complejos!

En ese momento entran en juego Jobs y Wozniak (fundadores de Apple) y sorprenden creando un computador barato (dentro de lo que cabe), integrado y destinado al público en general, el Apple 1. Éste y la siguiente versión (el Apple II) fueron las máquinas que hicieron que Apple empezara a ser la gran empresa que es ahora mismo.

En ese momento de la historia los ordenadores aún se controlaban por línea de comandos. Jobs vio unos prototipos de interfaces gráficas en los laboratorios de la compañía Xerox y tuvo claro cuál era el futuro del computador personal. Él y su equipo desarrollaron muchos de los conceptos de las interfaces gráficas de usuario que se utilizan en la actualidad (ventanas redondeadas, solapamiento de ventanas...) siempre buscando que el usuario pudiese hacer uso de su ordenador de la forma más sencilla que permitiese la tecnología del momento. Implementó esta tecnología en el primer Macintosh, que produjo una revolución en el mundo de las computadoras personales, aunque no fuese un gran éxito de ventas por su alto precio.

A partir de ahí, lo que todos sabemos, revolución tras revolución (iMac, iPod, iPad, iCloud...) parece que todo lo que tocaba Steve se hacía de oro. Reinventaba conceptos ya existentes, pero difíciles de asimilar por el usuario, haciendo que hasta un niño de 3 años pudiese entender como funcionaba cada uno de sus sistemas y que sus usuarios disfruten con los productos que creaba.

Su obsesión por el diseño y la usabilidad rozaba lo obsesivo. En el flujo normal de una empresa tecnológica, es el ingeniero el que manda sobre el diseñador, el que impone las condiciones sobre las que debe trabajar el otro, razón por la que al final salen productos que no son para usuarios, sino para ingenieros (todos conocemos ejemplos, en mi caso por lo menos mis propias aplicaciones son un gran ejemplo). Jobs cambió esta jerarquía en Apple e hizo que los ingenieros se amoldaran a las condiciones de los diseñadores, creando productos de una gran belleza y elegancia.

Todo esto lo hacía con un gran propósito, que todos deberíamos tener en cuenta a la hora de crear nuestros productos. Él no quería vender el producto, quería vender una experiencia de uso completa, desde que compras el producto en la tienda de Apple y  abres su envoltorio (asunto que estudiaba al milímetro),  hasta que lo enciendes y te pones a trastear con él.

En mi  opinión esta es la gran lección que nos deja este maestro:

Deja de preocuparte por la complejidad o el precio, preocúpate por lo que el usuario va a sentir al usar tu producto. Si tiene una gran experiencia usándolo, el éxito lo tienes asegurado.

Para mí por lo menos esto es totalmente cierto, ése es el factor diferenciador que hace que no nos importe el precio de los productos de Apple, la razón por la que es una de las mayores compañías del mundo.

Yo pienso que no hay mejor ejemplo de la filosofía del Diseño Centrado en el Usuario (digo filosofía, porque no sé si usaban este proceso para la creación de sus productos) que los productos de Apple, una delicia para casi cualquier persona.

PD: Antes de que me acusen de fanboy de Apple, he de decir que ¡no tengo ningún producto de ellos!