Edition UX Speed Discoverability Memorization No visual clutter Context relevance Coverage No conflicts
Fixed UI ❌ ✅ ✅ ❌ ≈ ✅ ✅
Contextual UI ❌ ✅ ✅ ≈ ✅ ✅ ✅
Drag'n'drop ❌ ❌ ✅ ≈ ✅ ❌ ❌
Keyboard shortcuts ✅ ❌ ❌ ✅ ❌ ✅ ❌
Syntax detection ✅ ❌ ✅ ✅ ✅ ❌ ≈
Contextual commands ✅ ✅ ✅ ✅ ✅ ≈ ≈

The idea is to find a good mix of the different solutions, that covers the range of our editing needs. Ideally, for one type of user (keyboard power user, or casual) there should be a unique, optimal way to do a particular thing. When there are overlaps, it should be to allow for a good learning curve.

  • We should measure usage of the different options
  • We should limit Drag n Drop to the obvious cases (reordering/moving pages in ToC)
  • We should avoid Fixed UI, since our editing experience must stay close from the reading experience.
  • Syntax detection like auto-markdown is just a muscle memory sugar, so we can keep it for the basics, as long as it can be worked-around when needed (should be able to type **something** ). We still need something fast/convenient for advanced edition.
Casual user
  • Contextual UI (as we did so far) is great. It has it all, except speed.
Power keyboard user
  • Contextual UI as a starting point.
  • Needs shortcuts (really fast) for inlines: bold, italic, links
  • Needs relatively fast, but memorable keyboard UX for the rest:
    • Insertion (80% of the time is spent creating content)
    • Relative to context, like cursor and selection (20% of the time is spent editing content)

Idea for a command palette

The goal of the command palette is to give a discoverable and fast keyboard access to most actions. It fills the gap between contextual UI and memorized shortcuts. It serves both as an insertion and edition vector.

The universal access to the command palette is to press a shortcut ⌘+/

It is not easily discovered. That's why, on new paragraphs, we hint it away:

Pressing ⌘+/ will open the command palette.

The list of available commands appears. They can be filtered, or selected with arrows.

The list of available commands depends on the context. Here is a draft of this list:

  • On new paragraph
    • Insert Image
    • Insert List
    • Insert Ordered List
    • Insert Header
    • Insert Sub Header
    • Insert Sub Sub Header
    • Insert Code Block
    • Insert Quote
    • Insert Table
    • Insert Hint
    • Insert Page Reference
  • Inside most blocks (and once we implement the respective actions)
    • Delete
    • Duplicate
    • Move Up
    • Move Down
    • Convert to List
    • Convert to Ordered List
    • Convert to Header
    • Convert to Sub Header
    • Wrap in Hint
    • Wrap in Quote

results matching ""

    No results matching ""