reflections

One of my ongoing projects at the moment is Britster - a social networking site that will offer many of the popular features from sites like MySpace, YouTube and Date.com. What will make this site different to the rest though, is that fact that it’s aimed squarely at the British - including UK residents, ex-pats, and anybody else who wants to communicate with those living in Britain. My role in the project has been varied to date, and has included PHP development, online and offline marketing, corporate styling, and (of course) the design of the main website.

As research for the website design element of the project, I’ve looked at all the major existing social networking sites in a critical light, to see where I could make my own designs better. What I found really surprised me though - a general lack of quality, poor navigation and huge file downloads are common among both the leaders in the field and those vying for success

Please remember that these evaluations are purely my own opinion as a web designer. Just because I think a site sucks visually, it doesn’t necessarily mean the functionality is also lacking, as that isn’t what I’ve focused on.

I hope that any designer (web or otherwise) will find this roundup useful, as it highlights the pitfalls a designer may come across when creating a design for mass consumption - something we all have to tackle at some point in our careers. This may also be of interest to anyone else developing a site with social networking features.

Notes: clicking on any of the thumbnails will open up a full-size grab of the site in either a new tab or window. These are stored on my Flickr account, and I’ve grouped them into a set which you can view in full if you want to make comparisons! With this being a rather lengthy post, I’ve made use of a ‘read more’ break in the text, so you may need to click the title to read this article in its entirety.

MySpace

rating: 4/10

MySpace dominates social networking with a 47% an 80% (source) market share, but I get the impression that the site may have originally been created by one of the founder’s friends - and that they haven’t had the heart to change it since! The home page is a real mash-up of different styling, with nothing looking like it belongs with anything else. It’s also all rather plain, and the first thing that catches my eye is the advertising. The site uses CSS for styling, but breaks when you turn styles off - probably preventing it being used by anyone with screen reader software or the like.

Things get much, much worse once you view user’s profiles. This seems to be more about who can fit the most widgets on their page, rather than about the actual networking! A random user page that I selected included auto-play music, a static background picture, several randomly-placed Flash gizmos, links which change size as you roll over them, four embedded videos, and some large images. The file size of the page and its contents (including the streamed audio file) was an enormous 1.3 Mb!

Bebo

rating: 5/10

This is a much simpler design than MySpace, and there’s a real focus on the images - although with them being all the same size the layout seems a bit repetitive! The various sections (Bands, Beboers etc) all look alike, so it can be hard to know whether you’re looking at an image belonging to a major recording artist or a standard user! For some reason, the login form seems to be a bit of a mess, and feels like it’s been hacked together by several different coders.

On the plus side, I like the fact that the front page advertising isn’t too obtrusive (carrying just a single banner). User profiles aren’t quite as nausea-inducing as those on MySpace either, but generally speaking they’re still loaded with huge amounts of bandwidth-eating images and the obligatory Flash animations, slideshows, and music players.

Friendster

rating: 7/10

Now this is more like it! Friendster’s front page is clean, well-designed, detailed and nicely coloured. It’s also functional, with easy access to the main parts of the site, excellent use of AJAX to switch filtering on various information, and a nice tidy login box! The only problem I can see with the home page is that the advertising is placed a bit strangely, and tower banners (like the AOL that comes up sometimes) are cut-off half-way down the graphic!

Unfortunately, it all goes down the pan when you get to the user profiles - with huge background images, lots of Flash and sparkly animated GIFs, and animated ads everywhere. I’m starting to see a trend here…

Hi5

rating: 3/10

This one’s a bit of a mixed bag. The basic design of the front page is nice, but it looks like somebody else has then come along and randomly dumped content into it - badly! There are so many things on this page that could easily be improved, including the low-quality stock photos, badly aligned sign-up prompt, and complete lack of consistency in font sizes! I do like the use of a tag cloud though - it’s something you don’t often see outside of the blogosphere, and it certainly makes them stand out from the competition.

The user profiles really let this site down though, and it doesn’t seem to take much for somebody to break the layout of the site with the insertion of one Flash file too many. Then there’s the full-screen popup adverts, the page-filling ads, the screen-corner ads… You get the idea?

Faceparty

rating: 7/10

