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:
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.
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.
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.
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
Deja tu comentario...
Los comentarios de este blog están moderados utilizando el “Plugin de Verificación de Identidad Tractis para WordPress“. La configuración es la siguiente: los comentarios realizados por usuarios autenticados con cualquiera de los certificados electrónicos soportados en Tractis aparecerán inmediatamente. Los comentarios no autenticados serán moderados y, por tanto, no aparecerán inmediatamente en la página al ser enviados.
Nuestra intención es conseguir un ambiente agradable donde las personas puedan comentar sin miedo a ser insultados o atacados. Estás en tu perfecto derecho de comentar anónimamente pero, por favor, no utilices el anonimato para decirle a alguien cosas que no le dirías en persona.
Las descalificaciones personales, los comentarios maleducados, los ataques directos, los insultos de cualquier tipo, los comentarios repetitivos sobre un mismo tema, o con varias identidades (astroturfing) o suplantando a otros comentaristas, etc. serán eliminados.