• Interactive Help v0.5

    Chosen Approach: keyboard shortcut bar & formatting bar, at bottom of the screen.

    Because
    When paired with a good WelcomeTree, might be all we need to explain gingko’s theory and practice.
    As Elena said once “it’s simple, Ctrl for create, Enter for edit, arrows to move. No need for a 6 step tutorial.” (paraphrasing)
    Also, this allows for better “tablet hack” that Aleksey uses for iPad.

    Alternatives considered:

    • Keyboard shortcuts shown on card
      • Shelved: too hard for now, possibly annoying.
    • Guided tutorial, as now.
      • Problem: Assumes faithful follow-through by user.
    • Cheat Sheet like Gmail/GIthub ‘?’ page.
      • Problem: not visible when needed, in context.

  • Questions

  • UI


    (fullsize anim)

  • Behavior

    By default, the keyboard shortcut box is open. Which buttons are shown depends on the state (edit or normal).

    Buttons change state depending on what key is pressed, and whether that action is available.

  • Bonus Details

    For non-held keys (like “Enter” for entering edit mode), we can briefly flash the active state of the Enter key, and then fade it. This provides a consistent experience (keydown triggers active state always). Something similar to jQuery’s Highlight effect?

  • Normal Mode Buttons

    When in normal (navigation) mode, these are the buttons shown:

    • Ctrl
    • h ←
    • j ↓
    • k ↑
    • l →
    • Enter
    • Backspace
    • /

  • Edit Mode Buttons

    When in edit mode, these are the buttons shown:

    • Ctrl
    • h ← (shown for consistency, but never available)
    • j ↓
    • k ↑
    • l → (shown, but not available when in col 3)
    • Enter

  • Button States

    Buttons are in one of three states:

    • Active (key is down)
    • Available (key can be pressed)
    • Unavailable (key press does not do anything)

    Color suggestions are green, gray-blue, opacity-0.2 for active, available, and unavailable respectively.

{"cards":[{"_id":"2f01105a2f40705783000005","treeId":"2f010f902f40705783000001","seq":1,"position":1,"parentId":null,"content":"# Interactive Help v0.5\n**Chosen Approach**: keyboard shortcut bar & formatting bar, at bottom of the screen.\n\n**Because**\nWhen paired with a good WelcomeTree, might be all we need to explain gingko's theory and practice.\nAs Elena said once \"it's simple, Ctrl for create, Enter for edit, arrows to move. No need for a 6 step tutorial.\" (paraphrasing)\nAlso, this allows for better \"tablet hack\" that Aleksey uses for iPad.\n\n---\nAlternatives considered:\n\n- Keyboard shortcuts shown on card\n - Shelved: too hard for now, possibly annoying.\n- Guided tutorial, as now.\n - Problem: Assumes faithful follow-through by user.\n- Cheat Sheet like Gmail/GIthub '?' page.\n - Problem: not visible when needed, in context."},{"_id":"2f0127262f40705783000006","treeId":"2f010f902f40705783000001","seq":1,"position":1,"parentId":"2f01105a2f40705783000005","content":"## UI\n![](https://dl.dropboxusercontent.com/u/345412/help-interactive.gif)\n[(fullsize anim)](https://dl.dropboxusercontent.com/u/345412/help-interactive.gif)"},{"_id":"2f01294c2f40705783000007","treeId":"2f010f902f40705783000001","seq":1,"position":2,"parentId":"2f01105a2f40705783000005","content":"## Behavior\nBy default, the keyboard shortcut box is open. Which buttons are shown depends on the state (edit or normal).\n\nButtons change state depending on what key is pressed, and whether that action is available."},{"_id":"2f01436059b03ae83c000001","treeId":"2f010f902f40705783000001","seq":1,"position":1,"parentId":"2f01294c2f40705783000007","content":"### Normal Mode Buttons\nWhen in normal (navigation) mode, these are the buttons shown:\n\n- Ctrl\n- h ←\n- j ↓\n- k ↑\n- l →\n- Enter\n- Backspace\n- /"},{"_id":"2f0143d559b03ae83c000002","treeId":"2f010f902f40705783000001","seq":1,"position":2,"parentId":"2f01294c2f40705783000007","content":"### Edit Mode Buttons\nWhen in edit mode, these are the buttons shown:\n\n- Ctrl\n- h ← *(shown for consistency, but never available)*\n- j ↓\n- k ↑\n- l → *(shown, but not available when in col 3)*\n- Enter"},{"_id":"2f014e3959b03ae83c000004","treeId":"2f010f902f40705783000001","seq":1,"position":3,"parentId":"2f01294c2f40705783000007","content":"### Button States\nButtons are in one of three states:\n\n- Active (key is down)\n- Available (key can be pressed)\n- Unavailable (key press does not do anything)\n\nColor suggestions are green, gray-blue, opacity-0.2 for active, available, and unavailable respectively."},{"_id":"2f0150ef59b03ae83c000006","treeId":"2f010f902f40705783000001","seq":1,"position":3,"parentId":"2f01105a2f40705783000005","content":"## Bonus Details\nFor non-held keys (like \"Enter\" for entering edit mode), we can briefly flash the active state of the Enter key, and then fade it. This provides a consistent experience (keydown triggers active state always). Something similar to [jQuery's Highlight effect](http://docs.jquery.com/UI/Effects/Highlight)?"},{"_id":"2f013784c8d29c6318000001","treeId":"2f010f902f40705783000001","seq":1,"position":2,"parentId":null,"content":"---"},{"_id":"2f0137c5c8d29c6318000002","treeId":"2f010f902f40705783000001","seq":1,"position":3,"parentId":null,"content":"## Questions"}],"tree":{"_id":"2f010f902f40705783000001","name":"Help & First UX","publicUrl":"help-first-ux"}}