Revisión Comprensiva de herramientas UX para sitios webs (UI-Patterns.com)

Escrito por: Anders Toxboe


Traducido por: Alexis Brantes




Esta es una Traducción con la autorización de ui-patterns.com | it was translated with ui-patterns.com from permission. Puedes leer el texto original aquí


Test de Usabilidad, Desarrollo de Mock Up, Prototipado, Validación de ideas de Diseño, Comunidades de Diseño, Feedback de los Consumidores, y Recuperar las Acciones de los Usuarios Reales del sitio web, son todas herramientas vitales que ayudan a crear un sitio web exitoso. 




A continuación verás una lista exhaustiva de 63 Herramientas de UX que te ayudarán a construir experiencias web trascendentes. Las Herramientas están categorizados como: 

  • 01.- Test de Usabilidad Remota
  • 02.- HUM Test de Usabilidad (“DIY” o "Do It Yourself" en inglés, "Hágalo Usted Mismo” o “HUM” en Español)
  • 03.- Prototipado y MockUps
  • 04.- Retroalimentación de Diseño
  • 05.- Comunidades de Diseño
  • 06.- Retroalimentación del Consumidor (Customer Feedback)
  • 07.- Mapas de Calor y Grabación de Usuarios
  • 08.- A/B Testing
  • 09.- Velocidad de Páginas
  • 10.- Otras Herramientas UX
 
 

Test de Usabilidad Remota (Remote Usability Testing)

Una serie de empresas se ha especializado en la conducción de estudios de Usabilidad remotamente, por su parte, usan a participantes de prueba que corresponden a directrices demográficas que tu proporcionas. Ellos se toman la molestia de encontrar las respuestas por ti y se hacen tiempo para sentarse con los participantes y luego analizar los resultados.
 

WhatUsersDo Remote Usability Testing
WhatUsersDo te ayuda a entender porqué tus consumidores hacen lo que hacen por medio de grabaciones de gente real hablando de sus pensamientos sobre como utilizan tu sitio web, app o prototipo.

Try My UI Remote Usability Testing
TryMyUI  te dará un video narrado con pantalas de usuarios de como ellos/ellas utilizan tu sitio web y qué es lo que ellos dicen o piensan cuando realizan diversas tareas. Así como los resultados de un Estudio Cualitativo, el cual entregan una vez que finalizan un Test de Usabilidad.

Userlytics Remote Usability Testing
Userlytics  reclutará usuarios de test que se ajusten al perfil demográfico que buscas y les permitirá testear tu interfaz, el cual puede ser cualquier tipo digital; Producción de una Aplicación, Wireframes, Mock-ups, URL o incluso video.

UserTesting Remote Usability Testing
UserTesting  entrega videos de gente real hablando sobre sus pensamientos cuando utilizan tu sitio web, Aplicación móvil, o prototipo. Con acceso a mas de 1 millón de usuarios, prometen resultados dentro de una hora, incluso puedes proveer tu propio panel de Usuarios de Testeo.

Feedback Army Remote Usability Testing
Feedback Army  la alternativa de Test de Usabilidad Remoto más barata. El servicio te permite realizar una serie de preguntas sobre la website que serán respondidas por los entrevistados, pronto tendrás como mucho 10 respuestas en texto (Sin Video).

UserFeel Remote Usability Testing
Con UserFeel, ingresas tu URL, Escribes un Escenario y agregas una Tarea, como resultado recibirás videos de tus usuarios revisando tu sitio web. UserFeel promete resultados en 24 horas, incluso registran entregas de resultados en 6 horas. Entregan un soporte multo-lenguaje y si deseas hacer negocios, te entregan una versión de etiqueta blanca para que la vendas.

UserZoom Remote Usability Testing
UserZoom  te entrega Test Remotos de Usuarios y Herramientas de Estudio que te permiten comprender mejor a tus usuarios.

Loop11 Remote Usability Testing
Loop11  es una herramienta basada en la web que te permite testear Sitios Web en vivo. Crear preguntas, invitar participantes y ver los resultados.

UserTribe Remote Usability Testing
UserTribe, una carrera por un estudio de Usabilidad danés, que puede hacer más que una simple prueba de Usabilidad remota. Ellos han separado su suite de pruebas remota en 5 productos diferentes: Prueba de diseño antes del desarrollo, Pruebas de usuario en persona, Prueba de competidores y Referencia, Prueba de conversión de flujos de Check-out, y Pruebas de conversión de flujos de Sign Up. 

Mechanical Turk Remote Usability Testing
Mechanical Turk de Amazon puede ser utilizado para muchas cosas - Incluso Test de Usabilidad. Creas un “HIT” ("Human-Intelligence Task" en inglés, "Tarea de Inteligencia Humana", en español), y describe que es lo que quieres. Solo pagas por una tareas que consideres con una solución aceptable. 


HUM Pruebas de Usabilidad (DIY Usability Test)

Si encontrar participantes para tus estudios de Usabilidad no es un problema, aquí hay productos muy útiles que te asistirán en la conducción de Pruebas de Usabilidad más fácilmente.
 

Silverback DIY Usability Test
Silverback para MAC saca el laboratorio de pruebas de usuario para profesionales UX. Con su cámara incorporada del laptop, Silverback te ayuda a entregar resultados profesionales sin la necesidad de hardware adicional. Silverback es una Aplicación de Revisión de Usabilidad del tipo “guerrillera”.

Usability Studio DIY Usability Test
Usability Studio para Windows entrega test de Usabilidad utilizando la cámara de tu computador. Simultáneamente graba a los usuarios, su actividad en pantalla y su voz.

OpenHallway DIY Usability Test
OpenHallway  es una versión de Silverback y Camtasia completamente basado en la web. Aunque simple, los ventajas de ser un servicio basado en la web están en la facilidad de reclutamiento de Usuarios de Test de Usabilidad remotos. Como es una suite basada en la web, no necesitas instalar software.

Morae DIY Usability Test
Morae  es un producto de TechSmith que te permite grabar y observar remotamente las interacciones de los usuarios, analizar sus resultados y compartir tus descubrimientos.

Camtasia DIY Usability Test
Camtasia  es otro producto de TechSmith que se enfoca en la grabación de pantallas de dispositivos conectados y computadores remotos - y permite editar los videos en algo usable; Desde videos de entrenamiento hasta sumarios de estudios de Usabilidad.


Prototipado y Mock Ups (Prototyping and Mock Ups)

Existe un manojo de Herramientas que ofrecen una amplia paleta de botones, controles, y gráficas para crear maquetas que emulan Aplicaciones reales. Muchos de estas entregan maquetas con áreas de acción real (hace cosas como emular estados de botones, clicks, etc.). 
 

UXPin Prototyping and Mock Ups
UXPin  es una aplicación basada en la web. Te permite crear versiones controladas de prototipos Responsive con colaboración en tiempo real. Escoges entre una biblioteca de elementos de diseño y permite cargas otros archivos al proyecto, tales como personas y modelos de negocio, también permite trabajar con Canvas, para así guardar todo en un solo lugar. 

Invision Prototyping and Mock Ups
Invision es una herramienta de prototipado basado en la web que te ayudará a construir prototipos completamente interactivos con gestos, transiciones y animaciones. Puedes presentar tu maqueta y prototipos en tiempo real utilizando el modo de presentación, el cual permite a todos realizar anotaciones (dibujar) con su propio color y presentar con su propio cursor.


Invision no es solo una herramienta de protiotipado, también te ayudará a presentar tus diseños interactivos remotamente en reuniones en línea.

Axure Prototyping and Mock Ups
Axure es un programa desagradable para MAC y PC que te permite construir elegantes prototipos interactivos.

Proto.io Prototyping and Mock Ups
Proto.io entrega Librerías de UI, animaciones e interacciones para construir rápidamente prototipos interactivos multi-plataforma.

Baslamiq Prototyping and Mock Ups
La poderosa herramienta de prototipado interactivo Baslamiq es conocida por su apariencia de sketch que mantiene a sus pares en el contexto correcto cuando ellos envían su feedback. Balsamiq está disponible como descarga (Mac, Linux, y Windows), así como una versión basada en Flash para la web.

HotGloo Prototyping and Mock Ups
HotGloo es una aplicación basada en la web que te permite crear wireframes interactivos y prototipos desde una librería de elementos de UI.

Concept.ly Prototyping and Mock Ups
Concept.ly es una plataforma de colaboración y prototipado que te permite crear prototipos interactivos que se centran en lo visual y funcionan exactamente como una App. También permite trabajar junto y anotar tus comentarios de diseño.

Mockingbird Prototyping and Mock Ups
Mockingbird es una herramienta basada en la web que en una simple y efectiva forma hace sencillo crear, linkear páginas, visita previa y compartir maquetas de tu sitio web o aplicación.

Moqups Prototyping and Mock Ups
Moqups  es una herramienta basada en la web que te permite construir prototipos interactivos desde una serie de predefinidos elementos de interfaces.

JustInMind Prototyping and Mock Ups
JustInMind  es una aplicación de MAC y Windows que te permite prototipo y diseñar para todas las pantallas (web, móviles y tablets) sin usar código. Con una colección de librerías de widgets pre-diseñados, comenzarás a prototipar muy rápido.

Omnigraffle Prototyping and Mock Ups
Omnigraffle  es una aplicación legendaria que te permite construir prototipos interactivos y formas gráficas con una amplia paleta de stencils.

Gliffy Prototyping and Mock Ups
Gliffy  es una aplicación de diagrama basada en la web que permite de construir todo, desde flowcharts, diagramas UML y wiireframes.

MockFlow Prototyping and Mock Ups
MockFlow  es una herramienta de wireframe basado en la web que contiene una paleta de elementos de UI predefinidos.


Retroalimentación de Diseño (Design Feedback)

Existe un manojo de Herramientas que ofrecen una amplia paleta de botones, controles, y gráficas para crear maquetas que emulan Aplicaciones reales. Muchos de estas entregan maquetas con áreas de acción real (hace cosas como emular estados de botones, clicks, etc.). 
 

VerifyApp Design Feedback
VerifyApp  permite recolectar y analizar la retroalimentación en pantalla o maqueta. Ver donde la gente hace clic, que es lo que recuerdan o cómo se sienten. La salida es datos navegables en tiempo real, así como la generación de un PDF.

UsabilityHub Design Feedback
UsabilityHub   permite probar tus diseños y maquetas con gente real. Buscar que es lo que piensan, que es lo que recuerdan y donde cometen errores. Puedes definir un Test de Usabilidad y enviarlo al target demográfico que prefieras.

IntuitionHQ Design Feedback
IntuitionHQ  permite probar tus maquetas (Subes una imagen) para hacer preguntas y permitir respuestas clickeando en tu imagen subida. Mapa de Calor y Reportes son generados para que puedas analizar los resultados.

Chalmark Design Feedback
A primera impresión, Chalmark   es una aplicación que permite testear tus diseños y screenshots. Subir imágenes, fijar tareas, reclutar participantes y mirar mapas de calor de donde tus usuarios hicieron click cuando intentaron llevar a cabo tus tareas.


Comunidades de Diseño (Design Community)

La retroalimentación de tus pares que piensan como tu o que respetas, puede ir más lejos que tu propia comprensión y apreciación del diseño, pero también la crítica constructiva proporciona una ayuda que te permitirá avanzar en tu proyecto.  
 

ConceptFeedback Design Feedback
 Consigue retroalimentación por parte de tus pares y colegas sobre tu sitio web con ConceptFeedback. ConceptFeedback es una comunidad de profesionales del mundo web que dan consejo entre sí sobre conceptos y diseños. 

Dribbble Design Feedback
Dribbble   es una legendaria comunidad de diseño  que si eres afortunado, puedes ser invitado por un notable amigo. Subes piezas de diseño de 800x600px y verás como llega el amor.

Behance Design Feedback
Behance  es una comunidad de diseño que permite a sus miembros mostrar sus trabajos en un bonito portafolio. Sus usuarios suben historias de diseño serio que complementa las imágenes y obtienen retroalimentación de una historia completa por sobre una simple pieza de diseño.

DevianArt Design Feedback
DevianArt  es una de las comunidades de diseño más antiguas que aún mantiene su encanto. Pese a contener más ilustraciones, DevianArt se ha convertido en el check-list de muchos diseñadores web.


Retroalimentación del Consumidor (Customer Feedback)

Nada golpea más fuerte que la retroalimentación de verdaderos clientes y usuarios. Herramientas de Ayuda de Customer Feedback le dan una mano al usuario/consumidor para que puedas recibir su retroalimentación sobre la experiencia que proporcionas en tu servicio/sistema. 
 

UserReport Design Feedback
 UserReport  permite recolectar conocimiento sobre los visitantes de tu sitio web por medios de herramientas de estudio, así como medición de usabilidad y recolección de visitantes demográficamente. Tienen una serie de Entrevistas del tipo “Listo-para-comenzar” como punto inicial, pero también las puedes personalizar con tus propias etiquetas, colores y preguntas. Esta disponible en más de 60 idiomas.

Usabilla Design Feedback
 Usabilla   agrega un botón de retroalimentación (Botón de Feedback) en una posición fija a un costado de tu pagina. Al presionarlo se despliega una encuesta de satisfacción de tu sitio web. Los datos recolectados son presentados de un modo visualmente atractivo que permite resumirlo y sacar conclusiones. La herramienta es personalizaste y permite hacer una variedad de cosas, enlazar a entrevistas externas, difusión de mensajes y más.

UserVoice Design Feedback
 UserVoice  agrega un input simple de texto o formulario personalizable a cualquier página de sitio web y ordena los datos recolectados en una forma manejable.

GetSatisfaction Design Feedback
 GetSatisfaction te ayuda a definir una comunidad de compradores en línea para tu sitio web y permite agregar un botón de feedback para enlazarlo. GetSatisfaction ha sido acusado de crear comunidades para empresas sin su consentimiento. Eliminar la vieja comunidad de UI-Patterns.com ha sido imposible; puedes eliminar tu cuenta, pero no el foro.

Qualaroo Design Feedback
 Qualaroo  te permite entrevistas pop-up focalizadas y registra el tiempo en la página, el número de visitas, referencia los términos de búsqueda en tu propia base de datos interna.

FeedbackLite Design Feedback
 FeedbackLite  te entrega una entrevista personalizable para los visitantes de tu website con una simple pestaña de Retroalimentación de Consumidor y herramienta de reporte.

Doorbell.io Design Feedback
 Doorbell.io  es un widget de retroalimentación gratuito que trabaja en iOS, Android y en tu sitio web e integra un numero de soporte/tickets/manejo de tareas como GitHub, Pivotal Tracker y Jira.


Mapas de Calor y Grabación de Usuarios (Heatmaps & User-Recording)

Grabar todas las acciones del usuario, repetición de acciones y generando Mapas de Calor y formular un análisis basado en los datos recolectados se posiciona sobre los métodos tradicionales de analítica web, donde servicios como Google Analytics no llegan. Nos entregan una perspectiva de donde los usuarios interactúan, se detienen, o abandonan un sitio web. 
 

MouseFlow Heatmaps & User-Recording
 MouseFlow   es una plataforma de analítica “Always-on” (Siempre activa), que te permite reproducir acciones que los usuarios de tu sitio web, así como ver de manera adicional un EyeTracking (Rastreo de retina) y datos de clics en los Mapas de Calor.

ClickTale Heatmaps & User-Recording
 ClickTale entrega una repetición de tus usuarios y analítica de mapas de calor Always-on que integra con Omniture y segmentos de Google Analytics y funciona bien con VWO y Optimizely A/B Tests. Estarás un buen tiempo con su analítica avanzada.

Inspectlet Heatmaps & User-Recording
 Inspectlet  es una plataforma de grabación de usuarios Always-on y mapas de calor que te permite un análisis simple de funnels

SeeVolution Heatmaps & User-Recording
 SeeVolution  produce mapas de calor de las actividades de los usuarios de tu sitio web, mientras visitas tu propio sitio web. Click en un enlace oculto insertado por SeeVolution, ingresas tus credenciales de inicio de sesión y voilà! Mapas de calor esta separados por capas en el top de la pagina que estas visitando. SeeVolution no provee grabación de usuarios.

HotJar Heatmaps & User-Recording
 HotJar  es el nuevo chico en el barrio y provee un reporte-base del movimiento del momees del usuario y grabación de sus clics. Provee Mapas de Calor de las URL que se utilizaran en el reporte. HotJar también entrega una entrevista en-sitio que permite obtener retroalimentación del usuario.

MouseStats Heatmaps & User-Recording
 MouseStats es un generador de Reporte-base, grabación de usuarios y mapas de calor. Es barato y algo básico, pero hace bien su trabajo.

LuckyOrange Heatmaps & User-Recording
 LuckyOrange   es un bien ejecutado servicio de mapa de calor y grabación de usuario que también permite mirar lo que sus usuarios están haciendo en vivo, así como permite ventanas de chat para iniciar el dialogo mientras ellos están en tu sitio. Impresionante.

CrazyEgg Heatmaps & User-Recording
 CrazyEgg  fue una de las primeras empresas en entregar mapas de calor de las acciones de los visitantes de tu sitio web. Su servicio es maduro y corre suavemente, pero necesita aceite en uno que otro lugar.

Navilytics Heatmaps & User-Recording
 Navilytics  es un nuevo servicio que entrega repetición de acciones de usuario, así como mapas de calor para el movimiento del mouse, scroll y clics.

FullStory Heatmaps & User-Recording
 FullStory  captura cada evento del usuario y lo convierte en un interfaz de repetición de sesión limpia. Tiene un mapa de calor deficiente comparado con sus competidores, aunque el interfaz sea muy limpia. 


Pruebas A y B (A/B Testing)

A/B Testing y Split Testing te permiten comparar dos versiones de una página web para ver cual tiene un mejor rendimiento. Dos (o más) variaciones de una pagina se muestran a visitantes similares al mismo tiempo. La que obtiene una mejor calificación de conversión, gana. 
 

Visual Website Optimizer A/B Testing
 Visual Website Optimizer  es una de las suites de A/B Testing para sitios web más antigua. VWO te permite definir A/B Testing por medio de versiones alternativas de tu página, modificando tu sitio existente, así como lo harías con tu inspector web (Inspector web de Safari, Chrome o Firebug). Lo único que necesitas hacer es agregar un javascript a tu página, y VWO se asegurará de que los cambios se muestren diferente (Y constantemente) a los diferentes usuarios de tu sitio web.

Optimizely A/B Testing
 Optimizely  es el nuevo chico del barrio, pero es tan potente como Cisual Website Optimizer. Optimizely ofrece una suite, así como ua poderosa versión web como la que ofrece VWO.

Google Content Experiments A/B Testing
 Google Content Experiments es la actualización de la versión tardía de Google Website Optimizer. Esta integrado en Google Analytics y solo necesitas activarlo en el Analytics en sí. No es tan avanzado como VWO u Optimizely, pero tiene el beneficio que los resultados se integran en Analytics, lo que lo hace una preferida herramienta web para muchos.


Velocidad de Página (Page Speed)

La velocidad de carga de página es uno de los factores más críticos que definen la experiencia del usuario en un sitio web. Los motores de búsqueda, así como usuarios, dan una mala clasificación sitios web lentos. Para ayudar mejorar al web y su experiencia (y conseguir mejores clasificaciones en Google), existe una serie de instrumentos para ayudar optimizar su sitio para hacerlo más rápido.  
 

Google PageSpeed Insights  Page Speed
 Google PageSpeed Insights  permite ingresar una URL y dejar a Google navegarla. En retorno tendrá un puntaje de qué tan rápido carga y sugerencias sobre qué puedes hacer para que cargue rápido. El puntaje también es un indicador de cómo Google te rankeará en términos de performance index.

Pingdom Website Speed Test  Page Speed
 Pingdom Website Speed Test  te permite probar una URL y te entrega mejoras que pueden hacer que cargue más rápido. Pingdom también trackea la historia de performance que la URL tiene.


Otras Herramientas de UX (Others UX Tools)

Cuando conducimos una enorme investigación como esta, algunas herramientas simplemente no entran en la misma caja que el resto, pero aún así deben ser mencionadas.
 

UsabiliTest  Others UX Tools
 UsabiliTest  entrega una serie de herramientas de UX que puedes usar para diseñar flujos de trabajo: Card Sorting, priorización de matrices, evaluación turística, Sistema Escalable de Usabilidad (S.U.S.) y herramientas de Estudios y encuestas.

TreeJack  Others UX Tools
 TreeJack   es una herramienta que permite evaluar estructuras de navegación jerárquicas con tu target de audiencia. Se centra en el test de Estructura de árbol en sí, sin importar el layout

OptimalSort  Others UX Tools
 OptimalSort   es una herramienta de card sorting que te ayuda a encontrar lo que la gente piensa de como tu contenido puede estar organizado y obtener sus impresiones sobre como construir tu Arquitectura de Información.

Ethnio  Others UX Tools
 Ethnio   permite reclutar participantes para investigación de usuario desde tu App, Sitio Web o desde la red. Ethnio se integra con servicios serios como Usabilla, Optimal Workshop y UserTesting.com, y es conocido como una de las formas más confiables para reclutar usuarios.



Esta es una Traducción con la autorización de ui-patterns.com | it was translated with ui-patterns.com from permission. Puedes leer el original aquí · Escrito por Anders Toxboe, Traducción por Alexis Brantes

Hablemos del Diseño y las Emociones IV

La emoción como conexión entre artefactos físicos y organizaciones

Leer artículo

Hablemos del Diseño y las Emociones III

Donald A. Norman enfatiza la importancia de diseñar para respuestas emocionales positivas, estableciendo 3 niveles en diseño. Revisamos su perspectiva.


Leer artículo

Hablemos del Diseño y las Emociones II

En el 2002, Patrck W. Jordan se enfocó a estudiar el placer que causan los productos en los seres humanos y determinó 4 dimensiones. Revisamos su perspectiva.


Leer artículo

Nos apoyan: