Securedrop: Make "show" functionality in codename on /lookup page clearer

[redshiftzero]

Description

The first time users view the source interface, they are shown their codename on the lookup page, in case they forget to note the codename down when first shown on the generate page. It appears, but not by default here:

Some users find this non-obvious (see note below) - perhaps due to the distance of the "Show" button off to the right. Any ideas for how to make this clearer? cc @huertanix @harrislapiroff @ei8fdb

User Research Evidence

A user submitting through the source interface for the first time in a while says: "i forgot to copy my code name down after the first page. when i looked to the bottom where it says "Remember, your codename is:" I was kind of confused that it didn't show it to me, and the "show" button was off to the side and took me a second [..snip..] to figure out what was going on"

[harrislapiroff]

Here's an off the cuff first idea

[huertanix]

^ I like Harris's idea. Reminds me of the Mastodon content warning's click-to-view design.

I would only make it look more clickable (SD styleguide for clickable things may come into play here). Maybe with clickable styling the wording can just be "Show codename".

[ei8fdb]

@redshiftzero this makes a lot of sense. I agree with your comment about the distance between the control and the UI area it controls - you've essentially hit on Fitts's Law (a law used for predictive modelling of human movement): which says It's faster to hit large targets closer to you than it is to hit smaller targets further away from you. (There is also a connection with the size of the interactive element)

@harrislapiroff's off the cuff idea makes a lot of sense - the user's attention will be drawn towards the words - I'd expect a user to try clicking the text. This would reveal their codename.

• Riff 1
  I'd go a bit further and actually make the whole element clickable (back to Fitts's law). If the objective is to make the user click to reveal their codename, this will increase the possibility of the user clicking it, in terms of accuracy.

• Riff 2
  I have no evidence, but it could also be the case that the user is not aware of the significance of the "unlabelled" element at the bottom of the page.

This could be solved by giving the codename box a label.

Comments?

--

I will do some usability testing of the current design (4-5 people) and the proposed designs to see results.

[redshiftzero]

This is great feedback @harrislapiroff @huertanix @ei8fdb! The large clickable area makes a lot of sense to me and I think it would be a solid improvement to the UI. I suspect including the "Remember your codename is" or "Your codename" will help users understand what the clickable area is for, but I defer to the results of the usability testing :muscle:

[huertanix]

@ei8fdb I agree with all of this. Labeling also helps in training since now we'll be able to simply say "scroll down to Your Codename" rather than ask trainees to look for a gray box with long tiny text. 💯

[ninavizz]

Has this been resolved (like—I think what Bernard recommended is in the current UI?) @redshiftzero?

[ninavizz]

(I'd still love to see research results if that ever happened, @ei8fdb!)