14 votes

Distinguish "voted" state better?

Posted by Pistos
Tags: suggestions, self post, ux, votes

I've been on Tildes for several months now, but, to this day, I still have trouble discerning from the UI that I've already voted on something. I end up clicking, which makes it unvote, and I have to click to vote again.

This is less of a problem in the feed, because a voted post stands out more, but when you click through to a post page, that context is gone, and the problem is very pronounced.

I don't have any great solutions top of mind, but you could explore colour changes, wording changes, or extra wording.

7 comments

  1. [2]
    Comment deleted by author
    Link
    1. Pistos
      Link Parent
      Does that for me, too, but it seems too similar to the unvoted state, in my opinion.

      Does that for me, too, but it seems too similar to the unvoted state, in my opinion.

      3 votes
  2. [5]
    tomf
    Link
    The beauty of how simple Tildes' CSS is structured is that its a breeze to make it your own using. In this case, I'm using Tiltweaks from @admicos, then I have some of my own overrides in another...

    The beauty of how simple Tildes' CSS is structured is that its a breeze to make it your own using. In this case, I'm using Tiltweaks from @admicos, then I have some of my own overrides in another file. In this case of the voting buttons, I have

    body .topic-voting.btn-used {
    border-color: transparent;
    background: var(--button);
    color: var(--background-input);
}

    (demo)

    4 votes
    1. [4]
      Pistos
      Link Parent
      Nice. So how do I use this? Chrome extension? However, even if this fixes it for you and me, unfortunately new users will still potentially experience this UX problem. I think it's worth fixing in...

      Nice. So how do I use this? Chrome extension?

      However, even if this fixes it for you and me, unfortunately new users will still potentially experience this UX problem. I think it's worth fixing in the core code of the site.

      3 votes
      1. [3]
        tomf
        (edited )
        Link Parent
        install this extension go to here and install it After that, click on the browser extension and, at the bottom, click on 'write style for tildes.net' paste in this and save it. body...
        1. install this extension
        2. go to here and install it
        3. After that, click on the browser extension and, at the bottom, click on 'write style for tildes.net'
        4. paste in this and save it.
        body .topic-voting.btn-used {
    border-color: transparent;
    background: var(--button-color);
    color: var(--background-input-color);
}

        It doesn't fix it for everyone, but you might be one of a small handful dealing with it. I don't mind the default state, but this style is an old hang over from an earlier theme I made. I'm just used to it.

        You can change all CSS on the site with this, which is fun.

        With Tiltweaks, go to the Stylus extension and hit the gear next to Tiltweaks. You can modify a few things like the default font size and stuff.

        5 votes
        1. [2]
          Deimos
          Link Parent
          Sorry, this will be a little bit annoying, but your comments reminded me that I was meaning to add a -color suffix to all the custom properties. I've done that now, so they'll need to be changed...

          Sorry, this will be a little bit annoying, but your comments reminded me that I was meaning to add a -color suffix to all the custom properties. I've done that now, so they'll need to be changed from --button to --button-color and so on.

          4 votes
          1. tomf
            Link Parent
            no problem at all. I updated the comment, too. The CSS for tildes is such a breeze to work with.

            no problem at all. I updated the comment, too.

            The CSS for tildes is such a breeze to work with.

            3 votes
  3. cfabbro
    Link
    Sorry, I have been slacking on my ~tildes/Gitlab duties, so I only just now finally got around to adding this as an issue to gitlab: https://gitlab.com/tildes/tildes/-/issues/705

    Sorry, I have been slacking on my ~tildes/Gitlab duties, so I only just now finally got around to adding this as an issue to gitlab: https://gitlab.com/tildes/tildes/-/issues/705

    2 votes