Novedades de Axure 7: Responsive Design, Parallax Scrolling, Repeater Dataset

El mes pasado se lanzaba la nueva versión de Axure: Axure 7, que trae muchas y muy interesantes novedades.

Hay versión completa y gratis de prueba (de la versión Pro) de 30 días. El precio de Axure 7 es de 289$ para la versión estándar y 589$ para la versión Pro. Si ya tenías la licencia de una versión anterior, la actualización a la nueva versión es gratis.

Adaptative Views para Responsive Design

Una de las grandes novedades de Axure 7 son las Adaptative Views, que permiten prototipar de forma automática y muy sencilla con Responsive Design.

En primer lugar seleccionas en el menú Project>Adaptative Views los diferentes tamaños de pantalla con los que quieres trabajar, como si estuvieras usando CSS Media Queries:

Después, en cada página tienes una vista para cada una de las resoluciones definidas:

Puedes modificar así el tamaño de los elementos de cada vista o su contenido, pero también puedes hacerlo dinámicamente gracias a los nuevos eventos de página OnWindowResize y especialmente OnAdaptativeViewChange, este último se lanza cuando pasas de un vista a otra.

Tienes también nuevas opciones de borrado de un elemento: borrar de todas las vistas o eliminar solo en las vistas.

Podéis ver aquí un ejemplo muy sencillito de Responsive Design con Axure 7: si redimensionas el navegador, cuando la anchura es menor de 768px, se muestra una vista diferente donde los elementos están dispuesto de otra manera.

Nuevos eventos de página, OnWindowScroll para Parallax Scrolling

He comentado los nuevos eventos onWindowResize y OnAdaptativeViewChange. Otro evento nuevo de página que ofrece muchas posibilidades es OnWindowScroll.

La opción de incluir interacción en el OnWindowScroll nos va a permitir por ejemplo simular un Parallax Scrolling.

Podéis ver un prototipo creado con Axure 7 que simula un Parallax Scrolling en Ejemplo de Parallax Scrolling y descargar el .rp del ejemplo de Parallax Scrolling con Axure 7.

No hay eventos pensados para dispositivos móviles

En comparación con Prototyper se echan en falta eventos propios para dispositivos móviles. Han incluido algunos eventos nuevos pero siempre relacionado con el ratón o el teclado pero no gestuales.

Nuevo widget "Repeater" para crear listados de elementos

Una de las grandes ventajas que vimos en Prototyper es que permitía con mucha facilidad emular una BD para poder aprovechar los datos en diferentes páginas del prototipo: listarlos en una tabla paginada o en un desplegable, añadir nuevos campos, borrarlos, modificarlos, etc.

Axure 7 incluye como novedad el elemento "Repeater" con un objetivo similar. En el Dataset del elemento defines los campos e introduces los valores (texto, imagen o enlace):

Jugando con las opciones de formato y las posibilidades de interacción, puedes lograr listados paginados (en formato lista o cuadrícula), con opción de ordenación o con opciones de añadir e eliminar registros. Sin embargo llevarlo a cabo resulta complejo y poco intuitivo.

La web de Axure dispone de un ejemplo de tabla de productos creada con "Repeater" y se puede descargar el .rp

Otras novedades en los widgets

Las cosas que más me han llamado la atención en relación con las novedades en los widget son:

• Los campos de tipo texto ahora admiten tipos de HTML5: número de teléfono, email, búsqueda, etc. Además se puede incluir un "hint text" (y editarse su estilo), es decir, un texto por defecto en el campo que se borra automáticamente cuando coge el foco.
• Por fin se puede indicar que los paneles dinámicos se ajusten automáticamente a su contenido.
• Desgraciadamente sigue siendo igual de difícil trabajar con las tablas, pues no incluyen opciones básicas como unir celdas.

Visualización del prototipo

En la columna izquierda, donde si sitúa el árbol de páginas, hay ahora nuevos iconos.

• Ver una determinada vista en caso de usar Responsive Design.
• Resaltar elementos dinámicos como vimos en Prototyper
• Ver y resetear variables (Axure tiene variables globales también)
• Ver la URL de la simulación con o sin site map

Prototyper o Axure

Para trabajar con prototipos que emulen un Responsive Design, Axure 7 parece mejor opción.

Para prototipos pensados para dispositivos móviles es mejor Prototyper, aunque solo sea por sus eventos gestuales y sus opciones de simulación.

Para prototipos sencillos cualquiera de las dos opciones sobra. Cuando los prototipos son de aplicaciones web que necesitan simular mucha interacción... me lo pensaría, pero creo que si tuviera que trabajar con muchas tablas, como en una herramienta de gestión, de banca, etc. me acabaría decantando por Prototyper.

Artículos relacionados:

• Prototyper, herramienta de prototipado: web, móvil, responsive design
• UsabilityTools, suite de herramientas UX
• UserZoom, una herramienta profesional para consultores UX
• Test de usabilidad y accesibilidad con usuarios en remoto con Loop11
• Test de usabilidad y accesibilidad con usuarios en remoto con Loop11
• Listado de validadores de usabilidad y accesibilidad

Prototyper, herramienta de prototipado: web, móvil, responsive design

Prototyper es una gran herramienta de prototipado, muy parecida a Axure y superior a esta en varios aspectos. Permite prototipar portales y aplicaciones web, incluso aquellas que requieren una gran complejidad de simulación de interacción, o simular con facilidad responsive design. También ofrece mucha potencia de prototipado para dispositivos móviles concretos.

