search

Shoalsteed / UX

UX Overview March 5
0 stars 0 forks source link

New user installation #14

Closed luciewho closed 2 years ago

luciewho commented 3 years ago

My experience installing I2P on Mac.

Shoalsteed commented 3 years ago

Both users were confused by Firefox Privacy Add-On and Firefox Browser Configuration. Change this.

This is tricky fro a few reasons. The big reason is that the Firefox add on is both an easier to use option and has added security features, but we wish it had more testing. So for this reason, we want to show it as an option.

For the Mac install guide, this was a Medium post and and NOT the install guide that is prepped on the test site. It was a teaching moment, and a way to show mistakes.

The point about changing the call to action is a good one. Getting Started seems a good alternative

Overall, I think that this feedback really addresses my goal towards better setting a users expectations and cutting out jargon.

luciewho commented 3 years ago

Is the Privacy Add-On a potential alternative to the Browser configuration? What does it do that is different from the browser config?

Shoalsteed commented 3 years ago

Is the Privacy Add-On a potential alternative to the Browser configuration? What does it do that is different from the browser config?

Yes, it is the "just works" option for configuring the browser

Shoalsteed commented 3 years ago

Screen Shot 2021-08-05 at 12 20 36 PM

These are on the Download page now, but they will and are being missed with OS detection Not sure if we only display on the landing page as news instead?

Shoalsteed commented 3 years ago

Screen Shot 2021-08-05 at 12 23 13 PM

where should these fit in?

luciewho commented 3 years ago

Yes, it is the "just works" option for configuring the browser

sorry, what is that?

These are on the Download page now, but they will and are being missed with OS detection Not sure if we only display on the landing page as news instead?

That sounds like a good place for them for now!

Shoalsteed commented 3 years ago

Yes, it is the "just works" option for configuring the browser

sorry, what is that?

The Firefox Add On removes the need to manually configure your browser

luciewho commented 3 years ago

Screen Shot 2021-08-05 at 12 23 13 PM

where should these fit in?

That should be towards the bottom of the download page below all the various OS boxes. I didn't build out the entire page yet but I will. I'm not familiar with all the sections on that page but would some of the sections work better on a different page, since they aren't an operating system? like Source Package, Automatic Updates, Manual Updates

Screen Shot 2021-08-05 at 9 27 23 AM

Shoalsteed commented 3 years ago

That is a good question. I feel like they would do better on their own page, and if we wanted to include the new release notes here as well we could.

luciewho commented 3 years ago

Maybe some sort of page dedicated to and called Updates.

Where does Source Package fit in?

Shoalsteed commented 3 years ago

Good question - I feel like it can stay on a page with manual updates, but not sure if it could be on a page with advanced topics? A question for when IDK can have a moment to get involved I think.

Shoalsteed commented 3 years ago

Bookmarking this as a good way to break up a Contribution Guide https://jami.net/contribute/

luciewho commented 3 years ago

Notes for the community report:

Installation Comm Report Notes.pdf

luciewho commented 3 years ago

Did one usability test yesterday to test the changes on the installation wireframe. Updated version here with some comments on the side.

Installation Wireframe v3.pdf

Shoalsteed commented 3 years ago

Screen Shot 2021-08-11 at 3 35 51 PM

What were you thinking about reworking on this page? As for OS detection, I am not sure if we can do that, so in the case that we cannot, perhaps just a clear message to choose the OS guide?

Aside from the new Mac install guide not being used and Windows guide needing testing , I think this looks great!

Here is the updated guide https://github.com/Shoalsteed/UX/issues/20#issuecomment-896298374

luciewho commented 3 years ago

I'm thinking about removing the Configuration section in the first paragraph to not bombard the user too much with the steps ahead of them. I wasn't sure about the buttons because one user thought it was like downloading a file. I think I will at least change the shape and color of the buttons to match the Ura style guide. Mostly felt like the UI and visual aspect was lacking here and wanted to re-work it.

And was also wondering your thoughts on that OS detection aspect. If it could also automatically direct to the corresponding installation instructions and therefore streamline the process for the user and reduce the amount of decision making on their end. Maybe that is more advanced or involved, so would be nice for the new website but we can stick to this for now.

luciewho commented 3 years ago

Updated with latest Mac installation guide screenshots

Installation Wireframe v3.pdf

Shoalsteed commented 3 years ago

I would like OS detection here if possible.

