wireframes should they really be tested
Se incorporaron nuevos aprendices y tuvimos una clase de capacitación para aprender conceptos de prueba de software . Después de ver esos rostros entusiastas con sus mentes casi en blanco (profesionalmente), decidí desviarme hacia mi entrenamiento de rutina.
Después de una breve introducción, en lugar de hablar sobre pruebas de software como lo hago normalmente, lancé una pregunta a las mentes frescas: ' ¿Alguien puede explicarme qué a estructura de alambre es? ’
La respuesta fue una pausa y, por lo tanto, decidimos discutirlo. Y así es como empezó Pruebas de estructura metálica / prototipos :)
Asi que, ¿Qué es una estructura alámbrica? Déjame explicarlo con algunas analogías simples:
- El decorador de interiores no comienza a colocar los muebles y decorar la casa al azar. Pone su plan en papel (o software de diseño), lo discute con el cliente, prueba y modifica el plan de la mejor manera práctica y luego lo implementa.
- Para comprender la gravedad de la lesión de una parte del cuerpo, los médicos observan una radiografía. Los rayos X son básicamente un esqueleto de nuestro cuerpo y brindan información correcta sobre los huesos y las articulaciones.
- Un sastre prepara la tela de papel (una especie de prototipo de nuevo), hace las modificaciones necesarias y la usa como medida base hasta que todo es preciso y está seguro de seguir adelante con la pieza real que está cosiendo.
Creo que esos ejemplos fueron suficientes para que cualquiera entendiera el concepto de wireframe.
Los wireframes son prototipos de todo tipo:
Son de naturaleza limitada, lo que significa que podrían contener páginas HTML vacías sin elementos que funcionen o capturas de pantalla estáticas que sean representativas de una página / función / elemento de la aplicación y pueden carecer de color, gráficos y otros elementos del diseño visual real.
Para construir una aplicación / sitio web sólido, se necesita un marco sólido y los wireframes ayudan a proporcionar el marco al brindar una descripción del diseño de la página, la interfaz general, la navegación y las funcionalidades.
A continuación se muestran algunos ejemplos de wireframes:
¿Por qué las empresas de software construyen wireframes?
Exactamente por la misma razón, el sastre / diseñador de interiores / médico decide probar las cosas primero: para evitar errores, eliminar las conjeturas, obtener la aprobación del cliente antes de poner todo en piedra. Ayuda a identificar problemas desde el principio y a dar una idea del software tal como aparecería cuando haya terminado.
Lo que vas a aprender:
- Importancia de las pruebas de wireframes / prototipos:
- Las pruebas de wireframes pueden ayudar en lo siguiente:
- Herramientas para wireframing:
- ¿Cuándo pueden (o ocurre) realizar las pruebas de Wireframes:
- Salida de la prueba de prototipos:
- Conclusión:
- Lectura recomendada
Importancia de las pruebas de wireframes / prototipos:
Entonces, ¿por qué probar algo que es un esqueleto y que el usuario no verá como está ahora? En otras palabras, ¿por qué molestarse con el intermediario cuando todavía es un maniquí?
Simplemente, para ayudar en la prevención de defectos, que es la agenda general de los equipos de control de calidad (Garantía de calidad = Prevención de defectos + Identificación de defectos ).
Las pruebas de wireframes pueden ayudar en lo siguiente:
# 1) Identificación de los requisitos faltantes:
Digamos si los requisitos establecen que en un página de inicio de sesión debe haber 2 campos de entrada, ID de inicio de sesión y contraseña respectivamente y los 3 botones, Aceptar-Cancelar-Restablecer. Si la estructura alámbrica es la siguiente, podemos encontrar fácilmente el botón Restablecer que falta desde el principio e incorporarlo a la aplicación.
# 2) Identificación de requisitos adicionales:
Lo contrario de la situación anterior puede ser que el requisito establece que en una página de inicio de sesión debe haber 2 campos de entrada, ID de inicio de sesión y contraseña respectivamente y los 2 botones, Aceptar y Cancelar. Si la estructura alámbrica es la siguiente, podemos encontrar fácilmente que tiene un botón de reinicio adicional y buscar confirmación sobre si es realmente necesario o no.
# 3) Usabilidad:
Los wireframes son una de las mejores opciones para probar la usabilidad del producto / aplicación antes de que se desarrolle.
Aquí está la estructura alámbrica de uno de los formularios:
A primera vista, parece estar bien.
Ahora piense como usuario final, el usuario que va a completar la información en el formulario. ¿Crees que hay una manera de que este formulario sea más fácil de usar? Bueno, ciertamente creo que sí.
- Proporcione el símbolo de calendario y restrinja al usuario para seleccionar la fecha del calendario. Esto sería útil para el usuario, ya que no tendrá que confundirse acerca del formato de fecha que debe seguir y seleccionar la fecha del calendario sería algo que todos los usuarios preferirían.
- Una descripción emergente que explique lo que significa cada campo sería genial.
- Se requiere el nombre de la página como título para comprender la estructura alámbrica y correlacionar los campos.
- Los campos obligatorios deben estar marcados con el signo * o una nota que diga ' Todos los campos son obligatorios ”Debe ser visible.
- La etiqueta del primer campo debe ser 'Nombre de campaña', en lugar de solo 'Nombre', para evitar confusión a los usuarios.
# 4) Prueba funcional temprana:
el mejor software para monitorear la temperatura de la CPU y la gpu
En el ejemplo anterior, a partir del diagrama, posiblemente podamos adivinar cómo podría funcionar la funcionalidad. De lo contrario, al menos conducirá a profundizar más y a una mejor comprensión de la aplicación.
- Por ejemplo : ¿Qué pasa si el usuario desea agregar varios ID de reserva? ¿La aplicación sobrescribirá la entrada anterior o permitirá varias entradas? ¿Cómo lo manejará y gestionará?
Como se puede ver en los ejemplos anteriores, probar wireframes realmente ayuda a la identificación temprana de problemas a través de un wireframe estático y evita que los defectos se filtren en la aplicación real. Esto es muy beneficioso, ya que sabemos que los defectos identificados al principio del proceso de desarrollo son más baratos de corregir que los que se encuentran más adelante.
Herramientas para wireframing:
Hay muchas herramientas disponibles en el mercado, pero se debe usar la herramienta según la idoneidad del contexto. Si bien la mayoría de las herramientas como Axure, Power mockup, Simulify, Balsamiq, etc.se pagan, hay algunas útiles herramientas de estructura de alambre gratuitas también:
- Cacoo : Cacoo es una herramienta de dibujo en línea fácil de usar que permite al usuario crear una variedad de diagramas como mapas del sitio, wireframes, UML y gráficos de red.
- MockupBuilder : MockupBuilder ayuda al usuario a mostrar rápidamente sus ideas en la pantalla. Es una aplicación web GRATUITA con tecnología Silverlight.
- Proyecto de lápiz : Pencil Project es gratis y fácil de aprender. Puede ejecutarse como un complemento de Firefox o por sí solo.
¿Cuándo pueden (o ocurre) realizar las pruebas de Wireframes:
- Antes del desarrollo del producto: Esto puede ayudar a identificar lagunas o requisitos faltantes, errores de diseño, problemas de usabilidad etc.- Prevención de defectos
- Post desarrollo: En este caso, los wireframes se pueden utilizar como referencias para validar la aplicación. - Identificación de defectos.
En el caso de las pruebas de usabilidad de Wireframe, generalmente se realiza manualmente y la mayoría de las veces participan usuarios en tiempo real. Se les hace una serie de preguntas para comprender su experiencia o comentarios, o se les proporciona wireframes interactivos para capturar los comentarios.
Para tener un análisis detallado de wireframes, a veces también participan expertos en la materia.
Servicios como uso puede ser muy útil, donde se puede publicar un enlace de wireframes y después de probar los wireframes, los resultados se generan junto con lo siguiente puntos de retroalimentación:
- Un video de la pantalla de cada usuario probando su estructura alámbrica.
- Audio del usuario hablando sobre cómo completa las tareas.
- Comentarios valiosos sobre cómo mejorar su sitio web.
Salida de la prueba de prototipos:
Los resultados de las pruebas de wireframes son muy útiles en términos de comprensión del diseño, navegación, facilidad de uso, flujo de trabajo general y funcionalidades. Básicamente, después de las pruebas de wireframes, los wireframes se vuelven más claros e implementables.
Conclusión:
En resumen, las pruebas de wireframes funcionan como una acción proactiva y pueden ser muy útiles para encontrar lagunas de usabilidad y diseño en la fase de desarrollo previo de la aplicación.
Con esto, estoy concluyendo el tema, con la esperanza de que los lectores me tienten a escribir otra publicación sobre esto haciendo preguntas y proporcionando comentarios.
Sobre el Autor: Este artículo está escrito por Bhumika, miembro del equipo de STH. Es líder de proyecto y cuenta con más de 10 años de experiencia en pruebas de software.
Feliz prueba, como siempre :)
Lectura recomendada
- Pruebas de aplicaciones: ¡los conceptos básicos de las pruebas de software!
- Ejercicios de prueba de software: nueva plataforma para probar sus habilidades de prueba y compartir ideas prácticas
- Cómo probar la aplicación de atención médica - Parte 1
- Cómo obtener un trabajo de prueba móvil rápidamente - Guía profesional de pruebas móviles (Parte 1)
- Mejores herramientas de prueba de software 2021 [Herramientas de automatización de pruebas de control de calidad]
- ¿Cuál es el mejor momento en su carrera de pruebas? - Respuestas a estas 14 interesantes preguntas de la entrevista sobre pruebas de software
- Diferencia entre pruebas de escritorio, cliente-servidor y pruebas web
- Cómo revisar el documento SRS y crear escenarios de prueba - Capacitación sobre pruebas de software en un proyecto en vivo - Día 2