La versión profesional, que es la que voy a evaluar en este artículo, es de pago, con un precio entre los 19-29$ al mes. Tiene una versión de prueba completa de 30 días. También tiene una versión gratis pero con muchas menos funcionalidades.

Es una aplicación local disponible para Windows XP, 7 y 8, y para Mac OSX 10.6+

Comparándola con Axure, Axure 7 también está disponible para Windows y Mac, también tiene una versión de prueba de 30 días y su precio es de 289$ para la versión estándar y 589$ para la versión Pro. Si ya tenías la licencia de una versión anterior, la actualización a la nueva versión es gratis.

Ver reseña de las Novedades de Axure 7

Tipo de prototipo

En primer lugar podrás elegir la resolución para comenzar a trabajar, o bien seleccionar un dispositivo concreto.

Tipos de widget

Tienes disponibles muchos elementos para incluir en el prototipo (y se pueden importar más librerías) Todos los elementos se pueden copiar, pegar, eliminar, bloquear, duplicar, añadirles comentarios, ordenar, grabar como imágenes o añadirles un evento (como veremos más adelante)

En el apartado de propiedades de cada elemento se pueden personalizar con bastante detalle: su posición y tamaño (admite posición absoluta, posición siempre en el top, rotación), background (tanto color como imagen), edición de texto (admite edición parcial de una parte del texto), padding, border, alineamiento, sombra o aspectos generales (id, valor, tooltip, oculto)

Static: etiquetas, imágenes, texto y tablas de texto

De estos cuatro elementos el más destacable son las tablas, que admiten más posibilidades de edición que Axure, como por ejemplo la opción de unir celdas.

Sin embargo no se puede incluir un enlace o evento solo a una parte de un contenido (debes simularlo con un ImageMap) algo que Axure ya ha corregido.

Al incluir una imagen permite voltearla y recortarla.

Shapes: rectángulo, elipse, triángulo, bocadillo, líneas y flechas

Estos elementos se pueden rotar, y al igual que el resto, al redimensionarlos nos va indicando su tamaño.

Containers: paneles dinámicos y tablas dinámicas

Puedes seleccionar cualquier conjunto de elementos y convertirlos en un panel dinámico, o crear directamente el panel e incluir dentro los elementos. Los paneles dinámicos son similares a los de Axure y tienen el mismo propósito, que después podamos modificarlos dinámicamente.

Es muy destacable que permite crear tablas dinámicas, en las que cada celda tiene un ID diferente y que nos permitirá modificarlas dinámicamente con mucha más facilidad que Axure.

Inputs: campos de formulario

Permite incluir campos de texto (normal, password y textarea), radiobutton, checkbox, select, selección de fichero o selección de fecha mediante calendario.

Axure 7 incluye como novedad muchos más tipos de campos de textos, propios de HTML5: email, search, phone, etc.

Navigation: botón, mapa de imagen, árbol y menú

Nos permite crear árboles y menús desplegables.

Data Grids

Uno de los aspectos que más me gusta de la herramienta es que permite simularte una BD (Data Master). Defines los campos y los valores (que pueden importarse y exportarse desde una excel) A partir de ese momento puedes indicar que los elementos que aparezcan en un desplegable o en una tabla (Data Grid) estén tomados del Data Master.

Definición de campos de un Data Master:

Además, si así lo indicas, te creará automáticamente pantallas muy útiles para buscar, añadir, modificar, borrar o ver el detalle de un registro.

Ejemplo de pantalla creada automáticamente a partir de un Data Master. Tiene búsqueda, nuevo, edición, eliminar y detalle. Pop-up con pantalla de añadir nuevo registro.

Definición de valores de un Data Master:

Una vez definido el Data Master puedes incluir en la página un Data Grid con los campos del Data Master que te interese y tantas líneas visibles como indiques. Puedes incluir un "Summary", es decir el número de elementos mostrados del total, y un "Index", es decir la paginación. También puedes indicar que otro elemento, como un desplegable, tome los datos del Data Master:

Axure 7 ha incluido un nuevo elemento "Repeater" con un objetivo similar, pero mi opinión es que el de Axure es menos potente y más difícil de usar (Ver reseña de las Novedades de Axure 7)

Web: PDF, Flash, HTML

Permite embeber un PDF, un Flash o una página web (local, por URL o por inclusión directa de código)

Widget específicos de dispositivos concretos: iPad, iPhone, Android (y Twitter Bootstrap)

Por ejemplo, widget de teclado de iPhone:

Masters

Una característica fundamental que debe tener una herramienta de prototipado es la opción de Masters, es decir, de elementos que puedas reaprovechar en diferentes páginas del prototipo. Prototyper la tiene y es bastante similar a la de Axure.

Eventos e interacción

La herramienta permite crear variables globales (igual que Axure), lo cual puede ser muy útil a la hora de definir la interacción en prototipos complejos.

Otros de los puntos fuertes de la aplicación es la potencia para crear interacciones, con una interfaz que a mí me parece más intuitiva y cómoda de manejar que la de Axure.

Ofrece gran cantidad de eventos:

• De ratón: onClick, onMouseDown, onMouseUp, onDoubleClick, onRightClick, onToggle, onMouseEver, onMouseEnter, onMouseLive, onDrag, onDragEnter, onDrag, onDragStop
• De teclado: onKeyDown, onKeyUp
• Gesture (incluye el giro del dispositivo):
• De página: onPageLoad, onPageUnload, onWindowResize

