[Required fields] Poor feedback

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 7.0.0 DXP SP2, Master
• Fix Version/s: 7.0.0 DXP FP14, 7.0.0 DXP SP3, 7.0.3 CE GA4, 7.0.X EE, 7.1.X, Master
• Component/s: Blogs, Collaboration
• Labels:
  • QA-AUTOMATION
  • liferay-digital-enterprise-70-sp3
  • liferay-fixpack-de-14-7010
  • usability
  • ux
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Story Points: 1
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/47457
• QA Test Name:
  • BlogsUsecase#ViewBlogsEntryWithCustomAbstract
  • BlogsUsecase#ViewBlogsEntryWithFutureDisplayDateViaBlogsAggregator
  • CPBlogs#AddBlogsEntryContentNull
  • CPBlogs#AddBlogsEntryTitleNull
  • CPBlogs#ViewErrorMessageForNullCustomAbstract
  • PGBlogs#AddBlogsEntryContentNull
  • PGBlogs#AddBlogsEntryTitleNull
  • PGBlogs#ViewBlogsEntryWithAbstractDisplayTemplate
• QA Test Score: 30

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