

Redesigning SoundCloud - ggonweb
https://medium.com/adventures-in-consumer-technology/redesigning-soundcloud-d52b4baf17a4

======
ojiikun
Soundcloud is my go-to example of bad UI design that has progressively
worsened over the years. This, though, would be a step in the right direction!

Bigger than their UI problems, though, are their _UX_ problems. I don't care
what the site looks like as long as I could have three features:

1) no comments from strangers, ever. (they are mostly spam or content-less) 2)
no auto-advance when I am viewing the page of a single track. (it often
advances to tracks by artists I to whom I don't even subscribe) 3) let me sort
every list I can produce. (the current sort of artist pages seems to be an
incomplete bogosort)

~~~
oe
Auto-advance might be tolerable (probably not) if it continued to other songs
by the same artist. Or if it was somehow predictable.

~~~
boyaka
I'm almost never playing a single track as the parent comment is complaining
about. What is happening is because you have not selected any sort of
playlist, SoundCloud's autoplay reverts to "Recommended Tracks" aka tracks
that it has determined have been similar to the one you're playing (I suspect
they are adjusting this algorithm to promote certain artists/tracks, but
sometimes it finds legitimately similar music).

To do what you are asking for you could go to an artist's profile and play the
tracks on that page, and the autoplay will continue down that list. If the
artist has reblogged songs from other artists/profiles it will appear on their
page. You can also play through an artist's likes (which might have more
tracks they appear in, and other artists to listen to who play their type of
music, with more profiles/likes to play through).

In the end my favorite autoplay mode is just using the stream, which compiles
all the posts/reblogs from artists I follow into a "newest" sort. If I run out
of that I normally find a profile/likes playlist to listen to.

~~~
oe
Maybe I'm using it wrong then :) The only time I play anything on SoundCloud
is when I follow a link from Facebook or elsewhere to listen to a specific
song or mixtape. Anything else playing after that, no matter how relevant, is
not what I wanted or expected.

------
some1else
Most of the solutions are great improvements! However, I don't think the
global feature switch for comments is where it belongs, and I hope nobody
forces the rounded mask on my album art just because of UI aesthetic.

I could live with the current SoundCloud version if the infinite scroll were
changed back to regular pagination. Prolonged site usage heats up MacBooks. It
would be interesting to pull off an iOS-like, high-performance scrolling
algorithm that recycles a limited number of rendered objects, But I haven't
seen anything like that with Backbone Models and Views.

~~~
bzalasky
Infinite scroll can be a terrible anti-pattern when implemented poorly, and
it's terribly difficult to pull off correctly.

I dealt with this issue at the last startup I worked at (Stipple, now defunct
:(). We had a masonry feed of annotated images with associated media like
videos, audio and product links that was infinitely scrolling. What this meant
in practice is that you could paginate about 20 times before the fan on your
macbook would start roaring.

LinkedIn had a great article about year or two ago about optimizing infinitely
scrolling feeds, however, it only applies to single column feeds. Masonry
layouts make things much more difficult. That being said, one of the
benchmarks in that article mentioned toggling visibility improving performance
(not what they settled on, but still a significant gain). This is what I was
able to implement. We had to query the DOM to detect when an image in the feed
was moving in and out of the screen with a buffer equal to screen height. With
this in place, users could paginate 50+ times without trouble (at a solid
framerate), though they would've eventually hit problems if they kept
scrolling too long.

 _TLDR;_ I hate masonry layouts for performance reasons.

------
shmerl
I wish SoundCloud wouldn't transcode anything it gets into MP3 for playback.
It ruins the quality. Yeah, they let you download the original, but playback
through the site suffers if you upload Ogg/Vorbis for example. At least they
could provide playback in original form to browsers which support it, and use
MP3 as fallback for more crippled ones (like Safari or IE). Since they
obviously host the original and transcoded file it shouldn't be hard to do.

Also, Opus support could be useful.

~~~
coldtea
> _but playback through the site suffers if you upload Ogg /Vorbis for
> example_

Who would use Ogg/Vorbis and not expect compatibility issues with third party
services and products?

It's not like Ogg/Vorbis was ever anything more than a solution in search of a
problem that only few idealists adopted.

~~~
shmerl
_> Who would use Ogg/Vorbis and not expect compatibility issues with third
party services and products?_

It doesn't matter who, if the only thing you got is Ogg/Vorbis file and you
have no lossless original. Normal browsers support it anyway, as well as Opus.

Ogg/Vorbis was a solution to patents sick MP3. It was adopted rather well,
except for those who can't stand not patent encumbered codecs (Apple for
instance). Opus is in better position though, since it's part of WebRTC
standard and Apple will have to support it even if they hate the idea.

