Web UIs: Quick-Fixes & Other 2019 Recommendations

[ninavizz]

Goals

• Bring more credibility to the SecureDrop tool by aligning the product's visual presentation and tone/voice of its content w/ the SecureDrop brand, as presented on the sd.org website.
• Improve page hierarchies, color contrast, content scannability, and text legibility, to improve usability across the complete experience, while also addressing aesthetic WCAG compliance needs.
• Address small things that fit within the scope of "best practice" updates to improve user expectations management, such as creating an Active State on the submit button, consistent/correct ordering of Primary/Secondary buttons, and aligning user actions with appropriate messaging.
• Tighten written language to clarify button intents, navigation paths, and page sections to more directly address user needs.
• Provide clearer contextually-relevant opportunities for Sources to learn about and act upon important safety and security concepts they may be unaware of, to guide their behavioral decisions as whistleblowers.
• Audit use of icons to eliminate the ones that distract, and improve the ones that meaningfully guide users.
• Standardize around re-usable UI elements to ease expansion and implementation of future enhancements, while also giving the product more user credibility via eliminating tiiny inconsistencies.

This issue is for near-term updates to do to the Source Experience, in advance of a larger project to re-think the complete Source journey. Each checkbox item below, is described in comment(s) below and to be tackled in subordinate tickets.

No Testing Needed (so, ASAdevP)

These recommendations are made either from existing/known issues, or standard ux best practices

Global

• Source Footer
  • GDoc from Erik with recommended text & linked-to "Learn More" page
    • Goal with "Learn More" page: for the my-own-worst-enemy user who simply refuses to educate themselves as we, the experts, knot our stomachs wanting them to... what are the most valuable 500 words and/or illustrations for us to pack into this page, as a TL;DR "Don't implicate your ass!" flyer?
  • OG recommendation
  • Goals with recommendations
    • Make clearer to users they're submitting stuff to a news or NGO org, and that SD is a tool (vs a hosted destination or an organization)
    • Add credibility to SD as an audited, tested, extensively thought-through product, vs a hacker weekend thing a reputable newspaper or NGO decided to adopt.
    • Format writing/hierarchy for clearer alignment with consumer product standards that user expectations are more likely to be shaped by, than skeptical hacker/anarchist ideals.
    • Provide Sources with learning resources to self-educate about risk online, vs current text that is alarmist and more likely to confuse or rattle Sources than guide thoughtful decision-making.
    • Nina's $0.02 on current footer shortcomings in this screen's annotations
• Newsroom Logo <alt> text edit
  • The <alt> tag saying SecureDrop on a newsroom's logo adds to the confusion
    • Tor's slow-speed exposes the alttag, seconds before an image appears; and makes this a more notable/significant UI element than on standard web pages. See 0:20 and 0:30 in this video screencast of AlJazeera's SecureDrop loading w/in Tor.
  • Immediately, <alt> tag should just be Logo.
  • Longer-term the <alt> tag should inclide the name of the newsroom, such as New York Times Logo
  • Ticket in SD repo to cross-ref
• Spec'd Font Family
  • Nina & Harris consensus on either Noto Sans or System Font default
  • Helvetica Neu legibility issue on Tor Browser w/in Mac (generally not the best body font, anyway—family designed to be a display typeface).
  • Better non-English alphabet support than Helvetica Neu was built to provide
  • See Chinese Font Broken ticket in SD repo
• Update colors everywhere to bring Source and Journalist experiences on-brand with SD
  • On-brand = brand parity w/ sd.org, which will add to product credibility & user trust
  • Existing color schema is also too low-contrast for accessibility standards
  • Lighten grey container box as step before total removal, so it's less distracting
• Unify H1 and H2 styles
  • See Submit page before/after
  • Current page hierarchies muddled with excess diversity in font sizing; "Replies" just kinda floats there, when it's both smaller than the H1 and has no container for where messages wd live if they existed.
• Remove icons from buttons
  • Primary and Secondary page-action buttons should never have icons
  • It is very rare, for buttons to work well with both text and icons
  • Current icons add too much business to UI
