4

Background

Using an edit-in-place field for users to provide their name.

Problem

The phrase "Type your name" imperatively indicates that users can (and should!) type their name. However, unless the edit-in-place field is first clicked, typing a name affects nothing.

The phrase "Click here to edit your name", while a bit verbose, is becoming less suitable as people no longer "click" but touch with a finger.

Question

What is a good way to prompt users to type their name into an edit-in-place field?

Ideas

  • Use the Yellow Fade Technique on the field that a user can edit.
  • Use the "click here" phrase and carry on with life.
  • Use "Your name" and hope they get the hint.
  • Use a sliding or fading tool-tip?

Context

For example, consider the following screen:

Example Context

Users do not have to change "Unknown User" (their name), but they can personalize it if desired.

Related Links

Improve this question
4
  • 1
    I think I could use a bit more context to be able to provide feeback: - Is this field required? - Could it be prefilled if a user had previous entered their name? - Could you make any use of a label, i.e. "Name:"? - Are there any other inputs that they need to fill at the same time?
    – sacohe
    Commented Oct 31, 2012 at 0:23
  • 1
    I agree with @sacohe, you could do more with the label. "Unknown user" is a misnomer anyway. The user is known, just not explicitely named. "Your display name" or "How others see you" or indeed "Name?" would already help indicate the editability of the content.
    – Marjan Venema
    Commented Oct 31, 2012 at 7:20
  • Could you make use of a small "Edit" image button next to the text?
    – sacohe
    Commented Oct 31, 2012 at 12:27
  • The "Unknown User" is from an old screen shot just to provide context, as was requested. The screen currently says "Your name" as per the question. I like the idea of Name?
    – Dave Jarvis
    Commented Oct 31, 2012 at 15:54

1 Answer 1

Reset to default
3

I recommend using hover affordance. For such a large UI item, you can cause a textbox to appear behind the element when you hover over it, encouraging users to see it as an editable element.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This works well for sites that have an 'edit mode' or similar, to constrain the distracting hover activity for when the user wants to make changes. It works poorly without this constraint, as the site is constantly flickering as they move their mouse over editable page elements.

Improve this answer
2
  • 2
    How would this work for mobile devices where users won't necessarily "hover" a finger over the field?
    – Dave Jarvis
    Commented Oct 31, 2012 at 0:59
  • 3
    Poorly? :-) Not a good answer for mobile accessibility.
    – Myrddin Emrys
    Commented Oct 31, 2012 at 1:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.