25
Sep 12Deconstructing the new Myspace video
(Hacker News discussion here.)
About 24 hours ago, MySpace caught much of the Internet by surprise when they announced a new redesign via http://new.myspace.com.
In their own words, “We’re hard at work building the new Myspace, completely from scratch.” Along with the announcement, they released a two-minute video showing off the new design. With fast editing and a trendy soundtrack from hipster supergroup JJAMZ, it captured a lot of attention. I decided to break it down and see exactly what was in the new Myspace, and how well the UX lives up to the visuals.
This is definitely no facelift. It’s been years since I’ve used MySpace, so I won’t pretend to know exactly how much has changed from the current incarnation to the vision in the video, but it’s not like any other social networking site today. Ironically, though, it does borrow heavily from every popular interface trend of the moment. It’s not hard to spot elements of Pinterest, the Windows Metro design language, Fancy, TheFWA, Twitter, Fab, Instagram, and others. When Facebook overtook MySpace for the first time in 2008, one of the most oft-cited reasons was the unbelievably ugly pages that MySpace spawned. They seem determined to send that era down the memory-hole, and have come back with one of the most aesthetic social networking sites ever created.
Along with those up-to-the-minute aesthetics, there’s a new navigation paradigm and a host of new features. MySpace is keeping its new brand as a site for music, but getting much more aggressive with its lifestreaming and communication features. There are powerful new tools for artists, a tighter integration with other social networks, and of course, music is woven into everything.
If Amazon, Google, Apple, or Microsoft launched this under a new name, or if no-one had ever heard of MySpace before, the press would be heralding the coming of a “Facebook killer.” As it is, they might still be able to overcome their legacy and make this a prime destination for millions of the young and musically-minded. It could even kill a few Facebook accounts.
The demo shown in the video is not a working site. There are plenty of moments where the curtain draws back and you see that we’re looking at a series of Photoshop mockups and partially functional prototypes. As such, there are a lot of places where dubious UX decisions are evident, or things become downright puzzling when you look at it frame-by-frame. Hopefully, they’ll sort out the bumps and oddities by launch. Even with the flaws in the demo, I’m more than a little eager to take the new site for a spin.
Let’s dive in and look at what’s shown in the video.
0:00
Here we go, the new Myspace. It’s not “MySpace” anymore, and there’s a decidedly Microsoft Zune-like font greeting us.
0:04
The sign up screen, allowing new users to join by creating a new account, or authenticating via Facebook or Twitter. MySpace (sorry, Myspace) is under no illusions as to where things stand in 2012. Interestingly, one glaring authentication omission is Google. Intentional, or an artifact of the demo?
Notice that “Username” is a field. This is sure to create some friction at signup, as potential users face the problem of selecting a unique handle.
Clearly, Myspace is not joining the Facebook and Google Plus trend of real names. Expect to see plenty of names like Mary021987 and AstrosRuleStudMan86.
Eliminating friction is one of the most important tasks a designer has for any signup page. If Myspace chooses to keep this as part of their registration process, they’re going to lose a significant percentage of people who aren’t motivated enough to get through this step after the third or fourth time they are unsuccessful at finding an available unique username.
It’s not clear what will happen if a new user authenticates with Facebook or Twitter instead. Will they be assigned a username, required to choose one, or some other scenario?
0:06
We’re at the first of three steps in the profile process. In the demo, David’s been able to get the username “David” (clearly an early adopter), and his profile picture is already uploaded. Of course, he’ll actually have to select and upload a profile pic if he’s starting a new profile from scratch. (Presumably users authenticating with Facebook or Twitter will have their picture brought over for them.)
Here’s our second major source of friction in the registration process. Before he can go any further, David has to decide which photo he wants as his face for the world to see. If he’s not on a computer with a photo of himself, or is just indecisive, he could give up right here. Clearly, there’s a lot more to do besides getting a photo, so this could become a “get to it later” task that David never comes back to.
Additionally, he has to come up with a 140 character introduction about himself, another major point of friction.
There is a choice to make here as well—will this be a public, or a private profile? Help icons promise an explanation, but it’s not clear whether this is a decision that can later be changed.
I predict a significant loss of potential members on this step.
0:07
In step two, David can import friends and other data from existing accounts on Facebook and Twitter. Curiously, it seems he can also import from… MySpace? Does this mean everyone will be required to migrate their account if they are already on MySpace? Or perhaps there are so few active accounts remaining that the point is mostly moot. It’s a puzzling question.
It’s worth noting the Twitter logo, which is the old, pre-June logo. It would seem this demo has been in the works for a while.
0:09
Here is an opportunity to bring photo albums, videos, and playlists (?) from any accounts you’ve connected in steps one or two. It’s a good way to ease users into their new profiles if they’ve made it this far.
Does Facebook actually allow this kind of easy export of things like photos and video? If they do, which I don’t know, I wouldn’t expect them to keep such a liberal policy in place for long.
A usability note here—in order to actually import an album, the user has to click the cover photo so that a check mark appears. There’s no visual affordance to indicate this functionality, so Myspace can expect to hear from plenty of frustrated users wondering why their photos weren’t imported when they clicked “Take me there!”
0:12
Now we get to the first view of the new Myspace site itself. There’s a dramatic full-screen photo of David as the background. How did it get there? There must be a place to set these kinds of preferences, but it’s not visible anywhere in this view.
Then again, he’s already got 2,718 connections, so this is probably a bit of demo magic, skipping ahead to David’s profile much later, once he’s built it up. Other intriguing bits of customization are visible, like a “Profile Song” and a URL for David’s personal website. The demo has skipped over the profile creation process, either because it’s not sexy enough for a demo video, or because it hasn’t been designed yet.
0:13
As the user’s mouse moves down, the wall of posts that was peeking in from the right side of the screen slides over to the left. How is this happening? It doesn’t seem to be user-initiated, at least not in any way that’s obvious from the video.
As the wall slides to the left, the background photo of David shifts slightly as well, giving a nice sense of connection between page elements, and keeping the photo looking good, too. Subtle, and effective.
0:14
The wall has moved into position, and we can see some of David’s updates. There’s a nice visual distinction between text-only status updates, which get a little stylized rectangular speech balloon; and photo or activity updates, which get a nice-looking photo-in-a-box treatment.
Looking at the time stamps on the updates, there doesn’t seem to be any rhyme nor reason to the order on the page. Posts appear to have been made at 2:57pm, 4:02pm, 3:56pm, 3:44pm, and then at 3:05pm. It’s probably an artifact of being a demo only. Still, if I were putting together a demo that was going to get this much public attention, I’d want to get the details right.
All the updates on this page are from David Croft, so this is probably a view of his wall only.
0:15
The wall of status has changed now, presumably through the passage of time. A new update appears in the top left corner, David is now connected to Justin Timberlake. It would seem that updates appear in the top left, move down, and then off to the right as they get older.
0:16
Now the entire wall is moving, and profile information about David has disappeared off-screen to the left. How is this happening? It’s not clear what’s going on here at all. Maybe they haven’t worked out the basic interface model yet. That would be quite a problem at this stage.
Also puzzling is what appears to be someone else’s status update on David’s wall. Is this a view of just David’s activity, or is it everyone? The left-hand navigation hasn’t changed, it still says we’re looking at “latest.” Maybe it’s another demo hiccup.
0:18
Still all David, except for that one moment where Rhiannon tagged Kenna in a photo. HOW IS THIS WALL MOVING?
0:22
The user’s mouse goes to “Mixes” in the left hand nav, and the “wall” slides upward to show David’s mixes. The wall might actually be an infinite plane that we’re viewing through the viewport of the browser window. Or maybe it’s just an animation, and there’s not a coherent mental model at work here. Either way, it looks nice.
I wonder if you can swipe on a tablet to navigate around?
0:25
Wait, now the mixes are moving! What is going on?
0:26
We’ve clicked on one of the mixes, “Jake’s Housewarming,” and here it is, a combination of songs and photos. It would be cool to see how one of these mixes gets made. Do the songs have to come from artists that are on Myspace? Do you have to be connected to the artist to put their songs in your mix? The note on the mix says “My debut performance as a DJ! Killed it man!”
Does this mean David was using Myspace as a party mix for Jake’s housewarming?
0:29
Oops, the wall is sliding again. Nice cover photo, I wonder how it got there?
How does all this sliding-panel business work? Is it based on mouse movement? Is there some rudimentary collision avoidance going on here to slide the panels around based on where your mouse is? That could get annoying, fast.
0:30
Whoosh, and we’re sliding the wall all the way over to the photos for this mix. David Croft sure does love himself some Instagram.
0:34
The wall slides back (somehow) and the user is mousing over to click on “connections.”
Is there a way to get back to see all mixes? From here, it seems the only way is to click “Mixes” again in the left-hand navigation. Does the back button on the browser work in an interface like this?
0:37
“Connections” is the Myspace friends list. As the user mouses across the grid of photos, names appear, along with a little icon that looks like interlocking rings, whatever it’s for. Despite the sliding action that would seem to be good for swiping on a touchscreen, this is most definitely not a tablet interface. Much of the interface relies on mouseover actions to reveal hidden information.
Just below the left-hand nav, two new items appear, “Play all” and “People.” Intriguing. How does one “play all” connections?
0:40
The home screen appears, as the user clicks on the Myspace (myspace?) logo in the bottom bar. It’s nice to see the new logo, and the end of the bold, but controversial “space bar” logo.
The left-hand navigation has changed completely. It would seem that the word “Home” at the top of the left-hand nav is a signpost for our current location.
It seems that this is where everyone’s activity is aggregated.
0:42
Slide, slide, slide… and mousing over a status update with a video reveals a “play” button.
0:47
As the user in the demo switches to the “Discover” screen, the navigation model becomes more apparent. The bar at the bottom of the screen is the primary navigation, and the left-hand nav is secondary.
This “trending” section could be valuable real estate for Myspace. As an opportunity to highlight news, in this case music news, Facebook has nothing to offer like this. If Myspace manages to pull this off, they’ve set themselves up for what could be a very lucrative area for sponsorships and promotions.
0:48
Oh crap, it’s moving again. Seriously, how does this navigation work? Is it going to be an animation that happens every time you click on a new section? That would get really old, really fast.
0:49
The trending section continues to slide, through mouse drags, timed animation, abstract physics models, scroll wheels, arrow keys, who knows? As the user’s mouse passes over stories, that odd little interlocking-rings icon appears. It must mean “clickable link,” or “connect.”
0:53
The video fades, and introduces us to a new section. We’re now in Discover: Songs: High Rotation. It turns out there is a reasonably conventional hierarchical navigation going on here. Filters have appeared beneath the secondary nav, where we can sort the high rotation tracks.
0:54
Mousing over a track, or maybe clicking it, changes the background photo and brings up an article about a featured artist. Or maybe it doesn’t. That might have just changed on its own. Which is okay. This is just a demo, after all.
The neat party trick here is a nice click-and-drag action that allows the user to apply a selected track to a number of actions at the bottom of the screen, such as adding to a mix, creating a new mix, or… hey! What do you know, that little interlocking-rings icon means “connect.”
0:57
But wait, the main image has changed again. How? Why?
0:59
And here’s the Events section. We seem to be looking at events in cities around the world. Hopefully there will be some way to control what you see here.
Mousing over any event reveals whether it is sold out; a rather annoying decision on the designers’ part, meaning that you’ll have plenty of opportunities to get excited about an upcoming show, only to discover that you can’t go. A lot of wasted effort will be exerted waving the mouse around the screen each time, checking the status of shows. By the time the new Myspace goes live, it would be nice to see the “sold out” status simply displayed, rather than revealed.
1:01
The wall slides back, and we’re looking at the main photo for Events. Madonna looks ragged. She is not aging well in this picture at all. Hard to believe she’s only 54.
1:03
The search function. That’s not a search bar in the primary navigation, it’s a button. To search, you will need to move your mouse to the bottom of the screen, click the little button, then move up to the top of the screen to start typing. Presumably someone on the design team noticed this, because they’ve included a keyboard shortcut – the hint at the top of the screen says “press ‘s’ key to search in future.”
When can you press the “s” key, I wonder? Not when you’re typing something in a status box; hopefully not when in browse mode, where you’d probably want to type a letter to jump down in a list.
1:04
Another problem with the search box as presented is that autocomplete would be awkward, if not impossible, to include. There’s an instant search feature, à la Google, which is a reasonable consolation prize, but even Google uses both autocomplete and instant search.
The results in the video arrive as fast as the user can type, fading in smoothly with graphics for every result. That’s some serious promise of performance. Even Google isn’t that fast. This is definitely one of those “your mileage may vary” situations.
1:05
Search seems to be focused primarily on music. In this result set, there is a column for “people,” but it’s not clear whether that includes your real-world friends. Other people’s status updates, news from Trending, events, groups, brands, etc., are not included in the search results.
Since the first Fall of MySpace sometime around 2008, they’ve redefined themselves as a music site, and that seems to have kept them on life support so far. It looks like this redesign is a first step towards challenging Facebook for the throne. If that’s the case, they’ll need to evolve past search results like these. I could be wrong about their intentions, though.
1:08
Clicking in the “Artists” column on Justin Timberlake, we get Justin’s page, with a full-screen video playing in the background. Is this going to auto-play? Will there be sound, and will it interrupt what you’re currently listening to, or do you have to pause the player in the bottom bar yourself? Is there going to be a “silent browsing” mode for people who want to use Myspace while listening to their own music?
There are a few differences between this page and the one we saw for David. Justin has two additional sub-navigation items under Profile: “Shop” and “Events.” There’s also another secondary nav item, “Music Catalog,” and of course, the background video. It seems like Justin Timberlake has a slightly different kind of profile page, probably because he’s an “Artist” as opposed to a “Person.”
1:14
We finally get to see what the “Connected” icon does. It’s a place where you can see quick details about someone/something, including mutual connections and how similar you are to that person. There’s a place to send a quick message, as well. It’s not clear where incoming messages appear, since there’s nothing in the navigation that looks like an inbox, although there are a couple of icons in the primary bar at the bottom that could be likely candidates. My guess would be that the flag is for notifications, and the speech bubbles are for chat. One of those might contain an inbox, though. It’s a feature that’s not included in the demo video.
1:26
“Post.”
1:30
When the user clicks “post,” the screen turns to a semi-opaque white overlay as a writing surface. It’s a very nice way to let you focus on what you’re doing by removing the distractions of the rest of the site, but keeping them just visible enough that you don’t feel you’ve lost your way. The absence of borders around the text box itself is a little disorienting, but after using the site for a while, I doubt people will have any problems.
There’s a 140-character limit, which feels forced and out of place. I call things like this “cargo cult design.” They’ve copied a surface feature, in this case from Twitter, without the underlying purpose. How does it help to limit people’s posts to one another to 140 characters? Twitter has a core philosophy based on succinct communication and quick, lightweight interactions. Myspace seems to be building a rich, engaging site that is intended to keep people on the site, not get them in and out quickly.
There are a few Facebook-like features here as well, allowing us to attach a photo or a song (a nice music-oriented touch by Myspace, staying on brand). The “add tags” option is a little bizarre, since there’s no way to search tags based on what we just saw in the search results. It’s not clear how, or even if, you can add links to images or web sites.
Additional options include privacy settings, and sharing your post on Facebook and Twitter (not Google Plus). It’s a smart move, one that will let Myspace users post here as their primary home without losing touch with their followers on other social networks.
Back to the post itself, as he starts to type, the word “davidcroft” is blue. Since this is a mockup and not the real site, a little continuity error appears as the letters are blue before he’s even finished typing the name, but that’s okay. It’s just a demo.
But wait! What’s going on here? I thought WE were David Croft in this video. Have we somehow become Justin Timberlake? The primary nav bar at the bottom now says “Justin Timberlake” where it had said “David Croft.” Looking back, it seems that we shifted perspective at 1:08, and are now seeing the site through Justin Timberlake’s eyes.
1:41
This is Justin, looking at his Connections, i.e., his friends list. Now we get to see what that “People” dropdown does. No, wait, I still can’t tell what it does. Apparently there are two different states that the icon can toggle between, and this might also be where you can select different views, such as seeing your own songs, photos, et cetera. It seems like a strange decision to bury something as basic as your photos in a dropdown menu, hidden beneath a filter, below the tertiary navigation.
1:45
Here’s a moment of the interstitial animation caught as the mouse goes to open the accordion menu for “Music Catalog,” and the infinite plane / wall shifts upward to begin revealing part of the music catalog.
1:47
And here’s the Music: Overview. This must be an artist-only view, as it’s showing which of Justin’s tracks have been getting the most play and who his top fans are. Does he want to see “Similar Artists?” Maybe. I can imagine quite a few indie bands getting upset when the “wrong” artist appears in this section. I wonder if there will be an appeals board?
On the right, we see a bio and some stats. It’s not clear who writes these. Presumably, it’s in a profile editing section that hasn’t been shown in the video, although it’s not clear where that might be found.
1:50
The video fades to indicate another jump cut, and we’re seeing a very powerful interface for artists, “Top Fans.” It’s not clear how to get here, but however that is supposed to happen, the destination is impressive. A lot of services have paid lip service to the idea of “connecting artists and fans,” but this really walks the walk. A NORAD-style map shows where the greatest concentrations of fans are, and a rollup of important audience insights appears on the right. Dropdowns for top fans this week and fans listening now promise opportunities for some real artist-fan interaction. Imagine Marina Diamandis dropping in to say hello to someone who’s in the middle of listening to “I Am Not a Robot.” Commence fan freakout. Great idea.
1:56
Speaking of top fans, the last item on the right is especially intriguing: “Tobias Muller is your most influential fan.” A mouseover reveals how many people have found Justin Timberlake’s page through Tobias, as well as the two next most influential fans. There’s a pie chart, but it’s just decoration. The “top fan” interface to be the least fleshed-out section of the video, but it’s also one of the most interesting.
1:58
David Croft is back! Hovering over a hot spot on the map shows the top fan for that region, in this case, David. It seems he likes the song “Sexyback.”
2:02
Finally, the video closes with Justin Timberlake using the “Message Top Fans” button to send a blast out to, well, his top fans. It would be nice to know more about this, like how links are added, seeing how many people will get the message, whether there’s any tracking or insights around these kind of blasts, etc., but as I said, this seems to be very much a work in progress, so all of that will surely come with time.
September 25th, 2012 at 10:56 pm
our pages scroll horizontally with mouse wheel/trackpad
and it’s all very real. thanks for the lovely writeup. must have taken a long time.
September 26th, 2012 at 8:58 am
[...] much of the Internet by surprise when they announced a new redesign via http://new.myspace.com. Link – Trackbacks Posted in User experience (UX) | Permalink. ← Beantin [...]
September 27th, 2012 at 4:10 pm
This is great, man.
September 27th, 2012 at 6:42 pm
Nice post. I only watched the video once and picked up a few little oddities along the way, thinking: it would be fun to take the time to really go through this and pick at the made-up-for-the-purpose-of-looking-good fake facts. See that fan blob at the top left hand corner of the map in 1:50? My eye went there, because that’s my neck of the woods. But that particular spot, that’s the middle of nowhere. Justin must have fans living on a house boat in the middle of nowhere, using a satellite internet connection to stay in touch via myspace. Aaah, isn’t the internet awesome…
September 27th, 2012 at 6:51 pm
It’s an agency pitch video. There’s no way the site is looking like this.
September 28th, 2012 at 11:01 pm
Nice post!
Assuming the registration process is similar to what is shown in this video, I think that alone will kill the new site. As you pointed out, it is long and tedious, and it seems like your profile will still be empty when you “arrive”.
Then you’ll have to click, well, everything, to learn the site. I don’t know about you, but that sounds like a 10-minute visit to me, the first time, just to learn how it works. And a lot of it will be empty.
Brutal.
I admire the balls of these designers and of Myspace in general for doing this, but it feels like they designed more for “curb appeal” than for actual long-term use or short-term conversion. And that has Fail Whale written all over it.
I hope I am wrong.
Again, great post.
October 8th, 2012 at 11:17 am
Thank you for writing this article.
I enjoyed reading your deconstruction. The video certainly raised a lot of questions with myself too. From a UX perspective it looks fun and fluid but there do seem to be some challenges here indeed. How does the side slider work? What triggers the movement? I am not sure an endless side slider works that well with regards to scrolling, instead of top to bottom on the Facebook timeline. It’s almost as if it has been designed for tablets or the magic mouse.
We will see how Myspace deal with this I guess.
October 10th, 2012 at 9:16 pm
I think you’re missing something about the UI… I think its designed both for mouse and touch screen/pads to be used together. When was the last time you used a modern Mac? I scroll up and down (and would left to right) with 2-finger gestures and then use a single finger and click to locate and activate individual buttons and links. I’d say 85% of your mystery movement could be accounted for with left and right swipe/drag gestures.