Permite incluir condiciones:

Las acciones que puedes definir son:

• Enlazar con una página del prototipo, con la página anterior o con una página externa. Puedes establecer efectos de transición o abrirla en un pop-up.
• Cambiar el estilo de un elemento.
• Enseñar u ocultar elementos aplicando o no un efecto.
• Activar un panel aplicando o no un efecto.
• Modificar o seleccionar un valor de un elemento o una variable.
• Pausar, mover o redimensionar un elemento.
• Insertar un elemento en otro.
• Añadir, modificar o eliminar campos de un Data Master
• Mover el foco a un elemento.
• Escrolar.
• Habilitar o deshabilitar un campo.
• Paginar (primera página, página anterior, siguiente página o última página)

Axure 7 incluye como novedad el evento de página OnWindowScroll, que no tiene Prototyper, y que nos permite en Axure simular un Parallax Scrolling (Ver reseña Novedades de Axure 7)

Simulación

En la simulación tienes una columna izquierda, que se puede ocultar, con el árbol de las páginas del prototipo para navegar cómodamente por las mismas. Además puedes indicar que resalte las zonas que tienen asociados determinados eventos, para identificar rápidamente las zonas dinámicas.

Prototipos para dispositivos móviles

Como hemos visto anteriormente, al crear un prototipo puedes seleccionar un dispositivo móvil concreto para el cual creas el prototipo. También hemos visto que tendrás widgets específicos para cada dispositivo móvil y que podrás seleccionar eventos gestuales o de rotación de pantalla.

En el caso de prototipos para dispositivos móviles los puedes simular en el navegador. La simulación incluye el prototipo dentro de una imagen del dispositivo y mediante desplegables puedes seleccionar la rotación y emular con el ratón gestos como pinch o rotate:

Prototipos Responsive Design

Aquí tenéis un ejemplo de prototipo creado con Prototyper que simula un diseño responsive, que se adapta a todas las resoluciones.

La creación de este tipo de prototipos no es automática, hay que trabajársela un poco. Por ejemplo, partiendo de una resolución de 1024, puedes tener una zona de cabecera de 1024 inicial. Después debes crearte un evento onWindowResize cuya acción sea "Resize". En ella indicarás que el ancho de esa zona de cabecera sea "Relative to parent: 100% of parent container width". De esta manera, cuando se redimensiona la página la cabecera también se redimensiona al 100%.

Si quieres que, como en el ejemplo, al reducir el tamaño de pantalla los elementos de la cabecera se simplifiquen, tendrás que jugar también con el evento onWindowResize y con paneles dinámicos con diferente contenido.

Axure 7 trae muchas novedades para simular Responsive Design, con la nueva versión es mucho más sencillo y automático que con las versiones anteriores de Axure o con Prototyper (Ver reseña de las Novedades de Axure 7)

Otras opciones de la herramienta

• Árbol de páginas con ordenación y jerarquía.
• Plantillas de páginas.
• Comentarios y anotaciones.
• Diferentes tipos de vistas de la página (ocultar o no comentarios, marcas de acción, etc.)y zoom.
• Visualización del prototipo en mapa web y creación de escenarios.
• Visualización de las páginas y masters en pestañas como en Axure.
• Exportación como .doc (para mí mejor que la de Axure), .pdf, .html o imágenes.
• Centrar página. Alinear, ordenar y agrupar contenido.
• Publicar y compartir online el prototipo (necesitas cuenta de Usernote)
• Reglas y grid con opción de que los elementos se ajusten automáticamente a la misma.

Axure 7 o Prototyper

Para trabajar con prototipos que emulen un Responsive Design, Axure 7 parece mejor opción.

Para prototipos pensados para dispositivos móviles es mejor Prototyper, aunque solo sea por sus eventos gestuales y sus opciones de simulación.

Para prototipos sencillos cualquiera de las dos opciones sobra. Cuando los prototipos son de aplicaciones web que necesitan simular mucha interacción... me lo pensaría, pero creo que si tuviera que trabajar con muchas tablas, como en una herramienta de gestión, de banca, etc. me acabaría decantando por Prototyper.

Artículos relacionados:

• Novedades de Axure 7: Responsive Design, Parallax Scrolling, Repeater Dataset
• UsabilityTools, suite de herramientas UX
• UserZoom, una herramienta profesional para consultores UX
• Test de usabilidad y accesibilidad con usuarios en remoto con Loop11
• Test de usabilidad y accesibilidad con usuarios en remoto con Loop11
• Listado de validadores de usabilidad y accesibilidad

UsabilityTools, suite de herramientas UX

UsabilityTools es una suite de herramientas online para testing e investigación con usuarios que también incluye utilidades de analítica web.

Es una aplicación muy completa y sencilla de usar que permite realizar gran variedad de pruebas, eso sí, solo está disponible en inglés.

¿Qué estudios se pueden hacer con UsabilityTools?

Están divididos en tres tipos:

• User Experience Suite
  • Survey
  • Web Testing
  • Card Sorting
  • Click Testing
• Conversion Suite
  • Click Tracking
  • Form Tester
  • A/B Testing
  • Visitor Recording
  • Feedback Form
• More
  • Persona Creator
  • Accessibility Evaluation

User Experience Suite

Podéis ver un proyecto de ejemplo con los cuatro tipos de pruebas del User Experience Suite en: Proyecto de ejemplo realizado con UsabilityTools

