Usabilidad
La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema. Esto se mide a través del estudio de la relación que se produce entre las herramientas (entendidas en un Sitio Web el conjunto integrado por el sistema de navegación, las funcionalidades y los contenidos ofrecidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a través de ellas.
Abordar la Usabilidad implica también revisar una serie de aspectos relacionados con el uso y la manera en que las personas se relacionan con los sistemas que se les ofrecen. Por lo mismo, se ha hecho necesario hacer una serie de comprobaciones de estos aspectos, mediante la revisión completa de la forma en que el espacio digital apoya a los usuarios en cumplir sus tareas en la mejor forma posible. Dicha revisión debe ser hecha a través de diferentes factores, entre los que se cuentan los siguientes:
Facilidad de aprendizaje: define en cuánto tiempo un usuario, que nunca ha visto una interfaz, puede aprender a usarla bien y realizar operaciones básicas.
Facilidad y Eficiencia de uso: determina la rapidez con que se pueden desarrollar las tareas, una vez que se ha aprendido a usar el sistema.
Facilidad de recordar cómo funciona: se refiere a la capacidad de recordar las caractersticas y forma de uso de un sistema para volver a utilizarlo a futuro.
Frecuencia y gravedad de errores: plantea la ayuda que se le entrega a los usuarios para apoyarlos cuando deban enfrentar los errores que cometen al usar el sistema.
Satisfacción subjetiva: indica lo satisfechos que quedan los usuarios cuando han empleado el sistema, gracias a la facilidad y simplicidad de uso de sus pantallas.
Experiencia del Usuario
Para definir el éxito en nuestra experiencia de usuario necesitamos revisar cada parte de nuestro producto.
Útil: es necesario preguntarnos si nuestros productos y sistemas son útiles, y aplicar nuestro conocimiento para definir soluciones innovadoras que apoyan la utilidad.
Usable: corresponde a la facilidad de uso o Usabilidad sigue siendo un aspecto fundamental, necesario pero no suficiente, por lo que se debe complementar con las demás facetas.
Deseable: si bien los sitios deben ser eficientes, en particular con el uso de medios ms complejos (imágenes, sonidos, animaciones), esto se debe equilibrar con los demás valores del diseño emocional.
Encontrable: los Sitios Web deben ser navegables y permitir que los usuarios puedan encontrar lo que necesitan.
Accesible: los sitios Web deben ser accesibles a las personas con discapacidades (más de 10% de la población). Para los Sitios Web de Gobierno ya es un requisito normativo.
Creíble: la credibilidad es uno de los factores más importantes de tener en cuenta y por ello se deben revisar los elementos de diseño que afectan la confianza que nos tienen los usuarios.
Valioso: las facetas ayudan a determinar los aspectos que llevan a que nuestros sitios ofrezcan valor para nuestros usuarios.
Guidelines
Cada página debe llevar titulo y breadcrumbs
Los nombres de los menús de navegación deben ser descriptivos, no siglas.
Todas las tablas deben ser 100% de ancho.
Utilizar tooltips para los iconos del menu / left panel
Los botones de acción superiores e inferiores deben estar ubicados a la derecha de la página
Se deben respetar los estados en cada paso: por ejemplo el estado activo en el menú
Se debe seguir la elección de colores primarios para botones con acciones de avance (por ejemplo: guardar), secundario para acciones de retroceso (por ejemplo cancelar)
Grilla
Es fundamental para todo lo que construyamos la cuadrícula 2x, es la base geométrica de todos los elementos visuales, desde la tipografía hasta las columnas, cuadros, iconos e ilustraciones. Proporciona estructura y orientación para toda la toma de decisiones espaciales. La unidad básica de la cuadrícula es de 8 píxeles. La mini unidad adapta a su contenido mientras mantiene un ritmo visual constante. El margen y el padding siempre se aplican en unidades fijas múltiples. Las cajas se dimensionan aplicando una escala de dimensionamiento basada en mini unidades fijas o anchos de columna de fluido, junto con un conjunto básico de relaciones de aspecto.
Fundamentos de cuadrícula
El concepto central de la cuadrícula 2x es dividir o multiplicar por dos, formando un ritmo visual. Las cuadrículas fluidas se construyen por división, mientras que las cuadrículas fijas se construyen con multiplicación. En los límites del breakpoint, estos tamaños coinciden. Los márgenes y el padding se aplican consistentemente en ambos casos.
Columnas y filas
Las columnas y las filas crean líneas clave que son esenciales para el ritmo visual, especialmente para la tipografía. Debemos construir columnas dividiendo un espacio en una cuadrícula fluida o colocando cuadros fijos en múltiplos.
Márgenes
Los márgenes en el borde exterior de la cuadrícula son siempre de un tamaño fijo dentro de un breakpoint, incluso cuando las columnas son fluidas.
Padding
El padding siempre es un múltiplo fijo de mini unidades: 16 píxeles en todos los breakpoints estándar. Alinee siempre el tipo con el borde del relleno de la caja.
Gutters
Los gutters en la grilla pueden estar ausentes o presentes. El margen alrededor de cada cuadro de cuadrícula coincide con su relleno, para un gutte total de 32 píxeles. Para contenido estrechamente relacionado, considere una grilla sin gutters. Aplique gutters cuando el contenido amerite más separación.
Breakpoints
Use los breakpoints para mantener la integridad del diseño en todos los tamaños de pantalla. Para obtener los mejores resultados, pruebe los diseños y el código en cada uno de estos puntos de interrupción estándar.
Breakpoint | Value (px/rem) | Columns | Size (%) | Size | Padding | Margin |
|---|---|---|---|---|---|---|
Small | 320 / 20 | 4 | 25% | 80 px | 16 px | 0 |
Medium | 672 / 42 | 8 | 12.5% | 80 px | 16 px | 16 px |
Large | 1056 / 66 | 16 | 6.25% | 64 px | 16 px | 16 px |
X-Large | 1312 / 82 | 16 | 6.25% | 80 px | 16 px | 16 px |
Max | 1584 / 99 | 16 | 6.25% | 96 px | 16 px | 24 px |
Comportamientos de cuadrícula
Grilla fluida
Las estructuras de columnas fluidas son ideales para contenido editorial, paneles, imágenes, videos, visualizaciones de datos, etc. En cada caso, escalar el tamaño de las cosas es más útil para el usuario que escalar el número de cosas visibles. En una cuadrícula fluida, dividimos el ancho disponible por la mitad para crear columnas, repitiendo según sea necesario.
En cada breakpoint, el recuento de columnas es fijo y el ancho de columna es un múltiplo de mini unidades. La altura de la fila es un múltiplo del tamaño de la columna, siguiendo las relaciones de aspecto recomendadas. El margen y el padding son múltiplos fijos de mini unidades. Entre los puntos de interrupción, el ancho real de la columna es un porcentaje del área de la cuadrícula, no un mini unidad múltiple. El contenido escala de forma fluida.
Cajas fijas
Se puede formar una grilla con cuadros fijos organizando mosaicos en un bloque en línea, iconos en barras de herramientas, etc. El recuento de columnas aumenta con el ancho del navegador. Los mosaicos se envuelven a la siguiente línea.
Cajas híbridas
Los cuadros híbridos tienen diferentes reglas de escala en cada dimensión, por lo que no usan relaciones de aspecto. Cuando un usuario redimensione el navegador esperando que el contenido se escale en una dimensión pero no en la otra, use cuadros híbridos.
Ejemplos | Anchura | Altura |
|---|---|---|
Header | Fluid (Grid) | Fixed (m.u.) |
Toolbar | Fluid (Grid) | Fixed (m.u.) |
Side Panel | Fixed | Fluid (Grid) |
Menu | Fixed | Fluid (Content) |
Content | Fixed | Fluid (Content) |
Data Table | Fluid (Grid) | Fluid (Content) |