New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UX Audit and Recommendations #16669

Open
glenn-sorrentino opened this Issue Oct 2, 2018 · 8 comments

Comments

Projects
None yet
6 participants
@glenn-sorrentino

glenn-sorrentino commented Oct 2, 2018

Type: other

Hi everyone, I'm Glenn. I've contributed UX and visual design to Signal, Haven, and OnionShare in the past, and I put together a UX audit and design recommendations for HTTPS Everywhere. I'd love your thoughts and feedback...

The Problem - UX Hypothesis
The functionality within the extension panel uses mixed metaphors for the UI and inconsistent hierarchical groupings of functionality which can lead to confusion and frustration for users and create barriers to interaction or adoption.

The Problem - Visual Hypothesis
With the evolving UX of the competitive landscape, the design language and UI of HTTPS Everywhere has become dated.

The Opportunity
By creating hierarchical groupings of functionality and by using appropriate controls in the UI, we can create a highly usable and beautiful user experience.

Download updated UX audit

https everywhere ux 19

https everywhere ux 1

https everywhere ux 2

https everywhere ux 3

https everywhere ux 4

https everywhere ux 5

https everywhere ux 6

https everywhere ux 7

https everywhere ux 8

https everywhere ux 9

https everywhere ux 10

https everywhere ux 11

https everywhere ux 12

https everywhere ux 13

https everywhere ux 14

https everywhere ux 15

https everywhere ux 16

https everywhere ux 17

https everywhere ux 18

@Hainish

This comment has been minimized.

Show comment
Hide comment
@Hainish

Hainish Oct 3, 2018

Member

@glenn-sorrentino Thanks so much for putting this together. I will have time to review it hopefully either tomorrow or the next day. This is truly awesome work.

Member

Hainish commented Oct 3, 2018

@glenn-sorrentino Thanks so much for putting this together. I will have time to review it hopefully either tomorrow or the next day. This is truly awesome work.

@cschanaj

This comment has been minimized.

Show comment
Hide comment
@cschanaj

cschanaj Oct 3, 2018

Contributor

@glenn-sorrentino thanks for the great works!! It would be great to see the recommended changes happening. Just a few things I would like to add for discussions

  • For certain sites, e.g. marketwatch.com, the UX shows a long list of 40+ active rulesets (with uBlock disabled). This sometimes render the UX less usable and overwhelming.
  • The option page, Chromium/ Firefox (Tools > Add-ons > (HTTPS Everywhere) Preference) is hardly visible to less tech-savvy users. To me, this hides many useful features from the users.

P.S. "Reset to defaults" will clear the ruleset states (active or not) globally, it should be a "Global & contextual options", a button perhaps (!?)

Contributor

cschanaj commented Oct 3, 2018

@glenn-sorrentino thanks for the great works!! It would be great to see the recommended changes happening. Just a few things I would like to add for discussions

  • For certain sites, e.g. marketwatch.com, the UX shows a long list of 40+ active rulesets (with uBlock disabled). This sometimes render the UX less usable and overwhelming.
  • The option page, Chromium/ Firefox (Tools > Add-ons > (HTTPS Everywhere) Preference) is hardly visible to less tech-savvy users. To me, this hides many useful features from the users.

P.S. "Reset to defaults" will clear the ruleset states (active or not) globally, it should be a "Global & contextual options", a button perhaps (!?)

@glenn-sorrentino

This comment has been minimized.

Show comment
Hide comment
@glenn-sorrentino

glenn-sorrentino Oct 3, 2018

@Hainish My pleasure. I just updated the document with @cschanaj's suggestions.

@cschanaj - I added an accordion section for the URLs so that the use case you suggested is covered. I also added a section-by-section "Reset" so that it gives more flexibility to the user. Also good suggestion about how deep the other settings are - I added a "Settings" link in the last section of the menu!

updated-menu

glenn-sorrentino commented Oct 3, 2018

@Hainish My pleasure. I just updated the document with @cschanaj's suggestions.

@cschanaj - I added an accordion section for the URLs so that the use case you suggested is covered. I also added a section-by-section "Reset" so that it gives more flexibility to the user. Also good suggestion about how deep the other settings are - I added a "Settings" link in the last section of the menu!

updated-menu

@zoracon

This comment has been minimized.

Show comment
Hide comment
@zoracon

zoracon Oct 3, 2018

Contributor

@glenn-sorrentino Just echoing @Hainish here but this is a great contribution! I was wondering what were your thoughts on the new "Disable HTTPS Everywhere on this site" feature. Do you picture a toggle would work for that as well?

Contributor

zoracon commented Oct 3, 2018

@glenn-sorrentino Just echoing @Hainish here but this is a great contribution! I was wondering what were your thoughts on the new "Disable HTTPS Everywhere on this site" feature. Do you picture a toggle would work for that as well?

@zoracon zoracon added the enhancement label Oct 3, 2018

@glenn-sorrentino

This comment has been minimized.

Show comment
Hide comment
@glenn-sorrentino

glenn-sorrentino Oct 3, 2018

@zoracon I have a toggle for that functionality, but the label is "Enable for this site" so that the user is turning off something that's on - I think it might be confusing to say "disable for this site" to turn on the off mode... make sense?

glenn-sorrentino commented Oct 3, 2018

@zoracon I have a toggle for that functionality, but the label is "Enable for this site" so that the user is turning off something that's on - I think it might be confusing to say "disable for this site" to turn on the off mode... make sense?

@zoracon

This comment has been minimized.

Show comment
Hide comment
@zoracon

zoracon Oct 3, 2018

Contributor

@zoracon I have a toggle for that functionality, but the label is "Enable for this site" so that the user is turning off something that's on - I think it might be confusing to say "disable for this site" to turn on the off mode... make sense?
Ah I missed that in the doc. Makes sense to me! Thank you!

Contributor

zoracon commented Oct 3, 2018

@zoracon I have a toggle for that functionality, but the label is "Enable for this site" so that the user is turning off something that's on - I think it might be confusing to say "disable for this site" to turn on the off mode... make sense?
Ah I missed that in the doc. Makes sense to me! Thank you!

@BenBE

This comment has been minimized.

Show comment
Hide comment
@BenBE

BenBE Oct 4, 2018

I'd prefer the options (Block unencrypted traffic) to also use a toggle for more consistency.

Also what about aligning the labels next to the toggles and the checkboxes, avoiding the step currently introduced by those elements being of different width.

BenBE commented Oct 4, 2018

I'd prefer the options (Block unencrypted traffic) to also use a toggle for more consistency.

Also what about aligning the labels next to the toggles and the checkboxes, avoiding the step currently introduced by those elements being of different width.

@glenn-sorrentino

This comment has been minimized.

Show comment
Hide comment
@glenn-sorrentino

glenn-sorrentino Oct 4, 2018

glenn-sorrentino commented Oct 4, 2018

@Bisaloo Bisaloo added the ui label Oct 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment