Problem/Motivation

Drupal 8 wants to provide a much improved workflow for content creators. One of the most critical screens in this is the content creation page. This issue outlines a plan for implementing a new design for this page.

Latest breakdown of sub-issues for this

Per comment #292, revised per #319. Please work on feature issues first. These are all unblocked now, though 3 and 4 are tied together.

  1. [task] commited: #723392: Tame seven's reset.css
  2. [task] committed: #1238484: [docs update] Ability to mark the form buttons to be of a specific type (so that they can be styled differently)
  3. [major][feature] committed: #1751606: Move published status checkbox next to "Save"
  4. [major][feature] committed: #1838114: Change node form’s vertical tabs into details elements
  5. [major][feature] committed: #1838156: Implement the two-column layout for the new create content page
  6. [task] Needs work: #1751754: Implement new form style for Seven, based on blueprint mockups.

The main issues that this design wants to solve are:

  1. Make the publishing status of the content item much more obvious: Move the publishing state selection out of vertical tabs and position it closer to the Publish/Save actions. Provide a clear status label in the sidebar.
  2. Provide clearer seperation between content and settings: Make the vertical tabs less screen-space consuming by moving them into a sidebar as an accordion.
  3. Update and expand the visual language of the Seven admin theme to express all of the above in a clear and elegant form.

There’s quite some background to this. We have documented our research and iterated on the design proposal.

What we’d like to build is this:

proposed new design mockup - includes a sidebar that will be placed instead of Vertical tabs and new button styling

From our analysis of the feedback on the research and design proposal, we made a few adjustments to our original proposal. See the discussion points below for the parts that need more detailed design work still.

Remaining tasks *Please see implementation plan below for critical work*

See comment #147 for the results of usability testing, this resulted in the following issues to be fixed:

Further discussion


Implementation plan *updated*

We need help in refactoring this from a prototype patch to a full fledged core patch. We have a first implementation a single core patch, but it needed to be split up into sub-issues in order to review, refactor and commit in more sensible steps. This is what still needs to be done before feature freeze:

  1. #723392: Tame seven's reset.css
  2. #1238484: [docs update] Ability to mark the form buttons to be of a specific type (so that they can be styled differently)
  3. #1751606: Move published status checkbox next to "Save"
  4. Move the node form’s vertical tabs to collapsible fieldsets.
  5. Implement 2 column layout for node forms using either new Blocks & Layouts system or not, depending on time constraints. A mobile layout was never explicitly designed, but the original core patch implemented a responsive layout. Make sure this works well on small screens as we refactor!
  6. #1751754: Implement new form style for Seven, based on blueprint mockups.

Unfortunately these patches are interdependent – no way around that.

Go!

