New user installation

[luciewho]

My experience installing I2P on Mac.

[luciewho]

Downloading

Can’t open file when double clicking download because Mac doesn’t recognize developer, could have malware

The information on the post-install page is not relevant to Mac (mentioned previously on the UX research by Simply Secure), there are Windows screenshots? Lots of jargon too. Not sure how much of the content needs to be geared towards developers vs non-technical people.

I tried right-clicking, use JavaLauncher to open but still error message. Have to download Java from java.com?

Sadie’s Mac installation guide was useful and broke it down easily. I followed the steps and downloaded Java.

I2P opened up in Safari (default browser) for me. I switched over to Firefox when I installed the I2P privacy add-on.

[Shoalsteed]

-let's make a list of the jargon so that it can be replaced.

-the Post Install instructions are on schedule to be updated after our UX work this year. It has been a big trouble part of the download process for sure and needs an update.

-Are there any steps that were not in the guide that I created? Would it have been helpful for the guide to be included on the site?

[Shoalsteed]

For Post Install, the proposed changes:

Create a simple Welcome page with an overview of the download process ( jpackage dependent) From here provide links to: Install Guide Set Up A browser Troubleshooting FAQ Outproxies Advanced Connection Options ( NAT ) ALL of the links above should be easy to find in our Getting Started Menu in the dropdown was well, so provide a link to the Getting Stared menu as well since the person will not be returning to the Post Install page.

[luciewho]

Mac Installation Guide https://i2p.medium.com/guides-workflow-the-mac-install-270845b436a2

The guide should definitely be on the website, post-installation page. It is super helpful.

The emojis make it more engaging and feels accessible, like your hand is being held as you walk through the process, which I really like.

The explanations behind why the error messages pop up when you try to click to download also helps build understanding and trust. Knowing that it is part of the download process makes me feel better! Before seeing the guide, I was confused and lost.

When I dragged I2P into my dock, it automatically opened up in Safari for me and I clicked around. It seemed like having the privacy add-on was important. Not a very smooth transition, but I opened up Firefox and then followed the steps to download the add-on.

No steps seemed to be missing in the guide, all the screenshots matched for me. Nitpicking here, but the one thing that could be improved would be to have a step right before "Do a search for I2P in Private Browsing Mode:" and specify go to "about:addons" in the browser. The URL in the screenshot is small.

I am comfortable with using Firefox, but wonder if there needs to be a step for other browsers like Chrome, etc. Do they have an add-on to download?

A follow-up "Getting Started" guide that links at the bottom could be useful. After installing I2P I wanted to visit websites and play around, but was not sure where to start. The websites I tried visiting didn't load.

[Shoalsteed]

The add-on is Firefox specific, and due to its privacy properties, we suggest using Firefox. Configuring your browser is a bit of configuration, and the add-on was made to make that process easier, but it also has additional security and privacy features that are quite nice.

Making a more clear message about using Firefox should be added to our instructions I think, and I should make a note for Mac users that the console will open in Safari or the default browser otherwise. The nice thing is that since it is local host, as long as you copy paste the console URL into any browser it will show up.

The Getting Started Guide is an excellent idea. It also gives us an opportunity to talk about privacy and use cases and using I2P apps in your workflow. I am going to start on that tomorrow.

As far as the sites not loading - that can be a router integration issue. It can take some time to connect with network.

Once you have peers, it should work. If you are using the I2P In Private Browsing, that should just work out of the box as well.

Here is are my connection stats in the side bar, and when I opened the dev forum in a new browser tab by right clicking, the site loaded. I have pretty bad connection sometimes!

[luciewho]

There is the Firefox privacy add-on that is in the guide, but there is also this Browser Configuration step on the post-install page that has you go into Network Settings. Should this be a part of the guide? What does the browser configuration do and how does it compare to the privacy add-on? The configuration step feels a little disjointed and maybe can be incorporated into the guide when it's on the website.

The screenshot on the post-install page did not match my screen, so I had to guess at what to put in for the SSL proxy. There wasn't a text explanation about putting something in the "No Proxy for" section, so I copied the screenshot.

I wasn't sure if the configuration was why I couldn't access websites, but it still doesn't work after configuring the browser. I do have peers and zzz.i2p works for me! but sites from the Guide to Services http://pastebin.com/xWzw10wW (from r/i2p) keep sending me to a page that says "Website Not Found in Addressbook"

