Usability issues with new chrome extension layout

[catthou]

Type: feature request

I am using https everywhere chrome extension 2019.5.2.1 and I have two big usability concerns with it.

1. "Disable https everywhere on this site" should be a top-level menu item. I try to keep EASE on all the time and I need to disable https for specific sites more often than I like to admit. Right now it's a three-button pain to open (extension button -> See more -> Disable https everywhere on this site), and another three to enable it again when I'm done on the site. 6 total presses vs the 4 from the earlier version of the extension.

2. The "See more" and down arrow accompanying it need to have more clickable area. They're rather difficult to click on, and on top of that there's a gap of unclickable area between the text and the button image.

3. When encryption is disabled via "Disable https everywhere on this site" the chrome icon no longer turns red - it's just a bland, unnoticeable gray. This is disturbing as I like to be notified when a website is using unencrypted traffic. The red was easier to notice and didn't clash with my darker chrome theme, where was the bland gray is easy to miss, and I worry I might forget to turn it back on for that site when I'm done.

Edit: added third problem.

[zoracon]

Thank you for the early feedback.

For #3, the "Disable https everywhere on this site" was always gray, the red was actually for EASE mode. Which is apart of the reason we leaned away from that. Due to the fact "red" indicated a negative connotation.

[zoracon]

Yeah this is awful... Can we please get the old UI back @zoracon ?

If you could list specific features you do not like, that would be more helpful. If you generally don't like the UI at all, then not much can be helped there besides through constructive suggestion. This is from months of UX and UI work with the community that was publicly discussed here: #16669

[KyleSanderson]

@zoracon There's crazy whitespace... This makes the panel nearly completely 100% unusable, my ancient bank did similar years ago and they received so much pushback they had to restart (and compress the whitespace). Checkout PrivacyBadger (which still has a lot of whitespace... but is 300% better).

Please revert this immediately.

[jadchaar]

I agree with the suggestion that there is a bit too much white space and that things can be compressed. I think the HTTPS Everywhere logo at the top can be made smaller and centered.

Also, I think the "See more" for the EASE setting can be made into a tooltip with an "i" info icon that can be hovered for more info. Or add a small "Learn more" link that goes to a page that explains EASE.

Also, I think in the long run the version info and global settings like enabling EASE can be moved to a separate settings page like 1Password or uBlock. That would allow you guys to keep the popup functionality limited to per-site controls.

[KyleSanderson]

EASE to me is incredibly important to be easily accessible (and why I think it should remain in the drop-down menu). EASE breaks many many many many many sites, but when I'm road warrior-ing it up (36 weeks last year) this is toggled multiple times per individual session.

[geekley]

If you could list specific features you do not like, that would be more helpful.

I agree that too much vertical whitespace (in the wrong places), is not very good for extension popups, especially for my small laptop screen (and also for windows not maximized). I'm also noticing a lack of symmetry in the vertical spaces in each section (space before is bigger than after).
The size of icons and toggles that appear next to a text should match the font height, so it should be smaller, like 16 or 24 px, or you can increase font size a little for section headers.

In my opinion, the black line dividing sections is too black, that kinda clashes with the very light gray in the background of the top header. This makes it seem like the header applies to just the upper section, not everything. If the colors were swapped (to make header stand out) or the same (to make sections separators not stand out more than header) it would be better, I think.
Also the scroll bar is taking the whole area (including header), instead of just the part that should scroll.

Another thing: the font in buttons look the same as the font in section headers, even though buttons and sections are for different purposes. Making the font in buttons blue like the button border and smaller than section header font size would be better. And I think the padding whitespace is too big in buttons too, and a little too small in the top header (in relation to the rest of the page margin).

As a programmer (and not designer) it can be difficult to grasp those little things about UI, unless we keep paying attention to why our brain automatically associates visual properties (like sizes, colors, space, proximity, etc) of elements with their functionality. We use those visual clues to differentiate, associate and presume things, and most of the time we don't even notice it! 😄

[zoracon]

@KyleSanderson We are not reverting the UI at this time. I am currently documenting the feedback above and other tickets to iterate on a next release to follow up on this one. As stated above, this was heavily discussed in public forum, volunteers, and internal design. There's definitely some work and valid feedback to take in immediately, but no there will not be a full reversion.

[andresbase]

Just a reminder that we have a code of conduct and we strive to have respectful conversations to make this a welcoming place.

https://www.eff.org/pages/eppcode

[alex65536]

Just received an update and want to leave some feedback about the new UI:

1. Red icon for EASE visually better showed the difference between the normal and strict mode.
2. Space is used irrationally: the buttons have much white space, the fonts are too big. So I even need to scroll the content.
3. These "See more..." dropdowns to reach the site settings annoy me (especially in connection with New chrome extension reloads page unnecessarily #17866). To configure the website, I need to make many unnecessary clicks.

[catthou]

Now that everyone else has had the opportunity to chime in, let me throw in my own two-cents on a number of the ideas proposed. I like the new UI overall more than the old one. There are a few things that could be tweaked, but I consider it an improvement and I'm sure it'll be tidied up in no time.

Generally:
I think I agree the header could be different; smaller or centered or anything else. It just looks a little crooked right now.

I also don't like the black section dividers, and I think it's because the header doesn't have a divider from the toggle section. I think adding a black dividing line between the gray and white backgrounds would alleviate some of the unease.

Icon:
The blue background on the number "1" for how many active rules there are uses a different blue than every other part of the UI.

the "Disable https everywhere on this site" was always gray, the red was actually for EASE mode.

Ohhhh, that's what it was. In that case getting rid of it was a good idea. Red = scary. I think now that you're going with a padlock symbology, there's an opportunity to use locked vs unlocked to signify something.

Speaking of which, the shackle on the lock needs to be longer for it not look like a shopping bag!

Text:
I think I liked the idea of making each section header use a larger font (which would cut into the padding between header and description), more than the idea of simply eliminating the padding. To me the offputting thing is how tall the icons/switches are vs how small the text is. With smaller switches (like the privacy badger ones) a smaller font would be fine.

[geekley]

There is also a layout bug when EASE toggle is enabled. When you click the extension icon to open the popup, the toggle animates from off to on every time. (tested on Brave)

[cschanaj]

I am starting to think that maybe we should stick with a certain design system like the Firefox Photon Design System https://design.firefox.com/photon/visuals/grid.html to avoid certain usability issues. A more consistent and coherent design will certainly be useful, e.g. the grid system.

P.S. To avoid ambiguity, I am not saying that we need two separate "themes" to cope with the browser vendors' recommendation (#11813, #11983)

[zoracon]

I am starting to think that maybe we should stick with a certain design system like the Firefox Photon Design System https://design.firefox.com/photon/visuals/grid.html to avoid certain usability issues. A more consistent and coherent design will certainly be useful, e.g. the grid system.

P.S. To avoid ambiguity, I am not saying that we need two separate "themes" to cope with the browser vendors' recommendation (#11813, #11983)

For "stage 2" redesign we are actually working with a design lab that is gathering UX research and standards for a better menu. They brought up using Firefox's photon system. So that's not far fetched and being thought of at this moment. This "stage 1" design was based off of wireframes and discussion. So nothing is set in stone, it's experimenting what is best for a broad set of users and solidifying standards. I expected some dislike and likes. We are experimenting and obviously with that comes mistakes and lessons. But I have higher hopes for "stage 2". Which is planned for this summer.

[cschanaj]

Does the "stage 2" redesign includes the option pages? I do see some PRs working on those pages (#17882, #17896), it could save some of our contributors' time if we know that in advance.

P.S. Sorry for going off-topics 🤦‍♂️