New in 14: Placeholder text

Version 2

     

     

     

    Placeholder text allows you to provide labels or guidance text within a field. It helps to keep your layouts streamlined and easy to read. More technically, it is a special display state applied only to fields.


    The text is displayed inside the field when the field is empty, and it disappears when the field is populated. You can use it to replace field labels, suggest a data format, or provide field-specific instructions. Unlike a standard field label, it can be the result of a calculation, giving it added flexibility.

     

    582-placeholder+text.png


    You enter placeholder text using the Data tab of the Inspector. You can type a literal string in quotes as well as any other calculated expression. The Show placeholder in Find mode checkbox determines whether the text is displayed in Find as well as Browse mode.


    583-placeholder+inspector.png


    Placeholder text isn’t appropriate for every situation. Here are a few dos and don’ts:

     

    Do: consider removing field labels and replacing them with placeholder text if the field is easy to identify when populated. In this case, it’s important to put strict validation in place to prevent confusing (or junk) values from being entered. You could also provide a popup menu or drop-down list to help the user understand the purpose of the field.

     

    Don’t: replace field labels with placeholder text if the field is not easy to identify when populated. This is especially important when sets of similar fields appear on the layout, such as Office Phone & Personal Phone, or Work Email & Personal Email.


    Do: put formatting instructions inside a field, such as “###-###-####” for a phone number.


    Don’t: replace labels with placeholder text in long forms that require the user to scroll when reviewing their data entry. It's better to reserve this approach for shorter forms where the meaning of each field is completely obvious.

     

     


     

     

    Goal:

     

    First try one of the Do’s, providing formatting instructions for the two phone number fields on the Contact Detail layout. Then try one of the Don’ts, replacing labels with placeholder text for fields with similar values.

     

     

     

    Steps:

     

    • Try one of the Do's

    1. Make sure you are viewing the “Susan Truong” record on the "Contact Details | Pro" layout (in the Pro folder).

      Currently the Office Phone and Personal Phone fields are empty.

    2. Enter Layout mode.

    3. Select both the Office Phone and Personal Phone fields.

    4. In the Inspector > Data tab > Field area, enter the following value into the Placeholder text (when field is empty) box:  "###-###-####"
      584-phone+number+format.png
    5. Enter Browse mode, observing how this text appears in both fields when they are empty.

    6. Enter a value into the Office Phone field, observing how the placeholder text disappears.

      These two fields could have validation applied to them requiring this format. It depends on whether you need this format to be entered consistently, or whether the placeholder text is just providing a possible value.


      Try one of the Don'ts

    7. Enter Layout mode.

    8. Select the Office Phone field and change the placeholder text to this value: Office Phone

    9. Select the Show placeholder in Find mode option. Since this field is enabled for Find mode, you’ll want the placeholder to be visible in that mode as well — otherwise the field’s purpose would be unclear.

    10. Delete the field’s label from the layout (“Office Phone”).
      585-delete+field+label.png

    11. Repeat steps 8 to 10 for the Personal Phone field, changing the placeholder text to this value: Personal Phone

    12. Enter Browse mode, observing how the fields are identified by their placeholder text.

    13. Enter a phone number into the Personal Phone field.

      Without labels, how do you know which field is which? They’re both just phone numbers.

      Let’s undo the “Don’t” and return to the “Do”:

    14. Enter Layout mode.

    15. Press Command-Z (OS X) or Control-Z (Windows) multiple times to undo the layout changes you made in steps 8 to 11.

     

     


     

     

    Consider your options


    As you set up your own data entry layouts, keep asking yourself what choices will be clearest for the user. For example, imagine you were redesigning the "Contact Details | Pro" layout. How would you do it differently? Here are some of the things you might consider:

     

    • The Notes field is the only other field with a label. Does it need it?

     

    • Is the purpose of every other field obvious to the user, or would some of them benefit from a label?

     

    • If someone entered junk data into any of these fields, could that confuse other users?

     

    • Could you improve the user experience by adding field validation or interface cues such as popup menus?


    Tip: Use placeholder text in your portals


    When you have a portal that allows the creation of related records, placeholder text can improve the user experience by showing that the last row of the portal is available for data entry.