Files: 
CommentFileSizeAuthor
#300 createcontent-redesign-switched.jpg119.7 KBmikkopaltamaa
#286 1510532-286-create_content_form--button-type.patch10.25 KBmrfelton
FAILED: [[SimpleTest]]: [MySQL] 40,552 pass(es), 3 fail(s), and 0 exception(s).
[ View ]
#285 1510532-285-create_content_form-_no_reset-_no_reorg.patch48.11 KBmrfelton
FAILED: [[SimpleTest]]: [MySQL] 40,495 pass(es), 0 fail(s), and 870 exception(s).
[ View ]
#274 1510532-274-create_content_form-_no_reset.patch67.46 KBkika
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1510532-274-create_content_form-_no_reset.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#273 new_reset_1.png48.76 KBkika
#273 new_reset_2.png59.4 KBkika
#273 old_reset_1.png48.44 KBkika
#273 old_reset_2.png60.14 KBkika
#262 1510532-262-create_content_form.patch77.76 KBeojthebrave
PASSED: [[SimpleTest]]: [MySQL] 40,361 pass(es).
[ View ]
#260 1510532-260-create_content_form.patch78.36 KBeojthebrave
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1510532-260-create_content_form.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#255 widescreen-overlay.png193.46 KBry5n
#255 widescreen-no-overlay.png196.86 KBry5n
#255 ipad-simulator.png215.1 KBry5n
#255 iphone-simulator-1.png124.09 KBry5n
#255 iphone-simulator-2.png121.81 KBry5n
#250 create-content-1510532-250.patch77.51 KBry5n
FAILED: [[SimpleTest]]: [MySQL] 39,886 pass(es), 14 fail(s), and 0 exception(s).
[ View ]
#249 create-content-1510532-249.patch77.49 KBry5n
FAILED: [[SimpleTest]]: [MySQL] 39,874 pass(es), 14 fail(s), and 0 exception(s).
[ View ]
#245 create-content-1510532-245.patch77.45 KBry5n
FAILED: [[SimpleTest]]: [MySQL] 39,818 pass(es), 14 fail(s), and 0 exception(s).
[ View ]
#243 1510532-no243.patch74.54 KBry5n
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch 1510532-no243.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#238 Screen Shot 2012-07-29 at 8.33.42 PM.png124.03 KBry5n
#238 Screen Shot 2012-07-29 at 8.31.45 PM.png120.94 KBry5n
#238 Screen Shot 2012-07-29 at 8.25.39 PM.png159.15 KBry5n
#238 Screen Shot 2012-07-29 at 8.30.23 PM.png210.71 KBry5n
#227 node--create-content-1510532-227.patch4.15 KBry5n
PASSED: [[SimpleTest]]: [MySQL] 37,258 pass(es).
[ View ]
#201 node--create-content-1510532-201.patch29.31 KBfubhy
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: PHP Fatal error encountered during run_tests.sh. See review log for details..
[ View ]
#200 node--create-content-1510532-200.patch29.32 KBfubhy
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: PHP Fatal error encountered during run_tests.sh. See review log for details..
[ View ]
#198 node--create-content-1510532-198.patch26.85 KBwebchick
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch node--create-content-1510532-198.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#170 node--create-content-1510532-170.patch28 KBry5n
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch node--create-content-1510532-170.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#170 node--create-content-1510532-170.screen.png97.27 KBry5n
#160 Snap2.jpg89.87 KBkervi
#159 node--create-content-1510532-159.patch22.96 KBry5n
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch node--create-content-1510532-159.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#159 node--create-content-1510532-159.screen.png229.61 KBry5n
#158 node--create-content-1510532-158.patch22.71 KBry5n
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch node--create-content-1510532-158.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#158 node--create-content-1510532-158.screen.png223.53 KBry5n
#135 drupal8-tags.png134.43 KBrovo
#127 create-content-publish-buttons-snippets.zip5.67 KBry5n
#128 create-content-page-publish-buttons-screenshot.png86.91 KBry5n
#106 node-create-1510532-106.patch31.04 KBmrfelton
FAILED: [[SimpleTest]]: [MySQL] 35,603 pass(es), 494 fail(s), and 277 exception(s).
[ View ]
#98 Screen Shot 2012-04-09 at 15.38.57.png50.25 KBmrfelton
#97 node-create-1510532-96.patch25.86 KBmrfelton
FAILED: [[SimpleTest]]: [MySQL] 35,950 pass(es), 211 fail(s), and 222 exception(s).
[ View ]
#94 SmallScreen.png133.62 KBRobLoach
#94 SmallScreenWithoutOverlay.png144.53 KBRobLoach
#94 UsingBartik.png175.44 KBRobLoach
#93 create_article.png131.54 KBaspilicious
#90 node-create-1510532-89.patch24.14 KBmrfelton
FAILED: [[SimpleTest]]: [MySQL] 35,950 pass(es), 211 fail(s), and 222 exception(s).
[ View ]
#89 Screen Shot 2012-04-09 at 15.09.41.png65.31 KBmrfelton
#86 Screen Shot 2012-04-09 at 14.57.07.png83.73 KBmrfelton
#84 node-create-1510532-84.patch23.91 KBmrfelton
FAILED: [[SimpleTest]]: [MySQL] 35,951 pass(es), 211 fail(s), and 222 exception(s).
[ View ]
#79 node-create-1510532-79.patch18.03 KBxjm
FAILED: [[SimpleTest]]: [MySQL] 35,944 pass(es), 211 fail(s), and 222 exception(s).
[ View ]
#77 node-create-content-1510532-76.patch18.03 KBxjm
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch node-create-content-1510532-76.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#75 node-create-content-1510532-75.patch18.02 KBxjm
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch node-create-content-1510532-75.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#69 node-create-content-page-1510532-69.patch1.67 KBry5n
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch node-create-content-page-1510532-69.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#63 Screen Shot 2012-04-07 at 7.57.56 PM.png94.14 KBry5n
#63 node-create-content-page-1510532-63.patch12.48 KBry5n
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch node-create-content-page-1510532-63.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
edit-content.png59.88 KBtarekdj
#47 Capture d’écran 2012-04-05 à 12.05.24.png186.4 KBjide
#47 1510532-47-content-creation.patch15.42 KBjide
FAILED: [[SimpleTest]]: [MySQL] 35,702 pass(es), 226 fail(s), and 221 exception(s).
[ View ]
#42 1510532-create-content-042.patch14.89 KBkarschsp
FAILED: [[SimpleTest]]: [MySQL] 35,702 pass(es), 226 fail(s), and 221 exception(s).
[ View ]
#36 1510532-35-content-creation.patch13.5 KBjide
FAILED: [[SimpleTest]]: [MySQL] 35,703 pass(es), 221 fail(s), and 229 exception(s).
[ View ]
#36 Capture d’écran 2012-04-05 à 01.36.38.png194.34 KBjide
#37 Capture d’écran 2012-04-05 à 01.49.03.png184.98 KBjide
#37 1510532-36-content-creation.patch14.25 KBjide
FAILED: [[SimpleTest]]: [MySQL] 35,697 pass(es), 221 fail(s), and 221 exception(s).
[ View ]
#33 1510532-32-content-creation.patch13.07 KBjide
FAILED: [[SimpleTest]]: [MySQL] 35,698 pass(es), 221 fail(s), and 229 exception(s).
[ View ]
#33 Capture d’écran 2012-04-05 à 00.39.43.png184.11 KBjide
#30 1510532-30-node.admin_.css_.patch3.55 KBtarekdj
PASSED: [[SimpleTest]]: [MySQL] 35,917 pass(es).
[ View ]
#27 1510532-node.admin_.css_.patch3.55 KBtarekdj
PASSED: [[SimpleTest]]: [MySQL] 35,932 pass(es).
[ View ]
#27 preview.png51.9 KBtarekdj
#24 1510532-content-creation.patch10 KBaspilicious
FAILED: [[SimpleTest]]: [MySQL] 35,691 pass(es), 221 fail(s), and 229 exception(s).
[ View ]
#22 1510532-content-create-screen.022.patch10.97 KBkarschsp
FAILED: [[SimpleTest]]: [MySQL] 35,694 pass(es), 221 fail(s), and 229 exception(s).
[ View ]
#15 createcontent-redesign-quic.jpg62 KBMark Conroy
#11 createcontent-redesign-basic-node-1510532.jpg205.25 KBbrantwynn
#11 createcontent-redesign-basic-node-small-1510532.jpg89.7 KBbrantwynn
createcontent-redesign.psd.zip617.61 KByoroy
createcontent-redesign.jpg234.26 KByoroy
createcontent-redesign-small.jpg48.08 KByoroy

