As Jörg suggested, let's have a look at the Postbox implementation of pills. Honestly, imho their overall pills UX is pretty poor, buggy, unintuitive, inflexible. Alessandro's prototype is already way better and much more powerful than that. So we're here for the icing on the cake. There's just one thing which rocks about Postbox pills: Having an **insertion point between existing pills**. Cursor back, you get a text cursor between existing pills, start typing, add another pill right there - awesome. The details are moot, most of their insertion and selection behaviour is useless, but that *insertion point can be a game changer* if done right. Let's try! **Requirements** - efficient, simple and intuitive - discoverable - accessible with mouse-only and keyboard-only methods # Proposal P1 # Essentially, there are two concepts at play for recipients: **text-centric and item-centric**. Users first enter new recipients as text; a completed recipient becomes an item. Items are stable and easy to shuffle around. Editing a recipient item makes it text again. Welcome to the world of pills. - Advantages of text: easy to edit/correct recipient text and insert recipients at text cursor position. - Advantages of items: visual distinction of recipients, prevent accidental changes, easy to shuffle around (select and cut/copy/paste/delete/drag n drop). ## In a nutshell ## This proposal seeks to combine the best of both worlds with a minimal tweak to the current prototype: - **Add focusable inter-pill insertion points** (like Postbox, a tiny space between pills which allows for a text cursor): ``` (pill1) (pill2) mind the gap (pill1) | (pill2) cursor between pills ``` Essentially, that's all. We are done. Just like the current prototype, we remain fully item-centric. Over to the small-print which makes this so much better than Postbox. ## Suggested behaviour for Proposal P1 ## ### 1. Inserting a new pill between existing pills (*new: inter-pill insertion points as in Postbox*) ### - Mouse-click between any two pills to get a text cursor for insertion... - ...or cursor left / right to an insertion point between any two pills (see **plain navigation** below) - Simply start typing at cursor position: the gap auto-expands only as you start to type, like 5 em initally, then more as required (cf. Postbox, nice). - Enter creates the new pill, immediately followed by text cursor (as in Postbox; natural text cursor position, allows checking new pill, whereas jumping to the end would lose that context) - You can also paste pills at any insertion point - Optionally allow dropping pills between existing pills (otherwise just drop them at the end) *Inserting a new pill between existing pills* (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 type "J" (pill1) *J* **|** (pill2) (pill3) the gap auto-expands: ~5 em at once... (pill1) *John Longman* **|** (pill2) (pill3) ... then more as required (cf. Postbox) ⏎ Enter (pill1) (John Longman) **|** (pill2) (pill3) new pill at the right spot, cursor after the new pill ### 2. Plain navigation with cursor left/right (*new: pills AND insertion points*) ### - Proposal: Cursoring *alternates* between selecting pill (!) and text cursor between pills (see illustration below) - Note: this is significantly *different* from Postbox navigation behaviour. *Plain navigation (cursor left)* (pill1) (pill2) (pill3) **|** cursor after pill3 (last pill) ◀ cursor left (pill1) (pill2) **(pill3)** pill3 selected (same as current behaviour; note: different from Postbox!) ◀ (pill1) (pill2) **|** (pill3) cursor between pill2 and pill3 (insertion point, new); pills are not moved ◀ (pill1) **(pill2)** (pill3) pill2 selected ◀ (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ◀ **|** (pill1) (pill2) (pill3) cursor before pill1 (first pill) ### 3. Selecting pills with Ctrl/Shift modifier keys (*same as current prototype behaviour*) ### - Just focus and/or select pills as consecutive list items - crucial: skip insertion points, no text cursor, no overwriting of selected pills (Postbox behaviour is a complete mess) *Contiguous selection with **Shift*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⇫◀ Hold Shift, press cursor key (pill1) (pill2) **(pill3)** pill3 selected (current behaviour; note: different from Postbox: no text cursor!) ⇫◀ (pill1) **(pill2) (pill3)** pill2 and pill3 selected (contiguous) *Non-contiguous selection with **Ctrl*** (pill1) (pill2) (pill3) **|** cursor after pill3 Ctrl+◀ Hold Ctrl, press cursor key (pill1) (pill2) *(pill3)* pill3 focused, but not selected (same as current behaviour; not implemented in Postbox) [space bar] (pill1) (pill2) **(pill3)** pill3 selected with space bar Ctrl+◀, ◀ *(pill1)* (pill2) **(pill3)** pill1 focused, but not selected (no text cursor!) [space bar] **(pill1)** (pill2) **(pill3)** pill1 and pill3 selected (non-contiguous) ### 4. Deleting pills with BACKSPACE and DEL (*adapted from current prototype behaviour*) ### - Note: - Current prototype behaviour is incorrect and incomplete (bug 1602431) - We already have a single insertion point after the last pill: Backspace focuses the last pill, another backspace deletes. (Almost) correct and required, but only for the first pill in consecutive deletions. - Both current release of TB and current prototype require *two* keypresses each even for deleting more pills consecutively. We can do better. - Deleting consecutive pills is an item-centric action, for which insertion points are generally irrelevant and distracting. - If applicable, we only need to transition from text cursor to item-selection mode maximally once, namely for the *first* of multiple pills to be deleted (similar to current backspace behavior, different from Postbox behaviour) *Deleting pills to the left with **Backspace*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⌫ Backspace (pill1) (pill2) **(pill3)** pill3 focused *and* selected (corrected current behaviour) ⌫ (pill1) **(pill2)** pill3 deleted, next pill (pill2) conveniently focused *and* selected (no text cursor!) ⌫ **(pill1)** pill1 focused *and* selected (no text cursor!) *Deleting pills to the right with **DEL*** (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ⌦ DEL (pill1) **(pill2)** (pill3) pill2 focused *and* selected ⌦ (pill1) **(pill3)** pill2 deleted, next pill (pill3) conveniently focused *and* selected (no text cursor!) ⌦ **(pill1)** pill1 focused *and* selected (no text cursor!)
Bug 1603051 Comment 1 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
As Jörg suggested, let's have a look at the Postbox implementation of pills. Honestly, imho their overall pills UX is pretty poor, buggy, unintuitive, inflexible. Alessandro's prototype is already way better and much more powerful than that. So we're here for the icing on the cake. There's just one thing which rocks about Postbox pills: Having an **insertion point between existing pills**. Cursor back, you get a text cursor between existing pills, start typing, add another pill right there - awesome. The details are moot, most of their insertion and selection behaviour is useless, but that *insertion point can be a game changer* if done right. Let's try! **Requirements** - efficient, simple and intuitive - discoverable - accessible with mouse-only and keyboard-only methods # Proposal P1 # Essentially, there are two concepts at play for recipients: **text-centric and item-centric**. Users first enter new recipients as text; a completed recipient becomes an item. Items are stable and easy to shuffle around. Editing a recipient item makes it text again. Welcome to the world of pills. - Advantages of text: easy to edit/correct recipient text and insert recipients at text cursor position. - Advantages of items: visual distinction of recipients, prevent accidental changes, easy to shuffle around (select and cut/copy/paste/delete/drag n drop). ## In a nutshell ## This proposal seeks to combine the best of both worlds with a minimal tweak to the current prototype: - **Add focusable inter-pill insertion points** (like Postbox, a tiny space between pills which allows for a text cursor): ``` (pill1) (pill2) mind the gap (pill1) | (pill2) cursor between pills ``` Essentially, that's all. We are done. Just like the current prototype, we remain fully item-centric. Over to the small-print which makes this so much better than Postbox. ## Suggested behaviour for Proposal P1 ## ### 1. Inserting a new pill between existing pills (*new: inter-pill insertion points as in Postbox*) ### - Mouse-click between any two pills to get a text cursor for insertion... - ...or cursor left / right to an insertion point between any two pills (see **plain navigation** below) - Simply start typing at cursor position: the gap auto-expands only as you start to type, like 5 em initally, then more as required (cf. Postbox, nice). - Enter creates the new pill, immediately followed by text cursor (as in Postbox; natural text cursor position, allows checking new pill, whereas jumping to the end would lose that context) - You can also paste pills at any insertion point - Optionally allow dropping pills between existing pills (otherwise just drop them at the end) *Inserting a new pill between existing pills* (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 type "J" (pill1) *J* **|** (pill2) (pill3) the gap auto-expands: ~5 em at once... (pill1) *John Longman* **|** (pill2) (pill3) ... then more as required (cf. Postbox) ⏎ Enter (pill1) (John Longman) **|** (pill2) (pill3) new pill at the right spot, cursor after the new pill ### 2. Plain navigation with cursor left/right (*new: pills AND insertion points*) ### - Proposal: Cursoring *alternates* between selecting pill (!) and text cursor between pills (see illustration below) - Note: this is significantly *different* from Postbox navigation behaviour. *Plain navigation (cursor left)* (pill1) (pill2) (pill3) **|** cursor after pill3 (last pill) ◀ cursor left (pill1) (pill2) **(pill3)** pill3 selected (same as current behaviour; note: different from Postbox!) ◀ (pill1) (pill2) **|** (pill3) cursor between pill2 and pill3 (insertion point, new); pills are not moved ◀ (pill1) **(pill2)** (pill3) pill2 selected ◀ (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ◀ **(pill1)** (pill2) (pill3) pill1 selected ◀ **|** (pill1) (pill2) (pill3) cursor before pill1 (first pill) ### 3. Selecting pills with Ctrl/Shift modifier keys (*same as current prototype behaviour*) ### - Just focus and/or select pills as consecutive list items - crucial: skip insertion points, no text cursor, no overwriting of selected pills (Postbox behaviour is a complete mess) *Contiguous selection with **Shift*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⇫◀ Hold Shift, press cursor key (pill1) (pill2) **(pill3)** pill3 selected (current behaviour; note: different from Postbox: no text cursor!) ⇫◀ (pill1) **(pill2) (pill3)** pill2 and pill3 selected (contiguous) *Non-contiguous selection with **Ctrl*** (pill1) (pill2) (pill3) **|** cursor after pill3 Ctrl+◀ Hold Ctrl, press cursor key (pill1) (pill2) *(pill3)* pill3 focused, but not selected (same as current behaviour; not implemented in Postbox) [space bar] (pill1) (pill2) **(pill3)** pill3 selected with space bar Ctrl+◀, ◀ *(pill1)* (pill2) **(pill3)** pill1 focused, but not selected (no text cursor!) [space bar] **(pill1)** (pill2) **(pill3)** pill1 and pill3 selected (non-contiguous) ### 4. Deleting pills with BACKSPACE and DEL (*adapted from current prototype behaviour*) ### - Note: - Current prototype behaviour is incorrect and incomplete (bug 1602431) - We already have a single insertion point after the last pill: Backspace focuses the last pill, another backspace deletes. (Almost) correct and required, but only for the first pill in consecutive deletions. - Both current release of TB and current prototype require *two* keypresses each even for deleting more pills consecutively. We can do better. - Deleting consecutive pills is an item-centric action, for which insertion points are generally irrelevant and distracting. - If applicable, we only need to transition from text cursor to item-selection mode maximally once, namely for the *first* of multiple pills to be deleted (similar to current backspace behavior, different from Postbox behaviour) *Deleting pills to the left with **Backspace*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⌫ Backspace (pill1) (pill2) **(pill3)** pill3 focused *and* selected (corrected current behaviour) ⌫ (pill1) **(pill2)** pill3 deleted, next pill (pill2) conveniently focused *and* selected (no text cursor!) ⌫ **(pill1)** pill1 focused *and* selected (no text cursor!) *Deleting pills to the right with **DEL*** (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ⌦ DEL (pill1) **(pill2)** (pill3) pill2 focused *and* selected ⌦ (pill1) **(pill3)** pill2 deleted, next pill (pill3) conveniently focused *and* selected (no text cursor!) ⌦ **(pill1)** pill1 focused *and* selected (no text cursor!)
As Jörg suggested, let's have a look at the Postbox implementation of pills. Honestly, imho their overall pills UX is pretty poor, buggy, unintuitive, inflexible. Alessandro's prototype is already way better and much more powerful than that. So we're here for the icing on the cake. There's just one thing which rocks about Postbox pills: Having an **insertion point between existing pills**. Cursor back, you get a text cursor between existing pills, start typing, add another pill right there - awesome. The details are moot, most of their insertion and selection behaviour is useless, but that *insertion point can be a game changer* if done right. Let's try! **Requirements** - efficient, simple and intuitive - discoverable - accessible with mouse-only and keyboard-only methods # Proposal P1 # Essentially, there are two concepts at play for recipients: **text-centric and item-centric**. Users first enter new recipients as text; a completed recipient becomes an item. Items are stable and easy to shuffle around. Editing a recipient item makes it text again. Welcome to the world of pills. - Advantages of text: easy to edit/correct recipient text and insert recipients at text cursor position. - Advantages of items: visual distinction of recipients, prevent accidental changes, easy to shuffle around (select and cut/copy/paste/delete/drag n drop). ## In a nutshell ## This proposal seeks to combine the best of both worlds with a minimal tweak to the current prototype: - **Add focusable inter-pill insertion points** (like Postbox, a tiny space between pills which allows for a text cursor): ``` (pill1) (pill2) mind the gap (pill1) | (pill2) cursor between pills ``` Essentially, that's all. We are done. Just like the current prototype, we remain fully item-centric. Over to the small-print which makes this so much better than Postbox. ## Suggested behaviour for Proposal P1 ## ### 1. Inserting a new pill between existing pills (*new: inter-pill insertion points as in Postbox*) ### - Mouse-click between any two pills to get a text cursor for insertion... - ...or cursor left / right to an insertion point between any two pills (see **plain navigation** below) - Simply start typing at cursor position: the gap auto-expands only as you start to type, like 5 em initally, then more as required (cf. Postbox, nice). - Enter creates the new pill, immediately followed by text cursor (as in Postbox; natural text cursor position, allows checking new pill, whereas jumping to the end would lose that context) - You can also paste pills at any insertion point - Optionally allow dropping pills between existing pills (otherwise just drop them at the end) *Inserting a new pill between existing pills* (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 type "J" (pill1) *J* **|** (pill2) (pill3) the gap auto-expands: ~5 em at once... (pill1) *John Longman* **|** (pill2) (pill3) ... then more as required (cf. Postbox) ⏎ Enter (pill1) (John Longman) **|** (pill2) (pill3) new pill at the right spot, cursor after the new pill ### 2. Plain navigation with cursor left/right (*new: pills AND insertion points*) ### - Proposal: Cursoring *alternates* between selecting pill (!) and text cursor between pills (see illustration below) - Note: this is significantly *different* from Postbox navigation behaviour. *Plain navigation (cursor left)* (pill1) (pill2) (pill3) **|** cursor after pill3 (last pill) ◀ cursor left (pill1) (pill2) **(pill3)** pill3 selected (same as current behaviour; note: different from Postbox!) ◀ (pill1) (pill2) **|** (pill3) cursor between pill2 and pill3 (insertion point, new); pills are not moved ◀ (pill1) **(pill2)** (pill3) pill2 selected ◀ (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ◀ **(pill1)** (pill2) (pill3) pill1 selected ◀ **|** (pill1) (pill2) (pill3) cursor before pill1 (first pill) ### 3. Selecting pills with Ctrl/Shift modifier keys (*same as current prototype behaviour*) ### - Just focus and/or select pills as consecutive list items - crucial: skip insertion points, no text cursor, no overwriting of selected pills (Postbox behaviour is a complete mess) *Contiguous selection with **Shift*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⇫◀ Hold Shift, press cursor key (pill1) (pill2) **(pill3)** pill3 selected (current behaviour; note: different from Postbox: no text cursor!) ⇫◀ (pill1) **(pill2) (pill3)** pill2 and pill3 selected (contiguous) *Non-contiguous selection with **Ctrl*** (pill1) (pill2) (pill3) **|** cursor after pill3 Ctrl+◀ Hold Ctrl, press cursor key (pill1) (pill2) *(pill3)* pill3 focused, but not selected (same as current behaviour; not implemented in Postbox) [space bar] (pill1) (pill2) **(pill3)** pill3 selected with space bar Ctrl+◀, ◀ *(pill1)* (pill2) **(pill3)** pill1 focused, but not selected (no text cursor!) [space bar] **(pill1)** (pill2) **(pill3)** pill1 and pill3 selected (non-contiguous) ### 4. Deleting pills with BACKSPACE and DEL (*adapted from current prototype behaviour*) ### - Note: - Current prototype behaviour is incorrect and incomplete (bug 1602431) - We already have a single insertion point after the last pill: Backspace focuses the last pill, another backspace deletes. (Almost) correct and required, but only for the first pill in consecutive deletions. - Both current release of TB and current prototype require *two* keypresses each even for deleting more pills consecutively. We can do better. - Deleting consecutive pills is an item-centric action, for which insertion points are generally irrelevant and distracting. - If applicable, we only need to transition from text cursor to item-selection mode maximally once, namely for the *first* of multiple pills to be deleted (similar to current backspace behavior, different from Postbox behaviour) *Deleting pills to the left with **Backspace*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⌫ Backspace (pill1) (pill2) **(pill3)** pill3 focused *and* selected (corrected current behaviour) ⌫ (pill1) **(pill2)** pill3 deleted, next pill (pill2) conveniently focused *and* selected (no text cursor!) ⌫ **(pill1)** pill1 focused *and* selected (no text cursor!) *Deleting pills to the right with **DEL*** (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ⌦ DEL (pill1) **(pill2)** (pill3) pill2 focused *and* selected ⌦ (pill1) **(pill3)** pill2 deleted, next pill (pill3) conveniently focused *and* selected (no text cursor!) ⌦ (pill1) **|** last pill (pill3) deleted, text cursor reappears (nothing to delete forwards, so another DEL does nothing)
As Jörg suggested, let's have a look at the Postbox implementation of pills. Honestly, imho their overall pills UX is pretty poor, buggy, unintuitive, inflexible. Alessandro's prototype is already way better and much more powerful than that. So we're here for the icing on the cake. There's just one thing which rocks about Postbox pills: Having an **insertion point between existing pills**. Cursor back, you get a text cursor between existing pills, start typing, add another pill right there - awesome. The details are moot, most of their insertion and selection behaviour is useless, but that *insertion point can be a game changer* if done right. Let's try! **Requirements** - efficient, simple and intuitive - discoverable - accessible with mouse-only and keyboard-only methods # Proposal P1 # Essentially, there are two concepts at play for recipients: **text-centric and item-centric**. Users first enter new recipients as text; a completed recipient becomes an item. Items are stable and easy to shuffle around. Editing a recipient item makes it text again. Welcome to the world of pills. - Advantages of text: easy to edit/correct recipient text and insert recipients at text cursor position. - Advantages of items: visual distinction of recipients, prevent accidental changes, easy to shuffle around (select and cut/copy/paste/delete/drag n drop). ## In a nutshell ## This proposal seeks to combine the best of both worlds with a minimal tweak to the current prototype: - **Add focusable inter-pill insertion points** (like Postbox, a tiny space between pills which allows for a text cursor): ``` (pill1) (pill2) mind the gap (pill1) | (pill2) cursor between pills ``` Essentially, that's all. We are done. Just like the current prototype, we remain fully item-centric. Over to the small-print which makes this so much better than Postbox. ## Suggested behaviour for Proposal P1 ## ### 1. Inserting a new pill between existing pills (*new: inter-pill insertion points as in Postbox*) ### - Mouse-click between any two pills to get a text cursor for insertion... - ...or cursor left / right to an insertion point between any two pills (see **plain navigation** below) - Simply start typing at cursor position: the gap auto-expands only as you start to type, like 5 em initally, then more as required (cf. Postbox, nice). - Enter creates the new pill, immediately followed by text cursor (as in Postbox; natural text cursor position, allows checking new pill, whereas jumping to the end would lose that context) - You can also paste pills at any insertion point - Optionally allow dropping pills between existing pills (otherwise just drop them at the end) *Inserting a new pill between existing pills* (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 type "J" (pill1) *J* **|** (pill2) (pill3) the gap auto-expands: ~5 em at once... (pill1) *John Longman* **|** (pill2) (pill3) ... then more as required (cf. Postbox) ⏎ Enter (pill1) (John Longman) **|** (pill2) (pill3) new pill at the right spot, cursor after the new pill ### 2. Plain navigation with cursor left/right (*new: pills AND insertion points*) ### - Proposal: Cursoring *alternates* between selecting pill (!) and text cursor between pills (see illustration below) - Note: this is significantly *different* from Postbox navigation behaviour, which stubbornly *skips* the actual recipient pills. As a matter of fact, *their* pills are currently *not* keyboard accessible at all, Enter jumps away, and F2 deletes selected pill(s)... *Plain navigation (cursor left)* (pill1) (pill2) (pill3) **|** cursor after pill3 (last pill) ◀ cursor left (pill1) (pill2) **(pill3)** pill3 selected (same as current behaviour; note: different from Postbox!) ◀ (pill1) (pill2) **|** (pill3) cursor between pill2 and pill3 (insertion point, new); pills are not moved ◀ (pill1) **(pill2)** (pill3) pill2 selected ◀ (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ◀ **(pill1)** (pill2) (pill3) pill1 selected ◀ **|** (pill1) (pill2) (pill3) cursor before pill1 (first pill) ### 3. Selecting pills with Ctrl/Shift modifier keys (*same as current prototype behaviour*) ### - Just focus and/or select pills as consecutive list items - crucial: skip insertion points, no text cursor, no overwriting of selected pills (Postbox behaviour is a complete mess) *Contiguous selection with **Shift*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⇫◀ Hold Shift, press cursor key (pill1) (pill2) **(pill3)** pill3 selected (current behaviour; note: different from Postbox: no text cursor!) ⇫◀ (pill1) **(pill2) (pill3)** pill2 and pill3 selected (contiguous) *Non-contiguous selection with **Ctrl*** (pill1) (pill2) (pill3) **|** cursor after pill3 Ctrl+◀ Hold Ctrl, press cursor key (pill1) (pill2) *(pill3)* pill3 focused, but not selected (same as current behaviour; not implemented in Postbox) [space bar] (pill1) (pill2) **(pill3)** pill3 selected with space bar Ctrl+◀, ◀ *(pill1)* (pill2) **(pill3)** pill1 focused, but not selected (no text cursor!) [space bar] **(pill1)** (pill2) **(pill3)** pill1 and pill3 selected (non-contiguous) ### 4. Deleting pills with BACKSPACE and DEL (*adapted from current prototype behaviour*) ### - Note: - Current prototype behaviour is incorrect and incomplete (bug 1602431) - We already have a single insertion point after the last pill: Backspace focuses the last pill, another backspace deletes. (Almost) correct and required, but only for the first pill in consecutive deletions. - Both current release of TB and current prototype require *two* keypresses each even for deleting more pills consecutively. We can do better. - Deleting consecutive pills is an item-centric action, for which insertion points are generally irrelevant and distracting. - If applicable, we only need to transition from text cursor to item-selection mode maximally once, namely for the *first* of multiple pills to be deleted (similar to current backspace behavior, different from Postbox behaviour) *Deleting pills to the left with **Backspace*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⌫ Backspace (pill1) (pill2) **(pill3)** pill3 focused *and* selected (corrected current behaviour) ⌫ (pill1) **(pill2)** pill3 deleted, next pill (pill2) conveniently focused *and* selected (no text cursor!) ⌫ **(pill1)** pill1 focused *and* selected (no text cursor!) *Deleting pills to the right with **DEL*** (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ⌦ DEL (pill1) **(pill2)** (pill3) pill2 focused *and* selected ⌦ (pill1) **(pill3)** pill2 deleted, next pill (pill3) conveniently focused *and* selected (no text cursor!) ⌦ (pill1) **|** last pill (pill3) deleted, text cursor reappears (nothing to delete forwards, so another DEL does nothing)
As Jörg suggested, let's have a look at the Postbox implementation of pills. Honestly, imho their overall pills UX is pretty poor, buggy, unintuitive, inflexible. Alessandro's prototype is already way better and much more powerful than that. So we're here for the icing on the cake. There's just one thing which rocks about Postbox pills: Having an **insertion point between existing pills**. Cursor back, you get a text cursor between existing pills, start typing, add another pill right there - awesome. The details are moot, most of their insertion and selection behaviour is useless, but that *insertion point can be a game changer* if done right. Let's try! **Requirements** - efficient, simple and intuitive - discoverable - accessible with mouse-only and keyboard-only methods # Proposal P1 # Essentially, there are two concepts at play for recipients: **text-centric and item-centric**. Users first enter new recipients as text; a completed recipient becomes an item. Items are stable and easy to shuffle around. Editing a recipient item makes it text again. Welcome to the world of pills. - Advantages of text: easy to edit/correct recipient text and insert recipients at text cursor position. - Advantages of items: visual distinction of recipients, prevent accidental changes, easy to shuffle around (select and cut/copy/paste/delete/drag n drop). ## In a nutshell ## This proposal seeks to combine the best of both worlds with a minimal tweak to the current prototype: - **Add focusable inter-pill insertion points** (like Postbox, a tiny space between pills which allows for a text cursor): ``` (pill1) (pill2) mind the gap (pill1) | (pill2) cursor between pills ``` Essentially, that's all. We are done. Just like the current prototype, we remain fully item-centric. Over to the small-print which makes this so much better than Postbox. ## Suggested behaviour for Proposal P1 ## ### 1. Inserting a new pill between existing pills (*new: inter-pill insertion points as in Postbox*) ### - Mouse-click between any two pills to get a text cursor for insertion... - ...or cursor left / right to an insertion point between any two pills (see **plain navigation** below) - Simply start typing at cursor position: the gap auto-expands only as you start to type, like 5 em initally, then more as required (cf. Postbox, nice). - Enter creates the new pill, immediately followed by text cursor (as in Postbox; natural text cursor position, allows checking new pill, whereas jumping to the end would lose that context) - You can also paste pills at any insertion point - Optionally allow dropping pills between existing pills (otherwise just drop them at the end) *Inserting a new pill between existing pills* (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 type "J" (pill1) *J* **|** (pill2) (pill3) the gap auto-expands: ~5 em at once... (pill1) *John Longman* **|** (pill2) (pill3) ... then more as required (cf. Postbox) ⏎ Enter (pill1) (John Longman) **|** (pill2) (pill3) new pill at the right spot, cursor after the new pill ### 2. Plain navigation with cursor left/right (*new: pills AND insertion points*) ### - Proposal: Cursoring *alternates* between selecting pill (!) and text cursor between pills (see illustration below) - Note: this is significantly *different* from Postbox navigation behaviour, which stubbornly *skips* the actual recipient pills. As a matter of fact, *their* pills are currently *not* keyboard accessible at all, Enter jumps away, and F2 deletes selected pill(s)... *Plain navigation (cursor left)* (pill1) (pill2) (pill3) **|** cursor after pill3 (last pill) ◀ cursor left (pill1) (pill2) **(pill3)** pill3 selected (same as current behaviour; note: different from Postbox!) ◀ (pill1) (pill2) **|** (pill3) cursor between pill2 and pill3 (insertion point, new); pills are not moved ◀ (pill1) **(pill2)** (pill3) pill2 selected ◀ (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ◀ **(pill1)** (pill2) (pill3) pill1 selected ◀ **|** (pill1) (pill2) (pill3) cursor before pill1 (first pill) ### 3. Selecting pills with Ctrl/Shift modifier keys (*same as current prototype behaviour*) ### - Just focus and/or select pills as consecutive list items - crucial: skip insertion points, no text cursor, no overwriting of selected pills (Postbox behaviour is a complete mess) *Contiguous selection with **Shift*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⇫◀ Hold Shift, press cursor key (pill1) (pill2) **(pill3)** pill3 selected (current behaviour; note: different from Postbox: no text cursor!) ⇫◀ (pill1) **(pill2) (pill3)** pill2 and pill3 selected (contiguous) *Non-contiguous selection with **Ctrl*** (pill1) (pill2) (pill3) **|** cursor after pill3 Ctrl+◀ Hold Ctrl, press cursor key (pill1) (pill2) *(pill3)* pill3 focused, but not selected (same as current behaviour; not implemented in Postbox) [space bar] (pill1) (pill2) **(pill3)** pill3 selected with space bar Ctrl+◀, ◀ *(pill1)* (pill2) **(pill3)** pill1 focused, but not selected (no text cursor!) [space bar] **(pill1)** (pill2) **(pill3)** pill1 and pill3 selected (non-contiguous) ### 4. Deleting pills with BACKSPACE and DEL (*adapted from current prototype behaviour*) ### - Note: - Current prototype behaviour is incorrect and incomplete (bug 1602431) - We already have a single insertion point after the last pill: Backspace focuses the last pill, another backspace deletes. (Almost) correct and required, but only for the first pill in consecutive deletions. - Both current release of TB and current prototype require *two* keypresses each even for deleting more pills consecutively. We can do better. - Deleting consecutive pills is an item-centric action, for which insertion points are generally irrelevant and distracting. - If applicable, we only need to transition from text cursor to item-selection mode maximally once, namely for the *first* of multiple pills to be deleted (similar to current backspace behavior, different from Postbox behaviour) *Deleting pills to the left with **Backspace*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⌫ Backspace (pill1) (pill2) **(pill3)** pill3 focused *and* selected (corrected current behaviour) ⌫ (pill1) **(pill2)** pill3 deleted, next pill (pill2) conveniently focused *and* selected (no text cursor!) ⌫ **(pill1)** pill1 focused *and* selected (no text cursor!) *Deleting pills to the right with **DEL*** (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ⌦ DEL (pill1) **(pill2)** (pill3) pill2 focused *and* selected ⌦ (pill1) **(pill3)** pill2 deleted, next pill (pill3) conveniently focused *and* selected (no text cursor!) ⌦ (pill1) **|** last pill (pill3) deleted, text cursor reappears (nothing to delete forwards, so another DEL does nothing)
As Jörg suggested, let's have a look at the Postbox implementation of pills. Honestly, imho their overall pills UX is pretty poor, buggy, unintuitive, inflexible. Alessandro's prototype is already way better and much more powerful than that. So we're here for the icing on the cake. There's just one thing which rocks about Postbox pills: Having an **insertion point between existing pills**. Cursor back, you get a text cursor between existing pills, start typing, add another pill right there - awesome. The details are moot, most of their insertion and selection behaviour is useless, but that *insertion point can be a game changer* if done right. Let's try! **Requirements** - efficient, simple and intuitive - discoverable - accessible with mouse-only and keyboard-only methods # Proposal P1 # Essentially, there are two concepts at play for recipients: **text-centric and item-centric**. Users first enter new recipients as text; a completed recipient becomes an item. Items are stable and easy to shuffle around. Editing a recipient item makes it text again. Welcome to the world of pills. - Advantages of text: easy to edit/correct recipient text and insert recipients at text cursor position. - Advantages of items: visual distinction of recipients, prevent accidental changes, easy to shuffle around (select and cut/copy/paste/delete/drag n drop). ## In a nutshell ## This proposal seeks to combine the best of both worlds with a minimal tweak to the current prototype: - **Add focusable inter-pill insertion points** (like Postbox, a tiny space between pills which allows for a text cursor): ``` (pill1) (pill2) mind the gap (pill1) | (pill2) cursor between pills ``` Essentially, that's all. We are done. Just like the current prototype, we remain fully item-centric. Over to the small-print which makes this so much better than Postbox. ## Suggested behaviour for Proposal P1 ## ### 1. Inserting a new pill between existing pills (*new: inter-pill insertion points as in Postbox*) ### - Mouse-click between any two pills to get a text cursor for insertion... - ...or cursor left / right to an insertion point between any two pills (see **plain navigation** below) - Simply start typing at cursor position: the gap auto-expands only as you start to type, like 5 em initally, then more as required (cf. Postbox, nice). - Enter creates the new pill, immediately followed by text cursor (as in Postbox; natural text cursor position, allows checking new pill, whereas jumping to the end would lose that context) - You can also paste pills at any insertion point - Optionally allow dropping pills between existing pills (otherwise just drop them at the end) *Inserting a new pill between existing pills* (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 type "J" (pill1) *J* **|** (pill2) (pill3) the gap auto-expands: ~5 em at once... (pill1) *John Longman* **|** (pill2) (pill3) ... then more as required (cf. Postbox) ⏎ Enter (pill1) (John Longman) **|** (pill2) (pill3) new pill at the right spot, cursor after the new pill ### 2. Plain navigation with cursor left/right (*new: pills AND insertion points*) ### - Proposal: Cursoring *alternates* between selecting pill (!) and text cursor between pills (see illustration below) - Note: this is significantly *different* from Postbox navigation behaviour, which stubbornly *skips* the actual recipient pills. As a matter of fact, *their* pills are currently *not keyboard accessible* for editing *at all*, Enter jumps away, and F2 deletes selected pill(s) and loses focus... *Plain navigation (cursor left)* (pill1) (pill2) (pill3) **|** cursor after pill3 (last pill) ◀ cursor left (pill1) (pill2) **(pill3)** pill3 selected (same as current behaviour; note: different from Postbox!) ◀ (pill1) (pill2) **|** (pill3) cursor between pill2 and pill3 (insertion point, new); pills are not moved ◀ (pill1) **(pill2)** (pill3) pill2 selected ◀ (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ◀ **(pill1)** (pill2) (pill3) pill1 selected ◀ **|** (pill1) (pill2) (pill3) cursor before pill1 (first pill) ### 3. Selecting pills with Ctrl/Shift modifier keys (*same as current prototype behaviour*) ### - Just focus and/or select pills as consecutive list items - crucial: skip insertion points, no text cursor, no overwriting of selected pills (Postbox behaviour is a complete mess) *Contiguous selection with **Shift*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⇫◀ Hold Shift, press cursor key (pill1) (pill2) **(pill3)** pill3 selected (current behaviour; note: different from Postbox: no text cursor!) ⇫◀ (pill1) **(pill2) (pill3)** pill2 and pill3 selected (contiguous) *Non-contiguous selection with **Ctrl*** (pill1) (pill2) (pill3) **|** cursor after pill3 Ctrl+◀ Hold Ctrl, press cursor key (pill1) (pill2) *(pill3)* pill3 focused, but not selected (same as current behaviour; not implemented in Postbox) [space bar] (pill1) (pill2) **(pill3)** pill3 selected with space bar Ctrl+◀, ◀ *(pill1)* (pill2) **(pill3)** pill1 focused, but not selected (no text cursor!) [space bar] **(pill1)** (pill2) **(pill3)** pill1 and pill3 selected (non-contiguous) ### 4. Deleting pills with BACKSPACE and DEL (*adapted from current prototype behaviour*) ### - Note: - Current prototype behaviour is incorrect and incomplete (bug 1602431) - We already have a single insertion point after the last pill: Backspace focuses the last pill, another backspace deletes. (Almost) correct and required, but only for the first pill in consecutive deletions. - Both current release of TB and current prototype require *two* keypresses each even for deleting more pills consecutively. We can do better. - Deleting consecutive pills is an item-centric action, for which insertion points are generally irrelevant and distracting. - If applicable, we only need to transition from text cursor to item-selection mode maximally once, namely for the *first* of multiple pills to be deleted (similar to current backspace behavior, different from Postbox behaviour) *Deleting pills to the left with **Backspace*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⌫ Backspace (pill1) (pill2) **(pill3)** pill3 focused *and* selected (corrected current behaviour) ⌫ (pill1) **(pill2)** pill3 deleted, next pill (pill2) conveniently focused *and* selected (no text cursor!) ⌫ **(pill1)** pill1 focused *and* selected (no text cursor!) *Deleting pills to the right with **DEL*** (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ⌦ DEL (pill1) **(pill2)** (pill3) pill2 focused *and* selected ⌦ (pill1) **(pill3)** pill2 deleted, next pill (pill3) conveniently focused *and* selected (no text cursor!) ⌦ (pill1) **|** last pill (pill3) deleted, text cursor reappears (nothing to delete forwards, so another DEL does nothing)
As Jörg suggested, let's have a look at the Postbox implementation of pills. Honestly, imho their overall pills UX is pretty poor, buggy, unintuitive, inflexible. Alessandro's prototype is already way better and much more powerful than that. So we're here for the icing on the cake. There's just one thing which rocks about Postbox pills: Having an **insertion point between existing pills**. Cursor back, you get a text cursor between existing pills, start typing, add another pill right there - awesome. The details are moot, most of their insertion and selection behaviour is useless, but that *insertion point can be a game changer* if done right. Let's try! **Requirements** - efficient, simple and intuitive - discoverable - accessible with mouse-only and keyboard-only methods # Proposal P1 # Essentially, there are two concepts at play for recipients: **text-centric and item-centric**. Users first enter new recipients as text; a completed recipient becomes an item. Items are stable and easy to shuffle around. Editing a recipient item makes it text again. Welcome to the world of pills. - Advantages of text: easy to edit/correct recipient text and insert recipients at text cursor position. - Advantages of items: visual distinction of recipients, prevent accidental changes, easy to shuffle around (select and cut/copy/paste/delete/drag n drop). ## In a nutshell ## This proposal seeks to combine the best of both worlds with a minimal tweak to the current prototype: - **Add focusable inter-pill insertion points** (like Postbox, a tiny space between pills which allows for a text cursor): ``` (pill1) (pill2) mind the gap (pill1) | (pill2) cursor between pills ``` Essentially, that's all. We are done. Just like the current prototype, we remain fully item-centric. Over to the small-print which makes this so much better than Postbox. ## Suggested behaviour for Proposal P1 ## ### 1. Inserting a new pill between existing pills (*new: inter-pill insertion points as in Postbox*) ### - Mouse-click between any two pills to get a text cursor for insertion... - ...or cursor left / right to an insertion point between any two pills (see **plain navigation** below) - Simply start typing at cursor position: the gap auto-expands only as you start to type, like 5 em initally, then more as required (cf. Postbox, nice). - Enter creates the new pill, immediately followed by text cursor (as in Postbox; natural text cursor position, allows checking new pill, whereas jumping to the end would lose that context) - You can also paste pills at any insertion point - Optionally allow dropping pills between existing pills (otherwise just drop them at the end) *Inserting a new pill between existing pills* (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 type "J" (pill1) *J* **|** (pill2) (pill3) the gap auto-expands: ~5 em at once... (pill1) *John Longman* **|** (pill2) (pill3) ... then more as required (cf. Postbox) ⏎ Enter (pill1) (John Longman) **|** (pill2) (pill3) new pill at the right spot, cursor after the new pill ### 2. Plain navigation with cursor left/right (*new: pills AND insertion points*) ### - Proposal: Cursoring *alternates* between selecting pill (!) and text cursor between pills (see illustration below) - Note: this is significantly *different* from Postbox navigation behaviour, which stubbornly *skips* the actual recipient pills. As a matter of fact, *their* pills are currently *not keyboard accessible* for editing *at all*, Enter jumps away, and F2 deletes selected pill(s) and loses focus... *Plain navigation (cursor left)* (pill1) (pill2) (pill3) **|** cursor after pill3 (last pill) ◀ cursor left (pill1) (pill2) **(pill3)** pill3 selected (same as current behaviour; note: different from Postbox!) ◀ (pill1) (pill2) **|** (pill3) cursor between pill2 and pill3 (insertion point, new); pills are not moved ◀ (pill1) **(pill2)** (pill3) pill2 selected ◀ (pill1) **|** (pill2) (pill3) cursor between pill1 and pill2 ◀ **(pill1)** (pill2) (pill3) pill1 selected ◀ **|** (pill1) (pill2) (pill3) cursor before pill1 (first pill) ### 3. Selecting pills with Ctrl/Shift modifier keys (*same as current prototype behaviour*) ### - Just focus and/or select pills as consecutive list items - crucial: skip insertion points, no text cursor, no overwriting of selected pills (Postbox behaviour is a complete mess) *Contiguous selection with **Shift*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⇫◀ Hold Shift, press cursor key (pill1) (pill2) **(pill3)** pill3 selected (current behaviour; note: different from Postbox: no text cursor!) ⇫◀ (pill1) **(pill2) (pill3)** pill2 and pill3 selected (contiguous) *Non-contiguous selection with **Ctrl*** (pill1) (pill2) (pill3) **|** cursor after pill3 Ctrl+◀ Hold Ctrl, press cursor key (pill1) (pill2) *(pill3)* pill3 focused, but not selected (same as current behaviour; not implemented in Postbox) [space bar] (pill1) (pill2) **(pill3)** pill3 selected with space bar Ctrl+◀, ◀ *(pill1)* (pill2) **(pill3)** pill1 focused, but not selected (no text cursor!) [space bar] **(pill1)** (pill2) **(pill3)** pill1 and pill3 selected (non-contiguous) ### 4. Deleting pills with BACKSPACE and DEL (*adapted from current prototype behaviour*) ### - Note: - I have fixed and improved the previously faulty and clumsy prototype behaviour in bug 1602431. - We already have a single insertion point after the last pill: Backspace selects the last pill, another backspace deletes and conveniently auto-selects the previous item for single-keypress consecutive deletion of single pills (whereas current TB release requires two keypresses each). - Deleting consecutive pills is an item-centric action, for which insertion points are generally irrelevant and distracting. - If applicable, we only need to transition from text cursor to item-selection mode maximally once, namely for the *first* of multiple pills to be deleted (similar to current backspace behavior, different from Postbox behaviour). *Deleting pills to the left with **Backspace*** (pill1) (pill2) (pill3) **|** cursor after pill3 ⌫ Backspace (pill1) (pill2) **(pill3)** pill3 focused *and* selected (corrected current behaviour) ⌫ (pill1) **(pill2)** pill3 deleted, next pill (pill2) conveniently focused *and* selected (no text cursor!) ⌫ **(pill1)** pill1 focused *and* selected (no text cursor!) *Deleting pills to the right with **DEL*** (pill1) **|** (pill2) (pill3) cursor at insertion point between pill1 and pill2 ⌦ DEL (pill1) **(pill2)** (pill3) pill2 focused *and* selected ⌦ (pill1) **(pill3)** pill2 deleted, next pill (pill3) conveniently focused *and* selected (no text cursor!) ⌦ (pill1) **|** last pill (pill3) deleted, text cursor reappears (nothing to delete forwards, so another DEL does nothing)