sknob/music v5.5 Release Notes, Hide and Seek Edition!
#blogpost #music #coding in #english
One of the most annoying things about my music website, going back to the previous major incarnation and which carried over into this one, is that if you want to see the lyrics to a song (or the liner notes, or the links to share and download), well, you first have to start listening to a song. Only then are the lyrics displayed.
This isn’t some dark pattern to boost song plays (I don’t have any stats or analytics on this page). It’s just a design shortcoming.
Now for most users, and dare I say fans, this may not be a problem, but then again, maybe they might also want to be able to refer back to something without waking up their cat or whatever.
Functionally, this isn’t difficult (although there are tricky edge cases). The difficulty lies in the design and ergonomics and UX.
- It shouldn’t break the existing main way to use the site and play songs
- There should be a visible way to do it, but not too visible
- It should be tailored to both desktop and mobile devices (i.e. NOT rely on showing an option on hover)
At this stage, I must have designed and coded at least 3 or 4 completely different solutions based on text links and buttons and icons in various positions, etc., but I think I finally have one that strikes the balance that I want. It’s minimalist, you can safely ignore it, but if you’re looking for it, it’s fairly easy to discover (especially on desktop/tablet). Which is what I’ll let you do without describing it here :)
Now once you do use it, it has some repercussions.
- By default and as before, when you click on a song to play it, the lyrics are displayed, but if you previously displayed then hid the lyrics of a song without playing it, it will remember what you did, and so the lyrics won’t be displayed by default if you later play that song.
- I also decided to let the user open and close as many songs/lyrics as they wish, to avoid wild page jumps. If you go nuts and you’re lost, note that you can click the pink note button on the left of the UI to scroll to the song that’s currently playing.
The general idea, for better of for worse, is that the UI won’t do anything sneaky that you didn’t directly do yourself, so it won’t force you to figure out extra arbitrary choices I might have made for you, on top of the ones that can’t be avoided...
I nearly forgot. I was motivated and inspired to finally do this by what Alexander Rutz (@animaux@oslo.town) did to his site (which was in part inspired by mine—love it!). So thanks Alex!
But wait, there’s more!
As I mentioned when I introduced this major new version of the site, I went with a very minimal design after years of baroque excess.
In this release, I decided to take a small step in the other direction by changing the default font from Helvetica to Atkinson Hyperlegible, which is, well, hyperlegible, and which I’m quite fond of esthetically.
I know and I’m ashamed to say that my music page is probably woefully lacking in terms of accessibility, but the sad fact is that I’m a Sunday coder and I don’t yet have the knowledge and knowhow to make the necessary changes, although it is definitely on my todo list, and may even lead to yet another total overhaul of the site if necessary.
As usual, let me know if you run into any strangeness and/or what you think about these changes.
And if you’re actually reading this, thank you for keeping the indieweb alive by visiting personal sites and blogs!
