Problem/Motivation

We want to improve the experience of the content creators (the author UX), but we don't know what kind of eventualities to take into account.
We therefore want to collect some real-life examples of edit forms to see what a content editor sees when they click the edit link for a content item.

Take a screen-shot for us

  1. Go to a content item page on any existing Drupal 8 site.
  2. Click edit
  3. Take a screen-shot of the whole page
  4. Upload it in a comment
  5. If the site uses any contrib modules to improve the editor experiences (such as Field groups etc) please list them in the comment.
  6. Done. Thank you!

Comments

ifrik created an issue. See original summary.

ifrik’s picture

StatusFileSize
new302.3 KB

screen-shot: ifrik-node-edit.png
uses: Field groups to structure fields, and Inline entity form - Cpomplex to upload or choose files.

yoroy’s picture

Issue summary: View changes
yoroy’s picture

StatusFileSize
new366.66 KB

Here's one to get started.

voleger’s picture

StatusFileSize
new336.79 KB

Field groups, Inline entity form.

mglaman’s picture

Here's a collection for my horrible mobile experience.

petr illek’s picture

StatusFileSize
new392.59 KB
new193.82 KB

I'm glad this issue exist. I'm posting two screenshots of one edit page to illustrate my approach, which is to present as minimum fields to the editor as possible on initial load, editor can then expand what they needs. I found long edit pages a bit intimidating and confusing. I've put there few purple labels as translations. I've also switch to Seven only for the screenshooting purpose. Otherwise I'm using Adminimal which has more pleasant look.

Used modules:

  • Paragraphs (with experimental edit form)
  • Entity class formatter – allows editor to attach classes to entities in simple way
  • Modifiers – allows editor to change look of entities

Further notes:

  • We need an easy way to add/remove parts of the form to the right hand column.
  • Get inspiration in webform module and allow "inner" layouts on components like checkboxes (Leerjaar checkboxes on yoroy screenshot will be better in flexbox)
  • Get better distinction for nested elements, than just nesting (nested paragraphs are hell).
dennis cohn’s picture

StatusFileSize
new373.41 KB
new340.71 KB

Used modules:
field_group
paragraphs (we've got lots)
chosen
single_datetime
entity_browser

Further notes:
Because the size of the Content Type, we've put everything in vertical tabs.
Also we remove the right sidebar cause this takes a lot of unwanted space.

dennis cohn’s picture

StatusFileSize
new160.33 KB

Also:
Not really a node/edit UX problem, but more an admin menu problem:
When you've got a large website, with a lots of Content Types/ Paragraph types and want to go to an specific item in the menu, you can't. It runs out of screen. See the screenshot. We've got 10 more paragraph types in the menu..
You can only access them, by click the parent menu item "Paragraph Types" that brings you to the paragraph type overview page.
Pretty annoying :)

anpolimus’s picture

Issue summary: View changes
StatusFileSize
new138.69 KB

Form 1: Used Field Group + Paragraphs Experimental widgets

anpolimus’s picture

StatusFileSize
new164.66 KB

Form 2: Field Group

jglynn’s picture

StatusFileSize
new143.09 KB
pameeela’s picture

Status: Active » Fixed

I think this issue can be closed since the desired screenshots were gathered. Added credit for those who provided them.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.