Rework the User Interface

[Lusito]

There are some things that could be improved on the UI.

• It's getting crowded in the settings tab.
  • This results in newcomers being a bit more confused by all the options
• The rule creation tab has outgrown its design.. In the first versions, only white and gray rules where possible. They could easily be added using enter or shift+enter, but now with 4 types, it's not as comfortable anymore.
  • The new fallback rule type also seems to cause confusion, see #65
• Cookie-name rules are currently difficult to add, since you need to know the cookie names to actually write the rules.
• Entering delay in Minutes is not the nicest way if you want to enter smaller values.
• If the toolbar icon is inside the overflow menu, the UI gets squashed. See #70
• It's not screen reader accessible

So a new UI is needed, possibly in two modes: beginner and expert (or rather: Simple UI vs Powerful UI).

Ideas are very much appreciated.

[Joel889]

I guess we can add https://github.com/Lusito/forget-me-not/issues/34 to the list.

I find Cookie Keeper's UI intuitive, which has many features (https://addons.mozilla.org/en-US/firefox/addon/cookiekeeper/). Perhaps you can look for inspiration there. The extension still runs with FF's ESR version.

[nhantrn]

Did you ever use CookieKeeper classic extension for pre-57 firefox? Their UI is perfect, you can imitate that. Obviously you can't use XUL anymore, so you'll have do it in webext.

For example on a certain site, when clicking on the addon icon will show something like this:

You can see it's pretty simple for new user. ~You can toggle the Allow/Session/Block for each domain and sub-domain. ~Show Cookies in CookieKeeper shows all of the cookies and dom storage. You could do this later on but not necessary now. ~Remove All Cookies will remove all cookie on command, except the whitelist rules. ~The gear icon opens up the setting page of the addon. You should create a new setting page instead of the popup because the real estate there is terrible and clutter thing up where it could scare new users away. ~Clicking on the domain/subdomain will open up a section in the setting page showing the cookies that belong that domain. This page can allow you to protect/unprotect (whitelist/unwhitelist) the specific cookie that you want to keep.

Obviously this is the old XUL UI. Though you can see that it's very advanced as you and edit cookies other stuff.

[practik]

I like the idea of splitting the UI into basic and advanced modes (or whatever you want to call it). Here's one possible scenario:

The basic UI would be the popup and would include just three or four things:

• Clean Now! button
• Snooze button
• Settings button (provides access to the advanced UI, including settings, rule creation, domain logging & info)
• Add Rule interface, for current domain only (maybe)

[practik]

The advanced UI would move into the moz-extension:// page. The Settings tab there could be structured as a grid, something like this (default FMN settings shown):

The “From open domains” checkboxes would only become active if the corresponding “White/graylisted” boxes are checked.

The Forget icons would have tooltip texts in the actual interface – from left to right, they would be:

