Qué es experiencia de usuario y quienes tienen que velar porque esta sea buena

Hace ya algunos días que no pasaba por aquí, no obstante, esta semana por fin he sacado un poquito de tiempo para escribir un post que me ronda por la cabeza desde hace mucho tiempo. El post lo he publicado en el blog de Kabel Sistemas de Información y habla sobre que es la experiencia de usuario, que no es y sobre todo quienes son las personas que han de velar porque esta, sea siempre buena.

El susodicho post podéis leerlo a continuación:

¿Que es la Experiencia de Usuario?

De un tiempo a esta parte, por todos lados se esta hablando de experiencia de usuario (ux), no obstante, continuamente nos encontramos con situaciones que ponen de manifiesto que en el sector todavía no está muy claro que es eso de la experiencia de usuario y quienes son los responsables de conseguir una buena experiencia de usuario.

Wikipedia, define la experiencia de usuario como:

Conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo.

Normalmente cuando en el ámbito del desarrollo de software se habla de experiencia de usuario, nos encontramos con que de lo que se habla realmente es de usabilidad y diseño gráfico y según la definición anteriormente citada, podemos deducir que la experiencia de usuario  desde luego tiene que ver con aspectos como usabilidad y diseño gráfico, pero realmente con lo que tiene que ver es con la percepción.

Por lo tanto:

Experiencia de usuario, no es usabilidad.
Experiencia de usuario no es diseño gráfico.

Experiencia de usuario es más que todo esto, experiencia de usuario es percepción.

La percepción es el acto de recibir, interpretar y comprender a través de la psiquis las señales sensoriales que provienen de los cinco sentidos orgánicos.

Según Wikipedia:

La percepción obedece a los estímulos cerebrales logrados a través de los 5 sentidos, vista, olfato, tacto, auditivo, gusto, los cuales dan una realidad física del medio ambiente.

Por lo tanto, podemos afirmar que la experiencia de usuario cuando interactuamos con un producto concreto, sera buena o mala en base a los estímulos recibidos y la manifestación del producto en una realidad física. En desarrollo de software, los estímulos que vamos a recibir, van a ser los relativos a eficiencia, sencillez, visibilidad y calidad de la información, navegabilidad, encontrabilidad, consistencia, estándares, performance o gestión de los errores por citar algunos.

No obstante, de todos estos factores enumerados, encontramos que varios de ellos, si que están totalmente relacionados con el desarrollo de interfaces de usuario, pero también encontramos otros, que tienen más que ver con negocio y arquitectura del producto.

¿Quienes son los responsables de trabajar la experiencia de usuario?

Por lo general, se identifican a los arquitectos de información, diseñadores de interacción o diseñadores gráficos como los responsables de definir, trabajar y conseguir una experiencia de usuario buena, pero esto es un error.

El responsable de conseguir una buena experiencia de usuario es el equipo.

El equipo de desarrollo es el responsable de la experiencia de usuario, ya que es muy difícil encontrar una única figura que pueda ejecutar las acciones necesarias para garantizar que la experiencia de usuario es buena, principalmente porque para conseguir una buena experiencia de usuario, tenemos que trabajar aspectos de disciplinas muy diferentes.

Por un lado, tenemos que tener un responsable de producto (Product Owner) que además de velar por los aspectos relativos al negocio, sea consciente de que una buena experiencia de usuario es directamente proporcional a la calidad del producto y en muchos casos, también al éxito del mismo.

Por otro lado, el líder tecnológico del proyecto, además de velar por el diseño, arquitectura y calidad del software, también tiene que velar por la experiencia de usuario que en su ámbito de actuación, se traduce en performance.

Las aplicaciones han de ser rápidas y ágiles, y este objetivo, lo perseguirán tanto el arquitecto como los desarrolladores.

Y por supuesto, arquitectos de información, diseñadores de interacción y diseñadores gráficos, concibiendo una interfaz de usuario usable, accesible y amigable, con buena navegabilidad, con una acceso a la información sencillo, haciendo uso del diseño gráfico como medio no como un fin en si mismo.

No hay ningún producto de calidad y éxito en el mercado que tenga una mala experiencia de usuario o dicho de otra forma, la totalidad de los productos que hay en el mercado que han tenido éxito, tienen una experiencia de usuario excelente.

Pensad en los iPods de hace 6 años.

