15
  1. A new user receives a good answer
  2. Clicks the tick✅ next to it
  3. Receives another good answer
  4. Proceeds to tick that as well
  5. Unexpected[to a new user] result: First answer gets unaccepted
  6. User potentially unaware of this, that answer might well have been off-screen

For most people, a checkbox/tickmark means Add to selection or Correct and is not expected to be mutually-exclusive. There is the radio button🔘 for that.


I am not proposing to change the tick to a radio button, but perhaps it could be made more obvious that it will unaccept the previous answer.


Some (runnable) ideas:

A. A simple hint on hover, as Catija suggested. Not necessarily a native tooltip, as that only appears after a delay and the new user might click before that happens.

#tick {
  position: relative;
}
#tick:hover::after {
  position: absolute;
  top: 1.5em;
  left: 0;
  content: 'Example';
  color: darkslategrey;
}
<div id="tick">✅</div>

B. Animating the green tick over from the previous answer. More intuitive but might still not be obvious what is happening if the other answer is invisible due to scroll position.

const anim = document.querySelector('.anim')
window.addEventListener('click', ev => {
  switch (ev.target.id) {
    case 'a1':
      anim.style.top = '0px'
      break
    case 'a2':
      anim.style.top = '50px'
      break
  }
})
.ans {
  padding-left: 2em;
  position: absolute;
}
.ans:nth-child(1) {
  top: 0;
}
.ans:nth-child(2) {
  top: 50px;
}
.ans::before {
  position: absolute;
  left: 0;
  content: '✔️';
}
.anim {
  position: absolute;
  transition: 0.5s top ease-out;
  top: 0px;
}
code {
  background-color: lightgrey;
}
<div class="ans" id="a1">
  <div>Lorem ipsum</div>
  <code>answer(1);</code>
</div>
<div class="ans" id="a2">
  <div>Dolor sit amet</div>
  <code>answer(2);</code>
</div>
<div class="anim">✅</div>

  • 10
    How much education do we need to provide to someone, in how many places, that they're not going to read, before we say we've done enough? At what point does user responsibility for their own actions kick in? – fbueckert Apr 12 at 13:34
  • 4
    @fbueckert With great UX, there is no need for documentation/education – ᆼᆺᆼ Apr 12 at 13:39
  • 5
    With users that read, multiple reminders are also not required. Improving UX is a good thing, but I challenge any assertion that says you'll never need education. Nothing will ever work absolutely perfectly for absolutely everyone. At some point, users are responsible for themselves. – fbueckert Apr 12 at 13:41
  • 3
    Well, @fbueckert We don't even manage to say that in the hover text, though... we could, at minimum, say it there. It's kinda implied but if you don't know that only one can be accepted, it's easy to misunderstand the superlative means that there can be only one. I'd be OK with explicitly saying "you may only accept one answer at a time" or something like that. :) – Catija Apr 12 at 13:49
  • 4
    @fbueckert When we can establish an intersection of other users coming to terms that people perceive and interact with the world around them in wildly different ways, and software is no exception. Not everyone sees what's on their screen and interpretes it like you do, and your condescension is pretty indicative that you don't realize this. Just putting that out there. – Tim Post Apr 12 at 13:55
  • @fbueckert I agree, nothing will work perfectly and there is a place for documentation. But it shouldn't be a workaround for suboptimal UX. – ᆼᆺᆼ Apr 12 at 14:12
  • @MEEthesetupwizard Thanks for the edit. BTW, screen readers will read 🔘 as "radio button", so there might not be an accessibility problem with emoji. Although I don't know what braille terminals do – ᆼᆺᆼ Apr 12 at 14:12
  • 3
    @Tim I deal with users on a daily basis. And yes, how people interact with it is going to differ, and the perspective that users work differently is something I'm very much aware of. There's always economies of scale; far more users than people being able to support them, so having clear documentation is far more efficient than having to repeat yourself over and over. My argument is specifically that users should be able to help themselves when that support is lacking. If that's condescending...then we have incredibly different definitions of what that means. – fbueckert Apr 12 at 14:16
  • 4
    @TimPost Your comment makes no sense. You're responding to someone saying, "Nothing will ever work absolutely perfectly for absolutely everyone." with, " Not everyone sees what's on their screen and interpretes it like you do" That's saying more or less the same thing. fbueckert is saying you can't make the UI perfect for everyone because everyone interacts with UI elements differently. What makes you think that comment is indicating that everyone interprets the UI the same way? – Servy Apr 12 at 14:18
  • 4
    @TimPost Also, fbueckert isn't being condescending at all. In fact, saying that this a problem users are able to figure out on their own is the opposite of being condescending. Having reasonable expectations of someone isn't being condescending. Saying that they're incapable of using the existing UI and that we need to fix it for them is being condescending, as is your attitude that fbueckert somehow can't have an opinion on how the UI should work for acceptance. – Servy Apr 12 at 14:18
  • 4
    @fbueckert Ah wow, I didn't realize how much I sounded like barking. I misread your tone and I apologize. But I do see how I got there. It's hard not to seem like what's implied is "all of them just need to be more like all of us, and everything will be fine" because that's the thing that really threatens the relevancy of something like SO (and MSDN back in the day, and many others). Anyway, totally see that's not what you meant, that's just what I got from it after reading it twice, maybe because I see so much of it as of late. Sorry!! – Tim Post Apr 12 at 14:24
  • 2
    Don't get me wrong, @Tim; I am often frustrated with users here, for exactly those reasons, and I'm on board with improving UX. I could have certainly phrased my criticism more clearly. What I don't like is the implication that all effort has to come from us (SE and curators) to teach new users, and that's where the gruffness came from. Like Servy said; having expectations that users make an effort on their own behalf isn't unreasonable, I feel. Glad I held off on an initial response to you, though; it was getting reeeeeeeeeal snarky. – fbueckert Apr 12 at 14:33
  • @fbueckert Just wanted to add that, according to research, users read at most 28% of a webpage on an average visit. I'd suspect it's higher on a site like SO/SE, although looking at how many have the "Informed" badge might be disappointing – ᆼᆺᆼ Apr 12 at 15:31
  • 1
    Also worth noting that due to some glitches from migration, some sites that were originally migrated from other engines may have two accepted answers. Some users may cite those as "examples" that it's possible to have two accepted answers, when it's not. – Sonic the Reinstate Monica-hog Apr 13 at 5:46