• On manual cleanup
• On browser start
• On leaving all instances of domain
• On creation (I took all the icons from the same Google Action pack you're already using, except the asterisk is just an asterisk. I'm not sure what icon would best symbolize "on creation," but the asterisk came to mind since it's sometimes used to indicate birthdates.)

[practik]

Domain logging would have its own tab. Rule creation could have its own tab too – or I have a vague idea that it could also be built into the Settings grid, but I haven't thought that through yet, except that I wonder if you could just get rid of the fallback rules.

For one thing, they seem to duplicate some of the other settings – e.g., the default behavior if no rule matches is Forget, but don't you already get that behavior just by checking "Clean when leaving all instances of a domain," "Cookies," "Clean on browser start," and "Cookies" on the Settings tab?

As you noted at https://github.com/Lusito/forget-me-not/issues/68#issuecomment-393314200, at least one user was confused enough by this to set the same behavior twice, once with a rule and once with a fallback.

I also noticed that the default settings are contradictory: On the Rules tab, it says default behavior is "Forget" for everything without a rule, but on the Settings tab, default behavior is whitelist, at least initially (since "Clean when leaving all instances of a domain" and "Clean on browser start" are unchecked).

Maybe some of this confusion could be avoided by replacing the fallback rules with the appropriate settings in the Settings grid. Here's how the rules would map to the grid:

Or have I totally misunderstood how the fallback rules work?

[Lusito]

Thanks for the ideas, but I actually would like to keep the advanced mode as simple as possible, still allowing quick access via the popup. I hate it when extensions open another tab with a complex UI to configure things.

I like the idea of your grid, but looking at your first screenshot, about 90% of the right 3 column cells are completely unused, wasting space.

[practik]

True. I was providing space for future options, but since many of those options (like clearing Indexed DB on domain leave) depend on bugfixes from Mozilla that could be a long time coming, maybe it makes more sense to design for the status quo. So just keep the left two columns and rearrange the rest:

That would at least save you a tab and could still fit in the popup (I think).

[Lusito]

Current state of the new UI:

Explanation:

• On the start tab, all matching rules will be shown, plus 1-2 additional rules, which are always there, even if not configured, so they can easily be added.
  • The additional rules are full domain (*.www.github.com) as well as the shortes possible one (*.github.com).. if they are the same, only one additional rule is shown.
  • The rule buttons will show a popup, where you can choose which rule type you want to have.
  • The down arrow for the buttons are just to visualize, that there is something to choose from.. ("Block" as a button might otherwise be confusing)
• On the settings/cleanup tab, the icons in the header have tooltips and on mobile, a legend will be shown above the table.. possibly with a button to hide (remembered).
  • Checkboxes are disabled if functionality is not given in a browser or a user disables another checkbox which is required for this checkbox to actually do something.
• The buttons on the top-right can be used to run the manual cleanup or toggle the snooze state.
  • This way, the manual cleanup and snooze tabs can disappear (snooze functionality will be explained in the tutorial).
  • These may be colorized to show state.
• I might increase size of buttons and checkboxes on mobile devices.
• The "add rule" button for the log view will show a popup as well for choosing the rule to add (plus an additional input field to customize the pattern).

[practik]

This is impressive. The cleanup and snooze buttons, autogenerated Current Tab rules, and Settings subtabs all seem like big improvements. Adding Rules columns to the Settings grid was rather brilliant. The new Current Tab icon is nice too!

Tabs and buttons across the top:

• Having the info icon (About tab) next to the question mark button has always seemed redundant to me. I understand why it’s set up that way, but it looks like a duplication and I never remember which icon does what. Maybe replace the question mark button with a link on the About tab? With just five tabs and two buttons on top, I think users could really understand things at a glance and easily remember what all the icons mean.

Settings tab / Cleanup subtab:

• I would change “Enable/Run” to “Enable,” since checking those boxes doesn’t actually run anything. (I’m also curious why you have those boxes at all. How do you envision people using them? The one for domain leave, in particular, seems to duplicate the function of the snooze button.)

• How will the checkboxes in the Rules columns work? I ask because there’s an inconsistency in the current interface that’s always bothered me: With most of the checkboxes on the Cleanup and Settings tabs, a check mark means that data will be cleared, but with the “Apply Rules” boxes, a check mark means that data will be protected. So for the new UI, I’d suggest:

  • Rules column checkboxes: Checked = data will be cleared, unchecked = data protected (same as all the other checkboxes in the grid)
  • Tooltip text for Rules column icons: “Also clear rule-protected data” or just "Ignore user rules"

  • New icon, maybe (I can send you the SVG file if you like it):

    

• The settings at the bottom of the tab seem confusing for new users, especially the two delay settings. Maybe:

  • Replace “What do these checkboxes include?” with a little question mark beside the “Cleanable Data” heading (like the ones you have for the experimental features in the current interface).
  • Reformat the rest as follows:

[Lusito]

Having the info icon (About tab) next to the question mark button has always seemed redundant to me.

Those are completely different things (about vs help), but I've heard other users being confused about this as well, so I'll try to improve this.

I would change “Enable/Run” to “Enable,” since checking those boxes doesn’t actually run anything

Yeah, that was actually a leftover from a previous approach, where I had the manual cleanup button inside of the grid. Will change to just Enable.

I’m also curious why you have those boxes at all. How do you envision people using them? The one for domain leave, in particular, seems to duplicate the function of the snooze button.

• The default for the checkboxes is off. If I removed those checkboxes, the user wouldn't get defaults for the other checkboxes.
• The snooze button is not the same as unchecking the domain leave checkbox.
  • Checkbox = disable the functionality
  • Snooze = Act like it's disabled, but remember what to cleanup after snooze is finished.

How will the checkboxes in the Rules columns work?

It still works just as before. I will consider your suggestion, but to me it looks confusing to set a checkbox for an icon that has a checkmark but is also crossed out. Maybe the checkboxes should be rendered as shields instead and the protect checkbox = as now and the unprotected checkbox = shield with an X (maybe even red to make it painfully obvious)

The settings at the bottom of the tab seem confusing for new users, especially the two delay settings

Yep, I wasn't sure how to do this yet.

Replace “What do these checkboxes include?” with a little question mark beside the “Cleanable Data” heading

Good idea

Reformat the rest as follows:..

Not a good way if you consider different languages and maximum dialog widths, but this is indeed something that should be improved.

[practik]

Those are completely different things (about vs help)

Maybe, but I think they still fit into the same general category. Let me put it this way: If you only had one of those icons – doesn't matter which one – then every user who wanted information would click on it, no matter whether the information they wanted was "about" or "help."

The default for the checkboxes is off. If I removed those checkboxes, the user wouldn't get defaults for the other checkboxes.

Ah yes, thank you. Are there any other use cases for those boxes? If they only ever get used the first time someone installs the extension, it seems kind of a shame to have them taking up space at the top of the grid forever after. But that's pretty minor, and I don't have any brilliant alternatives to offer.

Snooze = Act like it's disabled, but remember what to cleanup after snooze is finished.

Thanks for explaining this too.

it looks confusing to set a checkbox for an icon that has a checkmark but is also crossed out

Yes, it totally is, why didn't I see that before?!

Your idea of rendering the Rules checkboxes as shields sounds VERY fancy, I'd kind of like to see that :-) But it also sounds like a lot of work. So here's another suggestion: Take the idea I proposed above – invert current checkbox function, change tooltip text to "Ignore user rules" or similar – and just make the Rules column icons a shield with an X instead.

consider different languages and maximum dialog widths

OK, that's something I can't really comment on then.

[Lusito]

then every user who wanted information would click on it, no matter

Yeah, but getting to the information they need would require reading the newly displayed information partially and then possibly clicking on the actual link you want. (i.e. if I only had about, then the user would need to click on the help link inside of the about tab.. and vice versa)

Are there any other use cases for those boxes? ...

It's more of a convenience thing. I don't think this one line should be too problematic.

Take the idea I proposed above – invert current checkbox function, change tooltip text to "Ignore user rules" or similar – and just make the Rules column icons a shield with an X instead.

Will consider it. Thanks.

[Lusito]

One thing to consider when inverting the meaning of checkboxes: All rows that don't support rule protection will have to be shown as checked. As otherwise the user might think that they are protected.

[practik]

Yeah, but getting to the information they need would require reading the newly displayed information partially and then possibly clicking on the actual link you want.

Good point. Maybe put a big ? icon/link right at the top of the about tab?

I don't think this one line should be too problematic.

No, it's not. Sorry for the unnecessary perfectionism.

All rows that don't support rule protection will have to be shown as checked. As otherwise the user might think that they are protected.

I guess they might. The tutorial makes it clear that the rules only apply to cookies and LS, but of course not everyone will read the tutorial. Maybe the tooltip text should read "Also clear rule-protected data (cookies and localStorage only)"?

[Lusito]

Hello again. It's been a while, but there's a lot of progress. Mostly under the hood, since I've rewritten the UI from scratch so that it becomes more maintainable and more stable (it has outgrown its initially simple design). There have been some UI improvements as well.

Here are some screenshots and explanations:

The About Tab is removed from the popup

As you might notice, the about tab is gone from the popup and will only be seen in the full-page readme. You can get directly to it by clicking on the flower icon from within the popup.

Current Tab

This will show matching expressions for the domain of the current tab. It also includes "Create Rule" placeholders, so you can easily create new rules with 2 simple clicks.

Rule Selection Dialog

Once you click on a rule selection button, this dialog will show, where you get a short explanation and can choose the cleanup type you want to use for the expression. As you can see, the rules have been renamed to be more speaking and thus hopefully more helpful to newcomers. Wording might change a bit in the final version.

Define Rules Tab

Of course, you can still list all rules and create new ones from the "Define Rules" tab. This stays mostly the same, except, that when adding or changing a rule, you will be shown the rule selection dialog (as seen above), giving you the possibility to choose from all rules.

The "press enter to add & press shift+enter.." info is gone, but an error message will still be shown in a less space-consuming way. It will also show an error, if the rule already exists.

Settings->Cleanup Tab

This subtab will show all options for automatic cleanup. The Shield icon might be replaced by the inverted definition (i.e. ignore rules rather than apply rules). I haven't decided yet. In early versions, the manual cleanup checkboxes where here too, but I've found, they should be located where the cleanup is actually done, since you don't want to switch back to settings before cleaning. The icons have tooltips as an explanation and in Firefox Mobile, a legend will be shown, since tooltips won't work.

Settings->General Tab

Features everything that doesn't fit under cleanup or experimental. I know, "show notification on cookie removal" would count as cleanup, but I'd rather have all notification options in one place.

Settings->Experimental Tab

As said before, experimental features now have their own tab.

Domain Log Tab

The domain log tab is essentially the same as before, with the difference, that the "Add Rule" button now leads to the select rule dialog, where you'll be able to customize the expression before adding it.

Select Rule Dialog Editable

Currently, when you come from the domain log tab, you will be able to edit the expression before adding it. Not sure if this should be editable from other places as well.

Help Button Popover

New are these popover info-windows, which display a short info upon hover.

This is the one for the help button, which will lead to the tutorial as before:

Manual Cleanup Popover

This is the one for the manual cleanup button, which will lead to the manual cleanup dialog (as seen below):

Manual Cleanup Dialog

The manual cleanup dialog shows a UI similar to settings->cleanup

Snooze Button Popover

The snooze button has a popover as well, which will show "Start Snooze" or "Stop Snooze" depending on the current state and the "bell" icon will also be colorized when snooze is active. On Desktop, the button will toggle the state, while on Mobile, clicking the button will lead to a dialog with the same info, since popovers don't work with touch devices)

[practik]

This is all looking very solid now. A few specific thoughts:

1. The new rule names are a big improvement. I had read about the red list in the documentation, but since I never used any red rules, I never really understood that the red list is the same as "clean on domain leave." It's much clearer now how the different rule types relate to one another.
2. In English, at least, you could make it even a tiny bit clearer by changing Leave to On Leave and Startup to On Startup
3. In the Current Tab tab, the Create Rule buttons have dropdown menu arrows. But if clicking one of those buttons always opens the Rule Selection dialog, then there's no need for dropdown menus on the buttons – right?
4. "the manual cleanup checkboxes … should be located where the cleanup is actually done, since you don't want to switch back to settings before cleaning" – Makes sense.
5. The bottom of the Settings > Cleanup subtab is more clearly structured now. I would just suggest a couple of wording tweaks: from Delay domain leave cleanup to Delay for domain leave cleanup from Thirdparty Cookies to third-party cookies
6. That last change (from Thirdparty Cookies to third-party cookies) also applies to the Settings > Experimental subtab.
7. For consistency, I would make the expression editable in the Rule Selection dialog no matter which tab the user comes from. This is not really a big deal though.

It feels like you're getting close to the final version now. Nice work!

[Lusito]

2: Yeah, I know.. I just thought it would be more obvious if the buttons started with the letter that is shown on the bade.. but I think I'm just going to underline the character, which is used for the badge. (Like shortcut keys in a menu) 3: True.. I just wanted to highlight the fact, that this is a button and not just a label, but I guess that was a poor choice. 5: I like 6: OK 7: Will consider

[practik]

Do all these closed issues (this one, https://github.com/Lusito/forget-me-not/issues/82, https://github.com/Lusito/forget-me-not/issues/114, https://github.com/Lusito/forget-me-not/issues/117, https://github.com/Lusito/forget-me-not/issues/124) mean that FMN 2.0.0 will be moving soon from the Early Access Program to AMO?

[Lusito]

Yes, If nothing major pops up, this weekend.