Problem: Sign buttons and UI ambiguous

[leighmcculloch]

The sign UI is ambigious.

1. The Add Signer section, has a button Add Signature, but it doesn't accept a signature as input, but a signer to produce a signature. The button would be less ambiguous to me if named Add additional signer.

2. There are three sign buttons, and it's unclear how they interact. Does Sign transaction only sign using signers, or also using the hardware wallet?

   The Sign transactions button seems to exclusively work with keys entered at the beginning of the sign box, and the Sign with wallet seems to ignore the signers entered. The UI looks like it's signing with all things together, but actually they're all independent.

3. Until clicking Sign with wallet it's not obvious what that button is for vs the first button.

The separation of functionality was clearer, although still subtle, in old lab:

[janewang]

Discussed and agreed:

• create more visual separation for Hardware Wallets vs Stellar Wallet Kit
• evaluate the signing flow for ledger wallet

[quietbits]

Here are examples of the Old vs. New flow when signing with the Ledger hardware wallet. The Old Lab signs the transaction right away, while the New Lab needs an extra click to do that.

Old Lab

lab-sign-tx-ledger-old-lab.webm

New Lab

lab-sign-tx-ledger-new-lab.webm

[janewang]

Thanks @quietbits

@quietbits @sdfcharles I think we are missing a few states, like "Waiting for Ledger", then once we show the state "Successfully added a hardware wallet signature", the first button below really should change to "Submit transaction" (because the transaction has been signed). Wdyt?

[sdfcharles]

yep agreed, will design those states before our next huddle 🙏

[sdfcharles]

updated designs here

ux changes:

• added separation between signature sections
• updated "Add signature" to "Add additional signer" on signing with secret key
• updated titles to standard format ("Sign with...")
• "Submit in transaction submitter" only shows on the transaction results card
• added in-between loading states for hardware wallet and wallet extension signings
• added success message for hardware wallet and wallet extension signings

cc @janewang @quietbits

[leighmcculloch]

The separation in the updated design looks great, and is clearer than previous lab's separation was. 👏🏻

• updated "Add signature" to "Add additional signer" on signing with secret key

@sdfcharles Would it also work to automatically display an additional signer text input when a secret key is entered into the previous input? It would alleviate the need for an additional bold button, that would I think make the flow clearer to a user. This might be too minor to worry about at this point.

• added success message for hardware wallet and wallet extension signings

@sdfcharles I love this. What do you think about adding the same success message to the signer/key box, so that all three types of signing produce the same style of success message? It'd round out the connection between I've hit that button, and it's done.

[sdfcharles]

@leighmcculloch

Would it also work to automatically display an additional signer text input when a secret key is entered into the previous input? It would alleviate the need for an additional bold button, that would I think make the flow clearer to a user. This might be too minor to worry about at this point.

yep we could do that – would feel more seamless especially if we are also having the user click "Sign with a Secret Key"

What do you think about adding the same success message to the signer/key box, so that all three types of signing produce the same style of success message? It'd round out the connection between I've hit that button, and it's done.

yep, updated designs to include this success message