Redesigning SoundCloud

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

by ggonweb • 12 years ago

145 44 12 years ago

skratlo• 12 years ago

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.

cmicali• 12 years ago

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

some1else• 12 years ago

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• 12 years ago

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.

zellyn• 12 years ago

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

aethos• 12 years ago

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.

BillFranklin2• 12 years ago

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...

thirdsun• 12 years ago

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.

BillFranklin2• 12 years ago

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

Rafert• 12 years ago

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.

nickdotmulder• 12 years ago

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.

bkvanmeter• 12 years ago

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

ajgrover• 12 years ago

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• 12 years ago

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.

jbkkd• 12 years ago

It's not only getting to the original version of a song that's bothersome, but also searching for genres.

Try searching for "swing", see how much unrelated songs you'll get before hitting a swing song.

curiously• 12 years ago

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.

Shebanator2• 12 years ago

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

jeena• 12 years ago

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...

Here is a screenshot http://jabs.nu/tonality/media/tonality.png

onedev• 12 years ago

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

https://github.com/salomvary/soundcleod

bakhy• 12 years ago

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.

boyaka3• 12 years ago

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.

ojiikun• 12 years ago

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)

Argorak• 12 years ago

One of my favourite UX things on SoundCloud is the weird way of changing your payment info :). You might loose days you already paid for.

http://help.soundcloud.com/customer/portal/articles/1606499-...

oe2• 12 years ago

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

boyaka3• 12 years ago

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.

k-mcgrady• 12 years ago

> "1) no comments from strangers, ever."

As someone who's been using SoundCloud for 6 years this has always been one of the features they've done right. Comments aren't obtrusive, they can be made relevant to specific parts of the song, and they are easy to access (or not access). Sure on very popular tracks with thousands of comments you get spam/useless stuff but on less popular tracks comments can be insightful, provide feedback to the artist and provide information useful to the listener.

lisowski• 12 years ago

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

shmerl4• 12 years ago

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.

pcthrowaway2• 12 years ago

I'm not sure what bitrate they use, but if it's 128kbps+ the difference in quality should be small to nonexistent.

shmerl4• 12 years ago

Once you encode lossy from lossy (even with high bitrate) the quality will be degraded in some way.

coldtea• 12 years ago

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.

Shebanator2• 12 years ago

And audiophile idealists should be using flac anyhow, in which case the conversion to mp3 wouldn't be causing any major issues (obviously mp3 encoding itself causes some lossiness, but it isn't nearly as bad as lossy->lossy)

shmerl4• 12 years ago

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.

kang• 12 years ago

"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.

mhomde• 12 years ago

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

weego• 12 years ago

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.

pnt12• 12 years ago

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• 12 years ago

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.

abefight• 12 years ago

Please redesign the last.fm. Anyone..

Redesigning SoundCloud

Related Stories