[MUSIC PLAYING]
GUS CLASS: Hello world, and welcome to this week's episode
of Google+ Developers Live.
Today we're going to talking about the Sign-In user
experience and ways that you can make the most of the
available features from Google+.
So I'm Gus Class.
I'm a Developer Programs Engineer on Google+.
And I'm here today to kind of again, elaborate on that topic
that Joanna Smith and I were talking about this year at
I/O. [INAUDIBLE]
sign-in on your site is to get that user signed in and
connected on your site.
MALE SPEAKER: I'm sorry, we're going to have start this
again, [INAUDIBLE].
We're going to persevere.
GUS CLASS: We're going to persevere.
[MUSIC PLAYING]
GUS CLASS: Hello world.
And welcome to this week's episode of
Google+ Developers Live.
I'm Gus Class, a Developer Programs Engineer on the
Google+ team.
And earlier this year Joanna Smith and I gave a talk at I/O
on best practices for Google+ Sign-In.
We're going to cover one of those concepts today, and this
is reflecting the user back and welcoming them when they
sign in to your site.
So as a foundational thing about Google+ Sign-In, the
goal when you integrate is to get that user to sign in to
your site and then become connected to your site in a
way that they build an emotional connection.
So what I'm going to do today is, I'm going to start with a
very basic site.
And then I'm going to make marginal improvements on that
Sign-In experience to show you ways that you can be creative
and create a more engaging experience.
So if you look at my screen, here is the basic site.
On the top right hand corner of the site, which is one of
the hot spots for where users look when they see your site
the first time, is the Google+ Sign-In button.
And on the top left, I invite the user to sign in.
So let's take a look at just the basic scaffolding that
we're building from here and look at that code behind the
site that's relevant.
So here is that index.html markup.
And if you look inside of here, this is a very basic
sign in button.
I'm connecting that sign in button to the global call
back, which is called out as onSignincallback, and then
from within that global call back, I'm connecting the user
to a helper module which contains the functionality for
doing things like rendering the user experience.
So if you just look here inside of that
onSignincallback, what I'm doing is I'm just hiding the
Sign In button, rendering a Disconnect button, and then
kind of connecting that user with that
helper.connect method.
And actually, sorry, what I meant to say was inside of
helper.connect is where we're going to render the various
user experience or for that sign in.
So let's go back to the site.
And let's see what happens when I sign in the first time.
So here you have this site again.
There's lots of cute pictures of puppies on here, and that
user is invited to sign in so that they can do all of the
great things that they can do once they're
signed in to the site.
So I'll click Sign In, and the Google Sign-In authorization
dialogue should render.
We'll see what happens before that happens.
So it looks like we're having some connectivity issues here,
no big deal.
Go back and there it goes.
So here's that authorization dialogue that you've become
very familiar with because you're Google+ Developers.
And so inside of this authorization dialogue you can
see the various things that Google is requesting for on
the top and the various things that will become publicly
available from the user's friends.
So I'll just sign in here.
And once I sign in, something is going to
happen on the site.
And that something that happens is really what we're
going to focus on today.
So in this really basic example, what we are doing is,
we hide the Sign In button.
We render a Disconnect button.
And then we reflect the user's display name back to them--
indicating to them, oh, you're signed in now.
So this is a real basic implementation.
And so we're not doing anything special yet.
But this is a good start.
So let's take a look at how I'm doing this.
So I'll go back in here.
Let's look at some code.
And so here's that basic example.
You'll notice that I'm using jQuery, jQuery UI.
You can do this anyway you like.
A lot of people are talking about various ways of just
kind of using raw JavaScript and CSS referencing.
It doesn't really matter.
But the point here is the things that are happening.
So on the top here you can see where I hide the various
things that are going to be updated.
And then you can see where I render that signed in as the
current user.
And then you can see where I show the Disconnect button and
then show the Authorization button.
So what happens here is, after that user signs in, that Sign
In button disappears and then a Disconnect button appears.
And that user profile appears again.
So let's go back and look at that Disconnect button.
So what I've done is I've just kind of tried to do something
cute here, sort of match the theme of my site.
And I've added this little Disconnect button.
When you click Disconnect, the user is prompted with a
disconnect dialogue.
And then the user, after they click Disconnect, they break
up with the site.
And then they're disconnected.
So there's that basic experience.
Let's think about ways that we can make it even better.
So if you're following here, you'll notice also that this
is actually a live site.
So if you want to check this out on your own, you're
welcome to look at my code directly.
But moving along, here is a better experience.
So I'll just reload this page to make sure
that it's all good.
And so here's that same experience that
the developers sees.
The Sign In button in that hot spot, in the
top right hand corner.
And then the user signs in.
And after you sign in, something
different is going to happen.
That user's profile information, their picture
which is extracted from their Google+ profile, is then
displayed alongside their name.
And then that same experience from before happens.
So let's again revisit that code and see what we're doing
differently.
So the key point that I want you to take away from the code
that I'm showing you here is that the differences between
an awesome experience and a real basic experience is
almost trivial.
You don't have to do very much more to create a more engaging
experience.
So looking at the code here, the big change that happens
now is that HTML, as opposed to being rendered just based
on the user's display name, is being created using this
getProfileHTML function.
So you'll notice that the first thing that we do is, we
get that user's image URL.
And that image URL will then be put inside of that profile
box along with alt text displaying their display name.
And then that user's display name again is going to be
reflected back to the user.
So something special happens when the user sees themselves
looking back on the site.
They think to themselves, I am part of this site now.
My experience is tailored to me.
And now, like that social connection is made there.
So that if other people exist on that site, or if you're
building these connections with other people on the site,
then you know that it's a face-to-face sort of
conversation and experience.
So I'm going to show you one more way
you can make it better.
I'll just disconnect here again.
Reload the page, and I'm just using these anchor tags to
kind of distinguish between the various experiences.
So I'll sign in.
And after that sign in, something
different is going to happen.
You might have missed it, but on the top left hand corner of
the site, my profile was rendered.
And then it bounces.
So let's take one more look at that.
Awesome.
So you see that profile bounce, and then all of a
sudden your attention is drawn right to it.
Now I'm not going to say that this is what you should do
specifically for your site.
But this is one unique way that you can kind of enhance
that experience, draw the user in more, and
let them know that--
yeah.
I'm signed in to this site.
I'm there and here's my information.
Here is the information that Google is presenting to me.
And now I'm kind part of this site's experience.
So this is going to be the final code snippet
that I'll show you.
And again, this is just a very small change to that code that
we had seen as our basic example.
So what we're doing differently here is, we're
using a jQuery UI effect for bounce.
And we're setting a time out for that animation to show.
So that's pretty much it.
The real key takeaway here is, try to be creative in the way
that you're integrating Google+ Sign-In.
And think about the things that you can do that are
unique to your site to distinguish it from just sort
of that boring old or conventional sign in
experience where just the user signs, they're authorized on
your site, and that's it.
So think about ways that you can make
your experience better.
And keep an eye out for future Google+ GDLs, because we're
going to be showing additional things you can do to improve
your site experience.
Thanks for watching.
[MUSIC PLAYING]