It’s true, I did. And this is where I would cue the dissonant choral music that builds to the crescendo of civilization taking a step up the ladder; which, by the way, had Rikke trying so very hard to suppress her laughter at its pompousness… Foiled, again!
These things are hard to gauge, and even perhaps overly self-centered, at least by Danish standards. But between Kubrick, through various endeavors, like the Latest Comments plugin and Live Archives (and its successor) and up to K2, I hope my time in the world of blogging has left a mark of some kind; an echo of sorts, for low-level interaction designers, like myself, to not merely lemming their way through the craft, even if it’s on a hobby-level.
That’s one thing I believe. Another thing, is putting my money where my mouth is. For one thing, that’s why I spent 3 years working on K2. And also, it’s why I’ve been involved on or off, with interaction design for what I think is a contender for the crown of the open source blogging systems throne; Habari.
The process has been a long haul, as these things often are, especially when everyone is intensely invested, wanting only for the end-product to shine. And admittedly, it hasn’t been without its fair share of frustration, for those exact same reasons.
To cut a lon… a few weeks back, I went AWOL and started crunching away on a complete design for the administration interface for Habari, in an effort to create a set of blueprints, from which this thing can be built in proper.
And though it was an exhausting project, which has no doubt left Rikke in need of some much-deserved TLC, and my stylus-wrist in need of some R&R and perhaps a bit of ointment, I feel pretty good about it right now.
I’ve put together the following 18-minute screencast, in which I in a drowsy, recorded-at-different-times and with a horribly accented voice, walk you through the entire thing from start to finish. For further entertainment, check out the flickr set and the Human Interface Guidelines.
(For those keeping track: To differentiate former design efforts from one another—the old ones being Space Odyssey and Idocto—this one is code-named Monolith)
Or, you can view it on Viddler, though the audio isn’t nearly as well sync’d.
Phew.
There’s so much more I’d like to say, but it’s all details. Most importantly, understand that this isn’t finished; it’s merely been abandoned in favor of the next step.
My plan is to develop this separately from Habari itself, and once it’s in a workable state, to offer it as a sacrifice to the mighty Habari core and then cross my fingers that it is wanted and welcomed.
This is also the first time since early January that I’ve enabled comments. Make me proud!
It looks cool, but the video is completely out of synch with the audio for me. I tried with different browsers. Is it me? :o
Haven’t looked at it yet, but I’ll check it out tonight. For some reason I get butterflies in my stomach now. :)
moeffju, I’m looking into that right now. I think Viddler borked the video.
Christian Mohn; that’s a good thing :D
Same problem for me — video and audio are so out of sync that it’s pretty hard to follow…
@Mike: When do you expect Habari to be usable for a production site?
This looks marvellous. Hell of the work there. I must admit I was interested in Habari for Habari itself, but now, when you roll out with this great UI… I think I’m in love with it.
it’s out of sync for me too, but i’m still watching it.
BTW, you can fix your latest comment’s activityentry cut-off if you add this CSS:
#latest-comments a.activityentry {
position:absolute;
height:1.2em;
overflow:hidden;
}
(only tested in FF3)
I’m uploading to three different sites right now, but getting horrible speeds across the board. I’ll update the entry as soon as it’s ready.
This design well represents a response to the cogent, coherent admin theme that I had been requesting. I’m at a loss to say what I dislike about it.
But particularly noteworthy in all of this is the HIG document, which I would love to see as part of the Habari wiki.
@thomas, I don’t honestly know.
This looks really amazing. Some great original ideas. Can’t wait to try it.
Michael: excellent work.
Thomas: Habari is currently used for a handful of sites, so it’s “ready for production sites”, for certain definitions of “production.” It’s stable and usable for a basic blog, as that how it’s being used by most of the developers and community participants. If you require specific functionality and you find it currently lacking in Habari, do please join the -users mailing list to let us know!
@skippy, thanks :)
@thomas, actually, you should download the latest svn and install it on a localhost, just to play around with it. It’s got a lot more functionality than you might think, and moving swiftly.
Alright, updated the video and it seems to work now. For anyone interested, the fullsize .mov is here.
Only one word, impressive!
Exciting and innovative changes. I really like the live search and archive timeline.
As a recent Habari convert, I sincerely hope this interface gets rolled into the core.
The contrast with WordPress 2.5 dashboard (which I am still struggling to come to terms with) couldn’t be more stark.
The inline video still doesn’t work me (and this is the third computer I try it on), but the fullsize mov is great. Here’s a few things that came to mind while watching, and keep in mind these are minor nits with a work in progress:
- I think the Active Menu Item should not be marked with a checkmark, as the “checkmark next to menu item” is used like checkboxes, UI-wise, to mark an enabled toggle option.
- Will the hover functionality be JS-backed? Hovering over small elements is pretty hard for people, and if the margin of error is just 1px as with CSS hover menus, it gets really annoying really quick. I know you know this, but I’d like to know what solutions you see for it.
- How well does it degrade? There’s some stuff I just can’t see degrading too well, like timeline view. OTOH, it doesn’t really have to. If we have a structure like a nested UL with special classes like weight-17, it will still degrade ok. As much as I’d like to use only cutting edge tech, we always need to keep this in mind.
- I really like the dashboard, but I like the option to set the start page even more.
- Timeline view rocks. I’ve been waiting for someone to do this. Woot.
- The user dropdown should probably just use select groups for Users and Groups, instead of or in addition to the (user) or (group) parens, don’t you agree? Or, what is the rationale for this way?
Again, these are minor things. I think Monolith rocks.
Yeah, the video is still broken. Both Viddler and Vimeo do this. Dammit.
Good point with the active menu item; though I took it directly from OS X, so if it works…
On menu-hovering, yeah, I want to add small delay to make the menu’s less prone to closing accidentally.
It should all degrade very well. For something like the timeline, it could simply degrade to a standard pagination system. But then, a non-JS timeline-like system might also be possible, using simply CSS. I’ll have to mull that over.
I’m not sure I understand that last part, about the dropdown, can you explain?
And thank you :)
Towards the end of the video, when you touch on the user management, the select box in the top left corner has “Michael Heilemann (user)” vs “Power Users (group)”, which led me to believe the items contained would look like this:
Admin (user)
Admin (group)
Michael Heilemann (user)
Power Users (group
In which case I’d have to point out that there is UI for something like this already, using option groups:
Users
Admin
Michael Heilemann
Groups
Admin
Power Users
But then I thought that when selecting in an item (and the dropdown collapses), there is no more indication of what group the selected item belongs to. So it might be a good idea to have both groups and the parenthesized labels.
In the end, I’m talking out of my ass here anyway since we never saw that selectbox opened, so either you have thought of this already, or will think of it when you get to that part.
Yeah, that lost my indentation.
Users
__Admin
__Michael Heilemann
Groups
__Admins
__Power Users
Regarding the “active menu item marker”, does OS X have a widget like the dropbutton? I don’t think select buttons are the same here, since with those, you do actually choose amongst multiple options to do something with, so the checkmark makes sense here. I’m not sure it makes sense to show “this is the currently selected menu item” in what is basically a list of links. Maybe different typography, a different background shade, or just some other marker?
Anyway, this is going too far into detail for what is easily tested and changed in the actual implementation.
Re the degrading timeline, I think a nested list structure would work pretty well. You could have JS convert that to the timeline view, use CSS classes for the element widths/weights. Then users without JS/CSS would just see a nested list similar to how the old WordPress archive page looks, so the sample timeline from the vid might be:
__Previous entries
__2006
____October 2006
____November 2006
____ …
__
__ …
__2008
____January 2008
____February 2008
__
That would provide the same info, which I think suggests it as a natural scaffold for the JS.
I didn’t mean those links to get parsed, but I think you get the idea.
I’m really impressed, can’t wait for it as well!
Michael, that is just fantastic. I’m very much looking forward to getting this into Habari.
I’ve been poking the new admin interface in wordpress 2.5 and I must say, it’s been an absolute disappointment, even compared to the current theme. I honestly feel like 2.5 is moving backwards. I imagine if you’re cranking on something as awesome that same reaction is a motivating factor in this work.
Good luck with the project — I’m looking forward to checking out Habari in a few more months to see how it’s maturing. My initial 10 minute survey looks like it’s going to be a serious competitor to wordpress self hosted blogs, and with an admin UI this slick, I can seriously see it being a definite step up.
One question I do have — the article writing text area: for all their flaws, semi-wysiwyg editing areas have quite grown on me. Will your admin interface include this, or are you leaving that to a plugin for habari?
@Michael: Just has a look, and it’s pretty darn awesome. I’m worried how much of this is actual code yet though, but I guess we’ll see pretty soon. :)
@Jeff: There are several WYSIWYG plugins already available for Habari. http://www.twofishcreative.com/michael/blog/2008/02/19/wysiwyg-editors-for-habari has more details on which are available. All of these would tie in directly to the create page, and unlike other packages out there you can have a choice as to which editor you want to use, if any at all.
hi,
Just wanted to say that I really liked the way you organized everything, especially the archives page. The navigation bar is really intuitive, loved it (both on the archives page as in the tags page). Everything is clean and simple to use. I almost think it’s too easy to use(!). I think that some users will be confused (those who aren’t much tech savvy). Confused because they’ve been using really bad designed apps for years. And even tho it isn’t finished, this is a breeze of fresh air.
I hope that some of these ideas/concepts inspire other developers/designers (especially the designers) to achieve similar results in other web apps and/or interfaces.
Really liked it, hope to see it polished and finished.
Thanks again, it was an inspiration.
J
I’m in the office now and can only watch it at home. I eager to watch it at once.
You see Michael’s admin interface. You see WordPress 2.5 take on an admin interface. You start laughing… Then you realize you will be working with the latter. And you cry.
Monolith looks great, Michael. The timeline view for posts and comments looks like a clever (and useful!) way of displaying post information. Your plan looks sufficiently well thought-out that you will probably get a lot of support for this within the Habari community (::crosses fingers::).
Waldo gets it exactly right.
Also, from the video, I think the search/archive elements are the parts I was most impressed with, very nicely done sir.
Holy crap! You like Kubrik? ;)
Yeah, you know; I kinda do :)
That, and 2001 has that unrelenting simplicity to it. It doesn’t indulge in frivolity; it just is. I like that.
It rocks!!!!
What if WP wants to use?? you accept?
Call me undecided on that so far.
Will watch it in the morning. It’s late now. I only hope I get sleep and don’t wake up just to watch the screencast.
Will watch it with high expectations as always :)
As if Wordpress developers know a good UI when they see one.
That may sound harsh, but it’s true. They would simply take “some” of the ideas and leave the rest, defeating the purpose entirely.
Nice work Michael, and it’s good to see Habari dev’s are still embracing input.
It’s awesome. Timeline view is really great. Can’t wait to see it complete and roll it in Habari core.
looks great. i’ve been wanting to get back into blogging for a while but none of the other software out there seemed appealing to me. this looks like a great product.
Really interesting, thank you. Have you considered not containing most of the “content” functionality in the admin interface… surely the UI you are providing is 90% general user centric, rather than “admin” centric? I mean to say, why not gracefully enhance the usual front end for admin functions rather than adding additional UI weight; operating on the surface of something is (IMO) better than fiddling around with the controls on the back.
Is there usability precendent for the “drop button”? I’m interested to know if users will “get” the dual function, as the affordances for it are going to be much less obvious than the currently common controls.
I’m not yet into Habari, mostly bucause i like the number of plugins and functionalities that there are availeble for Wordpress. But if things like this do get into the core and keep coming i will serously consider publishing content and developing themes for habari.
@Simon, the idea of having the management of content embedded directly into the front-end isn’t a bad idea at all. However, it will no doubt make the development of themes considerably harder and more involved. So while it would be great to have the full management functionality up front, it needs to also be out back where it doesn’t break as easily.
But when managing my own entries, I use K2’s system rather than the one in the WP admin.
As for the dropbutton, I’m not sure I’ve seen a precedent. But the way I see it, it practically teaches itself. I’m going to do some user-testing, which will hopefully show up any problems there might be.
Back @Michael, fair point about theme development. I hadn’t considered that side of things. WRT the drop button usability, would be interested in hearing how that usability testing goes.
So we’re done using wordpress now?!? :x
Yes. As previously stated.