Comments

Status:Needs work» Needs review

New issue created for the updated form style #1751754: Implement new form style for Seven, based on blueprint mockups.. List of tasks now stands as:

  1. #1747868: Modern CSS reset in Seven
  2. #1238484: [docs update] Ability to mark the form buttons to be of a specific type (so that they can be styled differently)
  3. #1751606: Move published status checkbox next to "Save"
  4. #1751754: Implement new form style for Seven, based on blueprint mockups.
  5. Move node forms vertical tabs to fieldsets.
  6. Implement Core's new Layout system (not sure how far along core is with this yet) to provide 2 column layout for node forms.

Sorry, but all these patches are interdependent - I really can see no way around that.

> Implement Core's new Layout system (not sure how far along core is with this yet) to provide 2 column layout for node forms.

You can check out current Blocks & Layouts UI: http://drupal.org/sandbox/eclipsegc/1441840 "Admin > Structure > Blocks > Block Library" to see how eclipsegc acheives the 2col layout, I have not yet looked into it.

oh, still totally cleaning that up, not really trying to replicate this so much as be close to it in spirit. Happy to swap my own layout long term when this goes in if it's reusable.

Eclipse

Implement Core's new Layout system (not sure how far along core is with this yet) to provide 2 column layout for node forms.

THAT would be awesome !