Feel free to use what YOU think looks best for buttons and colours! That style guide is in need of improvement, and I am very open to creating a new one as part of the process with you.

I think that we overuse the words "installation" and "instruction"

Maybe a direction would be:

Once your download is complete, you can view the complete installation process by choosing the guides for your operating system.

luciewho commented 3 years ago

Sounds good, I will use one of those Ura button styles for now (on the Getting Started page) as a placeholder and make changes to the install wireframe when we've decided on the style guide! I'm going to do some alternate versions of the wireframe solely focusing on UI and visual elements and share that in the style guide issue.

I updated that paragraph with your copy suggestion, so here is another updated version:

Installation Wireframe v3.pdf

Shoalsteed commented 3 years ago

sounds good to me!

Shoalsteed commented 3 years ago

Screen Shot 2021-08-11 at 6 00 05 PM

I can see why the numbers would help, but it does not make an attractive UI. Maybe it is putting the number in a solid circle? Would a having just a bold number look better?

luciewho commented 3 years ago

Did a second round of usability tests and updated the findings PDF with more feedback towards the end

Usability Findings - Installation.pdf

Biggest takeaways for me:

luciewho commented 3 years ago

Mullvad-style OS detection with tabs. A few different versions.

Installation Wireframe v4.pdf

Shoalsteed commented 3 years ago

At first I thought V2A, but now I think 2C

for sure green buttons for both - you are so right about that visually making not a competition!

Screen Shot 2021-08-12 at 3 51 23 PM

I liked this at first, but then found the description of what I2P is distracting from the process which what I want to focus on

Screen Shot 2021-08-12 at 3 57 43 PM

Would change "Install" to Guides maybe, since it almost sounds like we are asking someone to download something again?

Shoalsteed commented 3 years ago

I also love that this feel more personal in a way? Like I am in my OS world not sifting through a page with all the things Screen Shot 2021-08-12 at 4 00 57 PM

luciewho commented 3 years ago

I'm looking at the Mullvad download for Linux and Android and it's making me second guess those two buttons for Java and I2P.

https://mullvad.net/en/download/linux/ https://mullvad.net/en/download/android/

When I see the two buttons on there, I assume I can pick and choose either file type to download. I'm worried that is what is conveyed in the above wireframe. I guess those numbers next to the buttons were helpful even though they were unattractive.

Alternatively, I'm thinking...could we just make the Basic Steps section for Step 1 to be specificially Download Java (since it doesn't matter whether you download I2P or Java first, just get them both downloaded before moving on to Install Guide)

Shoalsteed commented 3 years ago

Screen Shot 2021-08-12 at 6 27 14 PM

I2P is available on both of these as well, so the Android page would be nice to make similar

For download - it is better to get Java first to avoid any error messages from I2P

Shoalsteed commented 3 years ago

I'm looking at the Mullvad download for Linux and Android and it's making me second guess those two buttons for Java and I2P.

https://mullvad.net/en/download/linux/ https://mullvad.net/en/download/android/

When I see the two buttons on there, I assume I can pick and choose either file type to download. I'm worried that is what is conveyed in the above wireframe. I guess those numbers next to the buttons were helpful even though they were unattractive.

Alternatively, I'm thinking...could we just make the Basic Steps section for Step 1 to be specificially Download Java (since it doesn't matter whether you download I2P or Java first, just get them both downloaded before moving on to Install Guide)

I think the numbers make it very clear, even if they are not great to look at

luciewho commented 3 years ago

Here is the installation wireframe (for Mac) so far, with 3 versions of the download page. It should be good enough for the community report! Let me know if there is anything else you need.

Installation Wireframe v4.pdf

marek22k commented 3 years ago

Page 1

Page 2:

I just see version 2C has done away with the .jar. Furthermore, version 2C also makes it clear that I2P requires Java. With the former versions one could also have the feeling that I2P consists of two software packages, for example.

Page 6 I am unsure if this belongs in the instructions, however, some inexperienced users may wonder if they already have Java installed. Often one does not know if the PC was set up by a friend.

