Improve look and feel of the issues tab of the Wikibase extension

[wetneb]

In the Wikibase extension, we offer a tab which displays various issues detected in the edits generated by the current Wikibase schema.

I made this UI but I find it pretty ugly:

• the icons for the warnings are too big, sort of pixelated (I think) and their style is inconsistent with OpenRefine's look and feel (we do not have anything similar anywhere else)
• it feels quite tight overall, and not very readable.

How could this be improved? Perhaps there are other changes we could think of to make this part of the UI more inviting?

[prashasti-7]

Could I be assigned to this issue?

[prashasti-7]

Proposed Solution:

• The UI may be less appealing because there needs to be more whitespace between the texts and button. The proposed solution consists of the 'Locate rows' button beside the heading of the issue, which makes it easily accessible after clicking on the issue button and could be mobile-friendly.
• Also, the lack of enough white space between the texts makes distinguishing between the heading and the subtext hard. Reducing the opacity may help tackle this issue.
• The size of the buttons has been reduced from 60px to 45px to help make them less prominent and attract attention to the text.

Alternatives considered:
I had also considered shifting the button to the right (as proposed in issue #5449), but that might be hard to access, violating Fitt's Law, so I placed it near the heading, making it easily accessible. Example
Another possible solution would be to consider removing the icons altogether. We can add text depicting the severity of the issue. Example

P.S.
Considered changing the icons used here since it needs to be consistent with the OpenRefine design style, as suggested in the issue. One possible alternative could be using WikiMedia's icon set. Also, the pixelation of icons may be due to something in the code.

[wetneb]

That looks much nicer, thank you! I still think we could find a better icon set for the warnings but that's likely a matter of taste.

[prashasti-7]

If unable to find consistent icons, we could try color-coding the issues. Red-Critical, Orange-Important, Yellow-Warning(as is used in many places), Blue-Information.

I was looking around for a suitable icon set; maybe we can try using MediaWiki's icon for warning, information, critical. They may seem plain as compared to our current icons. Still, they go well with our current design style(IMO).

[wetneb]

Ah yes, without icons it could work well too (but the colors should be compatible with color blindness).
MediaWiki's logos look good too. We have four (not three) levels of severity but I guess one could come up with a fourth one or drop one level on our side.

[prashasti-7]

Yes actually, I was looking for 'Important' but there doesn't seem to be any in their library.
According to this study, Red-Yellow-Blue is a safe option, but they do suggest that using icons is better. So maybe our best bet is using icons.

[prashasti-7]

Update

UI with the suggested MediaWiki icons and an additional yellow icon for 'Important':

[wetneb]

I think this looks really a lot cleaner, but I am curious to hear what others think.

[thadguidry]

yeap! cleaner, clear. I would slightly increase the size if we could on the yellow icons and blue icon. They appear slightly smaller in scale to the red icon. Let's try to even out the size of them if we could. Other than that I'd stretch the lowercase i vertically just a bit, to make sure it shows more readily as an i

[prashasti-7]

Sure!
I have made the changes as suggested by @thadguidry. Do you think this looks better?

[prashasti-7]

An addition could be to add a sidebar to each error
Something like this:

[thadguidry]

@prashasti-7 I don't have strong feelings about the left border on each element div, but looks OK. Hmm, the longer yellow border in your screenshot just gave me some questions for @wetneb ...

@wetneb I don't know if we wanted to sort things better here also?
How are issues sorted in this dialog by default or always? To improve the UX, does the default sorting need to change? Are all the issue categories actually entirely optional and just fail when uploaded if some issue categories are not resolved? Would those categories truly be considered as ERRORS that are not optional to fix but must be fixed prior to a user uploading? If so, should we differentiate between OPTIONALS and REQUIRED somehow?

[wetneb]

I think this new design is great and could already be implemented relatively easily, hence the "Good first issue" label.

[t8210103]

Hello, i would like to be assigned this issue. Also, should I consider implementing a sidebar for each error as suggested, or would it be better to not include it?

[wetneb]

Fantastic! Personally I find the side color bars pretty nice, but of course it would already be a great improvement without them.