Every social networking site has to make money. The majority do it by offering free accounts and then serving ads, but Faceparty’s primary revenue stream is premium rate mobile (cell phone) services. Every page is covered with ads promoting the various mobile-related features of the site, including the option to pay GPB 1.50 (about USD 3) to get your picture on the front page! Unfortunately, all the ads draw your attention away from the otherwise well-designed site!

The user profiles are clean, probably because the only customisation that seems to be available is the ability to change the background image.

Facebook

rating: 9/10

Facebook takes a different (and refreshing) approach to their front page - as there’s barely anything on it! It gets people signed up, offers a tour, and lets you search for people before you join - but the bulk of the content is only show to you once you’ve registered, making it almost tantalising!

Once you’re in to the main site, the design is fantastic. Everything on this site is clean, thoughtfully laid-out, accessible and mostly semantic too! User profiles are clean and considered, and there’s not a sign of a music player or Flash slideshow anywhere. Even the banner advertising is unobtrusive!

I can see that somebody has really thought hard about every single element of this site - from the front page, to the search, to the user profiles - even parts like the help and support. The whole thing is simply stunning! My only (slightly) negative comment on this site is that it needs just a touch more colour usage, as the content can seem to merge with the site design in places! Other than that it’s awesome.

WAYN

rating: 5/10

The first time I saw this site I didn’t realise it was anything to do with social networking! The use of both travel-related imagery and the stereotypical travel-site colour combination of orange and blue, made me think that it was probably a web-based holiday booking site!

Something that bothers me about this site is that it’s wonky, with the whole thing leaning slightly to the left to make space for a big banner ad! I also think that the styling on both the logo and the navigation tabs looks a bit dated, with the (over)use of a strong ‘glowing’ effect. User profiles also suck - with yet more huge background images and another Flash overload.

Piczo

rating: 7/10

Despite having quite a lot of stuff on it, the Piczo home page doesn’t feel crowded or overwhelming. It communicates the site’s features well, with just the right amount of user-feedback (e.g. images resizing and changing colour as you hover over them). Advertising is well placed too.

User profiles are generally quite well done, although there are some exceptions! Perhaps this is because the external companies focusing on Piczo theme packs seem to be more design-orientated than most? All things considered though, I’m quite impressed with the way that this site looks and works!

myYearBook

rating: 6/10
While I appreciate that advertising means big bucks for social networking sites, this is a great example of how to overdo it! The striking Shrek 3 branding, while colourful and unavoidable, totally drowns out the front page content. My eyes were constantly being drawn away to the top of the screen, but if you can manage to ignore the billboard then the content underneath are quite well laid-out, although it does lack consistency in its styling.

I like the whole school yearbook thing that they’ve got going on though - referring to file storage as a locker for example. The user profiles are also mostly within my tolerance levels, although I still managed to find a few that made my retinas burn!

MOG

rating: 8/10

In a break with the expected norm, MOG is the only social networking site I’ve seen that makes use of a dark colour scheme - so it really stood out from the crowd! The focus with this site is obviously music, and that’s successfully conveyed from the front page and throughout the rest of the site. The few ads that exist are well-placed and unobtrusive, text styling is consistent, and there’s great use of colour for both layout and emphasis.

User profiles look good too - with a mini-blog format being used to great effect. Every profile includes details of the last tracks the user was listening to (think last.fm), and the site includes profiles for both recognised musicians and fans of music in general. Any videos embedded in the posts and comments are shrunk to a single line until you click them - making the pages load faster than some of the other sites.

This site feels more like an online music magazine with social networking features bolted-on, rather than a social site that happens to offer good content for music fans. Either way it has been done really well!

Yahoo360

rating: 5/10

The main 360 site looks rather boring in comparison to some of its competition, and is styled using the typically unimaginative and corporate styling that Yahoo forces on everything it makes. The top of the page always retains the generic Yahoo branding, reminding users exactly who they have to thank for their little place on the web!

Fortunately the user profiles are well-coded and - despite the usual over-powering graphics and colour schemes - manage to end up looking reasonably good. Yahoo appears not to allow the placement of videos on the profiles, and thankfully there’s no background music either!

Windows Live Spaces

