Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Iterate on "Update Design" Flow #20421

Open
mtias opened this issue Feb 24, 2020 · 13 comments
Open

Iterate on "Update Design" Flow #20421

mtias opened this issue Feb 24, 2020 · 13 comments

Comments

@mtias
Copy link
Contributor

@mtias mtias commented Feb 24, 2020

The setup right now in edit-site shows every template part that has been modified separately. This is very useful during development, but we need to start thinking about a better presentation (more intuitive) and better defaults.

image

Iterations can include a less robotic presentation:

  • Use the friendly title of the template part to display a more readable line: "Updates to the Front Page".
  • Add a "Save All" button to avoid having to select anything.
  • Separate templates and template parts into two sections.

Better defaults:

  • Default to all selected.
  • Add option to the editor to bypass this stage and just save all templates all the time.

More context:

  • Can templates and template parts have a description? (maybe the "excerpt" field can be used for this?)
  • A way to switch to the template_part view to review a change. This could also have different design explorations, like showing the template part on a preview when you hover / focus on each item.
@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Feb 24, 2020

Just making the text more user-centric is a great step! Based on some of the work @shaunandrews has done here, I edited it a bit to meet some of @mtias' suggestions.

  1. Default all to selected.
  2. User friendly text.
  3. Button ready for a single "save" action.
  4. I didn't separate the templates and template-parts into two sections, but noted them as different options to be saved with their own checkbox.

multi-saving

This shows the varying parts that might be displayed upon save. First is the page itself, second is the template applied to that page, while third is a template-part within that template.

@shaunandrews was also doing further explorations around how we might communicate the changes that were made to the user.

Here's an iteration with an option, "Don't ask me this again."

Screen Shot 2020-02-24 at 3 19 26 PM

@nickcernis

This comment has been minimized.

Copy link
Contributor

@nickcernis nickcernis commented Feb 26, 2020

Add option to the editor to bypass this stage and just save all templates all the time.

I agree with this and think users will expect anything they edit to be saved without a prompt.

The current modal interrupts user flow. It's also confusing because users have to work out why they're being prompted to save the things they just edited, or things they did not edit in some cases.

Saving everything by default would mirror the current experience elsewhere in WordPress. If a user edits three meta boxes in the Classic editor, we don't prompt them to confirm which of the things they edited they would like to save. Same with multiple edits to blocks in the block content editor. They click Update and anything they changed is saved.

The modal may also interrupt the mental model of site editing that the user has. To the user, they are just editing their full site. We present no visual separation between templates, parts, and content in the editor. When they save their content, we suddenly ask them to understand that everything they've been editing is actually separate components, just split up in invisible ways that weren't apparent during the editing process. As a user, I don't have enough information to know which parts I edited were part of which template or template part; I just want to save all the content I edited. (How would a user know which parts they edited were part of the home template and which were part of the page in the mockup above, for example?)

@MichaelArestad

This comment has been minimized.

Copy link

@MichaelArestad MichaelArestad commented Mar 4, 2020

Add option to the editor to bypass this stage and just save all templates all the time.

I suspect this should be the default. When a user wants to publish their changes, let them publish. I can't think of any other product I've used that lets the user save just parts of documents. Showing the individual parts being saved feels like a solution to a problem we don't even know we have yet.

@johnstonphilip

This comment has been minimized.

Copy link
Contributor

@johnstonphilip johnstonphilip commented Mar 4, 2020

I would love to see 2 additional options as well, as part of this flow:

  • Preview mode
    This would allow me to see how the changes look across multiple pages (header-on-post, header-on-page, etc) before publishing them.
  • Revert last set-of-changes
    This would be an option to easily revert the last set of changes made in a single click.
@shaunandrews

This comment has been minimized.

Copy link
Contributor

@shaunandrews shaunandrews commented Mar 6, 2020

Here's a quick mockup that shows what it could look like if we add a preview of the entity when hovering:

Template Saving with Previews