Step 3 might seem a little scary. (I think the same situation exists similarly with Windows). Maybe you could make this a tooltip with: "Why is this message displayed?" Short answer: I2P is not "officially" distributed in the Apple Appstore. If you download files online, they can contain viruses. To protect users this message appears. However, this site is officially operated by I2P and does not contain viruses. (I couldn't think of a better answer).

Step 4 Screenshot 1. This might be a bit confusing. You might think that both message (i.e. select language and main installer window) appear at once. (The same applies to the following screenshots)

I'm not familiar with Mac's so I don't know if it's normal, but I2P is - as far as I know - capitalized. This might cause users to think (in the worst case) that something went wrong during installation.

Page 8 "For the bandwidth settings, the software has good default sharing percentages in place, so no need to worry about picking the right amount. You can also adjust this later." If you are supposed to configure these later, why do these appear in the wizard? Isn't there a bandwidth test during installation, which then determines the bandwidth based on the measurement? Perhaps this should be recommended. "A bandwidth test is performed during the wizard. The result is used as a guideline for the bandwidth configuration. You can leave it like this and configure it manually if you wish. If you are unsure, leave it as it is."

Page 9 If the users configure it as it says in the instructions, the users will not be able to access the clearnet. (If I'm not mistaken, someone in the forum once had this problem) Here you could recommend the Firefox addon from Idk. I am not so familiar with the about:config configuration of Firefox, what is the peerConnection.ice.proxy option for? Is this really important? Maybe you could add a tooltip "What does this setting mean?" there. Also, forgot there that when you type about:config in Firefox, there is a warning that you should only proceed if you know exactly what you are doing.

Shoalsteed commented 3 years ago

I have posted the update to Medium https://i2p.medium.com/i2p-ux-research-d2567aefd275

luciewho commented 3 years ago

It looks great! Excited to share our work out there.

luciewho commented 3 years ago

A few things Mark mentioned that relates to the technical copy:

"Every day people use the network to connect with people without worry of being tracked or their data being collected." I2P itself - as far as I understand it - does not protect the user from tracking or data octopi. This is >rather done by additional security measures like uBlock, noScript, uMatrix, ... Maybe you could write instead that I2P gives the user the possibility to be anonymous or peudonymous.

I remember that you mentioned, Sadie, that you avoided the usage of "anonymous" ?

Also this

"select alternate mirror sig" Is this one or two things? I think an alternate mirror is something other than a signature.

Should I change the copy for the "select alternate mirror sig" button?

luciewho commented 3 years ago

Here is what the Download page (pg 2-3) looks like with all the OS icons in place. I thought it made the page feel "heavy" in that area. I'm thinking icons without the circle could work better.

Style Guide Wireframe.pdf

Shoalsteed commented 3 years ago

A few things Mark mentioned that relates to the technical copy:

"Every day people use the network to connect with people without worry of being tracked or their data being collected." I2P itself - as far as I understand it - does not protect the user from tracking or data octopi. This is >rather done by additional security measures like uBlock, noScript, uMatrix, ... Maybe you could write instead that I2P gives the user the possibility to be anonymous or peudonymous.

I remember that you mentioned, Sadie, that you avoided the usage of "anonymous" ?

Also this

"select alternate mirror sig" Is this one or two things? I think an alternate mirror is something other than a signature.

Should I change the copy for the "select alternate mirror sig" button?

Regarding what Mark said about the copy, that is a challenge. Saying something in a way that is easiest to digest vs presenting what is more technically accurate. "Stay safe online" and talking about tracking and / traffic activities being protected , does that speak more to someone than talking about encryption or being anonymous? I really struggle with the word anonymous since people relate that word to people who "hide" and then relate that word to conjecture about why they hide. Consider how many sites that allow comments now need an identifying email or something in order to participate. Not at all saying this is correct, but finding the most digestible way to say things is something to explore.

I guess I would say that "anonymizing" is also a bit vague and opens the doors to more questions. https://i2p.medium.com/a-year-in-review-part-one-reintroducing-the-invisible-internet-5834bc03aade - here is the report I compiled last year on the changes we made.

Here is some good inspiration for how to move away from the ambiguity presented by tech descriptions and why it matters https://www.youtube.com/watch?v=B3ltY3Ig4yI

Shoalsteed commented 3 years ago

Here is what the Download page (pg 2-3) looks like with all the OS icons in place. I thought it made the page feel "heavy" in that area. I'm thinking icons without the circle could work better.

Style Guide Wireframe.pdf

yes, I agree, it looks a bit scattered ( but still good!) Will be good to see the other option.

Shoalsteed commented 3 years ago

"select alternate mirror sig" Is this one or two things? I think an alternate mirror is something other than a signature."

This is 2 things - I think that IDK would be able add some good feedback here with how we present the option to users.

luciewho commented 3 years ago

First stab at the Landing page wireframe (pg 2). Incorporated a pathway for devs (Developer Guide section) as well as the standard new user pathway to download I2P. Added some fake quotes to show some use case examples. I think the landing page needs to send a strong message across about privacy, but not sure what the message is and how to get it across (we previously kind of discussed the "marketing" for the page but I can't remember). It also kind of sounds like you can use the internet exactly the same way as you would on clear net but just private, and that's not accurate.

Also revised the Getting Started page (pg 4) which I think has a better flow. Do we need that intro/preamble? Do we need the systems requirements section?

Installation Wireframe v4.pdf

Shoalsteed commented 3 years ago
Screen Shot 2021-08-20 at 3 10 15 PM

This looks really great !

If you look at the canva link I provided previously, you can get an idea of how much the onboarding can potentially be split up to be more accessible. I think that what you have created above can serve as a great template for additional resource onboarding. I can look at assets from Canva for us to use as well once we decide on the style we want to go with for illustrations. I like this terminal a lot.

As for the copy, I think what we need to focus on with marketing more or equally is the software and the possibilities for devs. That was the marketing talk we had I think, was that the concept of privacy needs to be clear and the way we provide it is the software , and then we can move into sep. CTA's for devs , network builders/ maintainers. Right now, we have fair copy, its just not bold enough nor does it do the software or other things any favours. Also, privacy can be vague, so making it actionable ( how we solve that or provide that) could be more clear.

For the quotes, strong secondary CTA's may work better. Unless we had some strong orgs / people backing us up, I am not sure that it works for conveying privacy if the source is not a person who is trusted in the ecosystem. So perhaps, instead of a quote from a user , a way to handle this could be "Join thousands of people who have made the choice to build a private online community" or for devs "creating privacy aware applications with I2P is simple with our API's" ( something like that).

Screen Shot 2021-08-20 at 3 37 31 PM

this looks good as well!

For page 4, I do not think that we need the preamble, but we should keep the system requirements. Also, double check with IDK if those need to updated at all. It is for sure a better flow.

The purple option looks great , I am open to trying out the grey as well that you mentioned for background .

I think this looks really approachable and tidy, which is exactly what we are working towards - looks great!

luciewho commented 3 years ago

Sounds good! I'll tweak it based on your feedback above and we can discuss more on Monday.

luciewho commented 3 years ago

Notes from the usability test I did on Installation v4

Usability Installation v4 8-20.pdf

luciewho commented 3 years ago

Updated download pages for OS mac, linux, android

Installation v6 1920px.pdf

luciewho commented 3 years ago

Android Download page with the new buttons

Screen Shot 2021-09-02 at 10 38 11 AM

luciewho commented 3 years ago

Adding in Debian / Ubuntu tab, since talking with idk it seems like it is best to have a separate page rather than putting it on the Linux page like Mullvad.

I don't like how lanky and long "Debian / Ubuntu" is and with the slash too. idk said doing just "Ubuntu" should be okay, and that Ubuntu has a bigger user base over Debian. So, that's something to keep in mind. The logo is Ubuntu.

Screen Shot 2021-09-03 at 10 02 40 AM

Shoalsteed commented 3 years ago

Looks good! I would say that this order is correct.

luciewho commented 3 years ago

For the D/U download page doesn't make sense to have the download button for "packages for debian/ubuntu". Screen Shot 2021-09-03 at 12 46 27 PM

The green button on the current download page doesn't actually download anything, it just leads to this page: https://geti2p.net/en/download/debian Screen Shot 2021-09-03 at 12 46 48 PM

And on the wireframe, was planning to either have a link to the instructions below the tabs or put them directly on the page Screen Shot 2021-09-03 at 12 48 26 PM

Shoalsteed commented 3 years ago

If they are going to be combined in the menu, probably makes sense to put the instructions on the same page

luciewho commented 3 years ago

I think the green button for D/U needs to be removed on the download page ...or it can just link to the bottom half of the page and/or it can say "see below for instructions" or what ever else

Shoalsteed commented 3 years ago

I think the green button for D/U needs to be removed on the download page ...or it can just link to the bottom half of the page and/or it can say "see below for instructions" or what ever else

Agree

luciewho commented 3 years ago

New installation with all the OS download pages. Chrome and IE browser configuration pages added. DMG bundle section added.

The copy that is red-colored is what needs to be spruced up. Wondering if Android needs cards Step 1 &2 or not. The cards fit best if the steps are required, like for Mac/Windows/Linux.

Installation v6 1920px.pdf