[Shoalsteed]

For browser Config, I think that part of the issue is that info layout. it is not easy to see where something begins or ends. Additionally, visual cues for recognition of browser and adding screenshots for where something may look different between OS's could improve this process. I have opened a new issue https://github.com/Shoalsteed/UX/issues/16

[luciewho]

Jargon

When I click the "Get I2P" button or "Download" on the homepage, I am brought directly to the Mac download section, so I don't see the "Getting Started / Basic Steps" paragraphs above. I am just now seeing that I have to install Java and "Install/Configure a Browser(Optional)." Seems like the browser config is optional?

For the Mac download, my eyes glaze over the text underneath the green button. I don't understand terminal or command line install so I ignore all of that. I just click on the green button.

The text right underneath the green button could be simplified a little (seeing "java -jar i2pinstall_0.9.50.jar" immediately turns me off) and added to the post-install / steps in the guide Sadie made on Medium.

For the command line install – do developers want the information on command line install? It would be nice if this information were tucked away somehow so that non-technical users are not intimidated. But could also be accessible for developers. Like a "For developers" section.

[luciewho]

Jargon

These buttons and text don't seem to be essential to downloading the file, but they look jargon-y and adds to the complexity on the page. What do they do and are they necessary?

[Shoalsteed]

Jargon

These buttons and text don't seem to be essential to downloading the file, but they look jargon-y and adds to the complexity on the page. What do they do and are they necessary?

I agree, and this is a tough one. These are trust indicators and mirrors for downloads for people who may have issues. I need to find the better explanatin for you and add it.

[luciewho]

Jargon

Mentioned on issue #9, Pick Your I2P Bundle. Makes it sound like there is a lot more to the download process, like more things to pick out and download. The revised text on issue #18 fixes this.

[Shoalsteed]

Jargon

When I click the "Get I2P" button or "Download" on the homepage, I am brought directly to the Mac download section, so I don't see the "Getting Started / Basic Steps" paragraphs above. I am just now seeing that I have to install Java and "Install/Configure a Browser(Optional)." Seems like the browser config is optional?

For the Mac download, my eyes glaze over the text underneath the green button. I don't understand terminal or command line install so I ignore all of that. I just click on the green button.

The text right underneath the green button could be simplified a little (seeing "java -jar i2pinstall_0.9.50.jar" immediately turns me off) and added to the post-install / steps in the guide Sadie made on Medium.

For the command line install – do developers want the information on command line install? It would be nice if this information were tucked away somehow so that non-technical users are not intimidated. But could also be accessible for developers. Like a "For developers" section.

I totally agree regarding the terminal and other instruction here. Additionally "Download" should be on the button. Regarding the OS detection that bypasses the preamble at the top of the page that needs to be fixed with links beneath each download option to set up guides, FAQ, etc.

[luciewho]

Made this to help me think through the installation process/flow. I broke down each page or section (based on header title) into its own piece.

How can the pieces be best arranged or organized to create an ideal flow?

3 versions of the installation process. I didn't know where to add "Post-Install Work" and "Firefox for Windows." I think those could be consolidated with a different section?

Not sure if Firefox add-on from the installation guide and Browser Configuration can also be lumped together.

[luciewho]

@Shoalsteed is there a particular flow that you think works best or maybe none of the above? Will we need to figure out the IA first?

[Shoalsteed]

@luciewho I think V1 is best.

The Post Install will become more of a junction for providing info for Installation work and troubleshooting. That should probably be in the form of links rather than text on that page.

The Firefox and chrome add ons will be on the Browser Configuration page together with the manual configuration options by browser type.

[Shoalsteed]

This is what the Browser Config page will look like

[Shoalsteed]

What would be good to do is consider what info should be visible on the Post install page, and how that would look. And then update the pages we are sending people too as we go as well =)

[luciewho]

@luciewho I think V1 is best.

The Post Install will become more of a junction for providing info for Installation work and troubleshooting. That should probably be in the form of links rather than text on that page.

The Firefox and chrome add ons will be on the Browser Configuration page together with the manual configuration options by browser type.

