The setup: Is too cute!

The demo site that I have created is istoocute.com, the following image shows how it looks:

If you take a glance at the site layout, I have done a few things of note:

The Google+ Sign-in button is placed in the top right

I’m inviting the user to sign in with a message on the left

I’m doing this because I really want the user to sign in. Once the user signs in, various personal touches can be added to the site such as that person’s connections that they have shared with this app, their public profile information, and content they have shared. Another detail you may have noticed is that I’m also following the common convention of placing the button the top right corner. I’m doing this because it is one of the hot spots for a user’s visual attention.

Let’s take a quick look at the relevant HTML code in index.html for the area that changes when the user signs in, the user bar.

When this code loads, elements on the page get rendered by the script. Also, the gapi object becomes visible to the JavaScript global context so that it can be used later to perform Google+ API calls.

A good (albeit basic!) sign in experience

Now, we have a basic site where clicking the button will prompt the user to sign in. Once a user signs in, they are presented with a screen such as the following:

When the user signs in, the following events occur:

The message inviting the user is replaced with basic information about the user

The Google+ Sign-In button is replaced with a disconnect button

This is a good start! The steps that are performed here indicate to the user that they no longer need to sign in and now any features that are relevant for a signed in user appear. This change in the site is visible to the user and the clear connection between the site and the user has begun. In taking these steps, the site is also doing the right thing in accordance with the Google+ developer policies such as:

Information about the response is logged, the Google+ Sign-In button is hidden, and then the connect method is called. The connect method is where you could then connect the user with a server-side component of your application, but for now we will just be working client-side. What the connect method does now is just update the UI components to reflect the user is connected. The following code shows how it’s done in app.js:

The profile area is populated with the user information, the welcome message is hidden, and then the buttons that are relevant for an authorized user render.

So this is a good experience, let’s think about ways that we can tweak it and make it better!

Making it better: Using the profile to reflect the user

At this point, you are retrieving all of the user’s public profile information from Google+. This is great because you can now use those details to draw the user into your site experience more. Using the JavaScript console, you can get more information about the user’s profile object. The following JSON object is an example of a profile:

From a quick glance at the available data, the most obvious choice for using this information to bring the user in is to show the user’s profile picture from Google+. Let’s update the code so that it now will add the profile picture when the user signs in.

In the code, another method in the helper module renders the HTML for the user. This method is implemented as follows in app.js:

The relevant two lines of code are called out in the code, and you can see that the change is just a tiny tweak on the original code. When the site renders now, it looks as follows:

The user’s profile is there and is reflected back to them. When this is done, the user knows that it is them who is connected with the site and that their picture and name are now a part of that site’s experience. This is still better because a familiar human face is there on the site to draw the user in. You can see this experience by opening the #better anchor tag on http://istoocute.com

Let’s look at a final way that you can improve the experience.

Making it awesome!

Using motion is a great way to grab the user’s attention. In this particular case, I want to draw the user in more by bouncing the profile photo. I’ll call out that this specific animation would not be tasteful on every site but on my particular site, the effect works and it does it’s job of drawing the user’s attention to the fact that they are logged in.

Let’s look at the jQueryUI code I added to animate the profile in app.js.

$('#profileArea' ).effect( 'bounce', null, 500, null);

This small tweak in the code is all it took to render that bounce effect which makes the social touches on the site much more noticeable.

Conclusions

Think about creative ways that you can make the most of the user’s information right when you sign them in. By making tweaks on what happens after the user signs in, you can really engage them and turn them from visitors into users. As demonstrated in the example, small changes can have a tremendous impact on what the user experiences when visiting your site.