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.

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?

share|improve this question
    
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
    
Pretty cool, thanks gentlemen. –  karlphillip Dec 18 '13 at 16:53
    
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
show 3 more comments

2 Answers

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.

share|improve this answer
    
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
show 1 more comment

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.
share|improve this answer
    
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
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.