Posted by & filed under Forms, PatternFly.

1. In-Line Edit for Form

Inline Edit pattern enables users to edit text directly on the same page instead of navigating them to another page for editing the text. This is useful when the user may want to make a single edit without the need to refresh the entire form to make it editable. This pattern would help user to edit the info they need edit accurately and reduce the mistake operation.

Single Field Inline Edit Design

  • Only one item can be edited at a time. Users commit to or cancel changes by clicking Save or Cancel.

Example A

This a Staff Management System,most information in the form is management by company, only nickname and personal telephone number can be edit by employee.

There are three status to show to the in-line edit process.

 

Example B

This a personal information page, all the info in the form is added by users and all the info allow user to edit.

 

  1. In the usage scenarios like example A which with fewer fields can be edited. Displaying the Edit icons will help user discover them directly.
  2. In the usage scenarios like example B, most information allow user to edit. The edit icon can be hidden. Because when there are too many edit icons. The UI is obviously going to look cluttered. You can hover your cursor over the name. Once you hover over the name, you will see the information getting enclosed inside a rectangular box.

Multiple Field Inline Edit Design

A user try to edit a group information such as his birthday. When he hover the birthday number, he will see the hover status same as the following image. Once he click inside the rectangular box, the field becomes input groups with save and cancel buttons.

Guideline

  1. This pattern applies to form content views.
  2. This pattern does not include bulk actions (editing multiple fields at once).
  3. This pattern applies to fewer fields need to be edited.

 

Field Inline edit components need to be created

 

2. A toggle to a full edit mode

If the form need users to updated a lot of information at one time. We would better giving a Edit button on the top. After click the edit button turn the page to edit status with group of fields.

  • Users commit to or cancel changes by clicking Save or Cancel

View status

Edit status (full page view)

Guideline

  1. This pattern applies to edit multiple fields at once. If users usually edit only a few fields, do not use this pattern. Field Inline Edit will be better.
  2. Either edit view in a full page view or modal is make sense. We would better keep the consistent use habit. If the information add by modal, when you click edit button, you can return to modal status with the origin information. If it from a full page, you can return to the full page view.

 

3. Real-time sharing form

Some real-time sharing form such as Google sheet which without cancel and save button. Keep edit mode always on.

Welcome more feedback about Inline Edit on Forms. Thank you~

 

5 Responses to “Inline Edit on Forms – Conceptual Design”

  1. Hi Tao,

    Great post! I like that you hide the edit icon if many fields are editable.

    Did you consider switching the save and cancel buttons? On forms the buttons are left aligned and the save button is on the left. In a modal the buttons are right aligned with save on the right. I think this more closely matches a modal pattern and would expect save to be on the right side.

    Reply
  2. Monica Granfield

    Great work Tao! on the work item in OpenShift.io we used the in line editing model. This might be a source for getting feedback from a working product. My only feedback is:
    1. The check and x look like one button
    2. The pencil argument per Don Norman is that having the pencil display by default, and not on hover is more accessible and is mobile friendly. However, it can be visually noisy which introduces other usability issues. OS.io does not show it by default. I think that most users these days will attempt to click on or tab to a field and try to edit it… I think the jury is out on this and maybe we can do some of our own testing around this.
    I love the options offered of both the in line edit and the complete edit.
    Great work!

    Reply
    • Hi @Monica, greats thanks for your feedback.
      1.The design approach was considered the existing recommendation on inline edit for lists (http://www.patternfly.org/pattern-library/forms-and-controls/inline-edit/) and be consistent with this where possible. We could try to update them to button group.
      2.I agree that most users these days will attempt to click on or tab to a field and try to edit it… If the information just few fields could be edited, we would better show the edit icons directly will reduce the confusing of users. That’s a great idea to do some testing around this.
      Thank you very much!~

      Reply

Leave a Reply

(will not be published)