Os recomiendo que no lo hagáis con Explorer, da errores a menudo.

A la hora de lanzar el proyecto se te proporciona la URL del estudio, pero también se te ofrecen otras posibilidades: crear y personalizar un pop-up para el sitio o la posibilidad de que te busquen los usuarios para el test en base a las características que indiques (país, edad, etc.)

Survey

Nos permite crear cuestionarios con diferentes tipos de preguntas y respuestas: matriz de radio buttons o de checkboxs, respuesta libre, respuesta simple por desplegable o por slider, ordenación de términos o imágenes, etc.

Se puede configurar que las respuestas se muestren en un orden aleatorio y definir si la contestación es obligatoria.

También permite añadir condiciones para decidir, en función de la respuesta del usuario, a que página del estudio se envía al usuario.

Web Testing

Permite definir test con usuarios en remoto: describes la tarea a realizar, la URL de comienzo del test y la página de éxito (exacta o que “comience por”)

Como es habitual en este tipo de test (ya lo vimos en Loop11 o en UserZoom) en la parte superior de la pantalla se muestra la descripción de la tarea y los botones para continuar.

Card Sorting

Permite realizar pruebas de cardsorting abierto y cerrado. En el primer caso el usuario puede definir las categorías en las cuales agrupar los términos propuestos, y en el segundo caso nosotros definimos las categorías.

En la siguiente imagen vemos un ejemplo de cardsorting cerrado realizado con UsabilityTools.

Click Testing

Permite mostrarle un pantallazo al usuario, hacerle una pregunta y testear dónde hace clic. Por ejemplo podemos preguntarle dónde buscaría un determinado apartado o producto.

Se puede configurar si permitimos un solo clic o varios clics. En el siguiente ejemplo vemos un test de este tipo en el que se permiten varios clics. Cada uno de los clics aparece señalado en pantalla y el usuario puede eliminarlo si lo desea.

Podéis ver un proyecto de ejemplo con los cuatro tipos de pruebas del User Experience Suite en: Proyecto de ejemplo realizado con UsabilityTools

Conversion Suite

Click Tracking

Mediante la inclusión de un script en tus páginas podrás consultar dónde realizan clic tus usuarios. Puedes consultar los mapas de calor y clics, estadísticas para áreas particulares de interés, hacer el seguimiento para diferentes estados de elementos interactivos, etc.

Form tester

Permite analizar el comportamiento e interacción de los usuarios con un formulario de tu web.

Es un test que no incluyen otras suites y que resulta muy útil pues, mediante la inclusión de un script en la página, recoge datos sin interferir con los usuarios.

Podrás analizar el tiempo general de interacción con el formulario y el tiempo concreto en cada campo, el último campo con el que han interactuado antes de abandonar el formulario, cuántas veces corrigen cada campo, etc.

A/B Testing

Este tipo de test consiste en hacer un pequeño cambio en el diseño o estructura de una web y observar cómo afecta al comportamiento de los usuarios.

Como veis en la siguiente imagen, permite definir diferentes variantes de la página de una manera muy sencilla o definir los objetivos de conversión.

Visitor Recording

Grabará en vídeo el comportamiento de los usuarios que accedan a tu web, para ello es necesario incluir un script en las páginas.

Registra toda la sesión (clics, pulsaciones de teclas, scroll realizado, las acciones en las pestañas del navegador, etc.) y posteriormente permite editar, etiquetar, anotar o descargar el vídeo.

Feedback Form

Con esta utilidad puedes crear un formulario o encuesta, por ejemplo para preguntarle al usuario qué opinión le merece nuestro sitio:

 

More

Persona Creator

La definición de “Personas”, arquetipos de usuarios de nuestra web que representan patrones de conducta, objetivos y necesidades, es una de las principales técnicas UX.

Esta herramienta permite definir la plantilla, rellenarla para cada “persona” y guardarla en PDF.

Accessibility Evaluation

La evaluación se realiza mediante la solicitud de una URL. La herramienta te indica los errores, advertencias y sugerencias sobre un pantallazo de la página.

La información sobre cada uno de estos indicadores es muy breve. Indica que evalúa de acuerdo a las WCAG pero no en base a qué versión de las mismas.

Analizar los datos

Los datos se pueden visualizar en pantalla o descargar en formato CSV y XLS o SVG en el caso de los gráficos.

Tienes una visión general del proyecto y un apartado separado para cada una de las pruebas definidas.

Por ejemplo, en el User Experience Suite, los datos de la vista general son:

• Nº de personas que respondieron, así como el número de personas que completaron o abandonaron el estudio.
• Gráficas comparativas de las diferentes tareas por los siguientes datos:
  • Success/fail/abandon rate
  • Average task time
  • Average page views

En función del tipo de estudio los resultados se muestran de una u otra manera, normalmente de una forma bastante visual. Los datos que se ofrecen pueden ser suficientes en muchos casos pero en otros pueden resultar insuficientes, en este sentido otras suites ofrecen mucha más información.

NO incluye opciones útiles como la posibilidad de grabar las sesiones del estudio, poder aplicar filtros sobre los datos cuando tienes gran cantidad de ellos o controlar la calidad de los resultados (por ejemplo excluyendo a los que realizaron menos clics de los que indiques o estuvieron menos de x segundos en una o varias tareas) Tampoco se ofrece información sobre el dispositivo, sistema operativo, navegador o resolución de pantalla de los usuarios que hicieron el estudio.

