1603051 - Recipient pills UX: Allow keyboard insertion and reordering of pills (via inter-pill insertion points)

Status: NEW

(Thunderbird :: Message Compose Window, enhancement)

Description

[Thomas D. (:thomas8)]

I am looking at a recent iteration of bug 440377 and friends: 74.0a1 (2020-01-29) (64-bit).

I'd like to explore ways of giving users full control over the order of recipient pills. For that, allowing insertion of new pill(s) between existing pills is key. With a minor tweak of the current design, we could make arranging pills significantly more flexible. Imo, this is a key design decision with some technical and UX ramifications, so I recommend to consider this at an early stage.

STR

1. New msg with recipient pills: (pill1) (pill2)
2. Try to insert another recipient (pill3) between (pill1) and (pill2).
3. Try to change the order of (pill1) and (pill2) - because of recipient importance, roles, mental map, any order criterion, you name it.

Actual result

• inserting another recipient pill between existing pills is not possible
• reordering recipients essentially requires redoing all of them

Expected result

• users should be able to insert another recipient between existing recipients
• users should be able to reorder recipients as they deem fit

First reported against: 73.0a1 (2019-12-10) (64-bit), a try run with bug 440377 only, very close to landing.
https://treeherder.mozilla.org/#/jobs?repo=try-comm-central&revision=eef5e4aa573cad31df6382748f984d696b654752

Comment 1

[Thomas D. (:thomas8)]

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)

Comment 2

[Jorg K (CEST = GMT+2)]

(Thanks, Thomas, for looking into it. Glad to hear that our solution will be better than Postbox.)

Comment 3

[Thomas D. (:thomas8)]

Please note: I will correct any errors by editing my comments, so please read the latest version of comments on the bug itself and refresh the page before reading.

Comment 4

[Thomas D. (:thomas8)]

(In reply to Thomas D. from comment #1)

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.

So this is the key aspect of my proposal P1.

UX Cost/Benefit evaluation (from user's pov (1))

Cost

• So for plain vanilla recipient navigation inside the recipient field, we're adding an extra stop for each recipient (the insertion point before the recipient). Two cursor key presses needed to navigate to the next recipient (only for plain navigation, which is thus minimally different from selection where 1 key press suffices most of the time). Note that these are not tab stops (per my proposal of bug 1602372), it's intra-field navigation with cursor keys, so the message focus ring is not affected. Also note that I presuppose cursor up/down as a shortcut for vertical navigation inside multi-row recipient fields.

Benefits

• Maximum flexibility for inserting and reordering recipients according to user's gusto
• with a variety of mouse and keyboard methods
• Discoverable and intuitive
• Fully controlled, predictable and transparent
• Retain maximum efficiency for selecting and deleting pills in a fully item-centric manner

Evaluation

• Imho, UX cost is negligible. Benefits by far outway the cost.

I would love to test this idea in a future iteration of the prototype by Alessandro.

(1) Implementation is for others to sort out... but I'm confident it's doable with Alessandro's scalable and modular coding approach.

Comment 5

[Thomas D. (:thomas8)]

(In reply to Jorg K (GMT+1) (PTO to 15th Dec 2019, sporadically reading bugmail) from comment #2)

(Thanks, Thomas, for looking into it. Glad to hear that our solution will be better than Postbox.)

(Most welcome. It definitely will...)

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...

Comment 6

[Thomas D. (:thomas8)]

One observation which belongs here:

After editing a recipient pill (say pill 25 out of 50 BCC pills), focus jumps back to the row input, which is a bit surprising. Certainly convenient for some, but might feel like "loss of context" to others. Similar phenomenology like bug 1603563, jumping focus when deleting. Perhaps focus (and selection) should just stay on the just edited pill (or at pill insertion point after current pill, per this bug), allowing user to double-check if he succeeded to fix that pill. Otherwise, the pill just disappears into the crowd and will be hard to spot between the rest.

Comment 7

[Thomas D. (:thomas8)]

With the arrival of bug 1601749 which has implemented this functionality for mouse users, what remains to be done here is to provide ways of accessing this functionality via keyboard.

Comment 8

[Markus Elfring]

I became also curious how the support will evolve further for these interfaces.