I’m going to do generally the worst thing that developers do: I’m thinking through the user interface of Treefrog first, before necessarily planning out the data or program structure.  I’m aware of the reasons for not doing this, but there is one important reason to do it: to keep me focused.  My hope is that with a light at the end of the proverbial tunnel I’ll be able to keep a focus on what I’m doing and why I’m doing it.

Main Goals

There are two main goals of the user interface for Treefrog.  First is to take the best ideas of some popular genealogy programs and, without sacrificing function or usability, create a consistent user interface across platforms.  The second goal is to perhaps improve on the user interface to provide a better way to visualize data.  Genealogy software is generally lacking in this area, and it’s easy to see why.  Once you start factoring in complex family relationships (multiple spouses, children with reference to two different brothers as their father, adopted children, etc.), the challenges become clear.  However, I feel that the important goal first is to at least fill the gaps across platforms.

Navigating the Interface

My initial thought was to keep all of the navigation top-centric with a series of icons across the top to redraw the main window.  That is, switching between “Family Group” view, “Reports” view, “Multimedia” view, and “Tree” view, etc.  I started looking at arguably some of the best user interfaces designed, Apple’s, and found that there were very few cases where the navigation at the top of the screen actually redrew the main window.  As I looked to PC programs, I also found this to be the case.  Most of the options to redraw the main window were located in the left side of the screen, with the top of the screen being reserved for functions that enhanced or provided additional functionality to the main window.

This is consistent across all of the iLife apps.   In iTunes, the top navigation is reserved to indicate track progress and to provide different viewing options.  Down the left navigation you see different categories that are used to redraw the interface.  In iPhoto, there isn’t even a top navigation bar, instead leaving the different photo events, albums, and views to the left side, and providing a menu at the bottom of the main window that is context-sensitive to the photo/album you’re viewing.

So how does this apply to Treefrog?  Options that will redraw the main window include a Research Center/Summary page, Index (list of all individuals in the family file), Family Group, Reports, Multimedia, Maps, and Sources.  Functions that might enhance the views include an Index of individuals in the family file, a Search box, Sources, and Multimedia, all of which could be used to update the focus of the main window.  The latter two initially seem redundant, but my vision is that the left navigation will bring up a center where you can manage, tag, organize, etc. the sources and multimedia, whereas the top navigation source and multimedia links will open up drawers that you can use to drag sources and multimedia items onto persons and events.

With so little going into the top navigation, it may be a better idea to put a very small top navigation bar, or perhaps none at all and make the drawers sensitive to what’s in the main window.  That said, here is a first brainstorm in Photoshop (note: this is an extremely quickly done mockup, I know it’s quite amateurish).  Obiously this is very Mac, but there’s much room for Linux/Ubuntu and Windows native look and feel here.

This entry was posted on Monday, April 28th, 2008 at 10:46 am and is filed under TreeFrog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.