A continuación vemos una imagen de los resultados de un test con usuarios, donde por ejemplo hubiera sido útil incluir un clickstream para consultar el flujo de navegación.

En la siguiente imagen se ve la presentación de los resultados de un cardsorting.

Puede ser suficiente, pero hay que tener en cuenta que otras herramientas ofrecen una análisis más detallado con dendogramas y matrices de distancias.

Opciones de configuración y precio

Dispone de algunas opciones básicas de configuración:

• permite decidir si se enseña o no al usuario las instrucciones generales de funcionamiento de cada tipo de test
• se puede cambiar las etiquetas de los botones
• se puede configurar que el proyecto termine después de determinado tiempo o de determinado número de contestaciones al mismo.

Sin embargo NO tiene otras opciones avanzadas que sí presentan otras suites, por ejemplo que se pueda o no contestar varias veces desde el mismo ordenador, poder incluir o excluir determinadas IPs, o poder restringir el test a determinados dispositivos o navegadores.

La herramienta es de pago aunque puedes probarla gratuitamente durante 14 días. El precio más económico es de 29 euros al mes por una suscripción anual en su modalidad básica. Si os interesa la herramienta, del 14 al 30 de noviembre del 2013 tendrá un descuento del 40%.

Por cierto, si la vais a probar os recomiendo que no lo hagáis con Explorer pues se cuelga bastante. Con Chrome va bastante bien.

Otras herramientas similares evaluadas anteriormente

• UserZoom, una herramienta profesional para consultores UX
• Test de usabilidad y accesibilidad con usuarios en remoto con Loop11

Puedes consultar una lista completa de herramientas de accesibilidad y usabilidad en Mis validadores

UserZoom, una herramienta profesional para consultores UX

En este post os voy a hablar de UserZoom, una herramienta profesional muy potente para testing e investigación con usuarios.

Participa en un test de ejemplo creado con UserZoom para evaluar la usabilidad de este sitio

El test contiene diferentes tipos de testing: cardsorting cerrado y abierto, dos tareas de un típico test con usuarios, tree testing, five second test y un screenshot click testing.

¿Qué tipo de estudios se pueden hacer con UserZoom?

Cardsorting cerrado

Qué es

Un cardsorting cerrado es una técnica que se utiliza en la creación y validación de la arquitectura de información de un sitio web. Se definen una serie de categorías y se pide al usuario que incluya los items propuestos dentro de una de dichas categorías.

Qué permite UserZoom

• Definir las categorías y los items y asignarles opcionalmente una descripción alternativa.
• Definir el número de columnas en las que se mostrarán las categorías.
• Definir el orden en el que se mostrarán las categorías y los items: alfabéticamente, aleatoriamente o en el orden en el que se insertaron.
• Definir una página con instrucciones o incluir cuestionarios previos o posteriores al cardsorting.

Cómo realizan los usuarios el test

Cardsorting cerrado de ejemplo creado con UserZoom

Como se observa en la imagen, los usuarios deben arrastrar los items a una categoría.

Cómo es el reporting

Puedes consultar los datos de diferentes formas: en un dendograma, en una matriz de distancias, en tablas de frecuencia (por categoría o por item) o ver las respuestas por usuarios.

Con estos datos, que puedes filtrar y exportar, tendrás la información necesaria para saber qué items son más afines con una categoría y entre sí.

Cardsorting abierto

Qué es

Un cardsorting abierto es una variante de cardsorting en el que se permite a los usuarios definir las categorías en las que van a agrupar los items.

Qué permite UserZoom

Además de lo enumerado en el cardsorting cerrado, permite indicar el número inicial y el número máximo de categorías que puede crear el usuario.

Cómo realizan los usuarios el test

Cardsorting abierto de ejemplo creado con UserZoom

Como se observa en la imagen, es igual que el cardsorting cerrado pero permite al usuario definir el nombre de la categoría y crear nuevas categorías.

Tras la categorización, se puede solicitar al usuario que por cada categoría confirme su nombre y los items que incluyó en ella, así como que explique brevemente por qué considera que esos items deben estar juntos.

Cómo es el reporting

Es similar al del cardsorting cerrado.

Test con usuarios

Qué es

Un test con usuarios se basa en proponer una serie de tareas al usuario (encontrar una determinada información, realizar una compra, etc.) para estudiar las dificultades que se encuentran a la hora de llevarlas a cabo y mejorar en consecuencia la usabilidad del sitio.

Qué permite UserZoom

• Definir la tarea: la descripción larga y abreviada de la misma, la URL en la que comienza, los botones que se mostrarán y a qué página navegarán, o si la tarea expirará si el usuario tarda más de x tiempo en responder y lo que ocurrirá entonces.
• Definir la forma de validación, que puede ser:
  • mediante una pregunta, para lo cual definirás la/s pregunta/s y la/s contestación/es correcta/s, con la posibilidad de incluir lógica (AND, OR)
  • y/o
  • una validación por URL, definiendo las URL para las cuales se considera la tarea completada correctamente y qué acción se hará al llegar a ellas.
