User Contributed Notes voting UX can be improved for DevHub

[DrewAPicture]

Based on frequent use and a lot of feedback from other users, it seems like we could improve the UX of voting on user contributed notes on DevHub references.

1. If you're logged out and try to vote, nothing happens

Seems like still making the voting arrows clickable even when logged-out might be a good idea. We could prompt for a login if the user is logged-out.

2. User contributed notes should be ordered by votes from most to least.

It doesn't seem like voting is particularly useful if we aren't also ordering notes based on that voting

2b. User contributed notes falling below a certain votes threshold should remain but get faded out, similarly to how php.net handles "bad" notes.

[Kenshino]

I really like these ideas.

The user contributed notes really need to be ordered so that the best examples are shown first. Users should not have to sieve through the notes that are ordered in date, or other manners which in the end offers no value to the end user.

[justingreerbbi]

I am onboard with this one. BUT.. A voting system that allows for voting without being logged in is vulnerable not only to spamming but could very well make the voting system "off". IMO logged in is a good. Most all users are logged into the system anyways. Public opinon is powerful and always right though.

[keesiemeijer]

I think we should only allow logged in users to vote to get the best results. Prompting a user to log in should resolve that.

The upvotes and downvotes are stored as an array in comment meta. This means we can't use them to order the comments. Before we can order the comments we must store the total score for a comment in comment_karma or as comment meta when a vote is submitted. This means we need to update all old comments with the total score also (plugin?).

Using comment meta is less expensive but the total score meta needs to be automatically set to 0 for all new comments so it's queryable.

[DrewAPicture]

Replying to keesiemeijer:

I think we should only allow logged in users to vote to get the best results. Prompting a user to log in should resolve that.

The upvotes and downvotes are stored as an array in comment meta. This means we can't use them to order the comments. Before we can order the comments we must store the total score for a comment in comment_karma or as comment meta when a vote is submitted. This means we need to update all old comments with the total score also (plugin?).

I'm not sure we actually need to store the vote score to sort it. In fact, we're currently using wp_list_comments() with a callback which skips basically 90% of what wp_list_comments() is used for for regular post comments.

The upsides of how Notes are currently intended to be implemented are:

1) We don't need to worry about nesting notes because while it's technically supported for display when replying from the admin, there's no UI for replying to notes: thus, 1 level of notes.

2) As far as I know, there's no plans to paginate notes, so we can simply list them all out at once.

3) We could probably skip wp_list_comments() altogether and query for and sort them ourselves. Having played around with it a little bit, sorting by vote score could easily happen in a usort() callback, calculate the score and sort for each then output the list with our existing callback.

[keesiemeijer]

Good points. I'm all for skipping wp_list_comments() and passing up on querying comments by vote. Nested notes are disabled for now but could be used to provide context or feedback to notes as described in #1504

[keesiemeijer]

Remove wp_list_comments() and order comments by vote

[DrewAPicture]

@keesiemeijer Looks (and works) pretty good!

Side-note: I also noticed the other day that if you've voted up something to 1 from 0 then downvote, it jumps to -1 instead of back to 0. Might open a separate ticket to cover that behavior.

[keesiemeijer]

@DrewAPicture I think that's the intended behavior.

You can only vote up or down, not cancel your vote after upvoting.

It's not very intuitive but logical.
Lets say you voted up and somebody else voted down so the count is 0. Now, when you vote down the count goes to -2 because two users have voted down.

[DrewAPicture]

I guess maybe I just expected reddit-style voting that happens one vote up or down at a time regardless of what the score is. They do seem to have perfected the philosophy, after all :-)

[samuelsidler]

Replying to DrewAPicture:

I guess maybe I just expected reddit-style voting that happens one vote up or down at a time regardless of what the score is. They do seem to have perfected the philosophy, after all :-)

That's not how Reddit works. :)

If a post is at 5 and you up-vote it, it'll go up to 6. If you then down-vote it, it will go to 4. Conversely, you can click on the up-vote button again and it'll remove your vote entirely.

That seems like the ideal and expected behavior to me, which is the behavior we already have. Do we already allow "un-voting" by clicking on the up- or down-vote a second time?

[DrewAPicture]

