5
14 Comments

SongBox Design Refresh - IH Opinions?

I've had a few requests recently from customers and in the process of executing these requests it became apparent that I needed a design refresh.

The refresh centers around my audio player. In short, here's the current design:

And here's the new one (not deployed yet):

As I said the refresh is to do with the audio player. Here's my chain of thought:

  1. I had a few requests to add "Skip forward" and "Skip back" buttons. The original design didn't really accommodate for adding buttons.

  2. On taking a close look at the current design, I hate how the track titles just sort of sit in limbo, in the whitespace background.

  3. Another of the requests was surrounding embeds (the ability to host music on SongBox but embed it on your own site) and for some reason that I cannot fathom, the design go the embedded audio player was COMPLETELY DIFFERENT to the design of the main SongBox audio players (like utterly different).

So now, all the players are uniform, are self contained (as in the track title is now "within" the widget rather than sitting in whitespace, and the new design allows me to add forward and back buttons.

I also played around with the rendering of the wave file and I really like the refreshed "bars" design. Inspired by Soundcloud lol.

Thoughts?

  1. 4

    Looks a lot better! My one suggestion might be to co-locate the forward/back controls with the play controls. Maybe make it 3 buttons : back, play, forward that way, the user is only interacting in one place rather than several.

    1. 1

      Yeah it crossed my mind, however I took the decision I did because the skip buttons are related to skipping forward / backward in time. So I made the choice to place them physically close to the time clock.

      I rely on Gestalt's Principles with things like this and the law of proximity would dictate (to me) that this is the correct design choice in this case.

      1. 0

        your not very receptive to feedback, 3/3 independent comments are around the same thing, your own principles that you are quoting say you should have a rethink about it, and you're just saying "I'm right for my original choice", you're too closely attached to your creation/baby to even notice

        1. 1

          I'm grateful for the feedback, but on this specific issue I disagree.

  2. 2

    Looks better
    Have you considered the play buutton and the skips to be close to each other?
    (Assuming it's also a pulse) or have another one next to them...

    1. 1

      Thanks for the feedback. See my answer above for my rationale.

  3. 1

    I like it, and I disagree with the other commenters. "Play" is not like the other buttons. It's way more likely to be used, so it needs to be very prominent. The skip buttons are not likely to be used and are better placed away from the main focus.

    However, I would suggest changing your icons to include a duration in seconds, like how Netflix has a 10-seconds-back icon. Otherwise, it's not clear what exactly happens when you click either button.

    1. 1

      Yeah is a good shout.... Now to find appropriate icons lol

  4. 1

    There's a reason why popular music players put the play buttons next to the forward and reverse. Its because that's where people expect them. We've seen them there since the Walkman. Then of course they're like that on VCRs, and other players.

    I use Amazon Music and Muzio. Both of these have the play button sandwiched between the two buttons.

    At first I didn't even realize they were there until I saw the comments and then I zoomed in on your picture.

    1. 1

      Sorry I'm not here to get into arguments with anyone. I appreciate the feedback but what you've stated is simply not true.

      My first point would be that doing something a certain way just because that's the way it's always been done, is ridiculous.

      My second point would be to show that two of the biggest music players on the web; Soundclound and band camp:

      One doesn't even have skip buttons (Soundcloud):

      And the other has the skip buttons literally as far away from the play button as possible, within the scope of their player (Bandcamp):

      1. 1

        My point wasn't just blindly doing something like everyone else does "just because". If something makes more sense and has better usability or gives a better user experience then, by all means, do it better.

        I guess for SoundCloud, it depends on the UI. I'm using Chrome on Windows and it has them all clustered together (skip back, pause/play, skip forward, shuffle, repeat). Their Android app doesn't appear to have any of those controls at all.

        https://consumeraffinity.com/wp-content/uploads/2021/02/2021_02_18_09_23_17_Window.png

        I think you're correct - providing the functionality is more important than the exact placement of where the controls are located. People will adjust to what they're given.

  5. 1

    Why not hire a UI designer to make a design system for you and you can use it to design your pages. I'm sure you can find a good and cheap designer on Fiverr or Upwork.

  6. 1

    Where I have some doubts is not clear what I am skipping too. Soundcloud has a mini song list below the player and it you see the new track change?

    Or am i skipping in time? This part is not clear. Would love to see how this works out.

    1. 1

      yeah you are skipping time in this case, which is why I've grouped the buttons with the time clock. I'll see how I get on with this choice.

Trending on Indie Hackers
Feedback on my (not yet published) about page 21 comments Open Sourcing my SAAS Starter Kit 9 comments A house in Germany is being sold as an NFT 9 comments Vegans, vegetarians, and anyone with an allergy, food intolerance, or just a preference, I need you! 8 comments Nerdogram - A photo sharing app for Github nerds 5 comments Free Python Books Went Viral on Hacker News 5 comments