Imagine que está desarrollando un sistema para investigar datos. O una aplicación de gestión de energía. O un tablero para vendedores de maíz. Tal vez estás desarrollando algo similar en este momento. En todos los casos mencionados, la gente esperará tablas. No esos sitios inspiradores de moda, sino monstruos de aspecto Excel con cientos de celdas e interacciones complejas.
En este caso, el diseñador se enfrenta a muchos problemas. Por ejemplo, hacer coincidir un diseño con los marcos frontales existentes o combatir datos "inconvenientes" que destruyen el diseño. Superaremos estos problemas con los siguientes pasos: sistematizar las necesidades, volverse atómico y definir la interacción.
Este artículo fue traducido con el apoyo de EDISON Software, una compañía que desarrolla aplicaciones y sitios , y también se ocupa de las interfaces de usuario .
1. Sistematización de necesidades.
Entonces, entrevistó al público objetivo. Ahora es el momento de unir sus necesidades y deseos y convertirlos en algo útil para el diseño. Por ejemplo, un usuario dijo: "Necesito ver cómo mis datos afectan a otras partes de la aplicación". O, después de ver cómo trabaja otra persona con el software anterior, observa que utiliza métodos abreviados de teclado y no toca el mouse en absoluto. ¿Qué significa esto? Los primeros requisitos del usuario se relacionan con la validación de entrada y las solicitudes. Deberá agregar advertencias e información básica a la tabla. O desarrollar un sistema de colores significativos. Depende del área temática y del modelo mental. Al observar el trabajo del segundo usuario, comienza a comprender que necesita desarrollar todas las acciones disponibles desde el teclado. Y probablemente necesite pensar en teclas de acceso rápido más especializadas que solo "Cmd + C" y "Cmd + V".
Como resultado, tendrá una lista de las necesidades y deseos de las personas. Las preguntas abiertas son útiles para descubrir necesidades reales y filtrar caprichos. Por ejemplo: “¿Qué te ayuda a trabajar más rápido? ¿Cómo aumenta la eficiencia de su trabajo? ¿Qué cambiará si no puedes hacer X? "
Ahora es el momento de construir un marco lógico para su tabla. El esquema de lo que contiene y es capaz de hacer. Si va directamente a crear una estructura alámbrica o crear un prototipo, se embarcará en el difícil camino del rediseño sin fin. A continuación se muestra un ejemplo de dónde podría comenzar. Este es un árbol de características.
El bloque de construcción más pequeño de cualquier tabla es una celda. Las celdas se combinan en filas y columnas, que pueden tener características específicas diferentes de otras celdas. Y finalmente, pasamos a adiciones tan importantes a la tabla como el panel superior, los comandos del teclado, el manejo de errores, etc.
Un árbol de funciones bien organizado también es útil para el equipo de desarrollo. Pueden asignar características a las capacidades de front-end y encontrar la mejor manera de convertir un proyecto en código. En uno de mis proyectos, utilizamos el marco de material angular. Desafortunadamente, las tablas de Angular eran muy simples. Encontramos la biblioteca Ag-Grid que admitía nuestra funcionalidad pero tenía una limitación. Ella no tuvo la oportunidad de expandir la línea y poner algo adentro. Identificamos este problema y ajustamos el diseño de antemano.
Subtotal
- Comience a construir una tabla compleja recopilando y priorizando las necesidades del usuario.
- Dibuje un diagrama de árbol que organice todas las funciones necesarias. Use esto como un plan para producir efectos visuales.
2. Introducir atomicidad
Entonces, la funcionalidad está definida y usted conoce las limitaciones del desarrollo. Es hora de burlarse de su mesa. En esencia, el enfoque atómico es desarrollar primero componentes pequeños de la interfaz de usuario y luego ensamblar los más grandes. Pasaremos gradualmente de las partes elementales, como las fuentes y los colores, a módulos tan grandes como un encabezado o columna. Deliberadamente elegí un estilo brutal estricto para los diseños, para que podamos centrarnos en la funcionalidad en lugar de la apariencia.
Fuentes, colores e íconos
Estas partes ya se pueden definir en su sistema de diseño o en el marco de la interfaz de usuario. Si está creando una tabla para un producto existente, verifique que su paleta de colores, fuentes e íconos cumplan con los requisitos de la tabla.
Celdas y Accesorios
Cuando los átomos de la mesa están listos, podemos pasar a las moléculas, varios tipos de células. En primer lugar, es importante pensar de antemano sobre los estados normales, inducidos y activos de cada elemento. Más tarde, el diseñador también agrega los estados presionado, deshabilitado y otros.
En uno de mis proyectos, teníamos ocho tipos de celdas con su propia interacción. Las más simples son las celdas de texto y números. En nuestro caso, se permitió completar las celdas numéricas con contenido no numérico, como "N / A" (no aplicable) y "N / C" (sin control). Esta fue una característica del campo de actividad. Las listas desplegables y los selectores de fechas son más complejos y tienen hijos. Finalmente, tuvimos las celdas de la tabla, que son botones.
Las celdas pueden tener accesorios como información sobre herramientas, sugerencias de entrada, mensajes de error, marcadores de posición, etc. En este punto, son estáticos, pero luego el desarrollador debe especificar la lógica para mostrarlos.
Líneas y encabezados
Cuando se diseñan las celdas, puede hacer líneas y ver si las diversas combinaciones funcionan bien. A continuación, mostré una combinación de celdas de solo lectura y editables en una fila. Una vez desarrollé una tabla con lógica de edición compleja. Los usuarios proporcionaron algunas propiedades, mientras que otras se calcularon automáticamente o se rellenaron con valores predeterminados.
Tenga en cuenta que cuando pasa el cursor sobre las celdas de solo lectura y editables, el cursor es diferente. Y al hacer clic en ellos se produce la selección de fila o la transición al modo de edición de celda. A continuación puede ver que las personas pueden seleccionar una o más líneas.
Ahora es el momento de pensar en los encabezados de las tablas. Según mi experiencia, a menudo es imposible controlar la longitud del encabezado de una columna y apegarse a una línea. Incluso con un buen escritor en el equipo, no cortarás todos los textos. Algunas de las tablas requieren nombres técnicos largos o localización. Las frases que eran de una sola línea en inglés pueden convertirse en dos o tres líneas en griego, alemán o húngaro. Por lo tanto, mostré diferentes opciones a continuación.
Los usuarios de software basados en datos a menudo necesitan clasificación y filtrado. Esto les ayuda a encontrar información valiosa en grandes cantidades de datos. La tarea de ordenar y filtrar es combinar los controles de clasificación y los campos de filtrado con otros elementos de encabezado: encabezados, unidades, etc.
A diferencia de las celdas de la tabla, los campos de filtro generalmente tienen un icono de "restablecimiento" a la derecha para que los usuarios puedan deshabilitarlos explícitamente y ver el contenido sin filtrar.
En mi ejemplo, hay tres tipos de bloques de filtro. Un filtro alfanumérico le permite buscar por letras y números. Se admiten comodines: un número desconocido de caracteres desconocidos. Por ejemplo, si ingreso "45 * A1", esto puede generar filas con valores como "45A1", "45982A1B", "45A109B" y "096445-A1".
Los comodines son una función compleja porque dependen de los hábitos de las personas. Cuando desarrollé las tablas para técnicos, asignamos un asterisco (*) a un número desconocido de caracteres desconocidos. Para los analistas de seguros, elegí el símbolo SQL tradicional, el signo de porcentaje (%), porque están acostumbrados. En cuanto al filtro desplegable, cambia entre un cierto número de opciones de texto, números o rangos numéricos mutuamente excluyentes.
El selector de fecha tiene un calendario y funciona como su equivalente de celda. Es bueno que los usuarios puedan ingresar la fecha manualmente y seleccionarla del calendario. Si saben lo que están buscando, escribir una fecha es mucho más fácil que hacer clic. Otra cosa importante es formatear automáticamente cualquier entrada significativa y no molestar a las personas con errores de "formato incorrecto". En uno de mis proyectos, permitimos ingresar fechas como “25 de enero de 2017”, “6 12 17” y “4 de septiembre de 2016”, y filtrar solo por meses o años sin un día.
Columnas
Una característica común de las tablas complejas son las columnas ancladas. Por lo general, las columnas que contienen información clave, como nombres de elementos o estados, no se desplazan.
Aunque las columnas de la tabla deben ajustarse correctamente al tamaño del contenido, esto sucede cuando el texto se trunca. En este caso, ayuda una columna de tamaño variable. Los usuarios pueden arrastrar el borde de una columna y ver contenido largo. También pueden necesitar exprimir una columna sin importancia o una columna con texto corto.
Otra forma de manejar cadenas de texto largas es estirar la columna al contenido más largo o colocarlas en varias filas. El primer enfoque funciona mejor para cadenas de texto similares. La segunda opción funciona mejor cuando ver todo el contenido para las personas es más importante que hacer que la tabla sea verticalmente compacta.
En uno de mis proyectos, establecemos el ancho de columna mínimo predeterminado para que las tablas no cambien de tamaño. Inhabilitamos la compresión de columnas en un cierto ancho dependiendo del tipo de contenido.
Panel superior
¿Qué constituye la mesa? Celdas, columnas, filas. Además, las tablas complejas a menudo tienen una barra superior. Al igual que otros componentes, el panel superior consta de elementos más pequeños: la barra de título y los botones. A continuación, he compilado una lista de botones con toda la variedad de condiciones que utilizamos en uno de los productos. Teníamos botones de íconos obvios, como “más = agregar o crear”, “papelera = eliminar”, “flecha = mover”. Los botones no universales (por ejemplo, asignar, archivar, equilibrar) necesitaban un nombre de texto explícito. Además, algunos botones fueron acompañados por un menú desplegable.
Ahora podemos intentar combinar los diversos elementos y ver si esto funciona. Aquí hay algunos ejemplos.
Por supuesto, esta no es una lista completa de funciones y elementos. Difiere de un proyecto a otro y puede incluir otras cosas, por ejemplo:
- ordenar por múltiples columnas;
- conjunto de columnas personalizables (la capacidad de cambiarlas);
- filas expandibles (la fila principal puede tener filas secundarias);
- operadores lógicos para filtrar y buscar ("y", "o", "más", etc.).
Si tiene dudas sobre qué características diseñar y cuáles no, este es un buen principio. Esta es la navaja de Occam o la ley de la tacañería. El diseñador no debe crear nuevas instancias si las existentes satisfacen las necesidades. Debería "cortar" esas funciones geek que, en teoría, los usuarios pueden necesitar en un futuro indefinido. La misma historia con características que son perfectas para una de cada cien situaciones, pero que son inútiles en los noventa y nueve casos restantes.
Mesa terminada
Cuando todos los bloques de construcción estén listos, puede ensamblar varias tablas para diversos fines. Esta es una oportunidad para descubrir inconsistencias y decisiones ilógicas. Muy a menudo traté con los siguientes tres tipos.
La tabla es de solo lectura . El tipo de tabla más simple para construir, ya que solo muestra los datos tal como están. No hay opciones de filtrado o edición. Las jerarquías de clasificación o fila pueden ayudar a analizar grandes cantidades de datos. Dicha tabla se utiliza para mostrar datos e informar a las personas sobre algo.
Tabla a buscar. Las celdas no son editables, el encabezado tiene campos de filtro y controles de clasificación, puede seleccionar filas. Desde mi práctica, estas tablas ayudan a encontrar, comparar y seleccionar un elemento o varios elementos de una gran cantidad de cosas similares. Por ejemplo, filtre cinco de las seis mil herramientas no deseadas del catálogo y luego seleccione una herramienta que necesite.
Mesa editable . Todas o algunas celdas son editables, generalmente no hay filtrado, ya que se puede cambiar el orden de las filas. Dichas tablas suelen ir acompañadas de una barra de herramientas y le permiten realizar acciones con filas.
Subtotal
- Comience con los componentes más pequeños. Luego, gradualmente, pasa a los más grandes y finalmente haz una maqueta de todo.
- Piense de antemano en todas las condiciones posibles para cada componente.
- Use el principio de la navaja de Occam para mantener la cantidad mínima de elementos, pero cubriendo todos los casos de uso.
3. Definir la interacción y el entorno.
Los bloques de construcción no son suficientes para crear un elemento de interfaz tan complejo como una tabla. El diseñador debe pensar en las "reglas del juego" y desarrollar los principios lógicos y las convenciones detrás de la parte visual. Describiré algunas cosas típicas que debes considerar.
Datos numéricos
¿Cuántos decimales debe tener un número en tu tabla? Uno, dos, cinco? ¿Cuál es el nivel óptimo de precisión? Tomo una decisión basada en la precisión que los usuarios necesitan para tomar la decisión correcta. En algunas profesiones, las fluctuaciones entre 10932.01 y 10932.23 son significativas, mientras que en otras áreas los números 14 y 15 realmente no son importantes. Este es un ejemplo de las reglas de datos numéricos que mi equipo utilizó en un producto de ingeniería complejo.
- Longitud : 2 lugares decimales (57.53 m, 3.16 km), los espacios se utilizan como separadores de miles (403 456.56 m).
- Peso : 2 decimales (225.08 kg, 108.75 t), los espacios se utilizan como separador de miles (12 032.17 kg).
- Dinero : 2 decimales ($ 9.45), las comas se usan como separadores de miles ($ 16,408,989.00).
- Diámetro : 3 decimales (10.375 cm), no se necesitan separadores.
- Latitud y longitud : 8 decimales (26.4321121), menos se utiliza para la longitud oeste y la longitud sur (-78.05640132).
- Por defecto, para las unidades que no figuran en la lista anterior: 2 decimales (32.05 g / m³, 86.13 C °).
Otra cosa que vimos fue la diferencia entre los datos "verdaderos" almacenados en los servidores y los datos "aproximados" en la interfaz. El sistema utilizaba números extremadamente precisos con docenas de decimales en todos los cálculos, pero la gente no necesitaba ver esto todo el tiempo. Por lo tanto, decidimos mostrar el número de lugares decimales descritos anteriormente y establecer el número total solo cuando la celda de la tabla está activa. Por ejemplo, un ingeniero puede ingresar “134432.97662301”, y luego de presionar “Enter”, se mostrará “134 432.98” en la tabla. Al hacer clic nuevamente, el ingeniero volverá a ver "134432.97662301".
Confirmación de entrada
A diferencia del párrafo anterior sobre números, la verificación es importante solo para tablas editables. Esto tiene dos aspectos. En primer lugar, las reglas que califican los datos ingresados como válidos o inválidos. En segundo lugar, ya sea mensajes que ayudan a corregir datos no válidos o mecanismos que lo arreglan automáticamente. Las reglas de validación suelen ser demasiado complejas para ser simuladas o prototipadas. Por lo tanto, los diseñadores pueden documentarlos en forma de texto o en formato de diagrama de bloques.
Este es un ejemplo de las plantillas de mensajes que utilicé una vez. El texto entre paréntesis angulares es dinámico y proviene de un motor de cálculo o una base de datos.
- Debería haber más
measurement unit number . Optional explanation - Debe ser menor que la
measurement unit number . Optional explanation - Debe estar entre el
value 1 y el value 2 measurement unit . Optional explanation - El valor mínimo debe ser menor que el valor máximo.
- El valor máximo debe ser mayor que el valor mínimo.
- Los valores mínimo y máximo no deben ser iguales.
Equipos
Las tablas de la barra de herramientas editables generalmente necesitan un conjunto de reglas cuando los botones de la barra de herramientas están habilitados y cuando están deshabilitados. Estas condiciones pueden depender de si la fila está seleccionada, el número de filas seleccionadas, la posición o el contenido de la fila o filas seleccionadas y otras condiciones. La siguiente es una de las muchas formas de documentar tales reglas lógicas.
Entonces, tenemos una mesa con algunos químicos. Tiene botones como "Agregar línea", "Subir", "Bajar", "Eliminar", "Recalcular" y "Configuración".
Y aquí hay una descripción de los estados de los botones. Resulta que su disponibilidad depende de una o más condiciones.
El siguiente paso es determinar el resultado de cada equipo. Por ejemplo, ¿qué sucede cuando selecciono dos líneas que no están una al lado de la otra y hago clic en Subir? ¿O cuál es el resultado de hacer clic en "Recalcular"? Todas estas preguntas deben ser respondidas, o al menos consideradas de antemano.
Contenedor y adaptabilidad
¿Cómo se colocará la tabla en la interfaz? Por ejemplo, ¿ocupará algo de espacio en un contenedor existente o será un módulo separado? Las respuestas a estas preguntas dependen completamente del producto, y es mejor anticipar posibles problemas y definir cuidadosamente los principios.
Cuando desarrollo aplicaciones web, generalmente pienso en tres tipos de contenedores para tablas. El caso más típico es cuando una mesa grande está en el centro de la pantalla y ocupa casi todo el espacio. Tal tabla puede no tener su propio título y puede tener un nombre de página. Las tablas pequeñas y medianas pueden convertirse en módulos de la barra de herramientas, así como en otro contenido, como gráficos, cuadros, diagramas. En este caso, el panel superior de la tabla actúa como el encabezado del módulo. Y, por último, en las aplicaciones de grandes empresas, las tablas a menudo se encuentran en cuadros de diálogo emergentes. Debe haber recomendaciones sabias para que los diálogos no se rompan debido a demasiado contenido.
Otro aspecto de colocar una tabla en un entorno de interfaz de usuario es el área disponible de la pantalla. La mayoría de las aplicaciones empresariales están diseñadas principalmente para su uso en computadoras de escritorio. La adaptabilidad de la mesa está limitada por el simple estiramiento y compresión. Como regla general, las tablas con una gran cantidad de filas y varias columnas ocupan el 100% del ancho disponible. Como resultado, las celdas se distribuyen uniformemente en la pantalla y la mayoría del texto se puede mostrar sin recortar ni ajustar. Por otro lado, aparecen grandes espacios entre las columnas, lo que contradice la ley de proximidad. Es por eso que algunas aplicaciones usan líneas o cebras blancas y grises para facilitar la lectura de la información.
La mejor manera es determinar el ancho racional predeterminado y permitir el cambio de tamaño manual si es necesario. Para leer una tabla, es mejor tener espacio libre a la derecha que espacios entre columnas. Pero si la tabla contiene muchas filas y columnas, el desplazamiento horizontal y vertical es inevitable.
La esencia clave de una tabla compleja es su gran tamaño, que da una idea de los datos desde una vista de pájaro. Lamentablemente, no recuerdo un método realmente bueno para usar tablas grandes en pantallas de teléfonos inteligentes. Las hojas de cálculo de Excel y Google pierden su poder en pantallas pequeñas, pero hay formas efectivas de manejar hojas de cálculo pequeñas. Por ejemplo, conviértalos en una lista de tarjetas.
Accesibilidad
Incluso una mesa excepcionalmente suave y hermosa puede ser una pesadilla para los usuarios. Por lo tanto, es importante seguir los principios de accesibilidad. La Guía de
accesibilidad al contenido web (
WCAG 2.0 ) tiene un capítulo sobre tablas. La mayor parte del material trata sobre la programación adecuada. Sin embargo, el diseñador también tiene algo en qué pensar. Aquí están las consideraciones básicas de diseño en términos de accesibilidad.
Dé un encabezado a la mesa y haga un breve resumen. Un usuario con discapacidad visual debería poder hacerse una idea de la tabla sin el procesamiento de voz de todas sus celdas.
Mira el tamaño de letra. Aunque no hay un tamaño mínimo oficial para la web, 16 píxeles (12 pt) se consideran óptimos. Además, el usuario debería poder aumentarlo al 200% sin romper el diseño completo.
Verifique los colores para personas con daltonismo. El texto y los controles deben tener suficiente contraste con el fondo. Una proporción de color 3: 1 es mínimamente necesaria (cuanto más, mejor). Y el color no debería ser la única forma de etiquetar las cosas. Por ejemplo, los mensajes de error no deben basarse únicamente en el texto rojo; el icono de advertencia proporcionará una pista adicional para daltónicos.
Evite los controles pequeños y ambiguos. Los componentes que responden a los grifos se consideran buenos si tienen un tamaño de al menos 40 × 40 píxeles. Los botones representados por iconos deben estar marcados o tener mensajes y texto alternativo. Los diseñadores no deben abusar de los iconos, porque los usuarios pueden malinterpretar metáforas complejas.
Puede usar herramientas de accesibilidad en línea como
Wave . No solo encuentra problemas y oportunidades de accesibilidad, sino que también los destaca directamente en la página y explica cómo solucionarlos.
Subtotal
- La unificación y el formato del contenido también es trabajo del diseñador.
- Piense no solo en "cosas", elementos de su interfaz, y considere casos de uso, reglas y patrones comunes.
- Cuando todos los elementos de la tabla son consistentes y compatibles, es hora de pensar en cómo las tablas se corresponderán con el resto de la interfaz.
Conclusión y material de lectura adicional.
Acabamos de pasar por el proceso de crear una tabla compleja. Diferentes proyectos requieren diferentes enfoques, pero hay un principio universal. El diseñador debe hacer que todos los elementos funcionen juntos en cualquier combinación. Por lo tanto, es bueno comenzar recogiendo primero las cosas necesarias y haciendo pequeños bloques. Y, por supuesto, realizar pruebas con los usuarios tan pronto como obtenga algo que se pueda hacer clic y sea realista.
Aquí puede leer más sobre el diseño de la mesa.
Publicaciones más interesantes.
Lee también el blog
Empresa EDISON:
20 bibliotecas para
espectacular aplicación para iOS