Please make sure that any relevant follow up issues receive the 'needs accessibility review' tag.

@mrfelton Any chance to see "5. Move node forms vertical tabs to fieldsets."? :)

@kika, Is it worth doing that until we know more about how the layouts will actually be implemented? Also, is there still open discussion about wether fieldsets are actually the right thing to use for this? Is there not a better scemantic HTML5 element that we could exploit that might reduce the need for so many browser hacks working around the cross-browser oddities of fieldsets?

StatusFileSize
new119.7 KB

I think that the design proposed on issue summary is great.

However, I would change one small thing, which (IMHO) makes it a even more intuitive and easier to use. I would ghange the layout so that the meta information would be on the left side and the node fields on the right side:

Switched layout

#300: what's your reasoning?

I guess #300 (proposing metadata left, content right) should be answered.

The fields you always need to edit for a new node are the content (e.g. title and body), whereas metadata can be ignored if there are sensible defaults. So you'd want to see, and read, and tab into, the content elements first.

Tabbing proceeds from left to right (in both LTR and RTL HTML, as far as I know). Additionally, if you're editing in a narrow version of your responsive layouts, the right-hand column drops below the left. Or, if for some reason the responsiveness of the design isn't working, and you have to scroll horizontally, it's the left-hand part of the page that is shown first.

In summary: users would want to edit content before metadata, and (although this is perhaps a flaw) left almost always comes before right.

#300: This left-layout is nice to the eye, but no, the meta column on the left adds a lot of confusion. The arrows pointing to the content area next to Taxonomy and other tabs give the false impression that clicking the arrow will change the content area.

We don’t have these problems with the original right-layout.

That being said, I am eager to play with the new content creation form in the future.

#302: In left to right layout (ltr), for many languages, the meta column would be expected on the left. But that may be dealt with in another issue.

I don't agree, and I think it's the opinion of most people here: In LTR, we have the most important things first, the content, and then the secondary things, the meta. This is not an application / navigation sidebar.

Let's not make additional design tweaks until the actual spec here is implemented.

Anyone up for giving that a stab?

#301: Some arguments supporting metadata before node fields:

1) Metadata is often presented before the actual content (like the issue information at the top of this page, or the commenting form below).

2) Not so easy to just click publish and forget filling the metadata (that happens quite often for me).

3) Looks better and simpler (personal opinion).

#303: This one is easy to fix. You could change the icons to be on the left side of the accordion labels. Example:

Note that browsers render the HTML5 summary element so that the icon is before label, and the same for the old fieldset element. That is a one good reason for swiching the icons to the left side, and it also solves the mentioned pointing problem.

Or you could use plus icons or something else. Examples:

You could also change the accordion into vertical tabs and add a new tab for node fields. That way the metadata fields would have more space and might be easier to fill for a user.

These are just suggestions, I don't have any strong opinions on this.

Could we focus on solving the issues outlined in http://drupal.org/node/1510532#comment-6389382. I appreciate the comments considering changing the design.

However I want to be realistic here, although these comments are oke - we are not making any movement on the actual code, lets focus on getting the basis in. Because if we don't get any movement on this soon, we will not get it in in time for code freeze which is only like 10 weeks away.

