Improve OSD visibility

[RWeigelt]

When viewed from the corner of my eye, the OSD works very well on dark backgrounds, but not on light backgrounds or on some backgrounds with colored areas.

Here is an example (VS2019):

I suggest adding a dark border:

(It does not necessarily have to be pure black as shown in the mockup)

A shadow could be an alternative:

(I didn't spend much time on tweaking the shadow, looks kind of "dirty" in some parts)

Personally, I'd prefer the border, though.

[jpwilliams]

Aye I completely agree with this - I have suffered the same annoyance!

In an earlier version the OSD did actually have shadow, but this required window transparency which seemed to be causing some flickering when the OSD spawned, thus it was removed.

A border would indeed be a lovely addition. It's on my list. 👍

[jpwilliams]

@RWeigelt I've added a thin blue border to the OSD in v2.0.8.

I tested primarily on top of browsers, but also against my own Visual Studio and it seems to be clear enough. Please feel free to re-open if it's still a bit too hard to see and we can look in to some other options (maybe pure black is the way to go!).

[RWeigelt]

Hi Jack, The blue border in 2.0.8 does not work well on darker backgrounds (I have a dark gray desktop wallpaper). I have experimented a bit in Photoshop and included the resulting PNG files in the attached ZIP file (done quick and dirty using smart objects). I now think a black border works best, I guess because both black and white * are neutral (they don't interfere with other colors of neighboring pixels) and * are at the extremes of the brightness spectrum (so you always have a sharp edge, regardless of the brightness of the background) At first, I thought that maybe a single-pixel border would work, but on busy backgrounds a two-pixel border is better. I also tried a three-pixel border, but I don't have a real opinion on that right now (maybe I have seen too many borders). What do you think? Best regards Roland From: Jack Williams <notifications@github.com> Sent: Donnerstag, 5. November 2020 13:53 To: jpwilliams/midi-mixer-releases <midi-mixer-releases@noreply.github.com> Cc: Roland Weigelt <mail@roland-weigelt.de>; Mention <mention@noreply.github.com> Subject: Re: [jpwilliams/midi-mixer-releases] Improve OSD visibility (#7) @RWeigelt<https://github.com/RWeigelt> I've added a thin blue border to the OSD in v2.0.8<https://github.com/jpwilliams/midi-mixer-releases/releases/tag/v2.0.8>. I tested primarily on top of browsers, but also against my own Visual Studio and it seems to be clear enough. Please feel free to re-open if it's still a bit too hard to see and we can look in to some other options (maybe pure black is the way to go!). — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#7 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAOLVVD32QDMHF56B3FNXSDSOKN3JANCNFSM4TI3NNMA>.

[RWeigelt]

@jpwilliams Maybe replying by email wasn't a good idea, seems like it didn't keep the attachment.
So I'll add the mockups here:

Border two pixels wide, blue (2.0.8)

Border three pixels wide, blue

Border four pixels wide, blue

Border one pixel wide, black

Border two pixels wide, black

Border three pixels wide, black

[jpwilliams]

Crikey, @RWeigelt! Thanks this really thorough spread of border examples! 🤩 Never thought I'd get excited about seeing borders. 😀

Bizarrely, I actually really like the chunky 4-pixel blue border, but I'm confident that won't be to everyone's taste!

From your examples I agree with the border being at least 2 pixels; it definitely gets lost if it's only 1. It's a shame as some transparency (meaning the ability to add a shadow) would really help with this. I might do some tests with transparency again and see if I can circumvent the flickering we were experiencing before, as even a chunky black border can get a bit lost.

There's also the possibility to provide the ability to customise the OSD in terms of colours/sizing so people could use whatever border colour/size they want, but there's a balance to be struck between educated recommendations and providing too much customisation. As someone that looks be pretty heavily involved in UX, I'd love to hear your opinion on this!

[RWeigelt]

Hi @jpwilliams, with a night's sleep between creating the mockups and looking at them, I'd go with the black, two-pixel border.

I think it's a good compromise:

• It provides good visibility on virtually any background.
• It does not look like an explicit design statement and does not interfere with the design of the OSD.

[jpwilliams]

Cool I think I agree - this'll appear in v2.0.9 along with a couple of bug fixes.

[jpwilliams]

Border changed to 2px black in v2.0.9.