I also added a "Save as..." (hat tip @MichaelArestad) that could let you save these changes as a new template. (Though, to be honest, I'm not sure it makes a whole lot of sense in the context of saving template parts or site entities.)

@MichaelArestad MichaelArestad added this to Needs design feedback in Full site editing Mar 6, 2020
@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Mar 6, 2020

I realise this is in iteration mode, so please take this comment as something to explore later, even much later. In seeing the above prototype I began thinking of having this in a side panel wouldn't be better than a modal. It feels a more intense experience when the hover visual is displayed.

@mtias

This comment has been minimized.

Copy link
Contributor Author

@mtias mtias commented Mar 7, 2020

Even if we end up making "save all" the default, I'd like to avoid the easy route of just artificially simplifying what is inherently a complex task. We'll make poor decisions if we just force simplicity and don't design for it.

Showing the individual parts being saved feels like a solution to a problem we don't even know we have yet.

It's important to recognize there will be quite complicated flows for large sites, where updates should happen more atomically and we need to support that at its foundation. We can always tune the default UX to what we think is best for the majority, but we need to design properly for the full experience. Separation of concerns is an important part of a site structure and it's crucial we don't just cast aside the issue. It will also be important if we want to schedule changes.

This is also a good place to teach good practices and inform about how things work. If a user spends a lot of time on these templates and saves, the consequences could be unexpected and significant. It's important we help convey what is happening.

If a user edits three meta boxes in the Classic editor, we don't prompt them to confirm which of the things they edited they would like to save.

I would say that this has been historically confusing, particularly with things like custom fields, where adding the field seems like an action that is propagated even without saving the whole post but remains unclear when it is committed.

This stage is also a good chance to confirm that global changes are intended to be global instead of the user wanting to fork a template for a specific use (like a specific page).

@youknowriad youknowriad mentioned this issue Mar 11, 2020
6 of 29 tasks complete
@shaunandrews

This comment has been minimized.

Copy link
Contributor

@shaunandrews shaunandrews commented Mar 11, 2020

Here's another exploration:

Multi-Entity Saving i6

This one took some cues from the Block Navigator, and ditches the checkbox UI. Instead, the default is to save all changes, and then you can click on individual changes to preview and undo them. This would also let you save your changes as a new Template or Template Part.

@MichaelArestad

This comment has been minimized.

Copy link

@MichaelArestad MichaelArestad commented Mar 19, 2020

Another iteration (riffing off @shaunandrews) that utilizes a sidebar (notably not pre-publish).

Try out the Prototype.

multi-entity-5b

Screenshots

image

image

image

Notes

  • Can highlight the content on desktop at full size. On mobile will likely need to resort to something similar to the template preview.
  • Similar to the default save flow (is not pre-publish)
  • Is a good path to save specific part changes, duplicate template parts, discard changes

Source Figma document

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Mar 24, 2020

I really like the sidebar option here! A user is able to see the list of items edited, click them, and view the parts (ie Header) highlight in the editor. This feels more informative because I see the actual page and parts that changed!

Would this UX carry over to updating and editing posts/pages as well?

I ask this because I'm curious about how the "Publish" button works in this scenario.

@johnstonphilip

This comment has been minimized.

Copy link
Contributor

@johnstonphilip johnstonphilip commented Mar 24, 2020

I think the highlighted header is a big improvement! I do feel like the Save all changes button should possibly be below the question "Ready to save your template?".

@paaljoachim

This comment has been minimized.

Copy link

@paaljoachim paaljoachim commented Mar 24, 2020

I too really like the use of the sidebar. As it is an area we are used to interacting with. Having save options there keeps a nice consistent experience.

@nickcernis

This comment has been minimized.

Copy link
Contributor

@nickcernis nickcernis commented Mar 24, 2020

The sidebar has won me over too. It uses the same design conventions as the existing WP experience and presenting it as contextual info alongside the content feels less disruptive than the modal. Nice work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Full site editing
Needs design feedback
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.