How to best collect Facebook username?

Question

Situation

I have a website that allows users to (mostly) anonymously send links to friends via a variety of methods, including a private Facebook message. This does not require logging in. I am able to do this with only knowing the friend's Facebook username and do not want to require my users to log in to Facebook. My method so far has been to have an input box labelled "Facebook" with placeholder text showing http://facebook.com/example. This is functional and in my limited hallway testing, users understand they can copy/paste their friend's URL. However, I don't need the http://facebook.com/ portion, just the username that follows. Some users may find it more convenient to type the username in and I'd like them to know that the URL portion is not required. Right now, the box will accept either the full URL or the username only (dropping the URL portion server-side on validation.)

My Questions:

1. Is this the best way to indicate what I want? (related question) I fear that users will not know what a "Facebook username" is and attempt to enter an email address or just the person's name (both of which I cannot use), so I hesitate to use that term without explanation
2. Assuming this is the best method, how can I best convey that only the username portion is required? I could remove the http://facebook.com/ on the client side (onblur or onsubmit), but I'm not sure that will be clear why it is being removed. I could possibly add a message (probably onblur) giving some sort of "Only the username is required", which would help the next time they enter this.

Answer 1

I would suggest not to indicate users the format that you need, even if it simplier (danjoe is simplier that facebook.com/danjoe).
Let users do the easiest job, and the programmers code 1-2 more lines. In general people do not care about how we are going process their data, but they are focused on how we are going to use them.

---

Now, long story sort,

keep the form, almost, as it is.

Why?

• The first reason has to do with error and confusion of users. Facebook urls might include things like ?fref=ts, or being just random numbers(the id). So a user might wonder about the part of the url that you need
• The second reason has to do with error prevention that relate to memory. Well you may have "smart users" that they believe they can remember their friend's url name. Please no. Research usually proves that we have false memories.
• The third reason has to do with efficiency and satisfaction. The regular scenario for the task of getting the url or part of it is the following, which seems flawless:
  1. The user realize that he need the url
  2. Searches or navigates directly to friend's profile. (1+ clicks)
  3. Clicks on browsers url. (1 click)
  4. Browser selects the whole url. (visual feedback)
  5. User copy the whole url. (shortcut or 2 clicks)
  6. User paste the whole url on your site. (shortcuts or 3 clicks)

If we add the step of url slicing from the user perspective, we are adding one or more steps (actually some clicking and small cognitive load/decisions). Btw this slicing on mobile would be a really painful task.
I would also highly recommend to use the improvements that are already mentioned by Annonomus Penguin.

---

Lastly if it is crucial to ask just for the name (not the url), I would suggest to use this input format and a visual help tooltip like this

^{download bmml source – Wireframes created with Balsamiq Mockups}

What do you think?

Answer 2

This may get downvoted but I say allow them to log in with facebook to solve this problem. Check out this article from 5 years ago from the guardian describing that users have too many passwords and accounts to remember

By allowing users to log in with facebook twitter gmail or bing/hotmail/microsofts authentication, you allow users to have 1 less account they need to remember.

Furthermore by having them enter all of their information again for the account they are making with your site your are now liable for all their information. Lets say they give you an email or even worse social security number. If your site is compromised you loose all that personal data of your user and you will loose that users trust. Where if you are authenticating with facebook or gmail or something else you just have a token from that user and if your compromised you let facebook know and your not putting all their information at risk.

just a different perspective.

Answer 3

First of all, you shouldn't remove it client side. It'd be best to just accept either an ID or a URL server-side. There's no need to change the data.

Back to the actual box, you should change a few things:

• The label for the textbox should be changed. "Facebook" doesn't give a user a clear idea of what they need to add in that box. However, "Facebook Profile" gives them a description of what exactly they need to add to that box.
• Change the placeholder text. A placeholder text of "facebook.com/jon-doe or jon-doe" shows that they can either enter a username or the URL.