Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-18545

Align Like button visuals with known conventions



    • Improvement
    • Resolution: Unresolved
    • Major
    • None
    • 12.10.6
    • Like
    • Unknown
    • Awaiting Committer feedback


      The current implementation of the like button visuals on 12.10.6 (as voted here https://forum.xwiki.org/t/introducing-like-feature/7339 ) has the following characteristics:

      • the color of the UI control is an active color (primary button color) when the current user hasn't liked the page and the inactive color (default button color) when the current user has already liked the page. While this makes sense from a "highlighting the most interesting action" point of view, it's completely counter-intuitive on usage, from all the other like usages in other apps, a user expects the heart to "light up" when they like a page
      • there is too much information crammed in a single button: the like action as well as the number of current likes: thus, we need to have a tooltip with 2 information in the tooltip. This is really puzzling, it would be easier if the 2 purposes would be served by 2 different controls, each with its own tooltip
      • the access to the list of likers is inexplicably far away from this UI and thus rather "hidden", although the actual number of likes is displayed - one needs to know that the list of likers is linked from the page content menu and go click there
        • displaying the number of likes without giving an almost equally easy access to the actual likers is pushing too much for quantity over quality (it shows the number of likes and making it too hard to see whether the likers are trustworthy).

      I propose the following new UI, using visuals inspired by similar features in other software:

      • en empty heart that fills when people like a page as the main control to like content
      • followed by the number of likes that is a link to the likers


        1. Selection_034.png
          74 kB
        2. Selection_035.png
          74 kB
        3. Selection_036.png
          73 kB
        4. Selection_037.png
          73 kB

        Issue Links



              lucaa Anca Luca
              lucaa Anca Luca
              3 Vote for this issue
              4 Start watching this issue