I may give this a stab in the next few days.

For #290, task 6 ("Implement Core's new Layout system to provide 2 column layout for node forms."), see #1787634: [META] Decouple layouts from themes

Re #311: I don't think it's close enough. I hope we're able to get a Layout system committed to core before feature freeze (Dec. 1), but a) there's no guarantee of that, and b) it won't be much before then. It makes a lot more sense to me to try to get this issue finished independently of the Layout system and before the feature freeze, then once we have a Layout system, open a follow up issue to clean up the code to use it, which we'd have until code freeze (Apr. 1) to do.

Issue summary:View changes

further cleanup

The two most important things for me, are that

  1. the Create Content page can optionally have labels in a column
  2. the layout of the Create Content page, may be different to the node view, with fields in a different order.

For example, I often want to Create Content thus:

Date: [____-_______-_______]
Name: [_______________________________________]
Address: [_______________________________________]
[_______________________________________]
Postcode: [_____________]

And then I want to display the node thus:

Contact:
     John Doe
     5 High Street
     London W1A 1AA
     (31 Oct 2012)

Issue summary:View changes

Update with latest implementation plan and todos from http://drupal.org/node/1510532#comment-6391940. Remove some old todos, keeping as much relevant info as possible. Emphasize approaching feature freeze.

I added the list of sub-issues from http://drupal.org/node/1510532#comment-6391940 to the issue summary. It's these:

  1. #1747868: Modern CSS reset in Seven
  2. #1238484: Ability to mark the form buttons to be of a specific type (so that they can be styled differently)
  3. #1751606: Move published status checkbox out of vertical tabs, into 'form actions group' at bottom of node forms, and make it a select
  4. #1751754: Implement new form style for Seven, based on blueprint mockups.
  5. Move node forms vertical tabs to fieldsets.
  6. Implement Core's new Layout system (not sure how far along core is with this yet) to provide 2 column layout for node forms.

Aspilicious tells me the biggest potential blocking issue is maintaining accessible source-ordering with a 2-column layout when viewed in the overlay.

Would be great to see if we can untangle this in a way that lets us put the bare minimum needed in place before feature freeze…

Issue summary:View changes

update with sub-issues

Sorry I'm late to the party, but I want to make sure this issue takes into account the outcome of #218755: Support revisions in different states. Namely the new concept of a default revision, which is no longer necessarily the latest revision. The current mock-ups don't indicate how that will be handled. #1776796: Provide a better UX for creating, editing & managing draft revisions. was created to deal with this and appears to have a good deal of overlap with what's being discussed here, though it goes a bit beyond just the content editing page. These issues seem very interconnected.

On a related note, the "Create new revision" check box is extremely problematic. You can see #563550: Change "create new revision" check box for a discussion of this dating back to 2009. It just doesn't play well with workflows. At a minimum the phrasing should be flipped and replaced with a "Overwrite active revision" checkbox (or something along those lines). And this would need to be physically close to the submit button. Realistically, we'd all be better off if it just went away all together.

Even given our current two-state workflow, there are a number of options I see we need to consider.

  1. Save new revision as draft
  2. Save new revision as published and make default
  3. Save new revision as draft and make default (this unpublishes the content)
  4. Overwrite active draft revision as draft
  5. Overwrite active draft revision as published and make default
  6. Overwrite active draft revision as draft and make default (this unpublishes the content)
  7. Overwrite active published revision as draft (this unpublishes the content)
  8. Overwrite active published revision as published

If #1777388: Support arbitrary workflow states is implemented (please, please, please) and we have an arbitrary number of workflow states to deal with, then this can get real complicated. In #1776796: Provide a better UX for creating, editing & managing draft revisions. I proposed moving the publishing and unpublishing of existing revisions from the edit screen to the view screen. That would allow us to ignore 3 & 6. If we can accept that saving revisionable content will always create a new revision, then we can ignore 4-8. The two remaining options are easily handled with the drop-down selection button shown here, which will also easily scale to more advanced multi-state workflows.

