More Intuitive Replies: Hide replies box for posts with zero replies OR Add Reply button to post

Interesting, we haven’t had that issue. Post length maybe could impact where this shows up. 
 

I feel like part of the issue is that the number of replies and “be the first to reply” take up a lot of space. Putting the two on one line could help here. 
 

We also customized our phrase to make it more of a CTA 

In the meantime there is a simple workaround to remove that section altogether when there are 0 replies, which can be done with just a few lines of javascript:

<script>
  var repliesCount = document.getElementsByClassName("qa-total-replies")[0];
  if (repliesCount.innerHTML === "0 replies") {
    var replyCountArea = document.getElementById("comments");
    replyCountArea.classList.add("dont-show");
  }
</script>

In combination with the CSS:

.dont-show {
  display:none; 
}

Finally you can play around with this to decide what shows and does not, ie perhaps the number of replies should still appear, just apply the dont-show class to the part you want to hide:
 

Thanks, @SmartlyGreg! This is very helpful! We’ll probably deploy this solution while the idea collects votes / we see if Insided implements this idea. 

Hey all, great to see the discussion and idea sharing goes on here. @DannyPancratz thanks for raising this, good point that the reply action should be easier to access. 

Internally we also have some early ideas (which still requires some user testing though) and we’d love to hear about your opinions: 

I like the idea as well:

Alternatively, the most intuitive solution would be adding a reply option to the original post that’s similar to quote functionality: jump to the reply editor, just without the quote.

@xiaoyu-shen i’ve just used a third party script to add the profile picture to the reply box myself. i find it grabs the user’s attention. 
Looking forward to the update!

@xiaoyu-shen I like all three of the concepts you’ve shared above. They’re all an improvement over the current UX in my opinion. 

My preference is the third option that has both the reply icon on the original post and the improved UX with the profile picture. 

@xiaoyu-shen I’ve recently implemented the solution @SmartlyGreg shared above (with the help of @matt enbar from support )

While this helps with posts that have 0 replies, it now occurs to me that posts with 1+ replies still bury the reply box lower on the page. 

Therefore, my recommendation is that the third option in your designs above is best, as it makes replying intuitive and a clear action, rather than Quote as the default option. 

Additionally, I would recommend that Reply be either the first or second option either before or directly after Like. 

@DannyPancratz I got you covered… The caveat being that this will not work when there are multiple pages… and while I’m sure there would be a way to get that to work too, it’d likely be too hacky…

I made it a strong CTA but you could set the class you want and CSS to match, but until this is actually implemented this is what I got:

Script:

<!-- Add reply button to original posts -->
<script>
console.log("All good!!!");
if (inSidedData.content.topic.id > 0) {
var objUserLink = document.querySelector('.main-navigation--profile-link');
  console.log("All good!");
       if (inSidedData.content.topic.id > 0) {
        var defaultReply = document.querySelector("div.reply-editor-wrapper > h3");
        defaultReply.setAttribute("id", "replyBox");
         console.log("All good here");
        var buttonLocation = document.querySelector(".qa-topic-post-box");
        var anchorButton = document.createTextNode("Submit a reply!");
        var newButton = document.createElement("a");
  		newButton.appendChild(anchorButton);
         console.log("All good here too");
  		buttonLocation.appendChild(newButton).setAttribute('id','replyButton');
        var replyButton = document.querySelector("#replyButton");
         console.log("And here");
        replyButton.setAttribute('class','btn btn--secondary');
        replyButton.setAttribute('href','#replyBox');
       }
}
</script>

CSS:

#replyButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 35% -10px 35%;
}

Outcome:

The button is an anchor link to the reply box at the bottom… it works! :)

Based on this conversation, I worked with support on implementing @SmartlyGreg’s script above. Today I noticed it was working for some topic types (questions, conversations), but not others (ideas, product updates). So Matt helped me update it and here’s the script if others want to use it.