Consistent navigation (UX)

[toast]

Consistent navigation (UX)

Description

Mockups for a more consistent navigation for the source interface (affects multiple pages). Creates a foundation for consistent rules for responsive web design.

Potential benefits:

• Follows a more commonly used pattern familiar to sources from other websites
• Allows for a consistent place to sign in / sign out (on mobile in particular)
• Moves the logo on the home page to a place where it doesn't compete visually with the two boxes; it currently looks like a 3rd option.
• Allows the logo to stay in one place, it currently moves around which distracts from the content.
• The logo could have a consistent destination. It currently takes you to different destinations depending on which page you're on. Note: If the intention is that there are two parts to the journey (signed in and a home/welcome area), then it may make sense to make the home/welcome area more visually different from the signed in area perhaps by: inverting the background colour on the navigation bar; or not having a navigation bar on the home/welcome pages just a large dropbox logo in the top center vs. a side navigation when signed in.

Design screens

Note that for the desktop designs the canvas size is the default for Tor browser on Mac OS.

Option 1; left navigation

This option makes better use of the natural size of the Tor browser window and is closer to the current design.

Desktop

Animated gif of 3 pages:
https://imgur.com/CA5llAS

Home page screenshot:

Mobile

Option 2; top navigation

This option creates more whitespace (to the left and right of the content area) which can increase comprehension UX Planet: The power of whitespace, but it further restricts the vertical space of the default TB window, pushing some buttons below the fold.

Desktop

Animated gif of 3 pages:
https://imgur.com/a/ezstA

Home page screenshot:

Mobile

[ghost]

One important addition to the current interface is the menu to switch from one language to another. You can see how it currently looks like at http://source.i18n.securedrop.club/. Also note that I did this and I'm fully aware this does not look too good. Internationalization will be part of the next release and I'm eager to help implement a better layout.

[heartsucker]

Oh man, this is super exciting to see. We've definitely been in need of some design oversight, because really, I should not be allowed to make all the UX decisions I keep making. I'm seconding @dachary's concerns about i18n, especially with RTL languages (and short "word" language like Chinese, and long word languages like German).

That said, I think our navigation story is definitely a good place to start. If you want to enable translations locally for testing, you can do this:

cd ${SECURE_DROP_ROOT}/securedrop
echo 'SUPPORTED_LOCALES = ["en_US", "ar", "de_DE", "nb_NO", "fr_FR"]' >> config.py
for lang in ar de_DE nb_NO fr_FR; do
    mkdir -p translations/${lang}/LC_MESSAGES
    curl http://lab.securedrop.club/bot/securedrop/raw/i18n/securedrop/translations/${lang}/LC_MESSAGES/messages.po > translations/${lang}/LC_MESSAGES/messages.po
done
./manage.py --verbose translate --compile

Then play around with the HTML / CSS, and as long as you don't change strings inside gettext (or similar) wrappers, you'll be able to see everything.

[heartsucker]

One more note (post-lunch thoughts). Orgs can customize their header logo, so they won't always see the SecureDropCube and/or SecureDrop text. You can visit the pages found on the directory to see what the logos look like a snag a few for testing.

[toast]

Thanks, good points on the internationalization; length of German for nav items and swapping order to put the menu on the right on RTL, I'll keep these front of mind.

I've created a separate issue with mockups for a suggestion around the language switching: #2557 - 'i8n language menu'

[huertanix]

I'm leaning towards the top nav layout.

[eloquence]

The Source UI has changed very significantly since this issue was opened, but leaving open for now because the ideas for a better responsive layout are still worth considering. @toast if you do have time to revisit this, it would be useful to get your thoughts in the context of the current UI. Otherwise, will discuss with @ninavizz and others in future.