• Retire FontAwesome in favor of Material.io Icons
  • Nina and Harris both in agreement on this as a good thing to do
  • Glyph fonts not usable by Tor in Safest mode; current CSS has ~1,000 lines of a wasted forced-download of a font users can't use
  • Iconography in FontAwesome not stylistically different from Material.io icons, but far cleaner and more elegant in small details
  • Material.io is a very well-funded open-source project w/ formally trained designers publishing to much more rigorous standards than FontAwesome (which is a developer-driven, less well-funded project).
• Languages selector
  • Update icons & text styling (padding, font, font size, and character-spacing) to be more visually clear
  • See before/after
    
  • On Index page, move to beneath newsroom logo—where it lives consistently throughout rest of experience.
  • See before/after across experience (currently it moves from Index to following pages)
• Link Underline Styling
  • Improved legibility with enhanced discovery for accessibility and usability, by using bottom-border or background-color on an inline-block attributes vs standard HTML <a> underline.
  • Accomplishes the above by styling underline to interfere less with visual parsing of characters above the underline as a static artifact, and getting the underline out of the way of descenders (the parts of a lowercase letterform that descend below the baseline—so p, j, q, y all have descenders).
  • On hover, the underline should shift from being at a partial-alpha value to 100%, or can increase in size; or, change color with the rest of the text. Overall, this will also add to enhancing usability/accessibility factors.
  • Ok, it'll make the whole thing look sexier, too.
• Grey container-box across whole UI
  • Kill it, per recommendation
  • Dependent styling updates:
    • New footer w/ top hr
    • Moving the Codename widget to the top of the page (next to the Log-out button)
    • Outlining the "Replies" box

Submit Page

• NoScript Warning
  • Assuming upstream Tor/NoScript/Firefox issue is corrected, kill it!
• Encryption Options
  • Create new text string with label "Encryption Options" in user-facing link, above files area
  • Create hide/show div to move existing text strings off Submit and Journalist Key pages so text is located in a more relevant location to inform or to entice learning about encryption.
  • See before/after recommendation with annotations
• "Upload" block icon
  • Concern of mis-messaging users w/ Cloud semiotics
  • Blue implies clickability, unless it's in a Header
  • See proposed icon, but in screen w/ updated text, colors, the codename widget moved, and the UI outline killed
  • The icon above is the most straight-forward safe-bet option, but this could also be a great opportunity for branding explorations.
• "Replies" outline box
  • Add, per recommendation
• Move Codename Widget
  • Current location too difficult to find; necessitates too much 'reminder' copy
  • See before/after recommendation with annotations
• Active state on Submit button
  • Accessibility best-practice standard.
  • Upon hitting "Submit" the button should visually or behaviorally indicate to Sources that the transmission of their data has been initiated.
  • Spinner on design recommendation from CSS Spinners (no JS).
• Multi-file upload experience
  • If this comment's description still stands (from Freddy in 2017), something—anything—has to change.
  • Then, there was this ticket that Nina/Jen recently commented on.
  • See multi-screen clickthru proto recommendation for ideal (ideal!) functionality.
    • Once the Qubes Workstation is in newsrooms, this will become more relevant to dissuade users from uploading .zip files.

Get Codename, Index, Journalist footer

• Index Text
  • Current text is unclear
  • Inconsistent use of nomenclature across this and the Submit page, also an issue.
  • See before/after recommendations w/ annotations
  • You know those blue gradients just gave you goosebumps!
• Buttons text, Get Codename Page
  • Update button texts to standard cancel/continue
    • No new translations needed; rec follows established ux best-practice
      • Literally only ONE button should carry the word "Submit" on it, and that is the button that transmits selected/composed Source materials to the Newsroom's servers.
    • See before/after recommendation
• Get Codename page text
  • Eliminate extra/redundant text likely not necessary with improved widget placement on Submit page.
  • See before/after recommendation
• Re-position Codename Widget
  • Per recommendation
