[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[maca]

maca added a comment.


  Hello everybody ! Mattia here, from the UX team .
  The UX team was asked  to take a look at this request and how to improve upon 
the problems mentioned in the ticket as well as to assess which changes would 
not worsen other parts of the UI and its usability : to say this upfront, it is 
a pretty tricky issue to solve, as our space in the UI is limited and since 
there are very many ways to model items on Wikidata.
  After some conversations and evaluation of the different proposed solutions, 
the best start from our perspective would be changing the order of items. 
  We think that the suggestion of  ordering the statements by rank would be a 
good way to start with: the advantages are clearly that this introduces no new 
elements in the UI (so it would be more feasible to implement) and we could 
potentially build upon the sorting (e.g. add any collapsing of deprecated 
statements or the like later, if needed).
  
  Solutions based on new icons or color are sadly difficult to deal with, for 
some specific reasons:
  • Use of color is a frequent to-do-solution for highlighting various things, 
so it can easily have a lot of different meanings if used a lot and not very 
consistently.
  • Use of color is prone to accessibility issues as many people do have 
weaknesses in color perception. 
  • Use of color easily makes the UI look cluttered
  
  Thus, as UX designers, we try to avoid the use of color except for one color 
for preferred actions and one color for system errors or destructive actions – 
like suggested in the OOUI.
  
  Similarly, icons are not very easy:
  • Most users are not familiar with newly introduced icons , unless we would 
be using icons that are very standardized (e.g. the save icon or the undo 
arrow). 
  • It is hard to convey that different icons refer to the same issue (item 
rank) but in different manifestations (item rank of deprecated, normal, 
preferred): trying to overlay different icons is really hard to do well in 
small space.
  
  While we know that this  is not the solution which is as great as we hope for 
initially, we think that starting with ordering statements by rank is the 
approach that most likely increases usability and maintains consistency of the 
UI with the smallest cost in terms of implementation and iterations.

TASK DETAIL
  https://phabricator.wikimedia.org/T206392

EMAIL PREFERENCES
  https://phabricator.wikimedia.org/settings/panel/emailpreferences/

To: maca
Cc: maca, MisterSynergy, Tkarcher, Kristbaum, Lydia_Pintscher, 
MichaelSchoenitzer, Aklapper, cristiana023, Akuckartz, JanJaquemot, Demian, 
darthmon_wmde, Nandana, Lahi, Gq86, GoranSMilovanovic, QZanden, LawExplorer, 
_jensen, rosalieper, JGirault, Scott_WUaS, Wikidata-bugs, aude, Mbch331
___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[MichaelSchoenitzer]

MichaelSchoenitzer added a comment.


  I created some rough mookups:
  
  Current state:
  --
  
  F31857903: jetzt.png 
  
  Color icons:
  
  
  F31857906: colors.png 
  
  Color the background:
  -
  
  F31857908: backgroundcolor.png 
  
  Add watermarks:
  ---
  
  F31857910: backgroundicon-post.png 

  
  Color the background & add watermarks:
  --
  
  F31857912: backgroundcolor-mark.png 

  
  Hide Icon for default rank:
  ---
  
  F31857925: hide_default.png 
  
  Different icons:
  
  
  F31857914: newicons.png 
  
  Different icons & hide Icon for default rank:
  -
  
  F31857927: new icons hide default.png 

  
  Order by rank:
  --
  
  F31857916: order.png 
  
  Order by rank & hide deprecated:
  
  
  F31857918: ordered_hidden.png 
  
  Order by rank & hide deprecated & don't show icon for default rank:
  ---
  
  F31857920: combi.png 
  
  Note:
  -
  
  The icons and colors are just rough ideas and not final designs.
  
  Another Idea for a new Icon-design: colored meter 


TASK DETAIL
  https://phabricator.wikimedia.org/T206392

EMAIL PREFERENCES
  https://phabricator.wikimedia.org/settings/panel/emailpreferences/

To: MichaelSchoenitzer
Cc: MisterSynergy, Tkarcher, Kristbaum, Lydia_Pintscher, MichaelSchoenitzer, 
Aklapper, cristiana023, JanJaquemot, Demian, darthmon_wmde, Nandana, Lahi, 
Gq86, GoranSMilovanovic, QZanden, LawExplorer, _jensen, rosalieper, JGirault, 
Scott_WUaS, Wikidata-bugs, aude, Mbch331
___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[MisterSynergy]

MisterSynergy added a comment.


  @Lydia_Pintscher: Can we please push this a little more? According to this 
Grafana chart 
,
 use of preferred+deprecated rank together went up significantly during the 
past year from ~720,000 claims (June 2019) to ~15,000,000 claims (June 2020). 
My personal impression is that use of ranks are much more often discussed 
controversially in recent months, as many users for instance prefer to remove 
deprecated claims as the deprecation is barely recognizable for many users.
  
  I think when many users make problematic editorial decisions due to a poor 
UI, it is about time to fix it.

TASK DETAIL
  https://phabricator.wikimedia.org/T206392

EMAIL PREFERENCES
  https://phabricator.wikimedia.org/settings/panel/emailpreferences/

To: MisterSynergy
Cc: MisterSynergy, Tkarcher, Kristbaum, Lydia_Pintscher, MichaelSchoenitzer, 
Aklapper, cristiana023, JanJaquemot, Demian, darthmon_wmde, Nandana, Lahi, 
Gq86, GoranSMilovanovic, QZanden, LawExplorer, _jensen, rosalieper, JGirault, 
Scott_WUaS, Wikidata-bugs, aude, Mbch331
___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[Tkarcher]

Tkarcher added a comment.


  Yes please! And while you're at it, please also consider adding a warning 
("Your new value is not the preferred value yet") or even adding a checkbox 
("Set this entry as the new preferred entry") when entering new values (as 
suggested here: 
https://de.wikipedia.org/wiki/Wikipedia:Technische_W%C3%BCnsche/Wunschparkplatz#Hinweis_auf_Bedeutung_der_R%C3%A4nge_bei_der_Wikidata-Eingabe)

TASK DETAIL
  https://phabricator.wikimedia.org/T206392

EMAIL PREFERENCES
  https://phabricator.wikimedia.org/settings/panel/emailpreferences/

To: Tkarcher
Cc: Tkarcher, Kristbaum, Lydia_Pintscher, MichaelSchoenitzer, Aklapper, 
alaa_wmde, Nandana, A.S.Kochergin, Lahi, Gq86, GoranSMilovanovic, QZanden, 
LawExplorer, _jensen, rosalieper, JGirault, Wikidata-bugs, aude, Mbch331
___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[Lydia_Pintscher]

Lydia_Pintscher added a comment.


  In T206392#5124366 , 
@MichaelSchoenitzer wrote:
  
  > I think the next step should be to create mockups of all variants to make 
sure everyone understands them equally.
  
  
  Yeah that sounds like a good idea.

TASK DETAIL
  https://phabricator.wikimedia.org/T206392

EMAIL PREFERENCES
  https://phabricator.wikimedia.org/settings/panel/emailpreferences/

To: Lydia_Pintscher
Cc: Kristbaum, Pintoch, Lydia_Pintscher, MichaelSchoenitzer, Aklapper, 
alaa_wmde, Nandana, A.S.Kochergin, Lahi, Gq86, GoranSMilovanovic, QZanden, 
LawExplorer, _jensen, rosalieper, JGirault, Wikidata-bugs, aude, Mbch331
___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[MichaelSchoenitzer]

MichaelSchoenitzer added a comment.


  In T206392#4976407 , 
@Pintoch wrote:
  
  > What is the protocol to go forward on this? Should we hold a RFC on-wiki to 
let people choose among the possible solutions above?
  
  
  I think the next step should be to create mokups of all variants to make sure 
everyone understands them equally.

TASK DETAIL
  https://phabricator.wikimedia.org/T206392

EMAIL PREFERENCES
  https://phabricator.wikimedia.org/settings/panel/emailpreferences/

To: MichaelSchoenitzer
Cc: Pintoch, Lydia_Pintscher, MichaelSchoenitzer, Aklapper, alaa_wmde, Nandana, 
A.S.Kochergin, Lahi, Gq86, GoranSMilovanovic, QZanden, LawExplorer, _jensen, 
rosalieper, JGirault, Wikidata-bugs, aude, Mbch331
___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[Pintoch]

Pintoch added a comment.


  What is the protocol to go forward on this? Should we hold a RFC on-wiki to 
let people choose among the possible solutions above?

TASK DETAIL
  https://phabricator.wikimedia.org/T206392

EMAIL PREFERENCES
  https://phabricator.wikimedia.org/settings/panel/emailpreferences/

To: Pintoch
Cc: Pintoch, Lydia_Pintscher, MichaelSchoenitzer, Aklapper, Nandana, 
A.S.Kochergin, Lahi, Gq86, GoranSMilovanovic, QZanden, LawExplorer, _jensen, 
JGirault, Wikidata-bugs, aude, Mbch331
___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[MichaelSchoenitzer]

MichaelSchoenitzer added a comment.
By talking to other wikidata-editors and looking at other commons.css-files it seems that quite a lot of people have this issue and use CSS-Hacks to work around it, one more reason to solve it at it's core. I identified the following possible solutions:


Change the color of the rank icons (my original proposal)
Change the rank icons to be different to each other
Change the background of the whole statement (as suggested by Nikki/@Pintoch)
Add a wathermark to the statement
Sort the statements according to their rank


Some of these could be combined.TASK DETAILhttps://phabricator.wikimedia.org/T206392EMAIL PREFERENCEShttps://phabricator.wikimedia.org/settings/panel/emailpreferences/To: MichaelSchoenitzerCc: Pintoch, Lydia_Pintscher, MichaelSchoenitzer, Aklapper, Nandana, A.S.Kochergin, Lahi, Gq86, GoranSMilovanovic, QZanden, LawExplorer, _jensen, JGirault, Wikidata-bugs, aude, Mbch331___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[MichaelSchoenitzer]

MichaelSchoenitzer added a comment.
Voila:
F28052925: 1.png

F28052928: 3.png

There's a little bug with sources, but that's easy to fix.
F28052950: 2.pngTASK DETAILhttps://phabricator.wikimedia.org/T206392EMAIL PREFERENCEShttps://phabricator.wikimedia.org/settings/panel/emailpreferences/To: MichaelSchoenitzerCc: Pintoch, Lydia_Pintscher, MichaelSchoenitzer, Aklapper, Nandana, A.S.Kochergin, Lahi, Gq86, GoranSMilovanovic, QZanden, LawExplorer, _jensen, JGirault, Wikidata-bugs, aude, Mbch331___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[Lydia_Pintscher]

Lydia_Pintscher added a comment.
Thanks, @Pintoch!
Could someone who already has it set up make a quick screenshot for everyone else here to see what it looks like?TASK DETAILhttps://phabricator.wikimedia.org/T206392EMAIL PREFERENCEShttps://phabricator.wikimedia.org/settings/panel/emailpreferences/To: Lydia_PintscherCc: Pintoch, Lydia_Pintscher, MichaelSchoenitzer, Aklapper, Nandana, A.S.Kochergin, Lahi, Gq86, GoranSMilovanovic, QZanden, LawExplorer, _jensen, JGirault, Wikidata-bugs, aude, Mbch331___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs

[Wikidata-bugs] [Maniphest] [Commented On] T206392: Redesign rank icons for better visibility

[Pintoch]

Pintoch added a comment.
Useful solution from Nikki: add in your common.css:

/* from [[User:Nikki/common.css]] */

.wb-preferred { background-color: lavender }
.wb-deprecated { background-color: mistyrose }TASK DETAILhttps://phabricator.wikimedia.org/T206392EMAIL PREFERENCEShttps://phabricator.wikimedia.org/settings/panel/emailpreferences/To: PintochCc: Pintoch, Lydia_Pintscher, MichaelSchoenitzer, Aklapper, Nandana, A.S.Kochergin, Lahi, Gq86, GoranSMilovanovic, QZanden, LawExplorer, _jensen, JGirault, Wikidata-bugs, aude, Mbch331___
Wikidata-bugs mailing list
Wikidata-bugs@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/wikidata-bugs