I'm implementing something similar to source control (like GitHub for flow charts) where users will have a list of changes that can be submitted. On this review page they can click on a change to see added, deleted and modified changes (side-by-side diff for modified files).
One of they key points of this page is to maximize the change-viewer's area. Therefore, the panel for the diff fills the width/height of the window and the changes list is scrolled.
Here is the current mockup:
download bmml source – Wireframes created with Balsamiq Mockups
We also have the ability to view discussion related to these changes (comments, activity etc), which are not the primary use of this interface. The problem that I'm struggling with is where should the discussion be shown when the button is clicked? Here is the current mockup:
The current idea is that the discussion slides out (animated) from the right of the page, stays below the discussion button and fills the height of the page. The feedback that I've received is that it feels/looks awkward.
One suggestion was to use tabs to switch between changes/discussion. I don't like this option because you lose the ability to have your changes beside the discussion (for example, GitHub does this and I hate having to switch between the tabs).
My other ideas are:
- Have the discussion button also have a chevron (<) to indicate that it will "fly-out".
- Place the position of the discussion over the button when it's visible (but this feels awkward too because the button disappears).
Is there something that I'm missing that could greatly improve the discussion view?
The feedback that I've received is that it feels/looks awkward
Did you find out why it felt awkward? What did they expect? – jazZRo Dec 19 '13 at 16:29