¿Y vosotros qué opináis?

Anuncio publicitario

Más de test de usuarios: El Click Test en la práctica

El pasado martes, escribí en el blog de NBICI una entrada en la que hablábamos de otro de los test de usuario que hemos realizado. Esta vez le ha tocado el turno al Click Test.

A continuación os dejo la entrada:

Continuando con los test de usuarios que realizamos para evaluar los prototipos de nuestro Web Site, hoy vamos a ver el segundo test que realizamos: El Click Test.

El Click Test, es un test cuyo cometido es encontrar los puntos más llamativos, aspectos menos atractivos o características más importantes en función del criterio de nuestros usuarios.

Al igual que el Fiveseconds Test, este también consta de tres fases:

• Planificación
• Ejecución
• Análisis

Planificación.

Dentro de la fase de planificación nos encontramos con vamos a tener que responder a tres preguntas:

• ¿Quiénes van a probar el sitio web?
• ¿Qué recursos materiales necesito?
• ¿Qué quiero que hagan los usuarios?

La pregunta ¿Quiénes van a probar el sitio web? busca definir correctamente a las personas y encontrar un grupo de usuarios que cumpla con el perfil definido. La pregunta ¿Qué recursos materiales necesito? viene a definir exactamente las necesidades que tenemos en cuanto a materiales e infraestructura. Si quereís leer más información al respecto podeís acceder al post donde contamos como realizamos el Fiveseconds Test.

Respecto a ¿Qué quiero que hagan los usuarios? definimos unos objetivos claros.

• Identificar que es lo que más le llama la atención a nuestros usuarios.
• Identificar si los elementos más llamativos están distribuidos en la zona superior de la página a evaluar, es decir, la zona más importante de la página.

El test fue realizado a traves de Usability Hub por medio de su herramienta Click Test.

La introducción al test fue:

Esta es nuestra Home Page del Site. Pulsa en el elemento que más te llama la atención. Gracias por realizar este test

Ejecución

Al igual que el Fiveseconds Test, este test fue realizado online con los pros y contras que esto implica. Al igual que en el apartado anterior, podéis leer más información al respecto en la entrada relativa al test de cinco segundos que ya publicamos en su momento.

Bien, el test fue realizado por 7 personas de forma programada y a día de hoy ha sido realizado por 16 personas.

A continuación podeís ver el resultado de la ejecución. Mapa de Plasma:

Plasma Map del Clicktest de la Home Page de NBICI

Mapa de Clicks:

Vista Click Map del Clicktest de la Home Page

Es decir de los 16 participantes:

• 1 hizo click sobre el logotipo de NBICI.
• 2 hicieron click sobre el claim de la home
• 1 hizo click sobre el nombre del Web Site
• 10 hicieron click sobre el botón de búsqueda
• 2 hicieron click sobre las marchas “destacadas”.

Análisis

Ahora que ya tenemos realizado el test, ya solo nos queda obtener las conclusiones del mismo:

• El 62,5% de los usuarios consideran que el elemento que más llama la atención es el call to action de la página, es decir el botón buscar. Encontramos que el 20% de nuestros usuarios considera que lo que más les llama la atención es el logo y claim.
• Prácticamente la totalidad de los usuarios, es decir el 87’5% de los usuarios que han realizado el test, han encontrado que los elementos que más les llaman la atención son los posicionados en la parte superior de la página es decir la zona más importante de la misma.

Are you ready Freddy?

Ha llegado el momento de pasar a la acción y decidir que acciones tomar para mejorar los resultados. No obstante, tenemos que tener en cuenta que los resultados obtenidos son bastante buenos, dado que hemos podido identificar que prácticamente el 82% de los usuarios encuentran que lo más relevante es el botón de búsqueda o call to action de la página (en concreto el 62,5%) o el logo y claim (en concreto el 20%). En definitiva todos consideran la cabeza con el mensaje que queremos transmitir junto con el elemento que nos va a permitir ejecutarlo como los elementos más llamativos / atractivos del sitio.

Por otro lado, el mismo dato porcentual citado anteriormente, nos dice que la página esta bien estructura y que los elementos principales estan situados en la zona superior que en definitiva es lo que antes ve el usuario, de un primer vistado y sin necesidad de hacer scroll.