Got it. So it would auto-direct to post-install like it currently does. But all the information would be replaced with links to Installation Guide, Browser Configuration, etc. Is that right?

I will think through it some more and put together a wireframe to get your feedback on.

[luciewho]

This is what I have in my mind for the installation flow, kind of like an IA of the download/install process. Getting Started page for an overview of the basic steps like on here: https://aws.amazon.com/ec2/getting-started/

It essentially replaces the Basic Steps text on the download page (since that part isn't seen when there's OS detection). What is now the post-install page will also have links to the following steps.

The Getting Started page is bypassed when you click directly on the Download button on the homepage, which will take you directly to the download page.

[Shoalsteed]

The basic steps is null because of the OS detection, so yes, download - post download page with links - install instructions, browser config ( Firefox add on does not need to be sep, it is an option) explore software / how to use I2P software

[Shoalsteed]

since it is important to set expectations, I feel like the mention about I2P being a multi step process should be added here

[luciewho]

Wireframes for the Download, Installation, and Post-Install pages. Orange circle = what the user would click on. Blue circles are my comments/thoughts.

Installation Wireframe.pdf

[Shoalsteed]

I am pretty sure that this need to stay in place for people to choose their language option.

[Shoalsteed]

I think that it being off to the side is confusing - it draws the eye away from the task.

[luciewho]

I am pretty sure that this need to stay in place for people to choose their language option.

I made that comment because I thought it looked like Language was a Header title for those shared key boxes. I don't think it's a big deal though. Low priority if we did want to makes changes.

[Shoalsteed]

Buttons work, the colour needs to change because green in a download signal.

[luciewho]

since it is important to set expectations, I feel like the mention about I2P being a multi step process should be added here

I will think on how this might look and share something later.

[Shoalsteed]

I think the prompt to download Java needs to be either included in the Download box info or yes, for sure on the post - install page.

[Shoalsteed]

this was already done

[Shoalsteed]

Post Install Work should not be here ( I never liked the way that sounded either!) And yes, download I2P can be removed too

[luciewho]

Post Install Work should not be here ( I never liked the way that sounded either!)

Do you mean like that page (which has instructions for browser config, Firefox add-on) should just be at the bottom of the page when the user has completed all the Instructions?

Not sure if it being called Post-Install is confusing. (Not to be confused with Post-Download)

[Shoalsteed]

For Java -

the instruction for android & Debian that is in the basic steps should be part of that download info

[Shoalsteed]

Post Install Work should not be here ( I never liked the way that sounded either!)

Do you mean like that page (which has instructions for browser config, Firefox add-on) should just be at the bottom of the page when the user has completed all the Instructions?

Not sure if it being called Post-Install is confusing. (Not to be confused with Post-Download)

I was thinking more that the Post Install/ download page would provide a link to this index but have no more importance so it may not need to be in the menu. Like , is it a page that people ever go back too.

[Shoalsteed]

Maybe Post Install Work should be renamed " Configuring Your I2P Network Connections" this way we can include Browser, out proxy, NAT?

[Shoalsteed]

I think that aside from a few tricky spots - mostly trying to move the preamble on the download page, this looks pretty good to me!

[luciewho]

I was thinking more that the Post Install/ download page would provide a link to this index but have no more importance so it may not need to be in the menu. Like , is it a page that people ever go back too.

I get what you're saying. I was wondering whether someone that goes to the instructions page will actually go through the whole thing. Or if someone downloads I2P but doesn't complete the installation process in one sitting. In that case, maybe there should be a link somewhere (other than towards the bottom of the instructions) for someone to access certain pages at a later time.

I imagine the Getting Started page will have all those links and basics steps, but will a user know to go there for all the links? The post-download page only appears if you click the download button. Should that page be on the main menu then?

[Shoalsteed]

That is a good point - considering where people might hop off the workflow or just get interrupted . I have been leaning to all of that info being available in the main menu. And also, maybe having a card on the landing page as well called New User Guide that links to the info?

[luciewho]

Sorry if I missed this somewhere, but what do you think about this section? I put it on the post-download/install page in the wireframe. On the website, it's in the OS boxes. Would it work better on the Installation Instructions page for the corresponding OS?

Or should I put a link to it like this on the post-download/install page?

[Shoalsteed]

