Privacybadger: Improve Onboarding

[andresbase]

Our current onboarding can be improved.

• [x] Make it translatable #489
• [x] Simplify onboarding, there are currently 16 slides with a lot of text.
• [x] Make it clear why Privacy Badger isn't blocking anything. Related to #1675
• [x] Make it clear what to do when something breaks and how to report it

The onboarding should be simple with only a few points, the ones confusing users, explained clearly.

[lemnis]

I'm one of those users that tried privacy badger before, but removed it very quickly afterwards because I didn't understand the concept ( or was just too lazy to read or invest the time to understand it). Luckily I heard later the concept from someone and reinstalled it and I'm loving it.

I had some time left over to create I quick concept how the "story" could be better explained, but mostly I created as a starting point to have a conversation about. It's pretty messy and probably has many typo's. You can find in beneath link.

https://sketch.cloud/s/payLR/all/page-1/mobile
The icons that are used are from iconmonstr.com and flaticon.com, the design is created in Sketch and I can later but the file in a repo.

The "story" in my design is as follows:

• how does it work?
  
  
  
  • detect
  
  
  • 3 strikes
  
  
  • blocked
  
  
• stop for current page (is current site, confusing text...) Probably unnecessary info
• breaking of a site, I think it could be removed
• Self control
  
  
  
  • red slider
  
  
  • yellow slider
  
  
  • green slider
  
  
• config
• social media

Also the improved page should be responsive in the future, as android support is coming

[ghostwords]

Wow, thank you, @lemnis! We'll be asking our art director (@hughillustration) to review.

[rugk]

Because of https://github.com/EFForg/privacybadger/issues/1725 beign fixed (i.e. now available fro Android) you should also make it touch-friendly/friendly for small screen sizes (i.e. responsible)…

[andresbase]

Hi Everyone,
As noted by squiggy's PR (#1930) we have a new design for the on-boarding, thanks a lot to the E&D team!

This has been done based on your and user's feedback. We wanted a simpler look that was clean, would be easy to translate, and worked on mobile as well to relay the basics of what Privacy Badger is.

• The first thing we want users to understand is that it's OK that Privacy Badger isn't blocking anything on start, and that's how it works.
• Then sneaky trackers (showing sliders in red) that get blocked when we identify them.

• Make clear we are not an Ad Blocker (The three strikes on tracking) and that it can interact with other extensions.

• We also wanted to make it clear what to do when something breaks, which for most users will be clicking on _'disable for this site'_. AND remind users to send a report because we respect privacy so that's the only way we can now of it.

• Finally we want people to understand that they are joining a community and that it's much more than just blocking tracking.

There are still some details but I hope this gives everyone time to check it out, test it and let us know what you think. This is the first iteration of the new design and it will be much easier to make changes if needed. Details such as the specifics of the sliders and so on were left out and will be in the new redesign of the website and FAQ (Looking forward to share that as well soon). Reason behind leaving those to the FAQ is that it was confusing to a lot of users.

Thanks a lot for all the great ideas and contributions!