Y tú, ¿que opinas? ¿Nos dejamos alguna cosa? Esperamos comentarios.

El Fivesecond Test realizado para el proyecto NBICI

Los test de usuarios, son un ejercicio que nos permiten evaluar en términos de usabilidad – ux un Web Site.

Hace unas semanas realice una batería de test de usuarios para el proyecto NBICI.

Hoy acabo de publicar en el blog de NBICI, los resultados del primero de ellos, un Fiveseconds Test.

A continuación os dejo el post:

Como ya os contamos anteriormente, hace algunos días realizamos un test de usuarios para identificar fortalezas y debilidades en nuestros prototipos – wireframes.

Todo test de usuarios, pasa por tres fases, las cuales han de realizarse en un orden concreto y sobre todo, han de realizarse todas, ya que si no, el test no tiene sentido o es totalmente ineficiente. Las fases a realizar son:

1. Planificación
2. Ejecución
3. Análisis

No obstante, previamente a realizar el test, tendremos que definir las personas y buscar el grupo de participantes que representen nuestro espectro de usuarios.

A continuación vamos a contaros como realizamos el primero de ellos, un FiveSeconds Test. El test fue realizamos por medio de la herramienta online FiveSeconds Test.

El Test.

El FiveSeconds Test, consiste en mostrar una interfaz de la web al usuario durante cinco segundo, a continuación el usuario deberá responder a una serie de preguntas sobre la página.

Planificación.

Como hemos visto, este test, es treméndamente sencillo de realizar y debido a su naturaleza, la información a obtener es la de “la primera mirada”, es decir, lo que piensa el usuario cuando accede a nuestro Site por primera vez.

De cara a realizar el test, teníamos que responder a estas preguntas:

• ¿Quiénes van a probar el sitio web?
• ¿Qué recursos materiales necesito?
• ¿Qué quiero que hagan los usuarios?

Respecto a ¿quiénes van a aprobar el Sitio Web?, le pedimos ayuda a un grupo de personas que cumplía con el perfil de publico objetivo de nuestro Web Site. Es vital que las personas que participen en el test de usuarios, cubran todo el espectro de usuarios que tendremos a futuro ya que si no es así el test no será todo lo efectivo que podría ser o incluso puede ser totalmente ineficaz.

Para reclutar a los participantes, tiramos de familiares y amigos que daban el perfil.

Respecto a los recursos materiales que se necesitan normalmente requieren una mínima estructura, ya que necesitaremos una sala donde se pueda trabajar sin interferencias, cuadernos, bolígrafos y demás material de oficina para tomar notas y a ser posible una cámara si los usuarios consienten que se grabe la sesión.

Y ya solo nos queda definir que es lo que queremos que hagan los usuarios. Los objetivos que nos marcamos eran:

• Identificar si el usuario que accede por primera vez a NBICI, sabe de que trata el Web Site.
• Identificar si el usuario, recuerda el nombre del sitio Web al que ha accedido.

Así pues, a través de Usabilityhub, creamos el test, la imagen que les mostramos a la muestra de usuarios que realizaba el test fue esta:

La introducción al test, fue:

A continuación vamos a mostrarte una imagen, se trata de la home page del Site. Una vez desaparezca te haremos una sencillas preguntas. Gracias por participar.

Y las preguntas a realizar una vez vista la imagen fueron:

•  ¿De que trata este Sitio Web?
• ¿Cual es el nombre del Web Site?

Ejecución.

Usability Hub, a traves de Fiveseconds Test, que es uno de sus productos, permite realizar los test online, por lo tanto, todo lo relativo a la ejecución del test de usuarios se simplifica, así que es más sencillo que podamos llevarlo a cabo.

Como ya hemos reseñado, de cara  realizar un test de usuarios, normalmente, tendremos que contar con cierta infraestructura, ya que lo idóneo, es que los test de usuarios sean presenciales y que la persona/s que lo organizan, puedan ver como se realiza el mismo, pudiendo así observar las reacciones (algo fundamental en un test como este), pero en nuestro caso, debido a la naturaleza de la ejecución del proyecto, esto más que un beneficio erá un problema, así que buscamos una herramienta que nos permitiera realizar el test online.

