User Experience (UX)
Jessie Lacey
by Jessie Lacey
share this
?fl
« Back to the Blog

Tree Structure and Visual Cues to Organize Data and Guide the User

12/13/2013
Tree Structure and Visual Cues to Organize Data and Guide the User

We were presented with a small problem—how to organize a bunch of different files in such a way so that one could be quickly selected and downloaded. Presenting lots of information to a user in linear fashion can be overwhelming. Creating tree structures is a common and easy solution to organize hierarchical information into a visual and navigable structure. In our little problem we have three design templates used to market Obama Care in Maine (e.g. general, navigator, and simple). Each has two graphic options (color, and black and white).  The documents come in two formats (.PDF and Microsoft Word .DOC).

simple tree structure in graph theory What do we want the end user to determine first? The format? That is too clunky. We want a user to quickly determine the document they want to download first since a summary of each document should be presented first. When the user determines which document is the right one for them, be it the general, navigator or simple document the user can stick to that branch and continue along the path to the color and format choices.

Using icons to represent the formats (easily recognizable PDF and Word DOC iconography) and the color of those icons as strong visual cues to represent the color document and the black and white document makes the structure tree even easier to navigate instead of relying on plain text alone.

This is why thinking about how the user will interact with your website and the information within is paramount before you set to designing the user interface. Design the wireframes and how a user moves through the site first.  Then layer in the visual elements and visual cues designed to guide the user and the flow.

The less thinking required of a user, the better their user experience.

The tree elements are called nodes. The lines connecting elements are called branches. Nodes without children are called leaf nodes, end nodes or leaves. Every finite tree structure has a member that has no superior. This member is called the "root" or root node. The root is the starting node. But the converse is not true: infinite tree structures may or may not have a root node.

This was our solution for enroll207.org.

 

Thanks!

Thank you for contacting us!

We'll be in touch!

Back Home ×