25 Apr

UI concept: accordion history

April 25th, 2007 — 2:28 pm Chris

Update: The demo has been updated as of 2:13pm 4/26/2007

As you may have read, we will be radically changing the way versions are implemented in the next version of slate (0.3.4). The new implementation has resulted in the need for a new interface, as well.

We’re currently exploring an accordion style UI for navigating the “history” (versions) of a particular content area.

Live demo

I have prepared a basic demo of how the interface may work. The final product should look pretty much like this:

Accordion UI

Why?

The current implementation consists of a list of links stating the version, which upon clicking opens the dreaded Rollback tab in the editor. Not only is this horrible, but practically no one even knows it exists! Clearly, we need a simpler interface that people will understand.

We tossed around the idea of having a “History” tab. However, I soon decided I really wanted to be rid of the whole tabbed interface for the editor, so we (Dave) came up with the idea of navigating versions ala GMail conversations. We really weren’t sure how it would turn out until the mockup, but I’m loving it so far. Dave originally wanted the versions listed in reverse order, partly because of the large “header” that the closed panels create. I felt it should go in the natural order, and that’s what the demo currently uses.

Feedback!

Please, try out the demo and let us know what you think. Does the interface make sense/feel intuitive?

#1: Ryan said on Apr 26 at 1:29 am

Very nice. I think it definitely feels intuitive. Is the “copy to draft” and all-or-nothing operation? And when you say “a particular content area,” does that mean a particular piece of a page (such as a sidebar or something)? Or is an “area” a page in and of itself?

I’m trying to visualize what the versions are of – meaning, will there be several sections with this accordion header at once? Or do you edit one section/area at a time?

Overall, I think it’s a great idea. It’s definitely not confusing and it does make sense.

#2: Chris said on Apr 26 at 8:40 am

A content area is a piece of a page that is editable, such as the main body, the footer, sidebar, etc. This accordion interface would appear in a pop-up editor, so you’d only be seeing one of them at a time.

Copy to draft will take the full contents of that version into the draft version – this should be a much cleaner and clearer approach to performing a rollback. You select a version, click Copy to draft, and from there you can publish. I haven’t thought about making that more granular (i.e. being able to see the Textile for a previous version and copy only pieces of it) but I suspect that would make the interface a bit too confusing. (Seeing a textarea for a version might make people think it can/will be saved).

Thanks for the feedback ;-)

#3: Ryan said on Apr 26 at 10:40 am

I was asking about the ‘piece of a page’ or the ‘entire page’ because I was afraid that it would look a little too cluttered on one screen. However, since it’s a popup and you’ll only see one of them at a time, I personally think it will be perfect. I’d like to see screen shots when you guys get it designed.

I totally agree with the way ‘copy to draft’ is working. I think it would be much more confusing being able to select pieces of an area. Besides, once you have the entire thing, you can rip out what you don’t want.

I actually really like this approach to versions. And just to make sure, I believe I’ve read in a previous post, 5 versions is the limit, right? (so the accordion won’t grow to be 20 versions stacked)

#4: Sarah said on Apr 26 at 12:12 pm

Like the accordion style – very slick! I think this will make the option of using previous versions more noticeable and less intimidating for the average user. On some sites, I use the current minor edit feature a lot, so I may miss that initially, but if I can train myself to use preview, it should be OK

#5: Dave said on Apr 26 at 12:28 pm

The reason why ‘minor edit’ is no longer there is because you can’t save multiple draft versions. So all of your saves as you’re editing a particular content area are to one, and only one, draft version (which is the equivalent of clicking ‘minor edit’). One of the things this makes really easy for us is the auto-save feature which I think we’re playing with setting at one minute. So every minute that you’re editing a region the draft content will be saved.

Also this way, all of the “old versions” are actually production versions that you felt were worthy of publishing to the world. The ones that you’d actually need to fall back to in case something went horribly wrong with content you just published.

Add comment

You are adding a new comment