Issue summary:View changes

Linking Seven reset issue to original issue the one cited here was a duplicate); also adding a link to an issue webchick pointed to re: implementing layout.

Issue summary:View changes

Add link to new sub-issue: Move node form’s vertical tabs to collapsibles (http://drupal.org/node/1838114)

Status:Needs review» Needs work

dont see a patch to review?

would this issue be able to be implemented after feature freeze? I'm guessing no

@rootatwv @cosmicdreams This became a sort of task meta-issue because the original patch was big and hard to review. We have a number of sub-issues in various stages of completion. Would love help and/or reviews!

Issue summary:View changes

Created issue for implementing layout.

Title:Implement the new create content page design[META] Implement the new create content page design
Status:Needs work» Active

Thanks. thus changing title

Issue summary:View changes

Cleaned up list of sub-issues, marked feature issues bold and added issue type to focus work before feature freeze.

Issue summary:View changes

Update issue status for major sub-issues

I need help in particular with [feature]#1838114: Change node form’s vertical tabs into details elements. If this design is going to make it into D8, I need help from someone who knows Drupal's test infrastructure to help me fix failing tests in the latest patch.

I also need reviewers for #1751606: Move published status checkbox next to "Save" and #1838156: Implement the two-column layout for the new create content page which have green patches but need to get to RTBC before the end of the month.

Issue summary:View changes

Updating sub-issue statuses

Hi,

I don't know If this feature has already been suggested or not, but we definitely need a fixed "Save" button.
I can see that sometimes in your workflows, there is a "Save" button in the sidebar, and sometimes not. Maybe I misunderstood something?
But let's admit we have a really huge content type -for instance- and that in a node/%/edit page, you only want to edit the title. Isn't it horrible to scroll the whole page to save the content?

Suppose this issue #1875994: [meta] EntityDisplays should be attached to summary with postponed #1875992: Add EntityFormDisplay objects for entity forms

Issue summary:View changes

Updating major issues statuses

Issue summary:View changes

Updated issue summary.

I thought people here should be aware of #1838918: Add 'published' timestamp to nodes, which is just waiting for a review from the usability team. Once committed, the new field added by that patch will need to be folded into the work being done here.

Issue summary:View changes

Updated issue summary.

Issue summary:View changes

Updated issue summary.

Started looking at this sort of issue but we have been looking at it from an overall viewport for all pages. So we have started to develop patches to make the important buttons always visible on a page. early rough patches are available here. Obviously needs more work and input.
http://drupal.org/node/752482#comment-7159496

I have posted some followups, which concern with balance between "meta" fieldsets and the content edit part and the bahavior of the meta fieldsets.

#2009932: Implement accordion behavior for meta fieldsets on node form
#2009930: Do not keep meta fields of node form open when they have a value

I am hesitant to add them to the issue summary, want to see how the reaction is first.

Component:base system» node.module

Moved to node.module per #2050763-16: Refine "base system" component (notes on refactoring of "base system" category here: https://docs.google.com/a/acquia.com/spreadsheet/ccc?key=0AusehVccVSq2dF...).

Version:8.x-dev» 9.x-dev
Priority:Major» Normal

Time flies fast and it’s time to set this to Drupal 9!

Version:9.x-dev» 8.x-dev
Priority:Normal» Major
Status:Active» Fixed

Wait, huh? Isn't it instead time to call this fixed? This was done a long time ago.

Well, according to #319 (and the issue summary) we still have two feature requests and two tasks left before we can call this fixed. So I guess either set this back to active and wait for these last remaining issues to be fixed before you set this one to fixed as well, or move all issues to D9 and call it a day.

klonos: All of the referenced issues (except 1751754) have initial commits, and are only open for minor followups ... I think the meta issue has outlived its purpose. :)

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

Issue summary:View changes

Updated issue summary.

Component:node.module» node system
Issue summary:View changes

Pages