A 'More Natural' Login Button Placement?

I like the way that My Starbucks Idea login button has been incorporated into the instructional text that goes with it.

My Starbucks Idea login button

My Starbucks Idea login button

Placing the button within the text makes it fit more naturally with the wording and I like the economical use of space. Maybe I also just like the fact that it feels a bit different.

That being said, if you don't already have an account, there is no sign up button so you have to click 'Sign In' first in order to be presented with the option to create one. That seems a little clunky.

I don't recall too many other examples of button placement like this — in fact, none come to mind right now. I'd be interested to hear about any other examples.

Posted on: March 27, 2010 | 34 Comments

Recent Entries in "Web General"

34 Comments Posted

Feels more natural but i might worry the less geeky ppl might not even realize it is there ? dont know just me thinking .. i do like it and i might use it on my website when its ready for my clients although i think i might include another sign in button somewhere else ..

Thanks for the share .. nice to see the new ideas on the web ..

Thanks alot for sharing.

However, I must admit, I don't prefer the idea of having the sign up button inline with the rest of the text. especially that it takes you to a page where you're told a message like: To Leave a Comment You Must Be Logged In. And then you are taken to "another" page to either sign up or login.

I would suggest to keep the inline sign up button, but to make it stand out a bit more while having the choice to display the login or sign up boxes straight ahead once you click the button. More like Twitter login box in a way.

This is a very clever idea, also not sure that your average person will see it though

I don't like it. The flow is all wrong.

You're better off having a defined CTA designed into the page for consistency and usability.

The use of defined textual links in the copy to link to the same place plus a well designed, site-consistent CTA is the best way in my opinion.

What seems strange to me is using button styling for what is (in terms of both markup and behavior) a simple <a>nchor link.

Why not just style the link like a link? E.g., "Hi there, sign in to make a comment."

Using this technique for actual <form> buttons seems kind of clunky, too:

Post your comment.

takes meaning out of the <button> element, unlike:

Post Your Comment

D'oh. Preview showed the <button> elements, but posting stripped them out.

<button>Post</button> your comment

versus

<button>Post Your Comment</button>

I think they take it out of the text to make it more eye catching. Sometimes if a button is in the middle of text, people may skip over it not realizing it is a button.

I'd be interested to see the A/B results of the current button versus a regularly-styled link. Seems to me the orange would draw more attention, but that could just be personal preference.

Also interested to see if they have better results with their links underlined and orange or just orange (as they are now).

Nice post. Thank you.
I will book mark your site!

I feel like it's a nice integration. But I do agree that it may not be prominent enough and people might go right past it. I do have to say that it looks very clean and sophisticated, which definitely suits the Starbucks image.

I feel the button is a little too light. Almost unnoticeable. And have to agree, while it looks nice overall I don't believe it works best. Maybe it looks good now because the instruction is short.

But I'd definitely not put a button inline with the text like this. Unless, it's near the end.

At first glance I like the concept, - perhaps the execution needs tweaking however.

I too would like to see A/B testing, - I think probably interrupting the accepted normal flow would be a barrier to adoption, and potentially more technically savvy users would have trouble adjusting.

That's not a bad idea. It definitely could be useful for some placements. To those saying it is easy to miss, they may have a point. But that's nothing you couldn't fix with a bolder colour for the button, and a rollover state.

It's probably unnecessary in this context in regards to functionality (as a text link might suffice), but i wouldn't go so far as to say it degrades usability. If the design suits, then what's the harm in beautifying what would once have just been another underlined text link.

If anything this is LESS natural. All sites nowadays present you with login instructions in the top header. It actually took me more than 30 seconds to find the login button on this site and I was actually looking for it.

A good GUI is to follow the rules. Every single major site has their login instructions presented in the top right hand corner. This works. It's universally respected and it's the first place that you will look to sign in.

Seriously, inline links are so 1990s. Progression, not regression.

or you could just make it a text link.

I think it would work if the average Internet user read web text like a book or a magazine. In my experience, most website users (myself included), would be more likely to look for familiar hierarchy and easily identifiable page elements than to read in a linear fashion on the web.

nicely layouted the button... really stand unique.

According to Luke Wroblewski, when the input fields are presented as blanks within sentences (Mad Libs-style) the conversion increases 25-40%. You can read the full article here:
"Mad Libs" Style Form Increases Conversion 25-40%.

The only difference is that Luke talks about presenting empty fields in a sentence and this article talks about inserting a button in a sentence.

As some people have said, the only thing I would change is that I would make the button more noticeable.

Thanks for sharing! :-)

i personally believe that the less intrusive but yet recognizable sign in is the best way to go!

I would make it a little more noticeable by darkening the gray and putting a little shine on it. Sometimes intrusive is ok.

People may not even see the button especially if their monitor brightness is turned way up. I think you want it to stand out. I hate searching the site for the sign in or log in button. Make it bright red.

Maria — thanks for sharing that link. I also found a similar 'mad libs' style signup form for VaultPress and Hufduffer . I wonder what people think of them?

In my view forcing someone to sign up before letting them comment is a huge barrier to getting comments or feedback. in my experience the less obstacles you put in the way the better. thats why blog posts like this don't make you register before you can post ... this is just another way to capture details and demographic info which is all very well but in my view a waste as unless there is a nice incentive this won't happen.

I appreciate your posting on "login button placement" which is very useful for a web designer, so thanks a lot...........

Very good article, I will stress this blog regularly because there are a quality content. I wish the same time take the opportunity to publish our video Our graphic design studio: http://www.youtube.com/watch?v=9yNdCFLLWks&feature=player_embedded

Not a button but sort of related... http://vaultpress.com/signup/

Hey there,

I like your idea to make an original design and to save space on your website. But in my opinion the "sign in" button should be very EASY to spot for the user. Most people will not spot this button, not even advanced users...
Maybe a different font color could be the solution? Or play around with the button's shadow.

Greetings,
Jonas

The idea is good but it is unusual and perhaps many visitors will finde it strange. Somebody already did a A/B test? On the other hand, a in line contactform is mostly better then a normal one.

I dont think this is a bad idea.... good post!

It's a nice way to encourage guests, i like it.

Hi,

I think it is very good idea placing sign in button between text but sign in button should be more attractive to attract visitors. button color is more darker in color shade this may look good.

Thanks a lot sharing this idea with us.

What I like most is the button design, very smooth. The placement isn't all that important I belive.

Looks great to me as long the baselines are kept consistent.

great offer this i am very thank full to you

Subscribe

Subscribe to my RSS FeedSubscribe to my RSS Feed

Categories

Proud member of 9rules network