4

A simple way of making this obvious is to not allow accepting an answer if another answer is accepted. The user must unaccept the first answer before being able to accept the other answer.

A pop-up error message when trying to accept a second answer would explain this.

  • 1
    Better not a tooltip but an error message. Tooltips are easy to miss and not usable for keyboard users. – MEE - Reinstate Monica May 13 at 8:12
  • @MEEthesneakyuser: Thank you. That is exactly what I had in mind, though it is not what I typed. :/ – Cris Luengo May 13 at 13:03
  • 2
    No, blocking the ability to accept will just make most (new) users not accept the better answer. – Shadow The Princess Wizard May 13 at 13:53
4

I say Keep It Simple. When trying to accept answer while there is other accepted answer, show a simple confirm dialog, same as other places e.g. voting to delete a post:

-1

... it could be made more obvious that it will unaccept the previous answer.

  1. Change the graphic:

    Upward motioning arrow

    Combine an 'upward motioning arrow' with the checkmark to demonstrate that it's a combined action, you are moving this to pin. I've shown a tiny arrow and a huge one as an example, probably an in-between size is best.

  2. Add simple animation: (Optional)

    On the webpage "Pretty Checkbox" there is a style called "Tada".

    Step 1 : Download from yarn or npm

      yarn add pretty-checkbox //or
      npm install pretty-checkbox

    Step 2 : Add dist/pretty-checkbox.min.css file in your html or import src/pretty-checkbox.scss file in your scss file

      @import '~pretty-checkbox/src/pretty-checkbox.scss';

    Step 3 : Add the mark up in your file. Can be used with Bootstrap, Foundation, Bulma frameworks.

      <div class="pretty p-default"> <input type="checkbox" /> <div class="state"> <label>Check</label> </div> </div>

    <div class="pretty p-icon p-round p-tada"> <input type="checkbox" /> <div class="state p-primary-o"> <i class="icon mdi mdi-heart"></i> <label>Good</label> </div> </div>

There's a limit to how much graphics editing one can do and how good it will look on a cellphone but I made a screencapture of the animation:

Animation

Tested on Chrome and Firefox Android.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .