Page MenuHomePhabricator

Display of radio buttons in Wikistats 2 is somewhat confusing
Closed, ResolvedPublic5 Story Points

Description

See for example [1]

When I click from 'Overall Total' to 'Split by editor type' 3 things happens:

  • the seemingly on/off buttons reveal themselves as radio buttons.
  • a list of checkboxes is inserted
  • the previous active radio button switches to green sub-second before it is grayed, the active one switches to blue (but on initial display (and after F5) the color is green)

Especially the last one is confusing.

https://stats.wikimedia.org/v2/#/es.wikipedia.org/contributing/edits

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 18 2017, 8:58 PM
Erik_Zachte added a subscriber: Nuria.
Restricted Application added a project: Analytics. · View Herald TranscriptDec 18 2017, 9:05 PM

Yeah, I agree these are confusing, we'll look for a better widget (I was actually hoping to use OOJS UI here but haven't had time to modularize it properly).

I have a question about the second bullet point, though. Do you mean the split values? I was hoping this was clear, do you know how it works but think it's confusing or do you mean you weren't able to figure it out at all? Let's chat about this, it's definitely the most "complicated" part of the UI and I'm not sure how to make it more intuitive. But I don't want to call this "Beta" quality until we do fix this issue.

No, I'm fine with second bullet point, I just meant to say 'there is too much happening when I click the radiobutton'. But subdivide on the chosen metric makes sense.

Nuria added a comment.Dec 19 2017, 7:47 PM

(I was actually hoping to use OOJS UI here but haven't had time to modularize it properly).

I think it should not be our task to modularize OOJS UI, let's please use it if it is packaged properly so we can take advantage of it out of the box.

Milimetric removed Milimetric as the assignee of this task.Dec 21 2017, 4:24 PM
Milimetric moved this task from Incoming to Wikistats Production on the Analytics board.
Milimetric added a subscriber: Milimetric.
mforns moved this task from Backlog (Later) to Mentoring on the Analytics board.Mar 8 2018, 6:09 PM
Amitjoki claimed this task.Mar 28 2018, 2:00 PM

Change 422407 had a related patch set uploaded (by Amitjoki; owner: Amitjoki):
[analytics/wikistats2@master] Bug T183185 Display of radio buttons in Wikistats 2 is somewhat confusing

https://gerrit.wikimedia.org/r/422407

Amitjoki added a comment.EditedMar 28 2018, 2:13 PM

Here's how it looks with the changes I've made - https://drive.google.com/file/d/1M7czDvN7Eqhf5DY6aIpDFMqyVX80oK3x/view.

Would love the feedback from the community if this looks good.

Nuria added a comment.EditedMar 28 2018, 5:51 PM

@Amitjoki feedback on commit message is a bit too verbose, do you think you could condense it a bit? Also, the "should not be done" is uncalled for. Just explaining the issue and your solution to it should be sufficient.
You can upload file to ticket so CRs can test visuals more easily.

Nuria added a comment.Mar 28 2018, 5:53 PM

Please see: https://www.mediawiki.org/wiki/Gerrit/Commit_message_guidelines and note structure of commit message, we try to abide by that if possible.

Amitjoki added a comment.EditedMar 29 2018, 1:24 AM

@Nuria if that was offensive, sorry about that :( Didn't mean to. I was just pointing out the second point of the Gerrit Commit Message Guidelines of the body section which states: Why should this change should be made? What is wrong with the current code?' Will condense and remove the inappropriate details from the commit message. Thanks for the review :]

Nuria added a comment.Mar 29 2018, 5:17 AM

if that was offensive, sorry about that. Didn't mean to.

No, not at all. Really. Just wanted to emphasize that the approach for commits such us this one should be about describing problems and solutions given. My mistake if it sounded harsh.

Thanks @Amitjoki , new version looks clean and quite intuitive to me.

@ezachte glad it worked out :)

mforns added a subscriber: mforns.Apr 3 2018, 2:59 PM

Thanks @Amitjoki for taking this task.
I think that one of the major concerns with this switch-on-off breakdowns,
is that the looks of a on-off button is not appropriate for a radio-button selector.
Usually, when you see a sequence on-off buttons, it means you can switch them on or off independently.
You can switch them all on, or all off, or any combination of ons and offs.

But the main confusing thing (at least it's what I think Dan meant), is that this control is about selecting *just one option*, like a radio-button.
So, the on-off button looks is not appropriate. And we should think and discuss other options.
Please, @Milimetric correct me if I'm wrong?

@mforns I guess the confusion stems from this "on-off" switch mechanism. Please see https://semantic-ui.com/modules/checkbox.html (Radio) button. If this is enabled, then exclusivity is implicit as users have been long accustomed to the working of radio buttons, while with this on-of switch there's some confusion.

I think if we implemented it as a radio button as is mentioned in the aforementioned link, it would clear the confusion.

Would like your opinion :)

mforns edited projects, added Analytics-Kanban; removed Analytics.Apr 11 2018, 3:58 PM
mforns set the point value for this task to 5.
mforns edited projects, added Analytics; removed Analytics-Kanban.
Nuria added a comment.Apr 11 2018, 9:09 PM

This seems a task that needs mocks to decide in which are the best visuals. Let's put it on backlog. One thing we for sure need to fix is the switch from green to blue, if @Amitjoki can address just that issue in his patch it will be great.

@Nuria sure. I'll remove all the other changes and will just implement that switch from green to blue for now :)

Change 425847 had a related patch set uploaded (by Amitjoki; owner: Amitjoki):
[analytics/wikistats2@master] Fix the confusing color alteration when toggling the radio button

https://gerrit.wikimedia.org/r/425847

Change 425847 merged by Mforns:
[analytics/wikistats2@master] Fix the confusing color alteration when toggling the radio button

https://gerrit.wikimedia.org/r/425847

Thanks for the blue/green fix, I think the main problem is that these look like toggle buttons while people expect radio buttons. So I agree switching to a radio button would be nice, but didn't see any that looked good.

@Millimetric what do you think of the Semantic's own Radio styling? I guess it would go well with the site's design. This is the preview I got fiddling within the developer tools: https://www.useloom.com/share/8f9e578ed6844137b4d70104d8256658

Some padding would make it look good I guess. Would like to know your thoughts :)

@Amitjoki yeah that looks good. Only detail is don't forget to set the cursor: pointer style when you hover over those. Thanks!

@Milimetric changing the hover style to pointer, yes. That can be taken care of. Is that all? If you give a go ahead, I'll submit the change :)

@Amitjoki yeah, that sounds good and I think it'll improve those buttons, I'll review when you submit, thank you!

@Amitjoki : I was wondering if you will be submitting a patch for new Semantic's radio style button, if not I can merge this with T198183 since it also involves me working around radio buttons :-]

sahil505 added a comment.EditedJun 30 2018, 12:52 PM

I'll be replacing the current filter toggle switches with the new Semantic's radio style button in T198183. Moving this to 'Done' on the Analytics-Kanban board. Thanks!

sahil505 moved this task from Next Up to Done on the Analytics-Kanban board.
sahil505 triaged this task as Normal priority.Jul 6 2018, 1:45 PM
Nuria closed this task as Resolved.Jul 11 2018, 10:01 PM