Suggested (small) change for EFF’s HTTPS Everywhere UI

The EFF ((Electronic Frontier Foundation)) and the Tor Project ((Tor Project)) have developed a very useful add-on for web browsers, called HTTPS Everywhere ((HTTPS Everywhere on eff.org)).

What is HTTPS Everywhere and what does it do?

It is a web browser (Firefox, Chrome, and Opera) extension that encrypts your communications with many major websites, making your browsing more secure ((Description of HTTPS Everywhere on eff.org)). Using HTTPS with websites, your Internet usage is much safer.

HTTPS Everywhere works as follows:

1. a user types “HTTP://www.hsbc.co.uk” into their browser address bar
2. HTTPS Everywhere automatically checks if it knows of a HTTPS addres for this site (This comes from a list it has verified)
3. if there is a secure site available it redirects the users traffic to it
4. the users Internet usage is now secure and private
5. if there is not a secure site available, then it allows the user to continue to the insecure site

HTTPS Everywhere advanced options: SSL Observatory

HTTPS Everywhere has a “decentralized SSL Observatory”. This detects and warns users about security vulnerabilities, such as fake HTTPS security as the users browses the Web. It is available in the preferences.

Current SSL Observatory interface

Currently the advanced options look like this:

I think these advanced options are slightly confusing, in terms of how the user interface is layed out.

There are two options with explanations:
1. Submit and check certificates signed by non-standard root CAs
2. Submit and check certificates for non-public DNS names

Each have a check box as shown. The current UI shows the explanation outside the boundary of each option.

This can lead to confusion for the user as s/he may not see the association between the explanation and the option.

Suggested SSL Observatory interface

A better way to represent this would be to reverse the order and weight of the option and the explanation, and bound them inside the option box as shown below.

Displaying it like this communicates that the explantion and the checkbox are connected. The explanation is also in smaller font, as it is secondary, the text at the checkbox is the action.

Without the action, the explanation is misleading.

I have also changed the wording of the second explanation to explain the meaning of “secret” – secret in this case means, inside a company, uknown to the public.

I hope that’s helpful. Any feedback, please leave it in the comments.

[Update] I made a mistake: HTTPS Everywhere is configured with a list of verified HTTPS addresses for websites. SC (in the comments) very quickly picked me up on it. Thanks.