MÉTRICAS DE DISEÑO PARA WEBAPPS

MÉTRICAS DE DISEÑO PARA WEBAPPS

EQUIPO 5

¿Para qué sirve?

Proporciona a los Ingenieros Web un indicador de calidad en tiempo real Conjunto de medidas que ofrezcan respuestas a diferentes inquietudes con relación a:

• Interfaz de usuario ayuda a la facilidad de uso
• La estética utilizada es la apropiada.
• La navegación es eficiente y directa

¿Para qué sirve?

Las métricas deben ofrecer respuestas cuantitativas a las siguientes preguntas

¿La interfaz de usuario promueve la facilidad de uso?

¿La arquitectura de la WebApp se ha diseñado para acomodar las metas y objetivos especiales de los usuarios de la WebApp la estructura de contenido y funcionalidad y el flujo de navegación requerido para usar el sistema de manera efectiva?

¿La estética de la WebApp es apropiada para el dominio de la aplicación y confortable al uso?

¿El contenido está diseñado en una forma que proporciona más información con el menor esfuerzo?

¿Los componentes estando diseñado en una forma que reduce la complejidad y aumenta la exactitud, la confiabilidad y el desempeño?

¿La navegación es eficiente y directa?

Alcance de las métricas

Hasta el momento no existe un conjunto de métricas cuantitativas por lo que estos deben ser tratados de manera cualitativa. Al desarrollar una WebApp se debe tener las siguientes metas

• Simplicidad
• Consistencia
• Identidad
• Robustez
• Navegabilidad
• Apariencia visual
• Compatibilidad

Alcance de las métricas

El diseño web abarca actividades técnicas y otras que no lo son. La visión y el sentido del contenido se desarrollan como parte del diseño gráfico, la plantilla estética de la interfaz de usuario se crea como parte de diseño de la interfaz y la estructura técnica de la webapp se modela como parte del diseño arquitectónico y de navegación.

Alcance de las métricas

La webapps abarca seis niveles con diferentes tipos de diseño, cada uno contribuye a la calidad global de la web esto se puede ver por medio de la pirámide siguiente:

Métrica de del diseño de la interfaz

Se pueden considerar las siguientes medidas:

1. Métrica sugerida
2. Corrección de plantilla
3. Complejidad de plantilla
4. Complejidad de región de plantilla
5. Complejidad de reconocimiento
6. Tiempo de reconocimiento
7. Esfuerzo de escritura
8. Esfuerzo de toma de mouse
9. Complejidad de selección
10. Tiempo de adquisición de contenido
11. Carga de memoria

Métricas del diseño ESTÉTICAS (dISEÑO GRÁFICO)

Es un esfuerzo artístico que complementa los aspectos técnicos de la ingeniería Web. Sin él una WebApp puede ser funcional, pero sin atractivo.El diseño estético se apoya en el juicio cualitativo y por lo general no es sensible a la medición de las métricas.

Métrica del diseño estéticas

1. Métrica sugerida
2. Conteo de palabras
3. Porcentaje de texto de cuerpo
4. Porcentaje texto cuerpo enfatizado
5. Conteo de posicionamiento de texto
6. Conteo de grupo de texto
7. Conteo de vínculos
8. Tamaño de página
9. Porcentaje gráfico
10. Conteo gráfico
11. Conteo de calor
12. Conteo de fuente

Métrica del diseño de contenido

Se enfoca en dos asuntos de diseño diferentes, cada uno lo abordan individuos con distintas habilidades. Desarrolla una representación de diseño para los objetivos de contenido y representa los mecanismos que se requieren para que establezcan sus relaciones uno con otro.

Métrica del diseño de contenido

Las métricas aqui se enfocan en la complejidad del contenido y en los grupos de objetivos de contenido que se organizan en páginas.

1. Métrica sugeridas
2. Espera de página
3. Complejidad de página
4. Complejidad gráfica
5. Complejidad de audio
6. Complejidad de video
7. Complejidad de animación
8. Complejidad de imagen escaneo

Métricas del diseño de navegación

Abordan la complejidad del flujo de navegación. En general, son útiles sólo para aplicaciones web estáticas, que no incluyen vínculos y páginas generados de manera dinámica. El diseñador debe definir las rutas de navegación que habiliten para la ruta de los usuarios el acceso al contenido y las funciones de las WebApp. Para ello se debe:

• Identificar la semántica de navegación para diferentes usuarios del sitio.
• Definir la mecánica que logra la navegación.

Métricas del diseño de navegación

Las métricas en esta categoría abordan la complejidad del flujo de navegación. En general son útiles solo para aplicaciones web estáticas.

1. Métricas sugeridas
2. Complejidad de vinculación de pagina
3. Conectividad
4. Densidad de conectividad

Métricas del diseño arquitectónico

Las métricas del diseño arquitectónico en una web app se refieren a los indicadores y criterios utilizados para evaluar la calidad y efectividad de la arquitectura de la aplicación web. Estas métricas ayudan a los desarrolladores y arquitectos a medir y mejorar aspectos clave del diseño arquitectónico para garantizar un rendimiento óptimo, escalabilidad, seguridad y usabilidad de la web app.

Métricas del diseño arquitectónico

Algunas métricas comunes del diseño arquitectónico en una web app:

• Escalabilidad
• Rendimiento
• Seguridad
• Mantenibilidad
• Modularidad
• Disponibilidad
• Eficiencia en el uso de recursos
• Tolerancia a fallos
• Arquitectura de base de datos
• Cumplimiento de estándares y buenas prácticas

Métricas del diseño de los componentes

1. Tamaño y proporciones de las imágenes.
2. Espaciado y márgenes.
3. Tamaño de fuente y estilo.
4. Color y contraste.
5. Navegación y usabilidad.
6. Tiempo de carga de la página.
7. Resolución y adaptabilidad.
8. Accesibilidad.
9. Interacción y animaciones.

Ejemplos de la aplicación de métricas

Tamaño y proporciones de las imágenes:

Tamaño de fuente y estilo:

Espaciado y márgenes:

• Deja suficiente espacio alrededor de los elementos como texto, imágenes y botones para que no se sientan amontonados..

• Asegúrarse de que las imágenes de los productos tengan una resolución alta y sean lo suficientemente grandes para mostrar detalles importantes

• Utilizar una fuente legible para el texto principal y considera usar fuentes decorativas o elegantes para los títulos o logotipo.
• Asegúrarse de que el tamaño del texto sea lo suficientemente grande para leer cómodamente, especialmente en dispositivos móviles.

+ info

+ info

+ info

Ejemplos de la aplicación de métricas

Color y contraste:

Tiempo de carga de la página:

Navegación y usabilidad:

• Los botones de navegación, como "Agregar al carrito" o "Ver detalles", deben ser lo suficientemente grandes y claramente identificables para los usuarios.
• Asegúrate de que los enlaces sean fácilmente distinguibles del texto normal.

• Elige colores que complementen la estética de los productos.
• Asegúrarse de que el texto sea fácilmente legible sobre el fondo, evitando combinaciones de colores que dificulten la lectura.

• Optimiza el tamaño de las imágenes y utiliza técnicas de compresión para reducir el tiempo de carga de la página y mejorar la experiencia del usuario.

+ info

+ info

+ info

Ejemplos de la aplicación de métricas

Resolución y adaptabilidad:

Interacción y animaciones:

Accesibilidad:

• Todas las imágenes deben tener etiquetas alt descriptivas para aquellos que utilizan lectores de pantalla.
• Verifica que el contraste entre el texto y el fondo cumpla con los estándares de accesibilidad para garantizar que sea legible por todos los usuarios.

• Asegúrarse de que el diseño se vea bien en diferentes dispositivos. Por ejemplo, verifica que las imágenes y el texto no se vean demasiado pequeños en dispositivos móviles.

• Si se incluyen efectos de desplazamiento o animaciones al hacer clic en un producto, asegúrate de que se ejecuten de manera fluida y no causen retrasos o problemas de rendimiento.

+ info

+ info

+ info

¡Muchas gracias!

referencias

• Levq. (s. f.). Ingeniería en software. https://ingenieriasofware.blogspot.com/2013/01/metricas-diseno-para-webapps-metricas.html
• Team, F. (2023, 28 septiembre). Métricas de diseño web: aumente su rendimiento. https://finmodelslab.com/es/blogs/kpi-metrics/web-design-firm-kpi-metrics
• Unknown. (s. f.-d). RESUMEN DE METRICAS DE DISEÑO PATRA WEBAPPS. https://kryssingenieriadesoftware.blogspot.com/2013/01/resumen-de-metricas-de-diseno-patra.html
• Unknown. (s. f.-d). Métricas de diseño para WebApp. https://miltonibarra.blogspot.com/2013/01/metricas-de-diseno-para-webapp.html
• Unknown. (s. f.-c). Métricas de diseño para WebApp. https://miltonibarra.blogspot.com/2013/01/metricas-de-diseno-para-webapp.html

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!

¿Tienes una idea?

Usa este espacio para añadir una interactividad genial. Incluye texto, imágenes, vídeos, tablas, PDFs… ¡incluso preguntas interactivas! Tip premium: Obten información de cómo interacciona tu audiencia:

• Visita las preferencias de Analytics;
• Activa el seguimiento de usuarios;
• ¡Que fluya la comunicación!