The latest release implements many substantial UX updates and a branding overhaul.

Earlier this year the I2P UX Lab reviewed the I2P In Private Browsing Mode (I2PIPB) extension. A second review of workflow improvements have been implemented in the latest release.

Prior to the creation of I2PIPB, I2P network participants would need to manually configure a preferred browser to access sites and services on the I2P network. After going through the installer, this would be part of a very long installation and configuration process.

Thankfully the I2P software install workflow has been simplified, and with I2PIPB, so has browser configuration. The latest Easy Installer for Windows bundles the extension, for an even more streamlined onboarding experience.

About I2P in Private Browsing Mode

This is an webextension which introduces a set of new “Private Browsing” modes to Firefox-based browsers(Supporting webextensions, must be current ESR or greater) that makes it easier to configure a browser to use I2P securely and adds features for making I2P applications easier to use. It does this by isolating I2P-specific settings to Contextual Identities within Firefox, then loading them automatically when the user requests them. It also adds convenience and management features, like an embedded I2P console and Bittorrent integration with clients using the transmission-rpc API and via in-browser protocol handling integrations. https://github.com/eyedeekay/I2P-in-Private-Browsing-Mode-Firefox

I2PIPB not only makes browsing easier, it also allows access to your I2P router, I2P email, BitTorrent client, and the Hidden Service Manager. It uses Contextual Identities, also known as Containers/ container tabs, to isolate I2P actions, meaning what happens in a tab, stays in a tab. Session logs and advertising tracking are both contained by tab ( container ), and use their own part of the browser’s storage.

Workflow and UX Changes

In the review of the I2P in Private Browsing Mode Extension, the overall look and feel, and workflow was assessed. New CSS was applied, a new colour palette, and new brand assets created as well an infographics and a minimal style guide. Below are some of the detailed issues and solutions that have been implemented in the latest release.

BrowserAction: Text Workflow

Issue: In this section the “Home Page” linked to the Extension Page, but it looks like it should link to the service that is being used to query .i2p sites. In fact, as a user, if I see that in the search field that something other that the extension is handling my search, I may want to acquaint myself with the service. This is important to establishing trust and also allowing a person the option to learn about what they are using.

Solution: Add “Legwork” where “Home Page” is since this is about establishing a relationship with the search service being used.

Issue: If I enter a random search topic in the search box, I get to the I2P addressbook where I conclude my journey because that topic is not in an addressbook. I am not actually browsing, but in the UI it looks like this is what I am allowed to do. This is confusing, and so I wonder if I can actually browse in a way that is familiar, or if something is not working or needs configuration.

Proposal: If there is extra configuration that needs to happen for this workflow, can instruction be included in the Browser is Ready To Use I2P text?

ie “You will need to add the address for Legwork.i2p to your addressbook to use the search feature. The key is is (……….) . Add it here (http://127.0.0.1:7657/dns) ( then advise if refresh is needed or other).

Issue: The Proxy Ready indicator did not work. The text tells me that I can access I2P sites, but the green UI element appears and disappears? I can still get to an I2P network site:

Solution: Fix this element.

BrowserAction: Applications Section

Issue: Since using this extension, I feel like I am always losing my way to /home on my router console.
That is a me thing maybe, but, I like to see it or access it quickly.

Solution: Since this section is about connecting to your I2P Java applications, instead of linking to the home page of the router extension,
(Help Page) — could this link to /home?

Issue: In the section where the text says “ These applications work with I2P….” Give more direct reasoning about why these options are here and how they benefit from interacting with containers.

Solution: Change this too: This extension allows direct access to the following applications in your I2P Java router. To enable this feature, ….do this …..the benefit is this).

Issue: In the sections for the applications that the extension links to, the names of the applications should be used in the descriptions. My thoughts were familiarity — if a person is familiar with using Snark, for instance, they should see that in the BitTorrent reference. Also, the extension is optimized to work best with the Java software, so it makes sense to pattern match to what a person is used to seeing.

Solution: Change copy to pattern match and describe the function to the actual application it is linking too.

BrowserAction: Control

Issue: “Create” is not a word everyone associates with opening a tab. Instead the actual action that happens should be used. Opening / or New are words that are used more often in this action.

Solution: “Create” to > “New I2P Browser Tab” to describe the action more accurately.
“Close All” to > Close All I2P Browser Tabs

BrowserAction: Torrent Download/Controls

Issue: Clicked on “Download”
Nothing happens when I click web UI.
Nothing happens when I try too search.

Fixed:

Extension Page: Onboarding Section

Issue: In this section of the extension page, the information is presented as the I2P protocol / network. We can assume that the people using this extension already know what I2P is. Therefore information that relates to the description of the product / extension that they are using should be present here.

Solution: Change the title to “About I2P in Private Browsing Mode” and provide succinct directions and descriptions for how the extension works and its benefits.

Extension Page: Links Section

Issue: The title is just “Links” — it should describe the resources that are being linked to.

Solution: Change title to “Extension and I2P Resources” and title and describe them clearly.

Extension Page: Content (Top Section)

Issue: The proxy ready indicator is not present.

Solution: Fix it or remove it.

Issue: If proxy status is going to be shown here, should a browsing option be here?

Solution: Add browsing query option.

Issue: Extension will have a branding overhaul.

Solution: Add new logo and tagline.

New UI elements , new Logo

The new logo combines the dots / circle patterns of the I2P logo. It also brings in the green and blues present in the light theme and logo for I2P Java. A fox was used for the Firefox association, and a second half circle added to convey the idea of a container. The overlapping colours is meant to represent the idea of safety or a tunnel.

Utility Infographic

Thanks for reading,