Two geeks on startup ship...

Why Twitter’s RT implementation sucks and what it can do to fix it maybe ?

Rch — Thu, 17 Dec 2009 10:22:01 +0000

Now that is definitely a long, infact very long blog post title but the thing is I just love Twitter . Simplicity is often underrated, under appreciated. But Twitter has managed to grow into a mainstream app while still retaining most of its simplicity. I usually use Seesmic to tweet but now and again I sign into Twitter website too. I am very selective when it comes whom to follow. Its just that I usually end up clicking on every link posted by someone whom I am following and there is just so much you can read in a day. I am an information junkie and really afraid that if I start following too many folks I may end up spending the whole day on Twitter.

What exactly sucks about Twitter’s RT implementation ?

I guess I am just reiterating what other folks have already said. Its leaves me confused when I see a tweet with a pic of someone am not following. Its very likely that the original person who tweeted it is someone I may be interested in following. If not, I may atleast be interested in seeing what she has tweeted about. Buy I need to know which person has exactly retweeted it and in a way recommended the person or the tweet. This information doesn’t come to you immediately when you see the RT on Twitter website. Because the first thing you notice about a tweet is the picture of the person who tweeted it which in this case is someone whom you don’t know.

What Twitter can do to fix it ?

Just replace the picture with the person who actually re tweeted it. Retain the RT icon, thats good enough to make it clear that its an RT and attribute the original person at the bottom where it is currently showing the name of the person who actually RT it.

Note:

As I am writing this post, I realized that the Twitter’s RT feature has disappeared yet again. Probably Twitter is A/B testing this feature
Some people also wrote about the inability to add comments. I do agree thats an issue but the stranger on my tweet issue is the one that I find more annoying.

The Facebook way of keeping users active

Rch — Sun, 25 Oct 2009 16:52:25 +0000

At Web 2.0 summit Mike Schroepfer, Facebook’s VP of Engineering shared some data around Facebook usage. The one that was most impressive was that Facebook Users spend 8 Billion minutes using Facebook . Thats one huge number.

Well guess you can write a whole book on different stuffs in Facebook that keep the users engaged. But there is one new feature I saw in Facebook couple of days back. Please see the screenshots below:

You all must have seen Facebook suggestions. They used to display profiles of people you might know. In the screenshots you can see two suggestions. The first one is a friend suggestion. Makes sense, the more friends you got, the more people you have to interact with and the more active you are going to be. Plus that works both way, i.e. the same stuffs apply to the friend you are going to add. This has been there for quite sometime.

Now lets take a look at the second suggestions, in the first screenshot FB is asking me to reconnect with the friend, while in the second FB is asking me to suggest a profile pic to the friend. The question how do FB make these suggestions. So, I just took a look at their profiles. These two folks had not been active on FB in last one month or more. Isn’t this a great strategy ? Even if one of the friend, sends a wall post or something, the guy is very likely to login again and might start using FB more actively.

I can’t say who first said it, but its true, its not the idea, its the implementation that matters more. It amazes me that even after reaching 250 Million + active users, the rate of innovation at Facebook hasn’t slowed down. This is probably what differentiates Facebook from other social networking sites. What do you think ?

Learning from Yahoo! Mail landing page

Rch — Mon, 05 Oct 2009 14:03:43 +0000

I recall reading an article which mentioned that on an average a user spends 8 seconds on a page before moving on to a new site. So, you have less than 8 seconds to get your message through and make the user take the desired action. The action can be Signing Up, booking a ticket, buying a product or downloading a software depending on what your site is about. So, to simplify its usually a click on that one button that will take the user to the next stage of the conversion funnel. While at the same time you want to give a seamless experience to the retruning users too.

Lets see how Yahoo! Mail does this. Please find below a screen shot of Yahoo! Mail landing page when opened from a broswer with cache/cookies/sessions deleted.

The left section carries the value proposition, whats new in Yahoo! Mail and on the right is the login section. One the top of right section you can see a prominent button reading “Sign up for Yahoo” It has a header reading “Don’t have a Yahoo id” and another line saying “Signing up is easy”. The title makes it clear that this action is meant for people who don’t have an Yahoo! id and the second text tries to convey the message “Hey, you neednot worry signing up is easy and not that painful” . Now lets see how the same page appears to a returning user.

You can see that the Sign up for Yahoo section is no more there and has been moved to bottom of the right section. For a returning user, you want the user to just sign in. Am not sure about the implementation but guess they just make use of cookies to identify if the user is visiting the page for the first time or is a returning user.

The key take away is you can actually segment users visiting your site via different means (cookies, referring urls etc) and optimize your landing page to give the best possible user experience. Hope you find this post helpful, do drop in your comments

Rch

Ease the user through the registration flow – II (The How)

Rch — Wed, 23 Sep 2009 16:11:48 +0000

