Separate the current user from the others when you haven't voted yet #33

[oanalavinia]

• added a row that will separate the user

[evalica]

Some interaction comments about this issue:

• Usually it's easier to have the 'add' or the functionality you want the user to interact with, at the top, in order for them to find it faster. IF users have not voted, maybe the control should be at the top, since they should not make their decision by looking at what others have voted. If it's a long list of voters, the user will need to scroll a lot in order to find the place to vote.
• Also, what happens when the users cast their vote? Do we automatically merge the tables? Do we provide any visual interaction for the action? I guess the view / table will change only on page refresh.
• Also, the phrase refers only to "me": "I haven't voted yet". What about if there are others that haven't voted? Will they be listed in the same table? Does the table lists all the users that were requested to vote? or just the ones that had voted + me?
  • maybe the initial issue was that the user didn't liked that the list was alphabetical and needed a way to rapidly find the row to vote on. This could have been improved by having some visual cues for your own row (like a background-color). And again, having it at the top would help a lot with findability.

[oanalavinia]

Thanks for the remarks! The table is refreshed after "save" action, so the user is placed along with the others. But being at the bottom isn't indeed very practical. Considering your ideas I have 2 proposals (here my user is Administrator) :

• the user is display at the top of the table, even if he has voted or not (the "save" button will still be at the bottom)
• the user is displayed at the beginning only if he hasn't voted, having a background-color after so he could be easily seen (without being needed to refresh the page)

@evalica In terms of usability, which one do you find will be a better choice?

[evalica]

There are several options:

• Order Fixed: put the current user first (or last), disconsidering any order. The location should remain the same, before and after voting;
  • Pro: find the vote location fast
  • Con: no info about the order of voting
• Order alphabetical: list the users in their username / name order; (not recommended)
• Order voting: list the users in the order they have voted / timestamp; (used by similar other services)
  • Pro: the voting order is preserved
  • Con: harder for the user to find his vote on second visit. But when he votes for the first time, it will be displayed last in the table.

No matter the order, we need to display the current user in a distinctive manner: by using color, font-weight, font-size, bg-color, extra icons, extra controls, etc.

I prefer you second proposal, but with some changes: Before:

After:

Changes:

• Avatar displayed using the .user-avatar classes (see Administration - Users - Current Members (in subwiki) example)
• Avatar displaying the img + name + username.
  • Alternatively we could display using the .selectize-control classes (see Administration - Groups - edit modal example).
• Table using the Bootstrap classes for .table + .active for the selected row. .warning color (yellow) could work too, the .info one looks not that good
• Added thead and tfoot for the table headings
• Increased font-size for the checkbox controls
• Changes button label to 'Vote'
• Keep the voting order
  • I know I initially said to be listed first, but maybe it is better last, since we preserve the order + it's closer to the 'Save' button that now is listed at the end. Initial state (user hasn't voted yet):
  • In some variations of the application, the button was on the same line as the user.

---

Still, my proposal just 'mildly' highlights the current user.

An extreme (that I don't recommend) in order to highlight the current user and the vote could be:

---

Prototype code from Inspector:

<table class="xpoll medium-avatars table table-bordered">
    <thead>
        <tr>
<th> User </th>
 <th> v1 </th>  <th>  v2 </th>  <th>  v3 </th> </tr><tr>
    </tr></thead>
<tbody>
<tr class="active"><td>
<div class="clearfix user">
<span id="avatar_XWiki.Admin" class="avatar user-avatar-wrapper">
<img src="/xwiki/resources/icons/xwiki/noavatar.png?cache-version=1558356658000" alt="Picture of Admin" title="Admin" width="40" height="40" class="user-avatar" style="
    /* border: 2px solid #3b7ab8; */
">
</span>
<span class="info">
<b><span class="wikilink"><a href="/xwiki/bin/view/XWiki/Admin" style="
    /* font-weight: 700; */
">Administrator </a></span></b>
<br>
<span class="user-alias">Admin</span>
</span>
</div>
</td>
 <td>
<input type="checkbox" name="3707">
</td>
 <td>
<input type="checkbox" name="34460" checked="">
</td>
 <td>
<input type="checkbox" name="34461">
</td>
 </tr>
<tr class="">
<td>
<div class="clearfix user">
<span id="avatar_XWiki.mflorea" class="avatar user-avatar-wrapper">
<img src="/xwiki/bin/download/XWiki/mflorea/marius.png?width=40&amp;height=40&amp;rev=1.1" alt="Picture of mflorea" title="mflorea" width="40" height="40" class="user-avatar">
</span>
<span class="info">
<b><span class="wikilink"><a href="/xwiki/bin/view/XWiki/mflorea" style="
    /* font-weight: 700; */
">Marius Florea</a></span></b>
<br><span class="user-alias" style="
    /* font-weight: 700; */
">mflorea</span>
</span>
    <span class="pull-right" style="
    display: none;
">
        <span class="save">
<input type="submit" value="Save" class="button" style="">
</span>
    </span>
</div>
</td>
 <td>
<input type="checkbox" name="3707" disabled="">
</td>
 <td>
<input type="checkbox" name="34460" checked="" disabled="">
</td>
 <td>
<input type="checkbox" name="34461" disabled="">
</td>
<td style="
    width: 40px;
    border: 0;
    display: none;
    background-color: transparent;
">
    <span class="">
        <span class="save">
<input type="submit" value="Save" class="button" style="">
</span>
    </span>
</td>
 </tr>
<tr>
<td>
<div class="clearfix user">
<span id="avatar_XWiki.evalica" class="avatar user-avatar-wrapper">
<img src="/xwiki/bin/download/XWiki/evalica/avatar.png?width=40&amp;height=40&amp;rev=1.1" alt="Picture of evalica" title="evalica" width="40" height="40" class="user-avatar">
</span>
<span class="info">
<b><span class="wikilink"><a href="/xwiki/bin/view/XWiki/evalica">Ecaterina Moraru</a></span></b>
<br><span class="user-alias">evalica</span>
</span>
</div>
</td>
 <td>
<input type="checkbox" name="3707" checked="" disabled="">
</td>
 <td>
<input type="checkbox" name="34460" disabled="">
</td>
 <td>
<input type="checkbox" name="34461" disabled="">
</td>
 </tr>
</tbody>
<tfoot>
    <tr>
<th>
Number of votes
</th>
 <th> 1 </th>  <th> 2 </th>  <th> 0 </th> </tr>
</tfoot></table>

[oanalavinia]

Considering your reviews, the votes remained to be displayed using the vote order, without taking into consideration who is the current user. To have it separated, it is displayed using backgorund-color and bold font (for both cases when he has voted or not)