Listas universales mejoradas en Tractis

Esta nueva versión de Tractis trae novedades en cuanto listados de información en la aplicación se refiera. Las nuevas listas universales que hemos realizado traen un montón de mejoras de código y diseño de información. En este post resumiré todas las mejoras que hemos introducido:

Tipos de datos utilizados en Tractis

En Tractis tratamos ya con varios tipos de información y que necesitan ser listados: comentarios, contratos, plantillas, personas, documentos firmados, borradores, gastos, etc. Los listados universales en Tractis permiten la identificación de cada item con un icono, el cual permite a un usuario distinguir diferentes tipos de items en una misma lista. Todos los iconos utilizados en la aplicación Tractis son cortesía del proyecto Tango. Como podrán apreciar en esta imagen donde veremos documentos firmados y documentos que están siendo editados:

listados-diferencias-r.png

Los items están definidos con un tamaño de letra prominente, en comparación con otros datos. Esto permite al usuario discernir la importancia de la información dentro de una fila. En muchos ejemplos encontraréis sitios que definen tamaños de tipografía muy iguales para casi toda la información. En Tractis evitamos esto reduciendo el tamaño de la información según el nivel de necesidad. Primero, en tamaño grande, el nombre del item y segundo, utilizando el mismo tamaño, el estado. Todos los estados en los nuevos listados tienen el mismo tamaño para una rápida lectura. Como segundo tamaño, está la información adicional, la cual se considera secundaria y opcional en muchos casos.

Uno de los problemas que nos encontramos fue el ancho de los listados condicionaba mucho la información a mostrar, haciendo que las listas crecieran en espacio vertical. Lo cual limitaba la lectura rápida de varios items y la uniformidad de las formas. Gracias a las propiedades de CSS y una concienzuda investigación pudimos lograr la funcionalidad de esconder los contenidos que se fueran fuera de foco en una celda, como lo tienen muchos programas. Esto ayuda enormemente a la lectura de datos, tanto de forma vertical como horizontal.

Iluminación de celdas

Gracias a las bondades de CSS, los listados tienen tres estados: reading, hovering y activation. El modo reading (lectura) es el que normalmente observarás. No tiene ningún tipo de efecto, ni color más que los elementos utilizados. En este estado no hay elementos seleccionados, ni estás actuando con el modo hovering.

listados-hover-r1.png

El modo hover ayuda al usuario a situar su cursor en una gran lista de datos. CSS aquí actúa de una forma amena coloreando el fondo de la fila con un color azul claro, permitiendo al usuario mover el cursor sobre la misma zona, que en caso de que no fuera así, podría ocurrir que el cursor se desplace hacia otra fila y el usuario termine perdiendo el foco que necesitaba.

listados-active-r.png

Una vez el usuario realice una opción de acción o activación, entra el modo activation. La fila tomará un color amarillo de advertencia, que le indicará al usuario que puede realizar otra acción con ese dato en concreto o con varios de la lista. Por ejemplo, en esta imagen 3 items de una lista están activos para aceptar la única acción disponible: borrar, que permite este módulo. En un futuro, aplicaremos más acciones basadas en la activación de items en listas, por ejemplo, que un usuario pueda seleccionar 4 contratos de una lista y editarles las etiquetas en modo batch o meter los contratos en carpetas que el usuario se cree para ir almacenando contratos según sus criterios de organización.

Semántica de las listas

Cuando un desarrollador de HTML tiene que crear un listado, lo primero que se le viene a la mente es listas desordenadas u ordenadas. Éstas listas son ideales para muchos casos, pero cuando se requiere el uso de múltiples datos lo mejor es utilizar una tabla de HTML para representar datos de forma tabular y con relaciones entre sí.

Aquí es donde entran factores como la utilización de columnas y filas, cabeceras y títulos de sumario, etc. Los listados de Tractis son independientes ahora como módulo. Basta extraer un listado y se presentarán los datos y el título del listado. Para ello aprovechamos otra bondad de las tablas en HTML, y me estoy refiriendo al elemento CAPTION. Todos los listados traen el elemento CAPTION, que ayuda a titularizar todas las listas y dejarlas independientes de otros contenidos y elementos.

Antes utilizábamos títulos H3 y H4 para estas listas, pero no nos permitían independizar los datos de las tablas en otras secciones, así que hemos puesto CAPTION para poder reutilizar las tablas sin necesidad de ir borrando o agregando nuevos títulos.

Listados fantasía

Una de las novedades que se encontrarán los usuarios noveles de Tractis son los listados fantasía. Muchas aplicaciones, cuando el usuario empieza a utilizarlas, no les muestran una serie de datos de ejemplo, lo cual complica la forma en que los usuarios aprenden o conocen una aplicación.

En nuestras primeras versiones, el usuario se encontraba un texto corto explicativo que le explicaba que es lo que tenía que hacer, pero nunca, un usuario sabría que pasaría si él/ella realizar una creación de contrato u creaba una plantilla. ¿Qué saldría allí? ¿Qué datos vería? Todas esas incógnitas las solucionamos mostrando datos de ejemplo. Esto permite saber cómo son los datos que crea un usuario, qué datos adicionales les puede poner, cómo están ordenados, que estados muestra.

Para hacerlo, habíamos visto algunos ejemplos, pero eran limitados. Muchos ponen una imagen con una marca de agua que dice “example data” lo cual tiene unas pegas. Por ejemplo, sólo sirve y funciona para sitios con anchos de páginas fijos. Como tenemos un sitio multidioma, hay que crear capturas de los datos en varios idiomas, lo cual es improductivo. Tal es el caso, que si en un futuro, una lista cambia o tiene un agregado nos veríamos forzados a realizar otra tanda de imágenes de ejemplo, así que esta opción la descartamos. Además, si la conexión falla y la imagen no se descarga, el usuario no verá mucho. El nivel de interactividad es mínima.

listados-fantasia-r.png

Lo que hicimos fue crear una lista con datos fantasía, y todos estos datos al ser pinchados lanzan una alerta al usuario para invitarles a crear u operar ya con la aplicación. Esta lista tiene datos en gris, controles desactivados y está traducida en todos los idiomas disponibles de Tractis y es flexible a los cambios de ancho de página, celdas y otras acciones que realice el usuario con el navegador.

Listas funcionales, universales y expandibles según el contexto. Queremos extender el uso de las listas, pero estamos reticentes a la hora de agregarles más complejidad, creemos que lo mejor no es precisamente la cantidad de caracteristicas y funcionalidades sino el conjunto exacto de acciones que podamos hacer para llevar a cabo nuestras tareas.

Por Diego Lafuente
Guardado en: Diseño, Tractis | Sin comentarios » | 12 de Noviembre de 2007

Más entradas en Negonation Blog