Description

    Given the blog app when a content creator tries to publish a new blog entry then the portal is requiring to populate title and content fields if a user wants to publish. But it doesn't show any help to indicate which required fields are missing.

    Additionally, description field is not required by default; it only becomes a required field when the "Custom Abstract" option is selected.

    Goal: Improve validation feedback.

    Solution

    Main Scenario: A content creator tries to publish a blog entry without title/content

    1. Access Content > Blogs
    2. Click Plus Button
    3. Click Publish Button

    Expected: Title and Content validators are shown

    A content creator tries to publish a blog entry without title

    1. Access Content > Blogs
    2. Click Plus Button
    3. Type a content
    4. Click Publish Button

    Expected: Title validator is shown

    A content creator tries to publish a blog entry without content

    1. Access Content > Blogs
    2. Click Plus Button
    3. Type a title
    4. Click Publish Button

    Expected: Content validator is shown

    A content creator tries to publish a blog entry without a custom description

    1. Access Content > Blogs
    2. Click Plus Button
    3. Type a title
    4. Type a content
    5. Click Custom description radio button
    6. Click Publish Button

    Expected: Custom description validator is shown

    User Experience

    Summary

    • Modify content hint: "Content *"
    • Add field validator for title and content inputs.
    • Title Validator text: "This is a required field for publishing"
    • Content Validator text: "This is a required field"
    • Use field set style instead of label style with Abstract label.
    • Add a helper to Abstract label.
    • Use the label "Description" with a text area instead the current Description field.
    • Add an asterisk symbol for Description label.
    • Add the label "Small Image".

    Interaction

    Validation

    • Each time a required field is not populated and the user tries to publish:
      • The validator related is shown.
      • Error style is applied to the input component.
      • Scroll to required field.
    • Given an input box with error style applied when it gets the focus then the normal style is applied. If it loses focus without any content then the validator related is shown again.

    Abstract radio group

    • Two radios: "Use the first 400 characters of the entry content" and "Custom description"
    • When "Use the first 400 characters of the entry content" radio is selected then the Description form group is disabled and the input box is populated with the first 400 characters of the entry content.
    • When "Custom description" radio is selected then the Description form group is enabled and its input box is cleared.
    • "Use the first 400 characters of the entry content" radio is selected by default.

    Saving

    • If a user wants to publish all the required fields must be populated plus Title field.
    • Only content field is required when a user is saving a draft.

    Interactive Prototype
    URL: http://w492m5.axshare.com

    Design

    Hints

    Abstract

    Title and Content validators

      Attachments

      1. Abstract radio group interaction.gif
        Abstract radio group interaction.gif
        69 kB
      2. Blog_Abstract_2.png
        Blog_Abstract_2.png
        49 kB
      3. Custom Abstract - Description.png
        Custom Abstract - Description.png
        66 kB
      4. New Abstract.png
        New Abstract.png
        163 kB
      5. New Hints.png
        New Hints.png
        37 kB
      6. Title and Content Validators.png
        Title and Content Validators.png
        43 kB
      7. Validation - Focus.gif
        Validation - Focus.gif
        425 kB

        Issue Links

          Activity

            People

            • Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Days since last comment:
                3 years, 18 weeks, 4 days ago

                Packages

                Version Package
                7.0.0 DXP FP14
                7.0.0 DXP SP3
                7.0.3 CE GA4
                7.0.X EE
                7.1.X
                Master