function fullHeightRow() { var fullHeight, offsetTop, element = document.getElementsByClassName('vc_row-o-full-height')[0]; si (elemento) { fullHeight = window.innerHeight; offsetTop = window.pageYOffset + element.getBoundingClientRect().top; si (offsetTop < fullHeight) { fullHeight = 100 - offsetTop / (fullHeight / 100); element.style.minHeight = fullHeight + 'vh' } } } fullHeightRow();

La relación entre el wireframe de UX y la investigación de UX

photo of a book containing various wireframe designs

La relación entre el wireframe de UX y la investigación de UX

En este artículo, vamos a analizar las preguntas:

  • ¿Qué son los wireframes de UX?
  • ¿Cómo se utilizan en el proceso de diseño?
  • ¿Qué podría sustituirlos?
  • Cómo se benefician Investigación UX?

Cuando pensamos en el diseño de un sitio web, lo primero en lo que pensamos la mayoría es en el branding y el estilo de la marca, los colores y las características que arroja nada más cargar la página, y lo tentador que resulta para impulsarnos en nuestro viaje para conseguir lo que necesitamos de ella.

Antes de que esa página de imágenes llamativas, texto inteligentemente escrito y campanas y silbatos giratorios se convierta en una página de código vivo, hay muchos más procedimientos y prácticas necesarios para que cada equipo llegue a una etapa en la que la marca y la entrega se puedan armar.

Cada proceso de diseño comienza considerando lo que los interesados necesitan de sus visitantes y lo que ellos necesitan de los interesados. Las discusiones que impulsan la consecución de cada objetivo son ayudadas a lo largo de su camino con investigaciones en profundidad, ideas, presentaciones y prototipos.

La UX -experiencia del usuario- es la interacción y la transacción agradables del usuario dentro del proceso de su sitio web. El objetivo es proporcionar una experiencia al usuario que le anime a completar, a volver y a recomendar de forma rápida, eficiente y sin esfuerzo.

Los wireframes son una herramienta valiosa que se utiliza en la primera etapa y en las discusiones posteriores de cada viaje de diseño.

¿Qué es un wireframe de UX?

Un diseño web wireframe es la representación más sencilla de su sitio web, normalmente durante las primeras etapas.

Los wireframes nos ayudan a imaginar cómo se ve y se siente el viaje del cliente para el usuario, a decidir qué elementos son importantes, dónde deben ubicarse en la página y cómo llevar al usuario a la siguiente etapa para lograr su objetivo.

Un wireframe de UX guía la comunicación, la organización y el flujo de trabajo. Mantiene a los diseñadores e investigadores centrados en el concepto, sus usuarios y características, y son rápidos y fáciles de entregar o aplicar cambios en el flujo de trabajo.

En cualquier etapa en la que confluyan el diseño, la investigación y el flujo de trabajo, la eficiencia es primordial para los tiempos y los plazos. Por eso, necesitas una herramienta que pueda replantear las ideas de tu última deliberación y que no tenga que volver a un diseñador o a un equipo de presentación solo para avanzar unos simples pasos.

¿Por qué esperar días o semanas cuando un bolígrafo y un papel pueden hacer el mismo trabajo en unos pocos trazos?

Los 3 niveles de diseño de wireframes de UX

  1. Diseño de wireframes de baja fidelidad
  2. Diseño de wireframes de media fidelidad
  3. Diseño de wireframes de alta fidelidad

Dependiendo de la fase en la que se encuentre el proceso y de la investigación que haya realizado, el diseño web en formato wireframe puede parecer tan simple y desaliñado como los bocetos (baja fidelidad).

Progresarán hacia opciones más organizadas (y más comunes) presentadas profesionalmente mediante un software que ofrece diseños y flujos de trabajo más inteligentes y fáciles de imaginar (media fidelidad).

En la parte superior del montón, los wireframes presentan diseños perfectos en cuanto a píxeles (alta fidelidad) con páginas presentadas de forma profesional, a pocos pasos de sus versiones de prototipos de la siguiente fase.

Para las primeras reuniones, el papel y el bolígrafo suelen ser suficientes para empezar a trabajar.

Con una investigación adicional, una mayor reflexión y una deliberación, algo más organizado puede ayudar a cada equipo a considerar qué elementos están funcionando y cuáles no y proporcionar un plan mejor y más estructurado sobre cómo proceder.