• Definir opcionalmente cuestionarios previos y posteriores al test o a cada tarea, o bien sólo tras realizar con éxito o no una tarea. También se pueden crear cuestionarios que solo se muestren cuando el usuario acceda a determinada URL, por ejemplo para preguntarle por qué navegó hasta esa página.
• Grabar en vídeo si se desea las sesiones. Permite grabar o excluir de la grabación solo determinadas páginas o dominios. También se puede grabar en vídeo solo si el usuario contestó a determinada pregunta de determinada manera. No se graban páginas HTTPS por seguridad, para ello es necesario un permiso especial. Tampoco se grabarán sesiones de más de 10 minutos. Las sesiones se grabarán para usuarios de Chrome y Firefox.

Cómo realizan los usuarios el test

Tras la página de descripción de la tarea, el usuario verá la URL de comienzo de la tarea con una barra que le recuerda la tarea que debe realizar y los botones que se hayan definido.

Test con usuarios con UserZoom

Cuando llegue a la/s URL que se han definido como correctas se lanzará la acción definida (un mensaje, ir a la siguiente tarea, permitirle que siga navegando)

Si la validación se ha definido con cuestionario se le mostrará a continuación.

Cómo es el reporting

Por el conjunto de las tareas y por cada tarea tenemos diferentes pestañas para ver los resultados:

• Ratio & Responses: página principal con los resultados en gráficas y tablas sobre los que puedes aplicar filtros.

  

  Página principal de resultados de una tarea en UserZoom

• Clicks & Paths: para ver el clickstream, con diversas opciones para personalizarlo, por ejemplo se puede humanizar las URL poniéndoles nombres que las identifiquen o excluir dominios irrelevantes para el estudio.

  

  Clickstream en los resultados de una tarea en UserZoom

• Vídeos: podemos ver los vídeos de las sesiones, se graba un vídeo por cada tarea de cada usuario. Se pueden realizar diversas acciones, por ejemplo, recortar los vídeos para dejar solo las partes que nos interese analizar o aumentar la velocidad de visualización. En los vídeos podremos ver donde estaba el cursor en todo momento durante la navegación del usuario.

  

  Vídeo de una tarea realizada por un usuario en UserZoom

• Options: donde puedes importar o exportar datos (a Word, PowerPoint, Excel, SPSS, de todos o solo de algunos de los participantes en base a los filtros que hayas definido) También puedes consultar la lista de participantes y las acciones asociadas como la exclusión de uno o varios de ellos.

Tree testing

Qué es

Un tree testing es una técnica que ayuda a evaluar la arquitectura de información de un sitio web. Consiste en que el usuario indique dónde esperaría encontrar un item propuesto dentro del menú de navegación.

Qué permite UserZoom

• UserZoom entiende un tree testing como un tipo de cuestionario, y por tanto se puede definir si la pregunta que se realiza es o no obligatoria y si se navegará automáticamente a la siguiente pregunta una vez contestada. También permitirá añadir condiciones y lógica para la navegación entre diferentes preguntas del cuestionario.
• Definir el tipo de árbol y sus items y marcar qué respuestas se consideran correctas (permite pegarlas desde una excel o fichero de texto)
• Definir si las opciones se presentarán aleatoriamente, pudiendo indicar que el orden sea aleatorio solo desde un determinado nivel.

Cómo realizan los usuarios el test

Tree testing de ejemplo creado con UserZoom

Como se observa en la imagen, el usuario podrá navegar por el árbol definido y seleccionar el ítem que considera correcto.

Cómo es el reporting

Se puede ver el árbol con el porcentaje o el número de usuarios que seleccionaron cada opción; o se puede acceder a una visualización de los datos mediante gráficas y tablas.

Five second test

Qué es

Es una herramienta de evaluación de usabilidad que consiste en que una serie de usuarios vean una página durante 5 segundos. A continuación los usuarios deben contestar a una o varias preguntas.

Se puede utilizar para comprobar si el portal refleja claramente la empresa u organización que hay detrás de él, el objetivo y finalidad del mismo,o si los elementos que destacan son los esperados.

Qué permite UserZoom

• UserZoom permite hacer un screenshot timeout, es decir mostrar una imagen durante x segundos.
• Podremos subir la imagen o indicar una url para que se genere un snapshot automático, así como definir su alineamiento y mostrar o no los segundos restantes y en qué posición de pantalla aparecerán.

Cómo realizan los usuarios el test

Five Second Test de ejemplo creado con UserZoom

El usuario verá el pantallazo durante los segundos definidos y posteriormente se le mostrará un cuestionario, por ejemplo con una pregunta “¿Sobre qué trata este blog?”

Cómo es el reporting

Varía según el tipo de pregunta realizada: abierta, selección excluyente o no entre varias opciones, matriz, etc.

Screenshot Click Testing

Este test de UserZoom permite definir una pregunta al usuario, por ejemplo dónde buscaría un determinado apartado o producto. A continuación se definen zonas sobre un pantallazo de nuestra web indicando cuáles de esas zonas de pulsación son las correctas para la pregunta formulada.

Definición de áreas en un Screenshot Click Testing de UserZoom

En el informe podremos ver gráficas y tablas de datos, así como el mapa de calor y el mapa de clics, de todos o solo del primero y/o segundo clic y/o tercer clic, etc. También podemos indicar que se muestren sobre los mapas las líneas de las diferentes resoluciones de pantalla, para saber cuánta zona de pantalla veía el usuario.

Visualización de datos en formato heatmap, clickmap, darkmap de un Screenshot Click Testing de UserZoom

Cuestionarios

He explicado los cuestionarios especiales, pero se pueden realizar cuestionarios normales con diferentes tipos de respuestas: elegir una o varias opciones, matrices de respuestas, rankings, etc.

