4

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:

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:

mockup

download bmml source

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:

  1. Have the discussion button also have a chevron (<) to indicate that it will "fly-out".
  2. 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?

Improve this question
7
  • Which software did you use to create the mockup?
    – karlphillip
    Dec 18 '13 at 15:54
  • 1
    @karlphillip I use Balsamiq mockups. This site also supports it directly with the mockup button (it's not the smiley anymore though).
    – TheCloudlessSky
    Dec 18 '13 at 16:24
  • @karlphillip: There are some posts on our Meta site about the integrated Balsamiq mockups tool - such as the initial one here: meta.ux.stackexchange.com/questions/647/…
    – JonW ♦
    Dec 18 '13 at 16:36
  • 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
  • @jazZRo Just that the button staying visible (but active) and having the discussion below. That was pretty much all of the feedback.
    – TheCloudlessSky
    Dec 20 '13 at 1:31
2

I'm going to suggest a totally different approach, feel free to ignore me: I would like to see the discussion window at the bottom of that page, instead of accessed through a button:

enter image description here

Discussions, comments and activities related to the code are as important as the code itself and should be visible at all times.

EDIT:

In case you can't change the layout of the frame, you can leave the button where it is and let it pop out the discussion window below it, just like the 2nd image you shared.

I would just like to add that it might be a good idea to add a parenthesis (3) after the label to indicate how many messages there are in that thread.

Improve this answer
6
  • Yeah - that's the most obvious solution, however it's not code that they can modify. If you check my post history, you'll see that it's sort of like flow-charts but with revision control. Therefore, the area to view the diff really needs to be maximized. Thanks for your idea, though!
    – TheCloudlessSky
    Dec 18 '13 at 16:21
  • In that case, leave the Discussion button where it is and append a parenthesis, in this case (3), to indicate how many messages there are in that thread.
    – karlphillip
    Dec 18 '13 at 16:24
  • After the few tests that I did with the users, they weren't confused about the actual button, but rather the placement of the discussion when it slides out.
    – TheCloudlessSky
    Dec 18 '13 at 16:26
  • I like the way it pops out under the button itself.
    – karlphillip
    Dec 18 '13 at 16:27
  • Ha ha - me too... which is why I've been surprised about their reactions thus far... :)
    – TheCloudlessSky
    Dec 18 '13 at 16:29
0

I have found that Google Docs' comments to be very efficient, natural and easy to use.

  • On the desktop they appear floating off the edge of the document to the right, next to the text that relates to the comment. Each comment is it's own thread and people can respond to them right there.
  • On mobile (Android), the comments appear at the bottom of the screen, one at a time, and allow you to click from one to the next.
Improve this answer
1
  • Yeah - we considered this too. The problem for us is that discussion also shows activity (for example that something was created, approved etc.). If you click the comments button in Google Docs, you can see something similar to what we're trying to achieve.
    – TheCloudlessSky
    Dec 18 '13 at 21:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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