Por último, esas presentaciones de alta fidelidad ofrecen una versión esperanzadora y concreta que los diseñadores, los sujetos de prueba y las partes interesadas pueden ajustar antes de pasar a la siguiente fase. Estos son los wireframes que mantienen a todo el mundo en la misma página: son los planos para construir las siguientes etapas del proceso.

¿Por qué utilizar un wireframe de UX?

Un wireframe ayuda a los diseñadores a decidir qué contenido, información y características necesita cada plataforma, cómo podría y debería estructurarse, cómo funciona la jerarquía y qué significa eso para el comportamiento y las expectativas del usuario.

¿Su plataforma satisfará las necesidades de sus usuarios? Un wireframe de UX debe ser capaz de proporcionar las siguientes ventajas:

  • Rápido y fácil de crear, modificar, borrar o rehacer
  • Ayuda a los equipos, a las partes interesadas y a los operarios que participan en el proceso de diseño a comprender cada oportunidad, a mantenerse centrados y a permanecer en la misma página
  • Define y presenta características y operaciones sin utilizar descripciones complicadas ni jerga de diseño
  • Pruebas manuales en las primeras fases sin optar por opciones que requieren mucho tiempo y conocimientos técnicos
  • Las partes interesadas pueden considerar si el producto o la plataforma cumplen los requisitos
  • Para determinar el flujo lógico entre páginas, pantallas y acciones
  • Detección de las carencias y comprensión del recorrido del cliente

UX wireframe - el debate comienza aquí

¿Dónde, cómo, por qué? Estas son las preguntas que debe hacer a cada elemento de su sitio.

Sus respuestas definen la UX y la UI de su sitio web, aplicación u otras plataformas digitales, por lo que cada esquema de UX o UI le ayuda a usted, a sus usuarios y a sus socios a ver el panorama general con mayor claridad dentro de una estructura definida.

Las desventajas del wireframe testing

  • Son estáticos, por lo que no son el mejor método de prueba según los estándares actuales. Son útiles para el debate y la discusión, pero no son tan buenos para revelar las reacciones reales y las revelaciones de los usuarios.
  • Es una opción pobre para presentar el poder de la animación, las transiciones y los efectos en la atención y la reacción del usuario. No hay la misma facilidad para considerar la emoción del usuario en las imágenes que revelan las herramientas alternativas de investigación del diseño.
  • Los wireframes requieren imaginación. Los diseñadores tendrán esa abundancia, pero no se puede garantizar que sus clientes y usuarios de prueba tengan la misma profundidad de visión.
  • Se necesita tiempo para crear las entregas que todo el mundo pueda entender. Conseguir cada parte en la misma página podría llevar varias rondas a la hora de convencerlos. Una tecnología o unas prácticas superiores podrían conseguirlo antes.
website

Cómo crear un wireframe de UX

  • Que sean sencillos.
  • Abandona todo el color; sólo sirve de distracción: quédate con el negro, el blanco y el gris.
  • No utilice fotografías, fuentes decorativas o marcas (todo eso viene mucho más tarde).
  • Utilice los símbolos, marcadores de posición y representaciones más simples de los elementos que estamos acostumbrados a ver en páginas similares.

Debería ser capaz de deshojar, garabatear y reproducir cada elemento con cada nueva y valiosa sugerencia, alternativa o revisión solicitada. Al fin y al cabo, el proceso está diseñado para perseguir eventualidades y oportunidades de forma rápida y sencilla.

No seas pretencioso con tus wireframes. Su función es ser eliminados y sustituidos fácilmente, por eso los mantenemos sencillos. Si una ruta no funciona, deshazte de ella y prepara la siguiente que sí lo haga.

Los wireframes de UX se basan en la retroalimentación. Lo que funciona, lo que no, y lo que podría hacer todo diez veces mejor para su visitante, logrando sus objetivos más rápido y más feliz a lo largo de su viaje.

¿Qué es mejor: ceñirse a bocetos sencillos o utilizar herramientas profesionales de wireframe?

Cualquiera de las dos cosas. Depende de tu sistema, de la fase en la que te encuentres y de los medios que tengas a tu alcance.

Los diferentes equipos tendrán procesos diferentes con planes y habilidades diferentes; todos debemos jugar con nuestros puntos fuertes, así que espera que tus diseñadores ofrezcan resultados en consonancia con los suyos. Se trata de hacer el trabajo de la mejor manera posible, de la forma más sencilla y directa posible. La mayoría de los diseñadores empiezan por lo más sencillo y van subiendo en la escala de fidelidad a medida que los elementos y procesos se van concretando.

