Richer UI experiences in TiddlyWiki
August 30th, 2007
Recently, I have been wearing my UI designer hat and exploring ways to present TiddlyWiki in a more approachable way. I have blogged before about being surprised at how easy it is to give a TiddlyWiki site a new flavor, but my recent ventures have attempted to retain more of the existing TiddlyWiki functionality (rather than hiding it away), while providing a simpler and more user friendly view.
I’ll be setting some of this work free before too long, but for now, I thought I’d post a screenshot of my work in progress. You never know, it might generate some ideas via any discussion that ensues.
Some UI elements that I am working on include a revised tab view of the tiddler lists and timeline view. This uses the existing TiddlyWiki macro to display tabbed content, the gradient macro to create a subtle ‘paper’ feeling to the scrollable listing panel, and also the slider macro to make a nice collapsable section that appears across the top of the page.
I’m also planning on adding some large, friendly buttons in the currently blank space in the top panel to provide some help with getting started. I’d love to hear any comments or suggestions about the direction this is taking.
Once this theme has matured a little, I’ll be posting it the growing set of TiddlyWiki themes that can be found at TiddlyThemes.com
I like what I see so far! I am working on a few UI’s for UnaMesa’s projects that also require a more application like feel rather than a website or a wiki. I look forward to seeing the finished article.
I too have focused in the past on hiding TiddlyWiki interface features for simplicity. However there is a definite need for retaining all the features while still making the user experience much more intuitive.
I am also quite intrigued by some of the plugins I am seeing listed there. Looking forward to seeing more of your work!
Saq, That’s cool. I’d like to take a peek at your UnaMesa UI work.
The plugin names that I left in that particular tiddlywiki are a bit of a giveaway aren’t they! I hope to be letting those out into the wild soon too.
The more I think about this, the more I love the concept of this horizontal control bar replacing the sidebar.
A few thoughts on the positioning of this control bar (not necessarily in this particular theme, but in general):
a) It could be placed above the header (like an always-visible backstage) - but that might be odd (e.g. detracting from the site logo).
b) It could go below the header, but that might look very odd in some contexts (though it looks good in this particular theme). However, this would also rule out a horizontal nav menu - so you have to decide what people would expect to find in the horizontal bar there. (People used to word processors would probably expect the control buttons, like in the menu bar and toolbars, rather than nav links.)
c) It could go to the very bottom, but that’s probably not a good option (scrolling, interference with footer).
Either way, this is definitely worth pursuing.
Any updates on when this might be released as a theme? It’s great work, I’d love to use it on some of my TWs. ;-)
Chris,
I have yet to package this up as a theme and post it to TiddlyThemes, but you can get get at it and grab the elements of interest if you like. I will develop it as a theme, but for the time being you can find the site at: http://www.hawksworx.com/playground/TeamTasks