• Newsroom Footer
  • All Journalist & Admin UI pages
  • Include link to User Guides, and generally format more inline with above
  • Include link to Support, if admin leaves organization

After User Testing Validation

• Submit Page Text
  • Text on H1s could be clearer. See before/after recommendation w/ annotations.
  • Following user-testing validation of proposed updates
• Messaging Improvements
  • See recommendations
  • Update visual styling of messages
  • Different icon in Tor New Identity blurb
  • Following user-testing validation of proposed updates
• Default logo that ships w/ product
  • See recommendation w/ annotations
  • Reduce confusion w/ where Source is submitting things to
  • Part 1 of 2 for recommended solution to SD-4086.
  • Implement governance guidelines to mandate compliance for usability (eg: Houston Star currently has plain SD logo in their Source UI, which is very confusing)
• Introduce SecureDrop better, on the "Get Godename" page
  • Lots of iteration opportunities with this, with testing.
  • No recommendations, yet. Would like to reach-out to writers in SimplySecure community, for volunteer contributions.

[ninavizz]

(moving what had been the item's main text to a comment, so this can become and be tracked as an Epic)

Known items that have been itching up in Nina's bonnet:

...perhaps a team meeting to discuss & solicit more ideas from all, in the weeks ahead?

Typography

• Helvetica Neu (body copy on Source interface) is horribly illegible on Macs; not sure why, just know the Source Interface's body copy looks wretched on my machine but nice on screenshares from Linux users
• Primary typeface should be chosen that works well across non-English Alphabets
• One of the Google fonts would be ideal, but there may be issues with those and Tor
• Would also be nice to tweak many of the typography things on the CSS to provide nicer linespacing and object spacing for '
• ' and header things, as well as tweaking colors, to improve page hierarchies and visual scanability.

Accessibility

• Tor may be an issue, but—within our security requirements, it'd be great to not exclude differently abled populations from using our wonderful product. :)

Language selector; standardize & make as a faux-combobox

• Dropdowns w/ +5 items should be avoided, when at all possible
  • Any kind of combo-box hack to use CSS/HTML-only for a hide/show DIV, perhaps?
• Relocate to upper-right (standard, more intuitively discoverable)
• Improve use of iconography to be more intuitive
• Languages should show in their native tongue (if they don't, already—cannot access demo version)

Add Error Handlers

• To create a nicely-formatted error page with helpful text on it
• Jen says it's a "significant Apache Config change"
• For something like an "Upload Fail," is a whole new page required vs a custom banner error?
• Custom error messaging important to instruct users who hit "walls"

Content scrub

• Icons
  • Eliminate as many as possible
    • Buttons should not have icons
    • Make consistent
• Messaging
• Screen text

Button states

• For usability an "Active" state would help, tremendously

Grid/layout scrub

To facilitate easier discovery of information/functionality for users; ensure actions, messaging, and instructive bits are all in the correct spots

• Eliminate the square-outline container around the majority of the UI?
• Make it more easy to scale/add functionality or content

Standardize styles across UI; craft a basic (GDocs or simpler) "Styleguide" to document all

• Messaging
• Typography (waaay too small, too tight, and typeface HelveticaNeu not optimal for legibility)
• Icons
• Colors (eg: no more than 2-3 greyish-blues, not 17)
  • Possibly update colors?

New default logo to ship

• Something that's clearer as an FPO "Needs to be replaced" logo
• To avoid newsrooms accidentally leaving the SD product logo in
• Acme something?

Codename things

• Make experience with codename clearer, more consistent, and more easily discoverable
  • Pair better on screen with "Log Out" button?

Multi-file upload

• Most obvious major UX improvement needed
• Yea or nay for 2019?
  • Would wireframes be useful for scoping, at least?

Help Pages

• Make access to help content (eg: updated Source Guide?) more discoverable
• Potentially include some contextual help?
• Eliminate use of the word "Source," which is journalist-jargon and not intuitive to most humans

Landing Page Template

• Why did we abandon the idea of coding a simple page to ship with installs, and giving orgs the option of using it or not?
  • News orgs and NGOs are too resource-strapped to either research or design their own; most have poorly designed (hierarchy of information) pages. That impacts usability for the most important of all things: SecureDrop's OpSec guide and basic "How To" for new users.
• Simple, simple design
  • Unclear page hierarchy, number one problem with most of today's pages; but not an urgently obvious problem for developers accustomed to looking at looong pages of documentation
  • Make page visually scan far more quickly than many of today's wall-o-text pages do
• Sub-page that could show all of an org's methods for communication, with why to use one over another, could be a great use of Training's extensive research and resources

[ninavizz]

For forthcoming user testing, note ideas in main SD repo labeled Goal: Improve Source Experience.

[ninavizz]

Discussed these things in UX Meeting 25 Apr & 02 May: https://docs.google.com/document/d/1toZmKi1Oyjy7UTXyj_U7lI3IPV8stQtjVhHVlWL5Ils/edit?usp=sharing

Then, Erik made this awesome draft: https://docs.google.com/document/d/1ft71JmAV8ZnNgqIprKvGW8v8BRCwQuj89QiOFTwC1uY/edit?usp=sharing

[ninavizz]

Agreed to items from 09 May UX meeting:

• Immediate(ish) to-do's
  • Update font-family throughout
  • <alt> tag text
  • May 15th code-freeze for 0.12.x likely too soon; earmarking for 0.13, below
  • Footer stuff as margin-time project
• Low-effort things that discussion did not get to, but Nina would like to nominate go in asap, too:
  • Unify H1, H2, and H3 styles
    • Just edit CSS to have the same size spec'd for all 3 to 25px
  • Update colors in CSS to establish brand-parity/credibility with securedrop.org
    • See Home and Submit screengrabs of Nina messing w/ CSS in Tor
    • A few things need to be resolved from above screengrabs, but imho they're a good start!

Suggested approach:

• 0.13 Release, include:
  • CSS-only edits
  • MINOR HTML page-level edits, such as alt-tags
  • Tor "fix" (updated banner text, possible interstitial—pending more feedback)
  • Stretch-goals: Updated footer, button icon removal(s), and icon swap-out for cloud-less img on Upload block. Possibly languages widget, too?
    • With Python3 upgrade, perhaps this is the time to upgrade release naming to a 1.0? @eloquence (cc'ing cat-herder before cats)?
• Footer stuff as margin-time project
  • See OG comment for notes, content reccs
  • "Learn More" page content, tbd
  • EZ PR for Erik to deploy in a subsequent release
  • Jen, others, yet to weigh in
• Next Priorities
  • Languages widget: move on Homepage to location standardized on other pages, clean-up
  • Tor messaging? Interstitial?
  • Bulk uploading?

[ninavizz]

06 June UX Meeting:

Proposed next-step priorities, after #4500, #4501-3 are all implemented:

• See Prototype for below proposed bits w/ below-screen pink-text design rationale(s)
• Implement stretch-goal items from #4500, if not already completed
  • "Active" state on Submit
  • Update all existing H1s, H2s, and H3s to be H1s @ 25px
  • Update link-underline styling as CSS bottom-border
• Update buttons on get codename page to Cancel/Continue
• Update text (buttons and H1s/body) on .index page for clarity
• Implement footer & TL;DR page
• Interdependent Submit page updates
  • Implement "Encryption Options" hide/show Div on Submit page
  • Update text (buttons and H1s/body) on Submit page for clarity
  • Move Get Codename widget (dependent on above-two happening, first)
  • Add outline to "No new replies" area (dependent on above three happening, first)
  • Eliminate framing-border for Page UI
• Update default-ship logo to something more generic for orgs who fail to customize

TBD

• Font things
• Improved Tor messaging
• Either multi-file upload, or improved sequential upload messaging

Feedback

come and offer some! :)

[ninavizz]

Closing, as 2021's SI Redesign meets the majority of these needs—and the lone need it does not meet the need for, I will be creating a separate ticket for.