kid west

Aaron says posting pictures with journal postings helps readership. We'll see.

The reverse chronological nature of weblogs seem to wreak havoc when designing entry navigation.

Entry navigation is being able to navigate to previous postings in your journal stream. In Tabulas, it looks like this:

You may think to yourself, "Jeez, that's so simple. What's so hard to figure out about that?" First problem is, what terminology do you use?

If you answered "Older" and "Newer", congrats. You understand the notion of time. You'd be surprised by the number of sites which use "Previous" and "Next." The ambiguity with "previous" and "back" revolves around the fact that because weblogs run reverse chronologically, you don't know if "previous" actually means "go back to previous page (go forward in time)" or "go back chronologically."

The second problem seems to revolve around whether "Older" should be on the left, or the right. Browser conventions place "Back" on the left - but when you're reading a weblog, you don't know where you're going to end up - in that case, does left mean "go back in time" or "go back to my last known page?"

Let me demonstrate the confusion by showing screenshots from other journaling sites. For each site, I've also labelled which link actually goes "back in time," which in this case will mean "reading entries that were posted at a previous time."

MySpace: (left-side "Older" goes back in time)

Xanga: (right-side "Next" goes back in time)

LiveJournal: (left-side "Previous" goes back in time)

WordPress: (right-side "Older" goes back in time)

Another WordPress Theme: (left-side "Previous" goes back in time)

Of course, if you're Blogger, you don't even support entry navigation :)

Tabulas: (right-side "Older" goes back in time)

Twitter: (right-side "Older" goes back in time)

Flickr: (right-side "Previous" goes back in time)

This is horrible - you'd think some standard for this would have percolated already ... now all we're doing is betraying the trust of users, who expect some level of consistency:

Is anybody ever frustrated by this, too?

So from Alex's wedding, this was our "Godfather" pose picture:

Ain't technology grand? (And YES, we are sporting some "Best Man/Best Men" buttons, You, Me and Dupree style!)

Spike, photographer extraordinaire, took some shots of the wedding and compiled a teaser collage:

Tabulas's control panel has gone through three distinct phases of development. (I'll use the category UI for consistency) You can click each image to get a full-sized image.

Phase one: The original (1.0)

Phase Two: The failed "new" control panel (2.0)

Phase Three: The "non-crappy" new one (2.5)

Why the original version sucked

Simply put, I was more interested in learning about PHP than designing a nice user interface when I first launched Tabulas. Features were added ad-hoc without much though into how they should be organized. This manifests itself through the cluttered (and unorganized tabs): there are 10 first-level tabs (and most of them don't even make sense - logout is an action ... it's a tab... really?). The 2nd-level organization doesn't even make sense: I put "Add entry" with equal weighting to "Entries", while everything else got only one treatment (there were no "Add categories", but just "Categories"). 

The 3rd-level operations (like "Add Category") were situated along the left side. This became slightly problematic when the left navigation became inconsistent; some pages would have left navigations, while others didn't. While this isn't so bad in itself, having to figure out if there are more actions available on every page was unnecessary cognitive load.

Furthermore, there was no way to quickly manage multiple categories. There should be a way to manage multiple categories at once. (Realizing this, I hacked in multiple <SELECT> boxes, which just made the page look god-awful).

Why the "failed" version sucked

I cut down the first-level tabs to 7 tabs. However, the 3rd-level operations are buried (Can you quickly locate "Add category"?). I was going through a "right hand navigations are awesome!" phase at the time, but I failed to realize that right hand navigations should supplement the primary content. Most people hit the "Categories" option trying to "Add a category" and had their eyes immediately drawn to their list of categories first, since we read left-to-right. FAIL. Nothing important should ever be in the right column.

Not only that, but I was using a table-based layout without any of the benefits. It's impossible to scan the "failed" version to see what's the most popular category quickly.

One of the benefits if multi-deleting became possible, using the checkboxes and the "Delete categories" option.

Why the new version sucks a lot less

7 tabs becomes 6 tabs. I don't mix actions with items on the 2nd-level navigation; instead of:

"Create entry (action) | Entries (items) | Categories (items) | Comments (items) | Autolinks (items) | Backup (action)"

I have all items:

Entries | Comments | Categories | Autolinks

The 3rd-level navigation is included on the page itself; no need to launch a new page to add a category - you just add it from the left! One thing that's not obvious from this page is that the other third-level options expand right underneath the 2nd-level navigation if they exist, as made obvious from this "Entries" view:

(the 3rd level will be converted to all actions that relate to "Entries")

I've also removed the right-side navigation, to bring focus to the actions available to you most immediately.