The problem
You’re in the zone, writing away furiously, but you want to create a new page and have it linked from your current location.
At the moment in Workflowy, you’d need to stop writing, find a location for your new page, create it, then go back to where you were, and then create a link.
Argh! Frustration!
There’s a new industry standard UI for this that lets you type ‘[[‘ to either link to an existing page or create a new one.
We’ve already added the ability to link, but we haven’t enabled creating new pages through ‘[[‘. Until now.
It’s a little more complicated in Workflowy because we don’t have “pages”, we have an infinite tree and don’t have a standard place to put things. So, this is what we’re thinking to address that problem.
Web and desktop app
Step 1 – The editor begins typing the name of their new linked page.
Step 2 – After typing three characters, the editor is shown suggested links, with the top result selected. They can use the keyboard to navigate the results.
Step 3 – The editor finishes typing and is shown the option of creating a new page. Selecting the ‘Create …’ option (using the mouse/keyboard) will make a new page in a top-level location called ‘Notes’. If the editor has already created a new page using ‘[[‘, the ‘Create …’ location will point to that location.
Step 4 – The editor selects the chevron to the right of the ‘Create …’ option allowing them to choose a location for the new page. The editor searches using keywords and can scroll through recent locations where they have saved new pages and starred pages.
Step 5 – As the editor types in keywords, we show potential matching locations. The editor can use the up/down arrow keys and choose a location by pressing ‘Enter’ or clicking.
Step 6 – The new linked page is created in the chosen location. The editor can resume typing.
Mobile
Step 1 – The editor begins typing ‘[[‘ to create a link or taps on the keyboard accessory.
Step 2 – After typing three characters, the editor is shown suggested links. They can scroll through and tap results.
Step 3 – The editor finishes typing and is offered the option of creating a new page in ‘Notes’.
Step 4 – The editor taps the chevron and searches for a location, selecting it with a tap.
Step 5 – The new linked page is created in the chosen location. The editor can resume typing.
Can you help us?
This is our first design draft, and we’re looking for your feedback. What do you like about our proposed design? What do you dislike? Are we missing anything? Let us know in the comments below.