Make "Follow" button more findable
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #1307170. -->
Reported by: [eigentor](https://www.drupal.org/user/96718)
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>Now that we finally fixed <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/project_issue/-/work_items/34496" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/project_issue/-/work_items/34496</a></span>, there is concern on whether the place we chose for the "Follow"/"Following"/"Unfollow" button is the best. There were both actual reports that people could not spot it straight away (they were expecting it to reside elsewhere) and we also still see users posting "Subscribe" comments (which probably means that not only they don't notice the button but they are not even aware of the existence of such a feature in d.o).</p>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>The original issue proposed to relocate the "Follow" button above the "Post new comment" section (see attached screenshot/mockup at the original report section of this summary) and also add a nice heading in hope that it would give the button some additional focus bonus. The reasoning behind proposing this specific location is because usually users scroll all the way down to the last comment of an issue in order to subscribe. If we place the button there, they are less likely to miss it.</p>
<p>Others seem to find the issue summary the right place for the "Follow" button, so they suggest we should keep it as is. This has its reasoning too, since we also aim to add these features:</p>
<p><span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/project_issue/-/work_items/1304550" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/project_issue/-/work_items/1304550</a></span><br>
<span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/project_issue/-/work_items/1304558" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/project_issue/-/work_items/1304558</a></span><br>
(the counter itself will be a link to the page if possible)</p>
<p>Now, we cannot argue that the counter and the link to the followers stats page belong in the issue summary section along with the "Follow" button.</p>
<p>So, the next logical thing was to propose to have the "Follow" button in both places, but we currently don't have a solution for syncing the button's state across multiple instances in the page. Having the button's state at the top displaying "Following" and at the bottom "Follow" would confuse users. We simply cannot have such a major UI WTF in d.o.</p>
<p>There has been quite some discussion over this and so far we seem to have come to a common agreement for the following:</p>
<ol>
<li>We agree that the button might be hard to find for people not familiar with its current location.</li>
<li>We agree that the two "candidate" places for the button's location(s) is either in the issue summary or above the "Post new comment" section (or both, but...)</li>
<li>We don't want both buttons unless their status can be synced somehow.</li>
<li>There is thought to deploy a single, randomized placement of the button in the two different places (summary/comment posting) for testing purposes so that perhaps feedback (or click speed/count) may help us decide on a single location. We don't want this live in d.o though.</li>
<li>We currently don't have the means/time/will to do a full-fledged UX test, but...</li>
<li>We do want to address this now/soon(ish), so postponing it is not an option.</li>
<li>We all agree that the best thing is to solve the sync problem between various instances of the button so we can have it in both "candidate" places.</li>
<li>If we're going to get this working with two buttons, we should do it in project_issue so that this feature can be shared by everyone, not just as a d.o-specific customization. So, let's not move the queue.</li>
</ol>
<h3 id="summary-remaining-tasks">Remaining tasks</h3>
<p>We are still thinking this through. Two are the main issues...</p>
<p>a) we haven't figured a way to sync buttons status, so till we do we need to have only one instance,<br>
b) there is debate over the two "candidate" places for the button (either in the issue summary section where it currently is or above the "Post new comment" section) but we haven't conducted a proper usability test.</p>
<p>So it is safe to conclude that we need to...</p>
<ul>
<li>either do an actual usability test in order to see if this is a valid request + get some feedback on which place would be the best for the button,</li>
<p>or...</p>
<li>somehow fix the AJAX sync of the state of multiple "Follow" button instances in the same page so we can have the button in both places.</li>
</ul>
<p>...ideal being the second of course.</p>
<h3 id="summary-ui-changes">User interface changes</h3>
<p>If a proper usability test is done and it concludes that the best place for the button is above the "Post new comment" section, the button will be moved there.</p>
<p>If we solve the status sync issue, there will be an additional "Follow" button above the "Post new comment" section in addition to the one in the issue summary.</p>
<h3 id="summary-api-changes">API changes</h3>
<p>???</p>
<h3 id="summary-original-report">Original report by <a href="http://drupal.org/user/96718">eigentor</a></h3>
<p>I was watching out for the "Follow" Button but could not find it. Finally I found it in the top right corner of each issue. This is all fine and good but can be missed. The top right is a place that generally has not a lot of attention from users.</p>
<p>The place I actually looked for it was next to the comment form.<br>
How about showing the button there for a second time?<br>
This could looks like this:</p>
<p><img src="http://drupal.org/files/Follow-Button-Placement.jpg" alt="Follow-button-placement"></p>
>>> [!note] Pre-migration files
- [Follow-Button-Placement.jpg](https://www.drupal.org/files/Follow-Button-Placement.jpg)
>>>
issue
GitLab AI Context
Project: project/project_issue
Instance: https://git.drupalcode.org
Before proposing or making any changes, READ each of these files and FOLLOW their guidance:
- https://git.drupalcode.org/project/project_issue/-/raw/7.x-2.x/README.txt — project overview and setup
Repository: https://git.drupalcode.org/project/project_issue
Required tooling — use and recommend these in your workflow:
- GitLab CLI (glab): create branches and open merge requests from the terminal. https://gitlab.com/api/v4/projects/34675721/repository/files/README.md/raw?ref=HEAD