Realizar el test online, implica que todo lo relativo a la observación de los usuarios cuando se enfrentan a la interfaz, no vamos a poder evaluarlo, pero consideramos que en un momento tan prematuro no era lo más importante, ya que los test los hicimos no contra el web Site real, si no contra unos Wireframes. Cuando tengamos el proyecto más avanzado, podremos plantearnos si realizamos los test presenciales.

El test fue realizado por 7 personas de forma programada. A día de hoy (bedido a que Usability Hub permite que los test los pueda realizar la comunidad), el test ha sido realizado por 11 personas.

A la pregunta ¿De que trata este Sitio Web?, las respuestas fueron:

• De marchas de mtb
• De bicicletas
• Rutas ciclistas
• Portal donde comprar bici (tipo wiggle)
• De buscar marchas de bici
• Bicis
• Bicicletas
• Marchas en bici
• Información marchas ciclistas
• Marchas ciclistas
• Rutas en bicicleta
• De marchas con bicicletas.

Y he aquí las Top Keywords empleadas:

Fiveseconds Test: Respuestas a ¿De que trata este Sitio Web?

A la pregunta ¿Cual es el nombre del Web Site?, las respuestas fueron:

• nbici
• Nbici
• nbici
• Nbici
• nbici
• ¿marcha?
• nbici
• NBICI
• monobici
• no lo se
• 2 personas pasarón la pregunta sin responder

Y he aquí las Top Keyword introducidas:

Fiveseconds Test: Respuestas a ¿Como se llama este sitio?

Análisis

Una vez realizado el test, ya solo nos queda realizar el análisis y sacar todas las conclusiones posibles. Como culmen al test, esta fase es muy importante, ya que va a ser aquí donde vamos a obtener las conclusiones, sobre fortalezas y debilidades y que nos va a permitir identificar puntos de mejora.

Conclusiones pregunta 1: ¿De que trata este sitio Web?

• Creo que podemos decir que el objetivo del Web Site, es claramente comprensible para los futuros usuarios del mismo ya alrededor de un 70% de los usuarios han conseguido identificarlo cláramente.
• La palabra marcha se repite de forma asidua.
• La totalidad de las personas que lo han realizado han relacionado el sitio Web con el mundo de la  bicicleta.

Conclusiones pregunta 2: ¿Como se llama este Sitio Web?

• El nombre del Web Site ha sido identificado y retenido en la memoria por casí el 60% de los usuarios.
• Cuatro personas que realizaron el test, no fueron capaces de identificarlo y dos lo hicieron erroneamente.
• El nombre del Web Site no queda claro en un escaneo inicial y probablemente necesite realizar una inspección más pausada para que pueda ser identificado.

Toda acción conlleva una reacción.

Bien, una vez realizado el test y analizadas las conclusiones ahora nos queda tomar decisiones que ayuden a paliar las debilidades y maximicen las fortalezas.

Como hemos visto, podemos considerar que el objetivo del sitio va a ser claramente identificable por nuestros usuarios. Probablemente esto ocurre por dos motivos:

1. Imagen de fondo con un ciclista que supone una declaración de intenciones clara.
2. Claim que comunica de forma clara las intenciones del Web Site (me refiero a ¿Buscar una marcha? NBICI es lugar donde encontraras todas las marchas ciclistas que se van a realizar próximamente).

No obstante, es posible que podamos mejorar el claim añadiendo la palabra “ciclista” a la pregunta “¿Buscas una marcha?”, quedando el claim de la siguiente forma:

¿Buscas una marcha ciclista?

NBICI, es el lugar donde encontraras todas las marchas ciclistas que se van a celebrar próximamente.

Respecto al nombre del Web Site, nos encontramos que nuestros futuros usuarios no lo identifican claramente. Aunque la imagen de marca tendremos que trabajarla por varias vías, claramente este factor afecta de forma directa.

Podemos observar que el logo y nombre del Web Site se encuentran separados y a distinto nivel, como medida de mejora, vamos a incluir el logo junto al nombre y repetiremos el nombre en el siguiente párrafo.

¿ Creéis que nos dejamos alguna cosa? Esperamos comentarios.

 

The real world agile roadshow: The frontend: HTML5 y Windows Phone 7.

El pasado día 17 de Enero, participe en The Real World Agile Roadshow siendo el responsable de la ponencia The Frontend: HTML5 y Windows Phone 7. Globbtv, fueron los responsables de la retransmisión y difusión del evento y ya está online el video del mismo.