------
ajgrover
This looks good! My current biggest critique of the soundcloud site is the
search itself - I can never find what I'm looking for. There should be an
ability to order results by popularity so I don't have to look through 50
random remixes of a song before I can get to the original.

~~~
NovaS1X
I was going to mention this myself!

As a heavy user of Soundcloud (Few hours a day, every day) I have amassed
quite a bit of a list of likes and reposts.

Some days I want to take a trip back in time and listen to some songs I
listened to last year or two years ago. As it stands now I'm forced to scroll
for a very very long time. There is no like/repost search function and there
is virtually nothing in the means of organizing by name, song, artist, date
(liked, posted, or other) or anything of the sort. This makes it hard to find
old songs I like.

------
weego
Visually conflating buttons and an input field (search) in the new header
concept is a horrible design solution. I really feel like unbounded inputs
(giving the user no visual clues of the boundaries of the input until they
click into it) is an anti-pattern that I hope will die out soon.

I'm not suggesting I love soundcloud's UI in any way ideal, but neither is
this in many other ways.

------
lisowski
I made my version of a front-end for soundcloud. It is for when you have a
large amount favorites, but it also can get to your playlists and artist
pages. I found that once you've liked over 200 songs on soundcloud it gets
really hard to view your older favorites. My client loads my ~1100 favorites
and a few seconds. You can also: * sort by a different criteria * shuffle all
your favorites or a playlist at once * add multiple songs to playlists by
holding alt, clicking the songs, then clicking the playlist * make a queue by
holding shift and clicking songs

It is a side project and is by no means done, has a few bugs, and the initial
load can be weird (still fast though). Feel free to give me some feedback.

sctunes.meteor.com

------
bakhy
Very nice work!

BTW, the player buttons used to be in the top bar, and the search was smaller.
I could not for the life of me understand why they moved it down...

I disagree with the comments suggestion - it's a feature probably stemming
from the fact that the site was (is?) mostly used by DJs for uploading sets,
and commenting on certain high points of the set is a cool feature.

But the biggest problem with their site right now is performance. A SoundCloud
tab keeps the CPU consistenty busy. (And, interestingly, only when it is
visible. When it's in the background, it's fine. Using Firefox.) And prolonged
playing causes my browser to crash. I use both Spotify and SoundCloud, and
Spotify has none of these issues. I presume the Flash player component is to
blame.

Oh, and of course: "A new version of SoundCloud is available. _Reload_ your
page..." And then you reload, and nothing changed. Every other day, sometimes
more than once in one day...

But it's still a really great site, I love it.

~~~
boyaka
Memory usage gets really high when loading up a really long stream or profile
with lots of tracks. I never liked the scroll to load more method but it seems
to be the popular format.

------
mhomde
Nice points in the article

However, using the album art as blurred background even for the non-playing
song feels cluttery and overkill. I'd keep those backgrounds simple to
highlight the current song even more. Less is more :)

There's also some lines that seem superflous and can easily be removed, the
sidebar divider being the most obvious

------
bkvanmeter
Wow, this is excellent. Very reminiscent of milq.com. Go to
[http://milq.com/bead/best-nba-plays-of-all-time](http://milq.com/bead/best-
nba-plays-of-all-time) for example and play a track to see the persistent
player on the right.

------
jeena
This would be a nice improvement, although my biggest problem with the website
is that I can't pause the music with my media buttons on the keyboard.

I actually wrote a SoundCloud client for OS X a couple of years ago but before
it was really stable they fucked up the API so badly that I wasn't able to
play most of the songs anymore: [https://github.com/soundcloud/soundcloud-
javascript/issues/1...](https://github.com/soundcloud/soundcloud-
javascript/issues/12)

