Say I’m building a website that deals with data from other websites (social and professional networks, etc), and I want users to be able to enter in their existing profile info into of the application. I can’t just ask for their current username (e.g. `http://facebook.com/
In the example above, “Sign Up For” send the user to the specified site’s sign up page, and the form element is their ID. It changes based on the site in question, and I don’t think it quite works. What troubles me most (I’m not in love with it being overlaid on the text) is the language, but none of it is something I can’t live without. “Finish this URL” makes it sound like a game, or look like a CAPTCHA, neither of which is what we want. So, UI/UX/Usability gurus: How would you do it? [Comments are open][link].
[link]: http://extrafuture.com/2009/11/12/usability-question-du-jour/#comments “Let me know in the comments”
13 replies on “Usability Question du Jour”
I'd say do it something like this:
Desired username: ________________ (form box)
http://spoke.com/userid=??? (slightly greyed out text)
And have the “???” in the URL update dynamically with whatever they're typing in the form. Get's the point across that you're choosing a certain URL without being awkward / non-standard about it.
I think you misunderstood the question. This form is for users who HAVE accounts at the site listed, and want to tell us what their account ID is. I can see your confusion from the image. Lemme fix that.
Ah. I think I see what you're saying now.
If it's what I'm thinking it is, I'd put down something more like this:
Connect your Spoke account:
SPOKE.COM/USERID=|__________|
or if you don't have an account, _join Spoke now_.
It'd also be great for the user if as soon as the focus leaves the form box, it checks the URL against the target site (spoke.com in this case) to see if the URL/account exists and gives the user a *checkmark* “found the account!” or *X* “couldn't verify this account exists”, just so the user gets some feedback that they did things correctly before they submit the form. (Especially if there is a second line for password etc. — perhaps not so useful if the users will mostly hit “enter” as the action that releases focus from the field.)
Actually that''s just what it does. It checks the site against out “bad username” regex for the site and will instantly tell you if it's a valid name.
Adam's suggestion definitely seems more clear than the “Finish this URL”. I think instructing the user why you're having them fill in the blanks will help too. Maybe even showing a sample screenshot with the area of the URL that you need highlighted (all the other areas can be greyed/masked out).
Having as screenshot available is good (like on sites that want your bank routing number have the “where is this” graphic), but that would mean managing current screens for 40+ sites, and always more. Which I don't wanna do : / It is a good idea, though.
I do like Adam's language much better.
What you could do is have a sample URL generated at the same time to allow the user to quickly click the link and check manually to make sure they're linking you to the right account. Couple of ways you could mesh that into the layout without creating much extra clutter.
Anyway, I'm outta here for beers! Good luck.
We keep a database table with these sites in it, and the “mask” for the account URLs. So, it does do that already. I think you solved my problem of language, though. “Connect your account” is probably what we want.
Not sure if you already have it… but just before the “Connect your account”, it might be a good idea to say:
“Already have an account at {X}? Connect your account below:” and then present the form with the URL mask.
Yeah, the language is right, it's a matter of messing around until it looks and feels right at this point.
No doubt. You'll have to post a follow-up to this so we can see the finished product. It's an interesting problem to solve. Posts like this are always appreciated as it highlights how other UX designers go about solving UX problems.
It shall be posted.