In the last post, we discussed the things Twitter does to make the registration experience easier for users. Lets see now how they do it. We are using firebug to examine the page. “Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…” We will be using screen shots from Beezang to explain how we can implement the same experience as done in Twitter.

The focus is on “Your Email” field. Please refer the bottom frame. contains the input field and has the following three divs

Your email will be your beezang login id.

Oops! Please enter a valid email. eg. superman@example.com

We have three divs that handle three different scenarios. The help class div displays the help content when the field is in focus. The good class div displays the feedback “Ok” when the user enters a correct field. The bad class div displays the error message if the user input is wrong.
Use the same structure across all input fields. You can customize the help text and error messages for different fields.
Now, the trick is whenever an input field comes under focus, a javascript function is triggered. The function that we have used is as follows. $(“input”).focus(function() {
$($(this).parent().next(“”)).children().css(“display”,”none”);
$($(this).parent().next(“”)).children(“.help”).css(“display”,”block”);
}
);
This function is triggered whenever an input field comes under focus. It changes the display property to none for all fields and then turns the help class div’s display block. Note: We have used jQuery library.
Now lets go over how we can implement the display of feedback message i.e. the good and bad div. Whenever the user moves to the next field we call the following function on blur

$(“input”).blur(function() {
$($(this).parent().next(“”)).children(“.help”).css(“display”,”none”);
var error_flag = 0;
if ($(this).parent().attr(“id”) == “username”)
{
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if (filter.test($(this).val()))
{
error_flag = 0;
}
else
{
error_flag = 1;
}
}
else if ($(this).parent().attr(“id”) == “screenname”)
{
var filter = /([a-zA-Z0-9_-]+)$/;
if (filter.test($(this).val()))
{
error_flag = 0;
}
else
{
error_flag = 1;
}

}
else if ($(this).parent().attr(“id”) == “password1″)
{
var str = $(this).val();
if (str.length > 5)
{
error_flag = 0;
}
else
{
error_flag = 1;
}
}
if (error_flag == 1)
{
$($(this).parent().next(“”)).children(“.bad”).css(“display”,”block”);
}
else
{
$($(this).parent().next(“”)).children(“.good”).css(“display”,”block”);
}
}
);

We validate the input entered by the user and depending if its correct or not make the display field block. I know its a bit more like an overview but guess you can take it forward from here. P.S. Sorry about the formatting

Rch

Ease the user through the registration flow – I (The Why)

Rch — Sun, 20 Sep 2009 21:18:34 +0000

Lets face it, people don’t like registering on websites. If you are building a website, you should probably work/think hard to design your service such that it doesn’t require the user to register. We, at Beezang are still trying to figure out how we can expose maximum functionality to the user with out the user having to register. I admit, we don’t have any answer now. But we are trying to simplify our registration flow as much as we can. We studied quite a few registration forms. The one that we loved the most was that of Twitter and Mint. In this post, I will be sharing our hypothesis on why they do it the way they do it.

Check the screenshot displayed above. This is the screen that is displayed when you get to the registration form. Find below some observations:

Full form visible without scrolling down – Most of you will be able to view the whole form without scrolling down. Imagine how much the user is relieved when she can immediately see that ok she got only five fields to fill in. Try recalling the time when you first registered for an email id , this one looks lot easier
Focus on first field by default – This decreases one click effort for the user.
Large Textfields – The textfields are large enough that its easy on eyes, yet it doesn’t expand the form such that the user has to scroll down.
Help Text for focused field displayed – You can see the help text displayed for Full Name that is focussed currently. Why ain’t the help text for other fields displayed now ? Well probably because the user doesn’t need to see the other help texts now. You can ease the user through the flow by taking her through one step at a time.
No Confirm Password – Think about it, do we really need to ask the user for confirm password ? Probably for 80% of the cases the user correctly types in the password field i.e. the user has typed in the password what she wanted to keep as password. For the rest 20% cases well the user can easily retrieve it using Reset or Retrieve Password feature.

Now lets go through the second screenshot. I’ve successfully filled in the first field. Find below some observations:

Immediate Feedback: More often than not, people respond to encouraging feedbacks. Think about the state of mind of the user. She is putting in the effort and time to register on your site for a service she is not 100% convinced holds any value for her or not. A simple ‘Ok’ displayed after the user has successfully filled in a field reassures the user that hey you are doing great, keep going.

The third screenshot. What do we see ?

Error Prevention: I typed in a username that I knew already exists. As I moved to next field, it is immediately displayed on the page that one field has a wrong entry. Forms submission take time. You just might as well, do all the validations possible on client side.

In the next post, I’ll be sharing on how we can implement this flow. Drop in your comments.

Hello world!

Rch — Sun, 20 Sep 2009 19:21:32 +0000

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!