Here is a screenshot
[http://jabs.nu/tonality/media/tonality.png](http://jabs.nu/tonality/media/tonality.png)

~~~
onedev
You can use SoundCleod (not a typo) which is just an OSX web frame that
enables the hardware buttons.

[https://github.com/salomvary/soundcleod](https://github.com/salomvary/soundcleod)

------
pnt12
I don't use soundcloud too much but a related service that could also go
through a major redesign is spotify.

Some of the things that bother me most: 1 - I use 3 platforms (Linux, android
tablet and android phone), and that's 3 different UIs and features. 2 - really
small buttons, lots of wasted empty space in every platform 3 - songs / albums
/ artists. If you save a song, the album and artist are saved too even if you
don't care for those. There's an option to see full albums only on the Linux
preview, but not on any of the android applications.

I really enjoy the service, but the UX can really get on my nerves sometimes.

~~~
why-el
Spotify has had a wonderful and simple UX for a long time, but after their US
opening they did some bizzare changes that made it look very bloated.

I reckoned this happened after Rasmus Andersson left them for Facebook. He
seemed the one with all the ideas.

------
nickdotmulder
While redesigns are always interesting or refreshing, I think one has to be
careful dubbing these concepts as "solutions". From a UX standpoint, "I’m
usually searching for an artist or song name" is a dangerous standpoint as
you're not the user. From a PM standpoint, I assume soundcloud (located next
door to us) will validate any new feature. So often we see the prettiest
solution doesn't become the most effective one. Personally, I find SC very
intuitive to use and while I agree with some of the proposed changes some seem
counter-intuitive as a long-time soundcloud user.

------
BillFranklin
Their onboarding is also pretty bad. The friction in switching from another
music player is so high - you can't import music so you have to build a
library from scratch. I'm a user but this stopped me from moving entirely from
iTunes.

This post also doesn't go into their mobile apps, which (I think) are easier
to use than the competition. This is the best post you'll read on their mobile
apps: [http://blog.brianlovin.com/design-details-soundcloud-for-
ios...](http://blog.brianlovin.com/design-details-soundcloud-for-ios/)

~~~
thirdsun
SoundCloud is certainly not intended to be an iTunes replacement. Other than
playlists it doesn't have any library management features and an import from
traditional apps for that use case doesn't make any sense to me.

~~~
BillFranklin
I meant importing tastes and lists of songs - but there's nothing at all
there.

~~~
boyaka
Simply search for artists you like and follow them. You can follow artists
that follow them or artists that they follow to get more. I'm pretty picky
with following artists (I make sure I love mostly everything on their profile)
but it doesn't take many to have a very lengthy stream to listen to.

------
aethos
While many aspects of this redesign are well thought-out, I think that the
changes to the stream are not of high quality. With the new design, white
space in the stream is greatly diminished and it feels cluttered. One solution
to this might be to only have the colored backgrounds for the track that is
playing.

I think it would be best to try to keep more of Soundcloud's orange on white
look for continuity too.

------
Rafert
Good ideas. Would the single song view look like solution #2? The latest SC
redesign put the song info in the upper right corner, and thereby hides stuff
like track lists for DJ sets behind a modal pop-up. It's very annoying to keep
switching between the song (with player controls) and the track list if you
are looking up the name of a song.

------
kang
> "The avatars on the waveform are virtually meaningless. They’re too small to
> visually identify anyone who’s commented. Their only value is to let a user
> know there are comments on the track..."

Wrong. The comments appear at exact the right time which enhances the
experience of the song. Have you seen twitch chat? Its gold.

------
skratlo
Really great work by Evan. The problems with SC UI he outlines are real, the
solutions are mostly of high quality. Hopefully someone @ SC will notice, but
given how hard it is to work with graphic/UI designers, I wouldn't be
surprised if they'd come up with something completely different, just for the
sake of in-housism.

------
abefight
Please redesign the last.fm. Anyone..

------
cmicali
Fantastic work. Thoughtful solutions to some real usability issues on the
current site.

------
zellyn
Looks really good. He did pick an awfully short band/song combination though…

------
curiously
biggest problem is that each player would cause considerable cpu and memory
hog. I noticed that my soundcloud tabs in one window were causing lot of CPU
and memory usage in Chrome.

My other gripe is better filtering of subscription. Sometimes when someone
spams like 30 tracks from their album it fills up the whole feed that I am
forced to unsubscribe.

Lastly, it's tough to discover new music based on a more narrow filter. Its
hit or miss.

~~~
Shebanator
html5 audio's current implementation in browsers is surprisingly memory
intensive. It is getting better, though.