Replying to samuelsidler:

Do we already allow "un-voting" by clicking on the up- or down-vote a second time?

This is what I meant by one up one down, sorry for not being clear. We can vote up or down but not un-vote back down or back up one.

[keesiemeijer]

Replying to samuelsidler:

The behavior is:

• you vote up from 0, it goes to 1, and you can only vote down
• you vote down from 1, it goes to -1, and you can only vote up
• you vote up from -1, it goes to 1, and you can only vote down
• etc.

There is no way to undo your vote.

It took me some time to figure that out. And at first I thought I (or the theme) was doing something wrong. If it's confusing to me and @DrewAPicture, it certainly is going to confuse regular users. How about a voting process like this (if possible)?

• you vote up from 0, it goes to 1, and you can only vote down
• you vote down from 1, it goes to 0, and you can vote up and down (canceling your vote)
• you vote down from 0, it goes to -1, and you can only vote up
• you vote up from -1, it goes to 0, and you can vote up and down (canceling your vote)

[samuelsidler]

Replying to keesiemeijer:

• you vote up from 0, it goes to 1, and you can only vote down
• you vote down from 1, it goes to 0, and you can vote up and down (canceling your vote)
• you vote down from 0, it goes to -1, and you can only vote up
• you vote up from -1, it goes to 0, and you can vote up and down (canceling your vote)

That seems more confusing than the Reddit way of allowing you to remove your vote entirely by clicking it again.

[keesiemeijer]

The most confusing part (for me) was seeing the vote skip one vote. As I've got no background with Reddit clicking twice to cancel the vote would also puzzle me. I would figure it out eventually though :)

I think the voting process deserves its own ticket

[keesiemeijer]

Tidied user contributed notes

[keesiemeijer]

The user contributed notes feel very cluttered. It's difficult to see where one note ends and another begins. There is too much information presented in a small space. Do we really need the avatar or the time a note was submitted?

The screenshot above is using the notes of ​get_posts()

I'm no designer but this feels less cluttered to me.

[keesiemeijer]

Declutter user notes and add transparency to bad user notes

[DrewAPicture]

@keesiemeijer: I really like 1649.png​. I think that's a big improvement.

And I think it would be nice to retain the user avatar. It's not necessary, but I've often found in this community that users know other users' avatars and not necessarily their handles, and thusly place greater import in those trusted users' contributors, so it in this context it might actually be useful information to include.

[keesiemeijer]

Add reddit-style voting and add avatar back.

[keesiemeijer]

1649.2.patch​ Adds reddit-style voting with WAI-ARIA accessibility improvements and adds the avatar back. The display of notes is reverted back to using the wp_list_comments() function. Get the ordered comments by using the wporg_developer_get_ordered_notes() function, then use wp_list_comments() for display. This allows you to display ordered comments and also display (nested) child comments if needed.

All style changes are tested with all modern browsers and IE8 and up. The display of notes in IE8 is not pretty (but readable/usable). This seems consistent with the rest of the site :)

[keesiemeijer]

Note with avatar

[DrewAPicture]

Created #1755 to cover the proposed voting mechanism changes.

[coffee2code]

In 3379:

developer.wordpress.org: Improve UX/UI for user contributed notes.

• UI improvements to notes.
• Order notes in descending order by cumulative vote rating.
• Notes with a cumulative vote rating below -1 are shown slightly faded out.

Props keesiemeijer.
See #1649.

[coffee2code]

1649.2.patch​ was applied except for the changes in user vote handling (all the changes to inc/user-content-voting.php). That file had changes related to:

• Changes to user vote handling, which will/should be handled separately in #1755.
• Enabling the vote links for logged out users (which redirects them to log in then takes them back). This is the sole remaining task from the original request.

[coffee2code]

In 3560:

developer.wordpress.org: Make vote arrows actual links for visistors who are not logged in.

Links to login.wordpress.org for login, with a redirect_to back to the code reference note they attempted to vote on.

Also adds a 'title' attribute string when voting is disabled.

Props keesiemeijer for initial patch.
Fixes #1649.

[coffee2code]

In 3564:

developer.wordpress.org: Style user contributed notes for wp-parser-class posts as well.

See #1649.