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

Site navigation when full site editing #19204

Open
MichaelArestad opened this issue Dec 17, 2019 · 15 comments
Open

Site navigation when full site editing #19204

MichaelArestad opened this issue Dec 17, 2019 · 15 comments

Comments

@MichaelArestad
Copy link

@MichaelArestad MichaelArestad commented Dec 17, 2019

Problem to solve

How can a user navigate to another post or page when editing their site in Gutenberg?

Some rough ideas

  1. A way to enter a "browsing mode" that allows the user to click to navigate as if they were on the front end of the site.
    B. Perhaps there could be a hotkey one could hold down while clicking to click on a link rather than to edit it. This seems like an ideal solution for a power user.
  2. A way to navigate posts and pages beyond what is linked in the current page.
  3. A way to navigate to a page layout/template (this might be a separate flow).

Initial mockups

These are by no means fully worked out ideas, but I think they are a good starting point. I intentionally made the mockups lower fidelity as I'm interested in the base concept/flow more than the details (at least initially).

Figma file (feel free to comment or iterate on it)

Idea 1 - Page selector

I started by adding the title of the page as a dropdown in the top bar. I think the weakest part of this design is that it takes up space in the top bar.

image

Then, if clicked, will expose UI nearly identical to the block picker (for familiarity and reusability):

image

This would allow a user to search for a page much like searching for a block OR they could see every page. I'm not sure it would be great for a site with thousands of posts/pages.

An additional benefit here is it could be a gateway into creating/editing layouts. (has not been designed yet)

Idea 2 - meta box

This iteration would expose a meta box in the Inspector (sidebar) when in full site editing mode. The meta box would essentially contain all posts and pages similar to the previous mockup (though I only put pages in this particular wireframe).

image

I don't feel this one is as strong as it relies on the sidebar.

Idea 3 - hotkey navigation

This idea could be used with really any direction we go as far is visual interface. It makes sense to add hotkey navigation. Perhaps by holding down a specific key while clicking on a link would take you directly to that page.

Idea 4 - Expose a clickable link

If you are familiar with Google Docs, this concept should be familiar. In Google Docs, if you click a link, a popover shows up with editing controls and a clickable link. We could do something similar. Here's how it looks in Google Docs:

image

@MichaelArestad MichaelArestad self-assigned this Dec 17, 2019
@MichaelArestad MichaelArestad added this to In progress in Full site editing Dec 17, 2019
@MichaelArestad MichaelArestad moved this from In progress to Needs design feedback in Full site editing Dec 17, 2019
@MichaelArestad MichaelArestad moved this from Needs design feedback to In progress in Full site editing Dec 17, 2019
@MichaelArestad MichaelArestad moved this from In progress to Inbox in Full site editing Dec 17, 2019
@MichaelArestad MichaelArestad moved this from Inbox to In progress in Full site editing Dec 17, 2019
@shaunandrews

This comment has been minimized.

Copy link

@shaunandrews shaunandrews commented Dec 18, 2019

I like the ideas explored in #1 — it reminds me a lot of the way documents are saved/browsed in OS X.

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Dec 18, 2019

Idea # 1 feels like the better route for me as well. Although having this positioned top-center is pretty extreme. As "modes" become more of a thing, would it make sense to bring it closer in vicinity to those controls?
I also don't mind the popover covering the content at that point because switching pages already mentally pulls the user out of the content anyways.

While I like Idea # 2, it doesn't feel right in the sidebar under the "Document" tab. Maybe it's its own slideout sidebar. I don't want to overdo this slideout thing though either.

sitemap 2019-12-18 12_57_14

@mtias

This comment has been minimized.

Copy link
Contributor

@mtias mtias commented Dec 18, 2019

It'd be interesting to explore another cursor / mode as part of (3):

Edit Tools Dropdown

@mapk

This comment has been minimized.

Copy link
Contributor

@mapk mapk commented Dec 21, 2019