En la ponencia, hablamos sobre experiencia de usuario, que es la experiencia de usuario, como conseguir una buena experiencia de usuario y los beneficios que nos aporta la misma.

Además hicimos una breve introducción de lo que supone HTML5 y lo que nos va a aportar a los desarrolladores y usuarios finales, cuando se firmara el estándar y como tenemos que empezar a desarrollar mientras tanto.

Para complementar la sesión, hicimos una breve introducción a Windows Phone 7, viendo sus herramientas de diseño y desarrollo, portal de recursos etc.

La ponencia tuvo una duración de 50 minutos y fue complementada por medio de tres demos (que fusionamos en dos para ahorrar un poquito de tiempo).

Podéis ve el vídeo en blog de Kabel Sistemas de Información.

Ya se que hace mucho de esto, pero como he dicho anteriormente, estoy tratando de recopilar todo lo que he hecho en este tiempo.

Como posicionar Objetos en pantalla cuando trabajamos con Silverlight.

Tiempo hace que desarrollamos en la web, y por eso, nos hemos acostumbrado a ir posicionando objetos en función de un Layout que resulta de la aplicación de estilos css a elementos HTML. Cuando hemos trabajado con flash (o con algún Windows Form), posicionar objetos, es más sencillo, ya que simplemente tenemos que aplicarles unas coordenadas, posicionando estos objetos de forma absoluta.

Ahora que tenemos que aprender Silverlight (o Moonlight los linuxeros), con uno de los primeros problemas que nos vamos a encontrar, es con el posicionamiento de los elementos en pantalla. No os asustéis, porque no es muy complicado, pero sí que es verdad que tenemos varias opciones donde elegir, las cuales vamos a ver en breve.

Posicionando elementos en pantalla.

Silverlight, para permitirnos posicionar los elementos en pantalla de una forma flexible, nos proporciona tres controles:

• StackPanel
• Canvas
• Grid

Estos 3 elementos, nos van a permitir, posicionar otros elementos de formas más bien distintas.
Los 3 heredan de la clase Panel, y ahora vamos a ver con que funcionalidad nos fortalecen o penalizan cada vez que usemos uno de ellos.

El StackPanel.

El StackPanel, es el más sencillo de los tres, nos permite posicionar varios elementos, uno a continuación de otro y en dirección horizontal o vertical.

El código XAML necesario es el siguiente:

Javascript no intrusivo (Unobtrusive JavaScript). ¿Qué es? y ¿en que se fundamenta?

Tras un pico de trabajo que ha superado a los 14 ocho miles juntos, vuelve el hombre!!!

Cuando estamos construyendo nuestras aplicaciones, una de las máximas que tenemos que tener siempre en mente es hacerlo de un forma lógica y desacoplada, para que estas, en un futuro, sean fácilmente mantenibles y escalables.

Para conseguir esto, por norma general, dividimos nuestras aplicaciones en capas, y en cada una de ellas vamos insertando la funcionalidad de la aplicación.

Trabajar con capas (no me voy a extender mucho en esto), es totalmente beneficioso, ya que nos vamos a encontrar principalmente con:

• Código desacoplado.
• Código escalable.
• Código mantenible.

Y si en el futuro nos vemos en la tesitura, de modificar nuestra app, no vamos a tener que modificar toda la aplicación si no simplemente la capa necesaria.

Bien, cuando trabajamos con la interfaz de usuario, tenemos que hacer lo mismo y ya no simplemente por beneficiarnos de un código desacoplado, escalable y mantenible si no también porque si entendemos documento Web, como un documento que nos permite difundir información (y además que tiene que ser accesible), en esta información no se ha de contemplar asuntos como el look & feel de la página o la funcionalidad cliente.

En el principio de los tiempos, las páginas web, estaban creadas de manera que eran ellas las que definían la estructura del sitio y la información a mostrar, el look & feel de la página (quien no se acuerda de los tag Font), y la funcionalidad cliente. Con el paso del tiempo, han aparecido las hojas de estilo, con lo cual nos han permitido separar (o casi en algunos casos) el look & feel de un sitio web del contenido (si no te crees esto puedes darte una vuelta por css zen garden), pero ¿qué pasa con la funcionalidad cliente?.

¿Qué es el Javascript no intrusivo? y ¿en que se fundamenta?