Press "Enter" to skip to content

¿Cómo podemos probar con la herramienta UX PIN?

En esta ocasión compartimos un post elaborado por Amalia Cabrera (QA Analyst en Travelgenio) donde nos recomienda el uso de la herramienta UX PIN para incluirla en nuestras pruebas desde la etapa de Diseño. Amalia nos comenta que a pesar de que UX PIN es una herramienta paga que nos ofrece un Free Trial de prueba, es muy útil a la hora de detectar errores desde etapas muy tempranas en nuestros proyectos.

Perfil de Amalia en LinkedIn

UXPin es una herramienta online (paga), que permite a los usuarios interactuar con los prototipos diseñados, unificando elementos interactivos con código y capas, facilitando la colaboración y testeo en línea.

Interfaz Principal de UX Pin

Interfaz Principal de UX Pin

Acerca de la Interfaz principal

No se  estará explicando en detalle el funcionamiento de la herramienta, ya que el rol de Diseñador UX es quien lleva todo lo relacionado con el diseño del sistema. La explicación estará centrada en cómo podemos probar con la herramienta  UX PIN.

Interfaz Design

Se diseña la aplicación con sus respectivas interacciones.

Captura de la ventana Design

Preview Prototype

Nos permite acceder a una nueva ventana, que cuenta con 3 pestañas diferentes:

Simulate
Comment
</> Spec

Pestaña Simulate

  • Muestra el diseño de la interfaz y sus interacciones.
  • Permite el inicio de las pruebas.

Pestaña Comment

  • Muestra la interfaz antes y después de interactuar con la misma.
  • En caso de existir errores, ya se pueden comentar.

Pasos para añadir el Comentario

  • Ubicar el error en la interfaz y hacer click izquierdo.
  • Automáticamente se muestra la interfaz para dejar el comentario identificando el mismo con un número:

Opciones dentro de la ventana Comentario

Error 1

Error 2

Error 3

Captura final después de comentar los errores:

NOTA: El diseñador para ver los comentarios puede seleccionar cada ícono enumerado.

Información de los Paneles 

  • View
  • Comments
Panel View
Panel Comments

Corrección de los errores 

Después de añadir los Comentarios

  • El diseñador soluciona los errores comentados por el probador, en caso de existir.
  • Se actualizan el o los diseños dejando una explicación con la solución en cada comentario.
  • Se actualiza el estado de cada comentario a Resolved.
  • El probador accede nuevamente a la pestaña Simulate y revisa los nuevos cambios y correcciones.

Ejemplo: corrección del Error 1

Captura de las pantallas cuando fueron comentados los errores y cuando se solucionaron.

Diferencias

  • Los íconos de los comentarios cambian de color y estado.
  • La interfaz se muestra diferente a la primera versión.

Resultado Final de diseño!

Pestaña </> Spec

Muestra el diseño de la interfaz, así como la guía de estilos aplicados en la misma.

Componentes dentro de </>Spec

  • Layers: muestra todos los componentes por los que está formado el diseño.
  • Style guide: muestra las propiedades del componente seleccionado en Layers.
  •  Layers y Style guide se complementan.
  •  Style guide permite la navegación hacia otra ventana cuando es seleccionado.

Vista de Layers y Style guide

Vista de Layers y Style guide

Vista de Style guide

Vista de Style guide

Ventajas

  • Probar de una forma dinámica desde la fase de diseño antes de pasar a desarrollo.
  • Posibilidad de mostrar el proceso de diseño e involucrar a todos los compañeros de trabajo en esta fase.
  • La conversión de prototipos en papel a digital, html y wireframes.
  • Colaboración en tiempo real – Google Docs como función de colaboración con nuestro equipo.

Anímate a probarla y coméntanos tu experiencia!

Gracias!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close Bitnami banner
Bitnami