It's also good to keep in mind when adding item to the Top Toolbar that we have a Top Toolbar mode that appends the block's toolbar in that area. Sometimes that can get very full like in this example:

Screen Shot 2019-12-20 at 4 13 03 PM

@karmatosed karmatosed moved this from In progress to Needs design feedback in Full site editing Jan 7, 2020
@epiqueras

This comment has been minimized.

Copy link
Contributor

@epiqueras epiqueras commented Jan 8, 2020

I added an "Edit Page Template" button through a slot in the link viewer:

gif

It will only render in the site editor, on local links, and if a template match is found.

@jasmussen

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Jan 9, 2020

I like Matías idea for a "Navigate Site" tool, because for each of the tools avaiable, we also attach a mode switch, and in this mode switch you could click anything, without having to create extra, often different, affordances for every single followable link.

@epiqueras

This comment has been minimized.

Copy link
Contributor

@epiqueras epiqueras commented Jan 9, 2020

without having to create extra, often different, affordances for every single followable link.

What do you mean by different affordances?

@jasmussen

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Jan 9, 2020

By different affordances I mean we have a lot of different interfaces in the canvas that link places, enough that we might need different buttons to take you to that destination, if we are to follow the pattern from Google Docs.

  • You might link to an internal page by creating a normal hyperlink.
  • You might link through a navigation menu item.
  • You might follow a link to a category from the Categories widget.
  • There might be various comment links from a Query block.
  • The Button might have local or external links.
  • You might click an Image that links to the attachment page.
  • You might follow a link from the Archives widget, or Tag cloud.

Adding a button to a generic URL dialog is not a bad interface, but it's just not everywhere. A "Navigation tool" might not be the most perfectly intuitive solution (let's keep thinking) — but at least it provides a single interface for clicking any link, and knowing whether it will open a new tab, or navigate to the template in question.

@epiqueras

This comment has been minimized.

Copy link
Contributor

@epiqueras epiqueras commented Jan 9, 2020

but it's just not everywhere

I think we are refactoring all link UIs to use the same component used in the format library.

A separate mode could be a nice addition to this.

@davipontesblog

This comment has been minimized.

Copy link

@davipontesblog davipontesblog commented Jan 9, 2020

Idea #1 seems to be the most intuitive from what I've seen users using Gutenberg for the first time. As @shaunandrews mentioned, it reminds me of File management systems like Safari and others, so we can use that to our advantage too.

@shaunandrews

This comment has been minimized.

Copy link

@shaunandrews shaunandrews commented Jan 22, 2020

It'd be interesting to explore another cursor / mode

I like this option. Here's a quick mockup of what it could look like.

image

Switching to Browse mode could adjust the top bar by removing irrelevant UI (like undo/redo) and adding other functions like back/forward and a URL bar.

@ianstewart

This comment has been minimized.

Copy link

@ianstewart ianstewart commented Jan 22, 2020

Browse is almost like a preview there. Edit a page, switch to browse, look at another page, switch to edit mode, and so on. It could feel really natural.

@shaunandrews

This comment has been minimized.

Copy link

@shaunandrews shaunandrews commented Jan 22, 2020

Here's a few variations I explored for the tools menu:

image

I think the icons help connect the options with the icon in the top bar. I was worried adding descriptions would weigh things down too much, but I don't think its too bad.

@jasmussen

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Jan 22, 2020

Shaun, nice!

I wonder, what would the dropdown look like with a checkmark on the right? In #19082 (comment) there's a menu with a check on the right in effort to reduce general icon usage in menus (per #18667 conversations) — though I would suggest icons are important in the tools menu otherwise.

@shaunandrews

This comment has been minimized.

Copy link

@shaunandrews shaunandrews commented Jan 22, 2020

image

I don't hate it, but its not a pattern I see very often. I worry people might miss it as an indicator of selection in a list — the icon will often appear to be "floating" away from the context of the label its connected with.

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
8 participants
You can’t perform that action at this time.