Improved universal lists in Tractis

The latest version of Tractis contains better information lists. The new universal lists that we’ve developed bring a load of improvements in terms of both code and information design. In this post, I’ll summarize all the improvements that we’ve introduced:

Types of data used in Tractis

In Tractis, we deal with various types of information that need to be listed: comments, contracts, templates, people, signed documents, drafts, charges etc. The universal lists in Tractis allow the identification of each item by an icon that permits a user to distinguish between different types of item in the same list. All the icons used in Tractis are courtesy of the Tango project. You can see this in the screenshot below that shows documents that are both signed and still being edited:

Items are defined with a large font size compared to the other data. This allows the user to discern the importance of the information in a row. Many web sites define the same font size for nearly all the information. In Tractis we avoid this, reducing the font size of the information according to it’s importance. Primarily, in a large font, the name of the item, and second, using the same size, the state. All the states in the new lists have the same font size for quick reading. The smaller size is reserved for additional information that is considered secondary – optional in many cases.

One of the problems we found was that the amount of information we can show is restricted by the width of the list, meaning that the lists grow vertically. This limits a user’s ability to rapidly read the various items and means the list items aren’t of a uniform shape. After a thorough investigation, we found a way to hide the contents of a large item (using CSS properties) when it is out of focus, meaning all items are the same size. This helps enormously in the reading of the data, both vertically and horizontally.

Cell highlighting

Thanks to CSS, the lists have 3 states: reading, hovering and activated. The reading mode is what you normally see. It has no type of effect, and all elements are the same colour. In this state, there are no elements selected, and you’re not hovering.

The hover mode helps a user locate their cursor in a big list of data. We use CSS here to give the row in a light blue colour, helping the user keep their cursor over the row. If we didn’t do this, the cursor could accidentally move onto another row and the user would end up losing the focus on the data they were interested in.

Once a user performs an action or activation, the activation mode is enabled. The row will become yellow which will indicate to the user that they can perform another action – either with this individual data item or with various in the list. For example, in this row, 3 items in the list are active to accept the only action available in this module: delete. In the future, we will apply more actions based on the activation of items in lists, for example, so that a user could select 4 contracts in a list and edit their tags in batch mode or put the contracts in user-created folders according to the user’s organizational criteria.

Semantics of the lists

When a HTML developer has to create a list, the first thing that comes to mind is ordered or unordered lists. HTML lists are ideal in many cases but when they require multiple fields, it’s much better to use a HTML table and represent the data in a tabular format. Here is where factors such as the use of HTML elements such as columns, rows, headers and summary titles come into play. In Tractis, lists are in an independent module which can be easily included on any page. Such modularity is made possible by HTML elements such as CAPTION. All Tractis lists now have this element so that we can reuse the list without changing titles or modifying layouts.
Before, we used H3 and H4 titles for these lists, but this didn’t allow us to keep the data seperate from the tables in other sections, so we put CAPTION to be able to reutilize the tables without the need to go deleting or adding new titles.

Fantasy Lists

One of the developments that new users of Tractis will notice is fantasy lists. Many applications, when a user starts to use them, don’t show them a set of example data which complicates the way the users learn or get to know an application.

In our first versions, a new user would see a short piece of text that explained what they had to do but they never knew what would happen if they created a contract or template. What will appear here? What data will I see? We solve all these unknowns by showing example data. This allows a user to see the item that is created, what additional data they can add, how it’s ordered, what states it shows.

To do this, we looked at some examples, but they were limited. Many used an image with a watermark that said ‘example data’ which caused a few snags. For example. it only works for sites with fixed page widths. Since we have a multi-lingual site, we need to create screen shots in various languages which is unproductive. If (as is frequently the case) a list changes or an item is added to it, we’d be forced to do another round of example images, so we discarded this option. Also, if the connection fails and the image download fails, the user won’t see much. The level of intereactivity is low.

What we did was to create a list with fantasy data, and when a user touches any of the data, a message appears inviting the user to create or operate with the application. This list has gray data, deactivated controls, is translated into all the languages available with Tractis and is flexible to changes of page or cell width and other actions that a user can perform with their browser.

Lists that are functional, universal and expandable depending on the context. We want to extend the user of the lists but we’re reticent right now to add more complexity – we believe that the amount of characteristics and functionality is not so important as the exact combination of actions we need to do to finish our tasks.

By Diego Lafuente
Saved in: Design, Tractis | No comments » | 12 November 2007