hyalineskies

Before the first line of code is written, we must familiarise ourselves with the navigational constructs of a MySpace profile page so we make all of our core IA changes deliberately rather than by some type of coding accident. In a social network, all navigation from profile to profile happens via friend or via search; each user is their own centre of the universe. Your friends are closest to you and also perceive their own profiles as the centre of the network; you could be their friend, a friend of a friend, or a friend of a friend of a friend and of them as well. For that reason, you are both the main node as well as merely another one that someone might pass through; because of this, you have to pay attention to what you do to limit this flow of traffic. If your profile page contains no MySpace-based navigation and is solely a narcissistic shrine of your own glory, you’ve effectively isolated yourself on the network and ruined its navigational construct. You have made the network antisocial, and everyone will hate you as well as not visit your profile page again (Well, in an ideal world, at least. People may think it’s rather funny and return to laugh at you.)

The lesson learned from this structure is guideline one of MySpace IA: keep the social network social. Although you are the centre of your own universe, you are most likely a meaningless pawn to others just browsing through. If you want people to browse through to begin with, give them familiar functionality; keep the MySpace social aspects you actively participate in. For me, that’s friends and messaging; for others, it could include user ranking and groups. Giving people ways to navigate to those connected to you and perform operations with your profile keeps the system functional and active.

Now that we’ve covered basic user interaction, what content should go on this page? MySpace users are used to certain functionality: a picture of the user, a link to pictures and videos, a song, interests, and vital statistics in the left column, with blog entries, “About Me”, friends, and comments on the right. Any other content, such as embedded video or Flash games, isn’t standard and is thus somewhat surprising to the user; on the contrary, a lack of common content (e.g., you design your profile page to contain only your picture and friends) can also appear broken to a common user rather than custom.

From this, we’ve got another IA guideline for MySpace: stick to common content. People are used to having certain content somewhere on the page, so no matter where it’s pulled from, the content will be familiar. For this reason, you can bring in rich content from other sources as long as it looks like it belongs there in the eyes of a common user (and not just your own.)

These two rules offer little direction in terms of layout; in fact, I will not spend much time preaching to everyone where everything should be placed. The following layout guidelines are even more loose than the ones above, but I highly recommend following them to some degree to maintain common usability.

My first layout guideline, and the one I would most likely encourage above the others, is to keep navigation in the same relative position. If you move all page navigation to the footer, the user who relies on the upper MySpace search will be lost; if you move all profile actions (Add to Friends, Block User, etc.) under your comment form, it can also be confusing since people are going to look for it under your photo on the left. Keeping navigation in these places allows you to change iconography and navigational typefaces without much user confusion.

This guideline segues nicely into the next: keep interactive element captions constant. If you change “Add To Friends” to something obscure like “Make me a star” or change “Post Comment” to “Send Message”, you are stomping all over the user’s existing site familiarity for a rather inane design choice. Being given the ability to customise your profile in this extensive of a manner is a privilege, and there are already too many trashy executions of this customisation to add yet another page to the mix.

Before you begin to feel too privileged, though, realise that a holier-than-thou stance when laying out your profile can also be a one-way ticket to a terrible user experience. If you shift content around on the page because you think you know better, be prepared to be proven wrong by users who have to search the page for your friends list because it’s not where it used to be. We know that MySpace is poorly coded and the UI could use an update, but unfortunately your profile UI doesn’t carry over to other MySpace profiles or, for that matter, the rest of the site. With this, I have my final guideline for planning your MySpace profile: always have a reason for moving content. Don’t just do it because you can.

Now that you have some guidelines in place, it’s time to wireframe your custom profile. I’ve built a rough PDF cheat sheet of MySpace interactive elements for use when planning out your profile. Tomorrow MySpace development will move into the world of code with XHTML/CSS and the Div Overlay method.