Sorry if I missed this somewhere, but what do you think about this section? I put it on the post-download/install page in the wireframe. On the website, it's in the OS boxes. Would it work better on the Installation Instructions page for the corresponding OS?

Or should I put a link to it like this on the post-download/install page?

I think that the comment about the GUI seems confusing to me and always has been! I never understood it, and I wonder if it should even stay in this place or be incorporated into the install guides.

I like the second option that you made with links below the buttons for the headless install!

[luciewho]

Okay, I will keep it there for now and we can change it later!

Here is the revised version of the install process wireframes.

Installation Wireframe.pdf

[Shoalsteed]

Regarding the Configuring Your I2P Network Connections Page question , I am wondering if we can nest the info on that page a bit better, or have links to pages by browser?

Otherwise the the wireframe looks great!

[luciewho]

Yeah, reducing the text by linking to separate pages for each browser would be good. I'll incorporate that into the wireframe.

[luciewho]

Installation Wireframe.pdf

Made a few adjustments to the last two pages.

1. I added a header that specified what OS the installation instructions are for on the Instructions page.

2. On the last page, Configuration, I cut out the browser config steps to link to separate pages for each browser. I added a "Next: How to Use I2P" link at the bottom. I imagine that the bottom of the Instructions page would have something similar like "Next: Configure Your I2P Connections"

I think that flow of basic steps of Download > Install > Configure > How to Use is pretty essential and I wonder if the pages take the user through that pretty obviously and seamlessly.

If the user clicks on browser configuration for Chrome for example, do they know they can can explore How to Use I2P? Also, on the Installation Instructions page, do they know Configuration is next and will they scroll all the way to the bottom and see that?

[Shoalsteed]

Instead of calling it "How To Use I2P" - it might make more sense to call it "How to use the I2P software" - I say this because conflating "I2P" - it becomes an enormous thing to think about unless we limit it to software. Otherwise, we end up needing to think about the network in its entirety.

I think that the steps are clear - and it will be more clear with these changes!

The menu : should it match flow ? (Download > Install > Configure > How to Use): Download, Install, configure browser, explore I2P Software , troubleshooting ? Maybe we do not need set up wizard and conclusion in there?

[luciewho]

Makes sense, I will add "software" after I2P.

This is how I was thinking about the flow. Download > Install > Configure > How To Use is the overarching flow (similar to what the Getting Started page shows) but there are lots of subcategories underneath. I don't know if Install and Configure Browser can share a sidebar menu because it's a lot of content and the user has to pick among different OS and browsers.

I sketched it out to help visualize it. It's basically the 4 basic steps. I think it would help to do some usability tests to see if it makes sense for a new user.

[Shoalsteed]

sure - how would you suggest that we test this?

[luciewho]

I don't think it's persona-specific, just testing the UI and flow. So I was thinking about just asking some people around me do some quick tests in person or online. Afterwards, I'll put together a write up with suggestions for changes based on the usability tests!

[Shoalsteed]

sounds good to me!

[luciewho]

Here is the write-up for the usability tests with quotes and more detailed info: Usability Findings - Installation.pdf

Here is the set of wireframes I used for the tests: Installation Usability.pdf

SUMMARY OF KEY FINDINGS

• Make homepage green button go straight to Getting Started page instead of Download page. Change the call-to-action text to match, i.e., 'Get Started with I2P'
• Improve the Getting Started page and text/links in the cards.
• Downloading Java needs to be much more obvious. Put bigger download link and icon for Mac, Windows, Linux download boxes.
• Both users were confused by Firefox Privacy Add-On and Firefox Browser Configuration. Change this.
• Both users were confused by Install Wizard screenshots and the numbers 1 2 3 4 5 6. Change this.
• Both users did not like the Installation Instruction's beginning steps. “So it makes you experience an error in order to solve it and download Java?” “Show the preferred way to install, not a teaching moment.”
• Improve installation steps by adding numbers for each step and making it more obvious which screenshot corresponds to which step/paragraph of text.
• Continue improving the overall flow. Remove extraneous links, reduce number of new pages/links user has to open. Make the progress more obvious to match Getting Started. Keep the user from feeling lost. Reduce unessential information.

[luciewho]

Updated wireframes with comments on what was changed in orange circles.

Installation Wireframe v2.pdf