Dentro de los rankings hay un tipo, el "Ranking order", que permite que el usuario ordene una serie de ítems, por ejemplo por el nivel de importancia que considere.

También podríamos utilizar el potencial de UserZoom para crear test A/B

Cómo lanzar el test

Hay diferentes opciones:

• Puedes lanzarlo automáticamente cuando accedan a tu sitio o a determinada página del mismo.
• Puedes incluir una pestaña para solicitar la opinión de los usuarios, por ejemplo lo tienen actualmente en la web de Sanitas en la esquina inferior derecha del sitio.
• Puedes utilizar directamente el enlace del test, como hago yo en el ejemplo que os propongo. Se pueden crear enlaces diferentes para cada perfil definido o incluso para cada participante.
• Si el estudio requiere tracking, es decir, saber el comportamiento del usuario (dónde pulsan, las URL por las que pasan) puedes elegir dos opciones:

  • add-on, el usuario deberá instalarse en su máquina un complemento, lo cual se le solicitará al comenzar el test. Es útil si no quieres o no puedes incluir JS en tu sitio, por ejemplo para evaluar sitios de la competencia. Al final se dan instrucciones para desinstalarlo. La grabación en vídeo de las sesiones solo está permitida si seleccionas add-on.

    

    Solicitud e instalación del add-on de UserZoom en Firefox

  • incluir código JS en la página, tendrás también la opción de tener un código permanente para todos los estudios para evitar la  necesidad de incluir nuevos códigos cada vez que creas un estudio.

Características generales de los proyectos

A nivel de proyecto tiene muchas funcionalidades que te permiten hacer casi cualquier cosa:

• puedes crear cualquiera tarea (denominación genérica para cualquiera de los test que he comentado en primer lugar) Puedes crearlas desde cero o copiarlas desde otro proyecto; puedes ordenarlas, agruparlas, definir con mucha libertad la aleatoriedad de las mismas o de los grupos definidos.
• gestión de imágenes a utilizar en el proyecto.
• gestión de redirecciones o textos a nivel de proyecto (cuando no reúnes los requisitos necesarios para realizar el test, cuando ya has alcanzado la cuota máxima de usuarios que definiste, etc.)
• permite la personalización del look&feel de las pantallas del test o del destacado que incluyes en el sitio para pedir el feedback de los usuarios.
• además de poder seleccionar el idioma del proyecto puedes modificar los literales predefinidos para ese idioma (texto de los botones, etc.)
• creación de perfiles de usuarios, por ejemplo podrías definirte diferentes perfiles por edad, localización, por forma en la que accedieron al test, etc.
• definir una cuota de participantes, el tiempo de vida del proyecto, si se permiten varias pruebas por ordenador, etc. Puedes restringir las IP desde las que se puede realizar el estudio o incluso seleccionar desde qué navegadores te interesa solo que se realice el test (IE6, IE7, IE8+, Firefox, Chrome)
• Además de los resultados generales del estudio y de cada uno de los test que incluye, podrás ver los resultados por los perfiles de usuario que hayas definido, y otra información general como el sistema operativo, navegador o resolución de pantalla de los usuarios.
• Tienes opciones para controlar la calidad de los resultados, excluyendo por ejemplo a los que realizaron menos clics de los que indiques o estuvieron menos de x segundos en una o varias tareas.
• La posibilidad de incluir condiciones y lógica en los cuestionarios nos permite gran control de navegación entre las tareas o las respuestas dentro de un cuestionario, por ejemplo que en función de una pregunta inicial sobre su edad se les muestre un determinado test u otro, que en función de una respuesta se les muestre una pregunta o tarea diferente, etc.

Otras características generales de la herramienta

Además de la gestión de proyectos tiene también una gestión de equipos de trabajo y de los miembros de dichos equipos.

La interfaz está solo en inglés y permite cierta personalización del menú de tareas.

También se pueden crear estudios específicos para apps y para web dispositivos móviles.

Conclusiones

UserZoom es una herramienta profesional muy potente que te permite hacer prácticamente de todo en lo que a testing con usuarios se refiere. Aunque es imposible detallar todo lo que tiene creo que os he dado una visión bastante completa.

La verdad es que la primera vez que accedí al panel de control me abrumé un poco, pero con un par de horas de formación y después crear el primer estudio, es sencillo hacerse con la herramienta.

Supongo que si habéis llegado hasta aquí lo que os estaréis preguntando es cuánto vale. Es su web podéis consultar el plan de precios y solicitar un presupuesto personalizado en función de las funcionalidades y administradores que necesitéis. También podéis consultar los clientes que utilizan Userzoom.

Hay otros temas que no he tratado como la seguridad de los datos, la integración con Google Analitycs y su adecuación a los estándares de accesibilidad que podéis consultar en su web en Características de UserZoom.

Participa en un test de ejemplo creado con UserZoom para evaluar la usabilidad de este sitio

El test contiene diferentes tipos de testing: cardsorting cerrado y abierto, dos tareas de un típico test con usuarios, tree testing, five second test y un screenshot click testing.

Estudios realizados con UserZoom

• Claves del estudio de Userzoom sobre la experiencia de los usuarios de tablet y móvil en portales de reserva de hoteles y viajes, 2014
• Claves del "Estudio de usabilidad en tablet de e-commerce de moda" de UserZoom, 2013

Artículos relacionados:

