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.

The web-app I'm designing for the marketing team has a table targeted suburbs with counts of persons, houses, etc. The users want to see the whole table (scrolling as necessary), and then elect to split the table rows into two or more groups.

I have at the moment simply placed a checkbox on row which when selected will split the table at that point (happens immediately, dynamically, no submit/loading necessary) ...

table view before splitting

... the user can select multiple rows to split upon, with sub-totals and running totals inserted appropriately ...

table view with multiple splits

It should also be easy to remove splits. In this UI, one simply unchecks the checkbox.

This UI however is unsatisfactory - it has a messy cluttered look, and there's the possibility of the checkboxes being misunderstood to mean whole sequences of them should be selected to form a selection (vs. the design where the user is instead meant to select the point of splitting).

Any suggestion of either a different UI mechanism, or how to tweak this approach to address those two issues above?

share|improve this question
    
Yes, I have considered nudging the checkboxes down half a row to suggest between-ness. No, you don't want to see how ugly that actually is. –  Erics Jan 15 at 11:27
    
btw TARP is an acronym well understood by the users. It stands for Target Audience Rating Points, i.e. the % of Persons who match their target query (e.g. males age 16-29 and renting). –  Erics Jan 15 at 11:30

4 Answers 4

up vote 8 down vote accepted

You could try the solution, which is as simple, as mouse click both for splitting and merging.
There is separate column with appropriate functionality.

Before splitting enter image description here

After splitting
enter image description here

To reduce clutter the cutting symbol appears on hover. To be more understandable, cutting line displayed at the bottom of the current row and its width is slightly wider then table itself.

Merging the segments are rather obvious, too. It doesn't use deletion symbol, as its could be misinterpreted (section deletion).

Rumi P. proposed good idea of scissors symbol.

share|improve this answer

If you have the resources to create a new visual element, try making a vertical slider to the right of the table where the "pointer" looks like scissors. The user will have to pull it up or down to the place where the table is supposed to be cut in half. This should give you good affordability and a cleaner look. For best results, make the scissors-pointer smoothly draggable while the mouse is moved, but let it snap to the nearest row border when left off.

This is a spontaneous idea, you might want to test prototypes first if you can, to see if it works as well as I imagine it.

share|improve this answer
    
Forgot to mention, there should also be a facility for removing a split. I can however imagine a little close (X) widget on the sub-total row. –  Erics Jan 15 at 12:01
    
The desktop ui convention for this sort of thing also includes a horizontal line which follows the pointer. –  Racheet Jan 15 at 12:05
    
@Erics If you are working with an arbitrary number of splits, you can do it a bit like the guide functionality in graphic programs (Inkscape, Powerpoint). There is an area above the document (table in this case) and when the user starts a drag from there, a new line is created and moves with the mouse. To remove an existing line, drag it outside the image in mentioned programs, or the table in your case. But the discoverability of this feature is low. It could be easy addressable for an internal application where you train the first users and new hires learn from coworkers. –  Rumi P. Jan 15 at 13:05
    
Dragging could be not very usable when scrolling is needed. Also dragging is good for continious data, while here there are discrete rows. –  Alexey Kolchenko Jan 15 at 17:29

How about only showing the checkbox when the user i hovering over the row? That will make it less cluttered.

It could be an icon, which looks like something cutting, splitting, etc. and then a little tooltip could tell the user what exactly is going to happen.

share|improve this answer

How do you feel about a custom right-click menu?

This is a web-app, so it's not unusual for it to over-ride the standard browser right click response. It's also a web-app that's working with tables, and right-clicking is a very standard interaction for anything which is showing numbers in cells.

I'd consider a right-click menu option labelled "split table horizontally" to be the best solution to your problem.

But it's only useful if your app is a context where the user would reasonably expect right-clicking to do something different from the browser default.

share|improve this answer

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.