La investigación de UX se une al wireframe de UX

A la hora de rediseñar una plataforma anticuada o fallida, o de crear algo nuevo, la investigación de la UX define los datos e impulsos de los usuarios.

Cada oportunidad de wireframe ayuda a descubrir opciones de flujo de trabajo alternativas y preferibles. En la siguiente fase, el prototipo revela cómo se sienten los usuarios y, por último, todo confluye en la fase de diseño, mostrando cómo debería funcionar el producto final.

¿Dónde aplicamos la investigación de usuarios?

Cuando se trata de investigación y wireframes, son necesarios los mismos pasos fundamentales que cuando se parte de un proyecto de página en blanco. La diferencia es que nosotros aplicamos nuestros datos de investigación a:

  • Organizar el flujo de trabajo
  • Evaluar la secuencia
  • Asignar funcionalidad
  • Ofrecer un diseño ideal para la experiencia óptima del usuario

El uso de la investigación definida durante esos primeros pasos proporciona una plataforma educada sobre la que construir, proporcionando precisión sobre las suposiciones a todo el flujo de trabajo y cualquier sección más pequeña.

Las entrevistas, los grupos de discusión, las encuestas y los estudios pueden proporcionar datos instrumentales y que impulsen el flujo de trabajo al principio de cada proyecto.

¿Qué aprendemos de estas investigaciones?

La investigación de la UX revela los objetivos de cada aplicación, los posibles puntos de dolor, los comportamientos típicos, las necesidades y los deseos. El estudio de los flujos de trabajo de los competidores o de los anteriores puede poner de manifiesto los principales retos y éxitos de las operaciones anteriores, lo que permite debatir sobre cómo hacer las cosas mejor.

El trazado de flujos de trabajo y secuencias en wireframes proporciona un recorrido visual mucho más fácil de entender, y también define el número de pasos necesarios para alcanzar cualquier objetivo.

¿Cómo debemos aplicar esas conclusiones?

La funcionalidad mejorada de cada sistema mejorado tiene que incluir todos los elementos valiosos con las partes innecesarias eliminadas. Al examinar el flujo de trabajo, combinado con las necesidades y reacciones de los usuarios, podemos ofrecer cada diseño nuevo con una experiencia de usuario mejorada.

¿Sustituirán las herramientas de prototipado a los wireframes de UX y UI en la investigación de UX?

Cada wireframe es un esqueleto de su diseño UX en ese momento. Su objetivo es ofrecer una visión que todo el mundo pueda entender, ver en qué punto se encuentra el proceso actualmente y debatir a dónde puede llevar.

A medida que la tecnología que utilizamos se vuelve más innovadora e intuitiva, cada una de las herramientas que utilizamos para presentar el flujo de trabajo e impulsar el debate se vuelve más fácil de trabajar. Proporcionan mucho mejores cruces y opciones para que los investigadores de UX utilicen como parte de los viajes de diseño e investigación.

Vemos que las herramientas de creación de prototipos están sustituyendo constantemente a los esquemas en la investigación de la experiencia del usuario, ya que la creación de prototipos ofrece muchas más oportunidades para realizar pruebas y comentarios, así como para la usabilidad. También ofrecen oportunidades muy superiores para probar físicamente flujos y procesos en escenarios digitales en tiempo real.

Para ofrecer datos útiles hace falta algo más que bocetos y diálogos introductorios

En el campo de la investigación, nos esforzamos por obtener los datos que impulsan la toma de decisiones. Las opciones de prototipos de alta fidelidad proporcionan mucho más de lo que necesitamos que la mayoría de las conversaciones de la primera fase del wireframe.

Con la facilidad de manejo de todas las herramientas digitales cada vez más sencillas, es un salto aparentemente simple a la creación de prototipos en lugar de papel y bolígrafo o incluso software de esquemas personalizados. Si ofrecen resultados de mayor calidad y hacen que el proceso sea más fluido, sencillo y rápido, especialmente en manos de los investigadores de UX, ¿por qué no van a ser las herramientas que se utilicen y de las que se dependa en el futuro?

Si quieres saber más sobre el wireframing y cómo realizar una investigación de UX con wireframes envíanos un correo electrónico a hello@ux247.com.

Entradas relacionadas