Re: [Tails-ux] Encrypted storage unlock UX

Delete this message

Reply to this message
Author: Spencer
Date:  
To: Tails user experience & user interface design
Subject: Re: [Tails-ux] Encrypted storage unlock UX
Hi,

>
> Alan:
> attach mockups to the relevant ticket?
>


Here [0] is what I think we are agreeing on. I attached it to #8230
[1].

Ultimately, associative proximity is preferable here, e.g., a button
with a text label and a supporting graphic in the same space.

However, the text label and supporting graphic fight for attention and
create confusion. Here is a button element logic table:


      Text       Graphic           Text & Graphic
+------------+------------+------------+------------+

|            |     ∩      |  ∩         |  ∩         | Locked
|   Unlock   |    [-]     | [+] Unlock | [-] Unlock | State

+------------+------------+------------+------------+
|            |     ∩      |  ∩         |  ∩         | Unlocked
|   Lock     |    [+]     | [-] Lock   | [+] Lock   | State

+------------+------------+------------+------------+
       A             B           C            D


A: Text as a label.
This works but misses out on added clarity from having a supporting
graphic.

B: Graphic as a label.
This works but misses out on added clarity from having explicit text.

C: Text as a label and graphic as state indicator.
This does not work since there is conflict between state and action
indication.

D: Text as a label and graphic as action indicator.
This works but requires further status indication elsewhere, which makes
the supporting graphic unnecessary for the button.

Given that knowing the current state provides greater value than knowing
what action to take, in this case, knowing if storage is locked or
unlocked, the supporting graphic should not accompany the text label
inside the button.

Instead, after reviewing some supporting graphic location options [2] &
[3], the supporting graphic has been placed outside of the button space
to where it adds supporting visual context to the 'Encrypted Storage'
section text label.

This decision keeps the needed contextual proximity, albeit with a
different label element, while using the text label as an action
indicator and a supporting graphic as the much needed state indicator.

Wordlife,
Spencer

[0]:
https://labs.riseup.net/code/attachments/download/1387/Greeter.Encrypted.Storage.png
[1]: https://labs.riseup.net/code/issues/8230
[2]:
https://labs.riseup.net/code/attachments/download/1356/Greeter.Encrypted.Storage.Options.png
[3]:
https://mailman.boum.org/pipermail/tails-ux/attachments/20160519/be0b4b69/attachment-0001.pdf