.png "7-(1).png")
23 noviembre 2022
BABEL - Corporativo, UX Avanzado
Artículo
13 enero 2021
UX y el dato II. Conceptualización y diseño de interfaces de datos
En el capitulo anterior… La experiencia de usuario en los Interfaces enfocados al dato.
Si tuviéramos que responder a la pregunta que planteamos en el título de este post diríamos, sin ningún tipo de duda, que los interfaces de visualización de datos deben ser claros, intuitivos y personalizables. Como un primer acercamiento es una condensación de lo que debe ser, sin embargo, conviene ahondar más en el fondo de la cuestión.
Un primer punto de arranque para profundizar es tomar como punto de partida las 8 reglas de Schneiderman, informático estadounidense y profesor en el Laboratorio de Interacción Humano-Computadora de la Universidad de Maryland y que tiene un gran significadoen el ámbito del UX, y que se podría ubicar al mismo nivel de importancia de otros grandes pensadores del diseño actual como Don Norman o Jackob Nielsen.
Si tuviéramos que destilar dichas reglas diríamos que son:
1. Coherencia y consistencia visual
Aplicando secuencias y formas de proceder consistentes de acciones en situaciones similares, utilizando terminología/labeling idéntica en las indicaciones, menús y pantallas de ayuda, y con uniformidad a nivel de colores, diseños, mayúsculas, fuentes, etc.
2. Usabilidad universal
Agregando funcionalidades tanto para principiantes como para expertos, lo que enriquece el diseño de la interfaz y mejora la calidad percibida. En este punto, un factor importante a tener en cuenta es que los datos a consumir deber tener cierta personalización dando una vista adaptada a los datos y perfes que necesitan ser monitorizados y requieren interacción.
3. Ofrecer feedback en el interfaz
En el caso de acciones frecuentes y menores, la respuesta puede ser modesta, mientras que en el caso de acciones importantes y poco frecuentes, la respuesta debería ser más sustancial.
4. Utilizar diálogos para el cierre de acciones
Mostrar información al completar un grupo de acciones y brindando a los usuarios la satisfacción del logro y una señal para continuar con el siguiente grupo de acciones.
5. Evitar errores
Anticipar los mismos (ej. Entradas numéricas). Si los hay, se debe permitir solucionarlos con instrucciones sencillas y específicas.
6. Revertir acciones
Para aliviar la ansiedad de los usuarios ante acciones no deseadas.
7. Empoderamiento y control a los usuarios
Autonomía en la obtención de la información que esperan encontrar.
8. Reducir la carga cognitiva
Las personas pueden recordar "siete, más o menos dos" fragmentos de información. Por tanto, debe evitarse el exceso de ruido visual.
Si pensamos un poco, dichos puntos no se alejan de lo que son los heurísticos de Nielsen, y que la mayoría de las veces no es más que pensar y aplicar sentido común.
Atendiendo a esto, el objetivo principal de un interfaz de datos debe ser conseguir que la información compleja sea accesible, así como fácil de consumir y digerir.
Por tanto debemos atender a privilegiar los datos y los paneles en el interfaz. Necesitaremos identificar los KPIs fundamentales y ubicarlos en las zonas jerárquicas más importantes de la pantalla (parte superior izquierda; ¿por qué ahí? porque en nuestro contexto (hablamos en este caso de países occidentales), nuestro patrón de lectura se articula de izquierda a derecha y de arriba abajo).
Cuando los usuarios terminen de consumir la primera fila de información, pasarán a la siguiente; con ello crearemos un flujo continuo de escaneo de información.
.png "1-(1).png")
.png "2-(1).png")
Zonas jerárquicas de información
.png "3-(1).png")
.jpg "4-(1).jpg")
Haciendo uso de tecnología Eyetracking (seguimiento de movimiento ocular), podemos aprender como visualizan los usuarios las webs. Gracias a los mapas de calor, y si entrecerramos los ojos para hacer un ejercicio de abstracción, podemos identificar patrones que muestran la tan hablada “F”; son patrones aproximados de cómo los usuarios escanean/leen las páginas.
Las cuadrículas ayudarán también, con poco esfuerzo, a crear esas estructuras básicas o esqueletos para su diseño.
.png "5-(1).png")
Ilustrativo de diseño en cuadrícula
.png "6-(1).png")
Sistema de tarjetas adaptables/versátiles
Como ya hemos comentado, nuestro propósito como diseñadores es comunicar visualmente los datos obtenidos de las herramientas analíticas, y que sean fáciles de entender por el usuario, por tanto, y como decíamos, la interfaz debe poder presentar los datos de forma clara y sencilla para minimizar la carga cognitiva y que puedan ser fácilmente interpretables por los usuarios que la consumen. En este sentido, se hace necesario definir una estructura optimizando espacios.
Un interfaz para la visualización de datos debe contener tres grandes áreas o zonas:
El color debe ser utilizado en su contexto, resaltando elementos de información importantes (semáforos de estado), como alertas o valores extraordinarios, y debe, en todo caso, favorecer el entendimiento del dato y no utilizarse únicamente como elemento decorativo. Se recomienda un relleno sólido en las gráficas para evitar la distorsión y facilitar la lectura.
Así mismo, y en aras de la legibilidad y la claridad visual, se debe evitar usar fondos que carguen visualmente el cuadro de mando o los widget sin aportar nada a la lectura; de este modo favoreceremos la lectura y el consumo de los datos.
Como comentábamos cuando hablábamos del desglose progresivo, no debemos desplegar un excesivo detalle en los datos. Un exceso en precisión sólo recarga la visualización sin aportar una mayor calidad en la información (ej. 76,4% vs 76,4568476%).
En la mayoría de los casos, los datos por si sólo no dicen nada salvo que se comparen contra otros que guarden relación. Es aquí donde el uso de identificadores que muestren advertencias por datos inusuales (semáforos de estado) y sobre los que es necesario actuar, son un claro indicador para la toma de decisiones.
En la medida de lo posible, se recomienda ordenar los datos de forma descendente de cara a facilitar el consumo de la información, a la vez que se identifican y se comparan con el resto.
Como diría Steve Krug en su libro, No me hagas pensar... "facilitemos la información a los usuarios y evitemos que deban realizar sus propios cálculos si se lo podemos dar de forma óptima para ser consumidos". Por tanto, mejor, utilicemos métricas implícitas (ej. PCs faltantes vs datos de PCs actuales y requeridos).
En el diseño de interfaces, casi siempre, menos es más. El mezclar innecesariamente una variedad diversa de componentes y formas de representación no mejora la comunicación; al contrario, el usuario debe invertir más tiempo en interpretar la forma en que comunica el dato cada tipo de componente, en lugar de usar su tiempo en entender los resultados presentados. Recomendamos, por tanto, lo sencillo y minimalista, y por tanto, no utilizar una variedad innecesaria de elementos.
Los textos comunican, pero muchas veces los podemos reducir sin perder su significado. Pasa en nuestro día a día, donde acortamos palabras por economizar tiempo de dicción, y donde el contexto de chats en móvil. En un marco de trabajo donde la economía del espacio es fundamental, recomendamos utilizar abreviaturas siempre que sean suficientemente identificativas y convencionales (ene vs enero, L, M, X… vs lunes, martes, miércoles…), todo acorde a conseguir más aire y una menor carga cognitiva.
Tipográficamente, es recomendable no utilizar mayúsculas por su dificultad de lectura, así como emplear fuentes de palo, sin serifa (la serifa genera ruido adicional). Tampoco se debe abusar de negritas y se debe descartar el uso de cursivas.
Como venimos diciendo, menos es más. Debemos hacer siempre un ejercicio de destilación; como se ha comentado, debemos huir de fondos, líneas, sombras… incluso del formato zebra stripe de las tablas. Prescindamos de lo innecesario.
“Si no te da tiempo a ser innovador”, utiliza patrones existentes, son soluciones que siempre funcionarán (ej. Acciones masivas como las agrupaciones en registros, ordenar columnas, paginadores, fijar columnas… y si son tablas editables, edición inline, acciones en lote…).
Gráficos vs texto. Como se suele decir, una imagen vale más que mil palabras. Elegir las visualizaciones correctas para lograr objetivos específicos es un factor clave en la construcción de interfaces orientadas a datos.
La tabla es el componente rey para mostrar y consumir grandes volúmenes de información de forma tabulada; permite además una gran escalabilidad y son la gran solución cuando se necesita mostrar mucha información de forma ordenada, pero… ¿Cuándo utilizarla y dónde?
Vaya por delante, aunque parezca atrevido, que cuando se necesita proporcionar una descripción general / resumen, es mejor utilizar gráficos que tablas, y basta un simple ejemplo que todos constataremos de forma rápida.
Creo que todos coincidimos en que el gráfico nos permite digerir y entender la información de una forma más fácil y con menos carga cognitiva.
Pero cada cosa en su contexto; las tablas en un interfaz de dato, quizá debería reducirse a su máxima expresión en una primer vistazo, sin embargo tiene especial importancia en sucesivos niveles y desgloses de la información.
Sin embargo, las tablas, no siembre las construimos de forma correcta y teniendo en cuenta aspectos óptimos para su visualización.
Una parte importante para ordenar la información es la alineación, la cual juega un papel fundamental en la legibilidad y lectura de los datos, y hay reglas que son básicas en este sentido:
En los encabezados de las columnas, es recomendable resaltar los literales con un tamaño mayor o bien en negrita, a la vez que se habilitan mecanismos de ordenación por columnas.
Así mismo se recomienda poder ajustar el ancho de las columnas. El ajuste de columnas implicará muchas veces truncar con puntos suspensivos los valores de la celda, salvo que ajustemos las mismas para que se vea su contenido, lo que implicará a su vez que el contenido de al tabla sea mas difícil de escanear. La elección de penderá del usuario, pero lo que si tenemos que contemplar, en caso de decantarnos por el truncado es un mecanismo para visualizar la información de la celda.
La personalización como ya hemos comentado, es una pieza clave. Se recomienda articular funcionalidades que permitan guardar, reordenar, bloquear u ocultar columnas como con el objetivo de dar libertad al usuario para establecer el marco de trabajo adaptado a sus necesidades. Aún así, se debe disponer el orden de las columnas según su importancia y jerarquización.
.jpg "8-(1).jpg")
Ilustrativo de funcionalidad de personalización. Fuente uxdesign.cc
.png "9-(1).png")
Ilustrativo de información extra de un registro. Fuente: uxdesing.cc
En este tipo de tablas, enfocado más a un detalle de información en niveles más profundos, y que contienen multitud de registros, una funcionalidad de paginación se hace más fundamental todavía. Dicho sistema debe poder mostrar el número de registros totales, así como ubicar al usuario en el número de paginación en que se encuentra respecto al total. También se recomienda empoderar al usuario para configurar el número de registros a mostrar por página, así como los controles de paginación hacia adelante y hacia atrás, e ir a inicio y fin en el total de páginas.
.png "10-(1).png")
Generalmente los interfaces de datos complejos requerirán de un sistema de búsqueda y filtrado. A nivel de tabla en particular, y siempre que sea posible, se recomienda ubicarlo en la parte superior, implementando una búsqueda de forma predictiva y sistema de filtrado.
.png "12-(1).png")
.png "13-(1).png")
Ilustrativos de búsqueda en una tabla Fuente: uxdesing.cc
.png "14-(1).png")
Ilustrativo de filtros en una tabla Fuente: uxdesing.cc
En los registros muchas veces se tendrá que diferenciar estados (semáforos), y para ello será fundamental estructurar una codificación de colores que permitirá de forma ágil escanear la información.
El uso de elementos repetitivos en las tablas impactan en la legibilidad, por lo que se deben evitar dichos mensajes huyendo de duplicidades. (Ej. Documento enviado, documento no enviado… vs Enviado, No enviado).
En caso de que los registros posean funcionalidad, se considerará un área de acciones, o bien un acceso visual a dichas funcionalidades.
.png "15-(1).png")
Ilustrativo de zonas de funcionalidad en una tabla Fuente: uxdesing.cc
Si tuviéramos que responder a la pregunta que planteamos en el título de este post diríamos, sin ningún tipo de duda, que los interfaces de visualización de datos deben ser claros, intuitivos y personalizables. Como un primer acercamiento es una condensación de lo que debe ser, sin embargo, conviene ahondar más en el fondo de la cuestión.
Un primer punto de arranque para profundizar es tomar como punto de partida las 8 reglas de Schneiderman, informático estadounidense y profesor en el Laboratorio de Interacción Humano-Computadora de la Universidad de Maryland y que tiene un gran significadoen el ámbito del UX, y que se podría ubicar al mismo nivel de importancia de otros grandes pensadores del diseño actual como Don Norman o Jackob Nielsen.
Si tuviéramos que destilar dichas reglas diríamos que son:
1. Coherencia y consistencia visual
Aplicando secuencias y formas de proceder consistentes de acciones en situaciones similares, utilizando terminología/labeling idéntica en las indicaciones, menús y pantallas de ayuda, y con uniformidad a nivel de colores, diseños, mayúsculas, fuentes, etc.
2. Usabilidad universal
Agregando funcionalidades tanto para principiantes como para expertos, lo que enriquece el diseño de la interfaz y mejora la calidad percibida. En este punto, un factor importante a tener en cuenta es que los datos a consumir deber tener cierta personalización dando una vista adaptada a los datos y perfes que necesitan ser monitorizados y requieren interacción.
3. Ofrecer feedback en el interfaz
En el caso de acciones frecuentes y menores, la respuesta puede ser modesta, mientras que en el caso de acciones importantes y poco frecuentes, la respuesta debería ser más sustancial.
4. Utilizar diálogos para el cierre de acciones
Mostrar información al completar un grupo de acciones y brindando a los usuarios la satisfacción del logro y una señal para continuar con el siguiente grupo de acciones.
5. Evitar errores
Anticipar los mismos (ej. Entradas numéricas). Si los hay, se debe permitir solucionarlos con instrucciones sencillas y específicas.
6. Revertir acciones
Para aliviar la ansiedad de los usuarios ante acciones no deseadas.
7. Empoderamiento y control a los usuarios
Autonomía en la obtención de la información que esperan encontrar.
8. Reducir la carga cognitiva
Las personas pueden recordar "siete, más o menos dos" fragmentos de información. Por tanto, debe evitarse el exceso de ruido visual.
Si pensamos un poco, dichos puntos no se alejan de lo que son los heurísticos de Nielsen, y que la mayoría de las veces no es más que pensar y aplicar sentido común.
Atendiendo a esto, el objetivo principal de un interfaz de datos debe ser conseguir que la información compleja sea accesible, así como fácil de consumir y digerir.
Priorización de los espacios más sensibles
La interfaz debe poder presentar los datos de forma clara y sencilla para minimizar la carga cognitiva y los tiempos de búsqueda e identificación; debe presentar los datos esenciales primero, priorizando y jerarquizando, al tiempo que permite el acceso a datos secundarios, favoreciendo el desglose progresivo de la información, y consumiendo la misma, desde lo más general a lo más particular.Por tanto debemos atender a privilegiar los datos y los paneles en el interfaz. Necesitaremos identificar los KPIs fundamentales y ubicarlos en las zonas jerárquicas más importantes de la pantalla (parte superior izquierda; ¿por qué ahí? porque en nuestro contexto (hablamos en este caso de países occidentales), nuestro patrón de lectura se articula de izquierda a derecha y de arriba abajo).
Cuando los usuarios terminen de consumir la primera fila de información, pasarán a la siguiente; con ello crearemos un flujo continuo de escaneo de información.
Orden de lectura y áreas críticas para la Priorización y jerarquización de la información
Zonas jerárquicas de información
Áreas de mayor visibiilidad
Debemos tener en cuenta qué información mostrar y dónde. Arriba y a la izquierda es una conclusión que se ha constatado mediante el uso de técnicas de neurociencia.
Las cuadrículas ayudarán también, con poco esfuerzo, a crear esas estructuras básicas o esqueletos para su diseño.
Ilustrativo de diseño en cuadrícula
Otra forma de priorizar y reducir el ruido visual es dosificando la información mediante el uso de pestañas, y que éstas, a su vez, por su orden y disposición, cuenten una “historia informacional”. Sin embargo, el uso de tabs/pestañas supone también una paradoja, ya que entra en contradicción con una premisa básica fundamentada de no ocultar información ni confiar demasiado en las interacciones; confiar en el desplazamiento puede desvanecer nuestro propósito y puede ocasionar que parte del contenido no sea consumido.
Por tanto, a este respecto, diseñar cuadros de mando en vertical es uno de los errores más frecuentes que se suele cometer en la conceptualización de este tipo de interfaces. Una de las premisas básicas es no abrumar con datos a los usuarios, utilizando un máximo de 5 ó 7 widgets en la visualización.
Para cada bloque/widget se recomienda la creación de estructuras consistentes. En este sentido, las tarjetas/cards son un recurso versátil para organizar la información. Lo más importante de las tarjetas es que son casi “infinitamente” manipulables, y permiten seguir pautas consiguiendo optimizar contenido. Así, disponiendo el nombre en la esquina superior izquierda, alineando los controles / acciones en la esquina superior derecha de la tarjeta y dejando el resto para el contenido, conseguimos una estructura jerárquica usable, intuitiva y consistente.
Cuando todos los elementos tienen una estructura consistente y coherente, es más fácil para los usuarios trabajar con la interfaz de forma más eficiente.
Por tanto, a este respecto, diseñar cuadros de mando en vertical es uno de los errores más frecuentes que se suele cometer en la conceptualización de este tipo de interfaces. Una de las premisas básicas es no abrumar con datos a los usuarios, utilizando un máximo de 5 ó 7 widgets en la visualización.
Para cada bloque/widget se recomienda la creación de estructuras consistentes. En este sentido, las tarjetas/cards son un recurso versátil para organizar la información. Lo más importante de las tarjetas es que son casi “infinitamente” manipulables, y permiten seguir pautas consiguiendo optimizar contenido. Así, disponiendo el nombre en la esquina superior izquierda, alineando los controles / acciones en la esquina superior derecha de la tarjeta y dejando el resto para el contenido, conseguimos una estructura jerárquica usable, intuitiva y consistente.
Cuando todos los elementos tienen una estructura consistente y coherente, es más fácil para los usuarios trabajar con la interfaz de forma más eficiente.
Sistema de tarjetas adaptables/versátiles
Layout para un interfaz de datos
Como ya hemos comentado, nuestro propósito como diseñadores es comunicar visualmente los datos obtenidos de las herramientas analíticas, y que sean fáciles de entender por el usuario, por tanto, y como decíamos, la interfaz debe poder presentar los datos de forma clara y sencilla para minimizar la carga cognitiva y que puedan ser fácilmente interpretables por los usuarios que la consumen. En este sentido, se hace necesario definir una estructura optimizando espacios.Un interfaz para la visualización de datos debe contener tres grandes áreas o zonas:
- Área de Branding. Situada en la parte superior, y donde se muestra la marca (logo, colores…) y el titulo de la información a mostrar.
- Filtros. Ubicado en la parte superior o en e margen izquierdo y que permitirá a los usuarios discriminar la información que deseen consultar.
- Contenido principal. Lugar donde se presenta la información y donde se encontrará el contenido; estará constituido por varios widgets.
Sentido común para diseñar tu interfaz de datos. UI
No debemos utilizar una amplia gama de colores y de visualizaciones. Un tablero con un diseño cuidadosamente minimalista, que respire, con espacios en blanco y visualizaciones consistentes será más útil y empático que aquellos diseñados con delirios de grandeza y que mezcle de forma llamativa gráficos circulares, multicolores, gráficos 3D…El color debe ser utilizado en su contexto, resaltando elementos de información importantes (semáforos de estado), como alertas o valores extraordinarios, y debe, en todo caso, favorecer el entendimiento del dato y no utilizarse únicamente como elemento decorativo. Se recomienda un relleno sólido en las gráficas para evitar la distorsión y facilitar la lectura.
Así mismo, y en aras de la legibilidad y la claridad visual, se debe evitar usar fondos que carguen visualmente el cuadro de mando o los widget sin aportar nada a la lectura; de este modo favoreceremos la lectura y el consumo de los datos.
Como comentábamos cuando hablábamos del desglose progresivo, no debemos desplegar un excesivo detalle en los datos. Un exceso en precisión sólo recarga la visualización sin aportar una mayor calidad en la información (ej. 76,4% vs 76,4568476%).
En la mayoría de los casos, los datos por si sólo no dicen nada salvo que se comparen contra otros que guarden relación. Es aquí donde el uso de identificadores que muestren advertencias por datos inusuales (semáforos de estado) y sobre los que es necesario actuar, son un claro indicador para la toma de decisiones.
En la medida de lo posible, se recomienda ordenar los datos de forma descendente de cara a facilitar el consumo de la información, a la vez que se identifican y se comparan con el resto.
Como diría Steve Krug en su libro, No me hagas pensar... "facilitemos la información a los usuarios y evitemos que deban realizar sus propios cálculos si se lo podemos dar de forma óptima para ser consumidos". Por tanto, mejor, utilicemos métricas implícitas (ej. PCs faltantes vs datos de PCs actuales y requeridos).
En el diseño de interfaces, casi siempre, menos es más. El mezclar innecesariamente una variedad diversa de componentes y formas de representación no mejora la comunicación; al contrario, el usuario debe invertir más tiempo en interpretar la forma en que comunica el dato cada tipo de componente, en lugar de usar su tiempo en entender los resultados presentados. Recomendamos, por tanto, lo sencillo y minimalista, y por tanto, no utilizar una variedad innecesaria de elementos.
Los textos comunican, pero muchas veces los podemos reducir sin perder su significado. Pasa en nuestro día a día, donde acortamos palabras por economizar tiempo de dicción, y donde el contexto de chats en móvil. En un marco de trabajo donde la economía del espacio es fundamental, recomendamos utilizar abreviaturas siempre que sean suficientemente identificativas y convencionales (ene vs enero, L, M, X… vs lunes, martes, miércoles…), todo acorde a conseguir más aire y una menor carga cognitiva.
Tipográficamente, es recomendable no utilizar mayúsculas por su dificultad de lectura, así como emplear fuentes de palo, sin serifa (la serifa genera ruido adicional). Tampoco se debe abusar de negritas y se debe descartar el uso de cursivas.
Como venimos diciendo, menos es más. Debemos hacer siempre un ejercicio de destilación; como se ha comentado, debemos huir de fondos, líneas, sombras… incluso del formato zebra stripe de las tablas. Prescindamos de lo innecesario.
“Si no te da tiempo a ser innovador”, utiliza patrones existentes, son soluciones que siempre funcionarán (ej. Acciones masivas como las agrupaciones en registros, ordenar columnas, paginadores, fijar columnas… y si son tablas editables, edición inline, acciones en lote…).
Gráficos vs texto. Como se suele decir, una imagen vale más que mil palabras. Elegir las visualizaciones correctas para lograr objetivos específicos es un factor clave en la construcción de interfaces orientadas a datos.
La tabla, la reina de los datos
En el mundo del dato, no prestar un capítulo esencial a este componente básico sería como una excomunión buscada.La tabla es el componente rey para mostrar y consumir grandes volúmenes de información de forma tabulada; permite además una gran escalabilidad y son la gran solución cuando se necesita mostrar mucha información de forma ordenada, pero… ¿Cuándo utilizarla y dónde?
Vaya por delante, aunque parezca atrevido, que cuando se necesita proporcionar una descripción general / resumen, es mejor utilizar gráficos que tablas, y basta un simple ejemplo que todos constataremos de forma rápida.
Creo que todos coincidimos en que el gráfico nos permite digerir y entender la información de una forma más fácil y con menos carga cognitiva.
Pero cada cosa en su contexto; las tablas en un interfaz de dato, quizá debería reducirse a su máxima expresión en una primer vistazo, sin embargo tiene especial importancia en sucesivos niveles y desgloses de la información.
Sin embargo, las tablas, no siembre las construimos de forma correcta y teniendo en cuenta aspectos óptimos para su visualización.
Una parte importante para ordenar la información es la alineación, la cual juega un papel fundamental en la legibilidad y lectura de los datos, y hay reglas que son básicas en este sentido:
- Columnas numéricas siempre alineadas a la derecha.
- Columnas de texto alineadas a la izquierda.
- Columnas de iconos alineadas al centro.
- Nombres de los encabezados de las columnas: alineados respecto al contenido de la columna.
En los encabezados de las columnas, es recomendable resaltar los literales con un tamaño mayor o bien en negrita, a la vez que se habilitan mecanismos de ordenación por columnas.
Así mismo se recomienda poder ajustar el ancho de las columnas. El ajuste de columnas implicará muchas veces truncar con puntos suspensivos los valores de la celda, salvo que ajustemos las mismas para que se vea su contenido, lo que implicará a su vez que el contenido de al tabla sea mas difícil de escanear. La elección de penderá del usuario, pero lo que si tenemos que contemplar, en caso de decantarnos por el truncado es un mecanismo para visualizar la información de la celda.
La personalización como ya hemos comentado, es una pieza clave. Se recomienda articular funcionalidades que permitan guardar, reordenar, bloquear u ocultar columnas como con el objetivo de dar libertad al usuario para establecer el marco de trabajo adaptado a sus necesidades. Aún así, se debe disponer el orden de las columnas según su importancia y jerarquización.
Ilustrativo de funcionalidad de personalización. Fuente uxdesign.cc
Ya hemos comentado, que todo lo supérfluo debe desaparecer del interfaz visual para centrarnos en lo esencial, en los datos, incluso hemos hablado del no uso del formato zebra stripe en las tablas; pues bien, en este punto y en el caso concreto de que haya muchos registros, nos desdecimos. El formato zebra stripe nos permite, entre una multitud de filas, el centrar la atención en los datos de un registro. Si además los registros son navegables o seleccionables se recomienda un cambio de color de la misma al interactuar sobre ella. Lógicamente estas tablas se recomiendan, no para un primer nivel, sino para niveles de desglose sucesivos en los interfaces de visualización de dato.
Si necesitamos ampliar información sobre un registro, existen 2 posibilidades: expandir la fila verticalmente para mostrar información adicional o mostrar un panel con dicha información extra.
Si necesitamos ampliar información sobre un registro, existen 2 posibilidades: expandir la fila verticalmente para mostrar información adicional o mostrar un panel con dicha información extra.
Ilustrativo de información extra de un registro. Fuente: uxdesing.cc
En este tipo de tablas, enfocado más a un detalle de información en niveles más profundos, y que contienen multitud de registros, una funcionalidad de paginación se hace más fundamental todavía. Dicho sistema debe poder mostrar el número de registros totales, así como ubicar al usuario en el número de paginación en que se encuentra respecto al total. También se recomienda empoderar al usuario para configurar el número de registros a mostrar por página, así como los controles de paginación hacia adelante y hacia atrás, e ir a inicio y fin en el total de páginas.
Generalmente los interfaces de datos complejos requerirán de un sistema de búsqueda y filtrado. A nivel de tabla en particular, y siempre que sea posible, se recomienda ubicarlo en la parte superior, implementando una búsqueda de forma predictiva y sistema de filtrado.
Ilustrativos de búsqueda en una tabla Fuente: uxdesing.cc
Ilustrativo de filtros en una tabla Fuente: uxdesing.cc
En los registros muchas veces se tendrá que diferenciar estados (semáforos), y para ello será fundamental estructurar una codificación de colores que permitirá de forma ágil escanear la información.
El uso de elementos repetitivos en las tablas impactan en la legibilidad, por lo que se deben evitar dichos mensajes huyendo de duplicidades. (Ej. Documento enviado, documento no enviado… vs Enviado, No enviado).
En caso de que los registros posean funcionalidad, se considerará un área de acciones, o bien un acceso visual a dichas funcionalidades.
Ilustrativo de zonas de funcionalidad en una tabla Fuente: uxdesing.cc
Al final, muchos datos necesitarán ser manipulados en herramientas externas, en ese caso, como si no, será siempre una buena idea el plantear un mecanismo de exportación de los mismos para los posibles y distintos contextos que pueda tener un usuario.
Como lo bueno siempre se hace esperar, “tan sólo” nos queda hablar de los tipos de gráficos y cuando utilizarlos en un interfaz de datos, por lo que os emplazo a una tercera entrega en breve.
Continuará…
Como lo bueno siempre se hace esperar, “tan sólo” nos queda hablar de los tipos de gráficos y cuando utilizarlos en un interfaz de datos, por lo que os emplazo a una tercera entrega en breve.
Continuará…
José Luis García López
Head of UX. Manager del área Servicios en Babel.
compartir en Linkedin
Contacto
Otros artículos destacados
.jpg?ext=.jpg)
¡Recibido!
Gracias por rellenar el formulario. Se han enviado los datos correctamente.