• Listado de validadores de accesibilidad y usabilidad
• Test de usabilidad y accesibilidad con usuarios en remoto con Loop11
• Prototyper, herramienta de prototipado: web, móvil, responsive design
• UsabilityTools, suite de herramientas UX
• Novedades de Axure 7: Responsive Design, Parallax Scrolling, Repeater Dataset

Test de usabilidad y accesibilidad con usuarios en remoto con Loop11

Participa en el test de ejemplo preparado con Loop11 para evaluar la usabilidad de esta web

En este artículo os voy a hablar de la herramienta Loop11 para realizar test con usuarios en remoto, una herramienta online que es francamente buena. Resulta muy sencilla de usar tanto para el evaluador que define el test como para las personas que lo llevan a cabo. Además, la información que proporciona sobre los resultados del test es fantástica.

Siempre es preferible poder realizar un test con usuarios presencialmente, pero si no es posible, los test en remoto son una alternativa a tener en cuenta, pues permiten por ejemplo poder testear con muchos usuarios o con usuarios de una determinada zona geográfica.

Loop11 es una gran opción que permite realizar el test en abierto o restringiendo el acceso por IP; o reclutar participantes por perfil (según sexo, rango de edad, nivel de estudios, etc.) así como usuarios con diferentes discapacidades.

Crear el test

La creación del test se realiza en cinco pasos:

Información general del test

En esta página puedes incluir el título y el texto introductorio. Puedes además indicar el idioma del test y si quieres que se le muestre a los usuarios una página inicial con las instrucciones para realizarlo.

Estas son las dos primeras pantallas del test generado

Definición de las tareas o las preguntas

Se pueden definir tareas que el usuario debe llevar a cabo o bien preguntas que debe responder.

La tarea se define con un nombre y un texto que la describa, con la URL en la que se comienza la tarea y con la/s URL/s a las que debe llegar el usuario para considerar que la tarea se ha completado con éxito.

Las preguntas admiten diferentes formatos de contestación (radios y checks, en vertical o en horizontal, texto libre) y pueden ser o no obligatorias para pasar a la siguiente tarea.

Los usuarios que realizan el test verán una barra sobre el sitio web, con el porcentaje de cumplimentación del test, la tarea que debe realizar y dos botones: "Abandonar tarea" y "Tarea completada" (si considera que la han llevado a cabo con éxito)

También existe otra manera de visualizar el test con una capa siempre presente en la página que has de mover para que no tape el contenido y que es mucho más incomoda. Podéis ver la diferencia entre ambas formas con mi test de ejemplo:

• Test de ejemplo con la barra siempre fija en la parte superior
• Test de ejemplo con la barra sobre el contenido (menos recomendable aunque es más rápido de cargar)

Opciones del test

En el tercer paso se puede indicar:

• El número de participantes que te gustaría tener para completar la evaluación.
• El texto de agradecimiento que se muestra a los participantes que terminan el test.
• Si deseas que tras terminar el test naveguen a una página determinada, puede ser por ejemplo interesante para incluir algún tipo de cupón por haberlo llevado a cabo.
• La posibilidad de incluir un ID único a cada participante, pensado también para ofrecer incentivos por realizar el test.
• Si se permite o no múltiples respuestas por IP

• La posibilidad de restringir las participaciones por IP: permite añadir y excluir rangos de IPs

Invitar a participantes

Las opciones para invitar a los participantes son cinco:

• Generar un URL del test que podamos distribuir
• Generar una invitación a incluir en nuestro sitio, irá restando las invitaciones disponibles en función del número de participantes que has definido
• Reclutar participantes con Ethnio o Cint OpinionHUB en base al perfil que definas (sexo, edad, nivel de estudios, etc.)
• Reclutar participantes con diferentes discapacidades

Previsualizar el test

En el último paso podemos previsualizar el test antes de generarlo.

Resultados del test

El panel de resultados es fantástico, ofrece mucha información y de forma muy clara y gráfica, con posibilidad de exportar los informes a Excel XML, CSV y PDF.

Se pueden filtrar los resultados para ver, por ejemplo, solo los resultados de los participantes que lo han completado; para excluir a los que fallaron en base a determinados criterios, lo cual permite asegurar la calidad de los resultados (por tiempo empleado, clics realizados, número de tareas fallidas, etc.)

Los resultados se pueden ver detallados por cada tarea, por cada pregunta y por cada participante. Además de datos concretos, estadísticos y gráficas, se puede por ejemplo consultar la ruta de navegación que siguió cada usuario para cada tarea de forma muy visual:

o en formato mapa de clics:

Precio

El primer test es gratuito, con un número limitado de tareas y preguntas. Después cada test, sin límites, cuesta 350 dólares (actualmente unos 267 Euros), un precio asequible en un entorno profesional. También tiene una licencia anual para hacer un número ilimitado de test por 1900 dolores.

Participa en el test de ejemplo preparado con Loop11 para evaluar la usabilidad de esta web

Más herramientas para test en remoto:

• OpenHallway
• TryMyUI

Artículos relacionados:

• Listado de validadores de accesibilidad y usabilidad
• UserZoom, una herramienta profesional para consultores UX
• UsabilityTools, suite de herramientas UX
• Prototyper, herramienta de prototipado: web, móvil, responsive design
• Novedades de Axure 7: Responsive Design, Parallax Scrolling, Repeater Dataset

Artículo anterior:

Reseña de “Pro HTML5 Accessibility”