rating: 7/10

Like all of the other Vista-inspired designs Microsoft has been pumping out lately, this site looks reasonably good, with a nice clean layout and good use of consistent styling and colouring. However, as is also typical of Microsoft, the whole site is laced with cheesy stock photos of smiley people - totally unnecesary in my opinion, especially as they have a massive collection of user profiles to choose images from!

It’s good to see Microsoft being innovative when it comes to the social networking scene. The huge images, Flash videos, and background music are all present again, but users can also make use of Live Gadgets, which have the potential to offer additional functionality right from a user’s page.

TagWorld

rating: 5/10

The TagWorld home page is well laid-out, and contains everything needed to navigate the site in one place - including the actual sign-up form. My main issue with this page is that many elements that look like clickable, actually aren’t - which made me feel a bit like I was visiting an unfinished site!

Once again, user profiles suck. Once again there’s big tiled backgrounds, auto-play music, huge embedded videos. But on the flip-side, some of the profiles are actually quite stunning. I’m not sure whether that’s down to the companies creating theme sets, or if it’s just that Tagworld seems to have attracted a more ’sensible’ audience!

Zorpia

rating: 3/10

To be honest, I visited this site with a frown already on my face. Why? Because over the course of the last three months alone, I have received no less than 692 emails from ‘Zorpians’ inviting me to join the site - I know because I checked my Gmail history! So, somebody is using the site for spamming - and I’m not sure if it’s Zorpia itself, or its users. Either way it put a bitter Zorpia-related taste in my mouth long before I wrote this!

I can see why somebody has been trying to spam traffic to the site though - it really lacks consistency, and everything from the home page, to the user pages, to the photo galleries, all feels disjointed. The only things that appear in the same place on every page are the top navigation bar, and the adverts!

ProfileHeaven

rating: 8/10

The home page layout is a little strange for this site. The top half of the page looks like a typical social networking site, while the bottom half looks and feels like a blog! Having said that, the site is well designed, with an interesting and unique colour scheme - albeit one that appears to be aimed squarely at female visitors.

User profiles feature tiled garish backgrounds, but even with embed videos and huge photos the layouts generally remain unbroken - which makes a nice change! Banner advertising throughout the site is nicely unobtrusive too.

YouOnIt

rating: 1/10

I’ve included this site in my roundup because it features everything that you shouldn’t do when designing a social networking site - or any website for that matter! There’s a nasty, clipart-driven header image that’s too fuzzy to read, navigation that breaks if you’re using anything other than IE6 at the default font size, a badly-tiled background image, massive images that are resized disproportionately (think Oompa-Loompas), nasty hover-over popups on every user photo, and graphic elements that look like they’ve just been dumped randomly into the layout - and that’s just the home page!

The general suckiness continues into the user profiles, and almost every single one I looked at was broken by huge images, videos, music playback bars and the like - not to mention what seems like an amazing amount of 14 year-olds using phrases like “i liek to hav a good timme” in their intro text! In fact, I’m only giving them a point because they’ve got a good domain name!

This is, without a doubt, the worst piece of web design I’ve seen for a very long time - and also a great way to end the article!

The Top 3

Based on my opinion of the sites I looked at, Facebook is the clear winner as far as Social Networking design goes, with a clean and thoughtful design that could perhaps use just a little more colour! MOG comes second with a unique and consistent music networking site, and ProfileHeaven a close third with its great colour scheme and tidy user profiles.

I’m disappointed to see that the biggest sites in this arena don’t necessarily have the best designs. You’d think that huge visitor numbers would be a driving force towards great aesthetics, but it would appear that good design isn’t as important as advertising revenue and user customisation options. I’d like to hope that my Britster design will be closer to Facebook than it is to MySpace - but only time will tell!

My Questions to You

Have I been fair? Perhaps I was critical of a site that you really like, or maybe I got it right? Have I missed a particularly well-designed (or poorly-designed) site completely? I’d love your comments on this one - both out of curiosity, and to utilise in my new creation!

[Thank you Tara, Ludovic, David Airey, Charity, Char, LaurenMarie, Lisa, Asgeir Hoem and Respiro for the fantastic comments on my previous post]

Share This