Ultimate social network web UI

I love Twitter – lets get that up front.  Am a user of the 3 major social networks if you will – Twitter, Facebook and Google+, but Twitter is my first love.  With the launch of new new twitter, I noticed something about the web version. Facebook won.

In web UI terms is looks like Facebook has won (am not referring to the app or mobile versions, those are very very different and a whole other discussion). Twitter says it aims to be “simple, consisten and fast” it would appear the way, at least on the web to achieve this was to reflect what most social network users are familiar with – the layout of Facebook.

Therefore, I decided to test my observations.  Let me warn you, these are not based on any ongoing analysis (new new twitter only launched yesterday) or any deep user testing (it launched yesterday) but more observations you have in a bar after one or three beers and you are in flow of conversation, applying the 10 sec rule to everything.  They are only looking at the main landing pages from a very high level, through the eyes of a non-web design, techie, etc person.  Obviously there are deeper actions and user paths which set each apart, but I am not talking about those here.

Firstly I blocked out and colour coded the UI the 3 major pages of each network.  Laying them out side by side, there are some pattens which begin to emerge.  Things like the use of photos just below the photo and name on the new new Twitter brand pages seem to reflective that of Facebook and Google+.  Facebook was the first to do this out of these three, with Google+ launching with it.

Well gee-whizz there seems to be a load of similarities, what else could there be?

Lets overlay the pages and see what develops.

Straight away, they all seem to use a top bar – home in top left, profile top left, include a search bar.  All standard web now days, with Google+ having the largest search bar of course. However, what I fully didn’t realise is with the new new twitter the main content filters/notifications seem to have moved also to the top left.  Although Google+ has the notifications on the right you move about the main areas of it using the nav in the top left. Top left seems to be the place for main nav.

Also a cute thing was the content stream for Facebook and Twitter are about the same width, however the updating box are in different places.  Facebook and Google+ have them both above the stream whereas Twitter has it to the right.  In new twitter it was above, very curious as to why they moved it, seems a little odd that you post on the right and then it jumps into the stream instead of just flowing down into it. Maybe it will change back to above the stream over time.

With the user page, pattens revealed are big user photo balanced against the name and bio, with the “Add CTA” to the right so you can “Add as a friend”, “Follow” or “Add to Circle”.  New new Twitter doesn’t highlight user photos above the stream like the others, but onto the left. Where is reflects more of the left hand nav linking down into content like Facebook.

The brand pages of new new twitter however  included an image above the content stream to reflect the other networks.  From the few brand pages I have seen it would appear brands are using that photo area in the same way they do on Facebook and Google+ to carry brand messages and set the tone for the page.  It seems easier than trying to get messages to display correcting using the background.

So all of this got me thinking is there an ultimate social network layout?

Here is it –

Here are are the basic UI rules:

1. Top nav bar.  Home, Notifications, Search, Profile

2. Avatar, Name, Bio in the top left, just below the nav bar.

3. Main “Add CTA” top right below nav bar.

4. Friends access below user avatar.

5. Left hand nav for deeper content access.

6. User photos below Name and Bio.

7. Update box above content stream.

8. Content stream about 520px wide.

There you have it.  Seem similar?


Its Facebook really – left hand nav focused.

Seems Twitter has decided thats the best to simplify its experience.  I will miss new Twitter has I liked the sliding panel and the right hand focused, I truly believed that they could lead others on this path, but alas it was not to be.  Maybe Facebook will be inspired by Twitter in terms of focusing on whats important to the core experience and not keep adding new features in a destructive way.  Smarter people than I working on this problem  @design, Facebook designGoogle+ design team am sure they they will continue being influenced and evolving ideas from each other for their web experiences creating a high level UI blueprint for the best social network that understand and can use in 10 seconds.  Can’t help wonder if my basic UI rules will hold or it will be blow away by “Timeline“.  I hope they are crushed, burned and then spread to opposite ends of the earth, cause I want more of whatever those “Timeline” guys are drinking.


“The left hand nav is dead

Long live the left hand nav”