Usability of vertical split bar to resize splitted view

Question

I have a program with an interface that is much like jsfiddle, specifically the vertically draggable inner "bar" that lets you resize between the size of the left panels and the right panels. I implemented the following functionality in that bar:

1. When you hover over the vertical bar, a left/right arrow appears to indicate this bar can be moved.
2. When you click on the < button at the top of the bar, the entire left panel will be collapsed to it's minimum size.
3. When you click on the > button at the top of the bar, the entire right panel will be collapsed to it's minimum size.

My test users indicted three problems with this approach:

1. The width of the bar is very narrow and thus exact precision is required.
2. The buttons at top did not evoke their functionality. Some users thought they were drag the handler(s) rather than buttons that collapse entirely. Some users even did not see them.
3. This functionality is not usable with keyboard.

My question is how I can approve the usability and or design of this kind of UI element, without using precious space to explicitly spell it all out with full sentences. I would like to hear alternatives that tackle one or more of the above problems without losing functionality.

I've already done some research myself regarding common ways of doing a split bar in UI:

1. Use a double lined bar.
2. Use 3 small parallel lines close to each other (like in the jsfiddle website).
3. Make a small extension in the middle of the bar to evoke the feeling of a button, like this:

However, I'm not sure if this are in fact usability practices that have proven themself to be good, or just random ways of doing it. It's hard to find consistency when different ways of creating this ui element exist.

Answer 1

(1) First off, the draggable part. I think this is good practice but I often notice people tend to make these inbetween-bars too narrow, why not add some space, you can't do anything wrong with that.

It doesn't really matter which icon you use there. Most users are accustomed to either 2 lines (like jsfiddle) or any number of dots:

(2) Now, the arrows for the collapsible part might be a bit misleading. But what about the way CodePen handles it:

First, they used a checkbox:

Recently, they switched over to these collapse/open icons:

Both are equally usable options, they just don't exactly mean the same thing when you have 3 or more collapsible boxes..

Answer 2

This really depends on what you're trying to do. Apple uses this similar interface for partitioning HD space for different OSes.

This gives a visual representation of how much each partition is going to have in terms of space.

Again, this entirely depends on what your interface is about.