Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In our enterprise management software, we use "kanban" views for different purposes; pipeline of business opportunities, tasks, recruitment process, bugtracker, etc. The example bellow shows the screenshot of the opportunities view;

Kanban of business Opportunities in OpenERP

I'd like to find a good solution to easily fold/unfold some columns in order to save space. (the Lost and Won opportunities can be folded as we usually do not work in these stages) We still should be able drop items in folded columns.

We tried two solutions but we don't like both of them;

  • Small width and vertical title 2
  • Folded columns on the top 3

Folded column inside Folded column top

Which one do you prefer and do you have a better solution ?

share|improve this question
    
kanbanery.com might give you some fresh ideas. –  greenforest Jul 9 '12 at 8:01
add comment

5 Answers

up vote 3 down vote accepted

The key problem here is that the desire to conserve horizontal space clashes with our perception of how the language is written.

It's a relatively common pattern to collapse columns & panes into thin "toolbars" on the side of the screen, as seen in Outlook 2007:

enter image description here enter image description here

Thus, the most obvious solution for the problem with Kanban board would be to minimize the column into a bar with vertical text:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

But it doesn't work well even with the text written in capital letters (you don't want to see the small letter version) because w aren't used to reading text in that direction. In fact, there isn't even a consensus on which way to rotate the text for book spines. Had it been an interface in Chinese, Japanese, or Korean, then vertical order of letters would have been fine as those languages are commonly written top-to-bottom. Thus, whatever method is employed it must have the text written horizontally.

I see 2 possible solutions: the first one is easy to implement and the second one is more elegant.

First solution

This one is actually similar to the one that the OP has already tried. The key difference is to have toggle buttons for each of the columns instead of showing just the ones that are collapsed. This way the user can see the complete list of all available columns & their status (visible or hidden), but there's still the limitation of the horizontal space with narrow screens or a large number of columns/bins.

mockup

download bmml source

Second solution

A far more elegant way of collapsing columns is to let the neighboring column to "slide" over it covering just enough to show that some content is hidden. When mouse hovers over the collapse column, it expands temporarily exposing the content & letting the user interact with it. This approach not only allows users to easily see the status of each column but also reduces the time it takes to check the content of any collapsed one since expansion requires only hovering versus clicking. The toggle can be made with something like a lock icon (locked position vs floating position).

enter image description here

share|improve this answer
add comment

I think your main concern should be keeping structure and order clear and readable. In that respect, it seems to me that the problems with your two options are:

  1. Vertical titles seem like separators or categories applying to following or preceding columns, depending on text orientation.
  2. Left aligned tabs no longer retain the collapsed column's order in the global Kanban layout.

I would suggest a slight tweak to your second option to retain the column order information:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

One option is to give users ability to stack data within a column. This should help them make better use space as they see fit. (e.g. Negotiation and Won in same column)

Another option is, giving users ability to create custom Kanban views, and save them as presets. I say this, because it appears that some columns have logical groupings. (e.g. "New" "Qualifications" "Proposal"). So it might be useful to have users fold/unfold columns in groups, rather then individually.

share|improve this answer
    
In Kanban left to right order is fixed and shows progress. And even stacking items has its purpose - usually it shows priority. Stacking columns could mislead users. –  FrankL Jul 9 '12 at 7:45
add comment

Nice tool.

As in Kanban there is a fixed timeline from left to right columns and its main purpose is to visualise the progress, I think its important to still see columns in the correct order, even if they are collapsed or minimised.

Thus I think your first draft is more appropriate to Kanban needs.

Just one suggestion: What do you think about indicating number or position of tasks inside the collapsed column? Thus you would only loose title and description, but keep position and amounts.

Like the solution in Outlook if you have two dates a the same time, size just divide in half. You could show this-alike in a collapsed column.

enter image description here Source: http://info.eps.surrey.ac.uk

share|improve this answer
    
You're too focused on Kanban principles. This is more about collapsing columns in general than Kanban in particular. –  dnbrv Jul 9 '12 at 8:26
    
@dnbrv I don't think so. Its a Kanban questiom "Folding columns of a kanban view" and its a Kanban software. Kanban has fixed patterns with meanings, if you invent something different its not Kanban anymore. Actually its the same like your second solution ;) –  FrankL Jul 9 '12 at 8:35
add comment

Ok, I may be way off the mark here, but here's what popped into my mind:

  • When a column is folded, open up/add a "folded columns" column that is narrower than the other columns, but not as narrow as the folded "Development" column in your example.
  • Add the folded column to the "folded columns" column as a tile/card.
  • When the user folds another column, add that to the "folded columns" column as a tile/card as well.

Admittedly you don't save much space if you only fold a single column, but after that it can add up and the big plus seems to me that you retain proper drop targets for the cards in unfolded columns.

Additional "features" that are enabled by this:

  • Clicking on the tile/card of a folded column would unfold it.
  • Dragging a column (header) to the folded columns column would fold it.
  • Rearranging column order in folded columns column.
  • Showing some stats on the tile/card of a folded column.
  • ...

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.