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 💪

[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!)

[eloquence]

It's worth noting that this UI was changed a while ago and is now at the top of the page:

However, alternative approaches for the widget design are still worth considering, so leaving this issue open.

See also the related observation in #5239 that the scrolling behavior could be more harmful than useful at this point.

[Gomesz785]

can anyone note the file that contains the UI coding for following screen?

[Gomesz785]

can anyone note the file that contains the UI coding for following screen?

so i can improve it...

[zenmonkeykstop]

Hi @Gomesz785 - this UI element is in: https://github.com/freedomofpress/securedrop/blob/develop/securedrop/source_templates/lookup.html

UX changes in the Source Interface do tend to be pretty carefully considered, so if you do want to try to make any changes, please update this issue with an implementation plan first before getting too deep into it.

[ninavizz]

Hi @Gomesz785 Thank you for your interest in contributing! That UI element has actually been moved to the top of the screen, and a number of other things are also different about the overall UX, today, from how the UI looks in the screenshots above. You can poke around what the current experience looks like, here: http://demo.securedrop.org/

I'm a UX design and research contributor (yes data, yes pixels, no code), and have been casually working on this problem for a while. You can see some of what I've worked on in my most current prototype(made using a visual prototyping tool called InVision). Feel free to also browse our wiki and Issues that track UX work for SecureDrop, here: https://github.com/freedomofpress/securedrop-ux.

Our UX Meetings are every-other-Thursday, and this Thursday we will be discussing stuff relevant to the Source UI. If you'd like to attend for that design review to get a sense for how we work, we'd love to have you!

[legoktm]

The codename widget was overhauled in #6315, it now looks like:

Hidden	Shown

@eaon, @tina-ux: I think this can be closed now?