NoScript 10 UI suggestions

[Znrl]

Hi all,

first of all i would like to thank you for NoScript. It is the most important Addon for me and I know that it is in heavy development right now.
I really hope that puplishing in on Github will get some more people to contribute.

Forgive me my english...
and don't take it as "I want it like that" but maybe as a start of a discussion. I didn't really see another Post whre this could have fit in...?
I can send the Icons as SVGs (used Inkscape) if anyone wants them.

For now and since you asked for ideas... i startet to play around a bit.

1. As many other I don't get the "default" Button. For me if nothing is checked it is default.
Right now default rather means "reset settings and remove from known sites". It isn't realy obvious and may even lead to unwanted deleting of sites from the "known sites" list.
Why don't you rather add an deletion "X" or sth. that makes this more obvious.

2. I don t think that we need the detailed settings for anything else then "custom settings" everything else like a "default default" , "default for trusted and "default for untrusted" should be set in options so it actually is obvious that it is a global standard.

3. As many others I mostly use "temporarily allow..." so this shouldn't be hidden behind a unneccesary click on "trusted".

4. Make labels an option -> Show/hide labels. There are tooltips and if the icons are clear and u are getting used to it I don't need them all the time.

5. I tried to do something... please have a look at it and give me some feedback (everyone is welcome) if and how I can improve it or if it is completly useless .
There are two Icons at the second image that might work as an (alternative) for "trust and save", "remove".
At the top it is an option to disable Noscript ("Scripts Globally Allowed") you can see the two different states at image 1 vs image 2.

Thx for reading,
Znrl.




edit:

[Mistame]

I was actually going to suggest an icon update. These look great (though the settings icon is a bit large)!

+1

[Znrl]

Thanks for your reply.

Sizes are no problem its all vector grphics.. well except for the lock (and the logo itself), i copied these graphics... everything else is redone from me.
I tried to stay close at what it was so there is not too much more confusion.
I also did the X and the reload thing as graphics since a lot of people seem to have no supporting fonts installed and those unicode symbols won't display.

If there is some more feedback or maybe suggestions i can try to do more things.

Actually I tried some more:
Hover Tootlips for long URLs... and some basics how I would imagine things to be moved to Options Page.




edit:
I found another approach
https://forums.informaction.com/viewtop ... 10&t=23624
second post, follow the link.
I somehow like this as a minimalistic version. Espacially the top bar with options, reload, close.
Maybe there is the possibility to merge some of those ideas into a final version at some point.

[XLkill4r]

That really looks convenient. I'd really like it if I could toggle between the current UI and your new vector graphics since these would take up much less space and I really don't like that I can't see the complete URL, but that might be implemented later. But since I'm using Noscript for Android, it would be awesome if you could create some new Smartphone/Tablet friendly Interfaces since I have to zoom in at the moment to do anything with noscript on my phone.
Still a great idea for an UI

[Mistame]

I like the layout of that post you linked. It would be nice to merge that design with your graphics. NoScript is long overdue for updated icons. :p A coupe of points:

- The ellipses at the front of a domain (I believe) are to indicate that the permissions apply to all sub-domains under the first level. (IE, instead of *.site.com, he's using ...site.com) It doesn't make sense grammatically, but in context it works.
- This is just a nit-pick, but from a usability perspective, Refresh should be before Settings.
- The lock should probably be moved to the right side of the domain, so as to not confuse users into thinking it's related to the permissions.
- With this design, it wouldn't be bad to have additional buttons/options on a footer row. Eg, "Temporarily Allow All This Page", "Revoke Temporary Permission", etc.

You said the icons are vector. What are using to create them? I've only experience in dealing with bitmaps (Photoshop) so vector images aren't really my forte but I really like your images. I was actually going to ask for copies of them as PNGs and hack my installation of NS to look prettier

[Znrl]

Yes I'm a little confused with the way the URLs are displayed and all the people complaining about it and about not showing subdomains etc.
I'm not sure about the lock symbol because it somehow has to do with the options and moving it to the right means more mouse movement which isn't too great for usability.

I mentioned it in the first post, I used Inkscape. But the icons can be exported as PNGs as well.

[Znrl]

I did updated my UI suggestion a little bit:

Sorted sites, maybe adjustable in options... I think you should especially be able to collaps "known sites" so you only have to deal with unkown sites.

Only "temporarily allow" and "custom" can be customized directly and have presets loadable (that way you can do temporaily allow -> load custom preset and you have a "temp custom", presets are defined in options).
Unchecking all means "default".
(The blue background was for mouseover... I forgot to remove it.)

[Mistame]

I agree that sites should be sorted/sortable and have an option to toggle and/or collapse "known" sites. The icons look much more consistent now. I like it. I think, personally, it would look better if the "check" and "x" has the same gap between the "S" as the "gear" and "default" icons. And instead of using a white border, subtract it from the "S" so it's actually a gap. Then, when it's highlighted with another color (like the gray) the white doesn't show through. I'd also eliminate the white background of the icons so that you just have the "S" and whatever accent is applicable, if that makes sense.

[Znrl]

I started this already you can see it at grey backgound. It just didn't look good at darker backgrounds. Either they need to have a background somehow or the "S" would need to be brighter for dark backgrounds.
Here i changed the dark background so I could use those icons and I did edit the rest of them. Also I added a list of the icons I did (some are from Mozilla).

[Mistame]

Now those icons are perfect! Nicely done! If only we could get them to use them. If not, I'd love to use those icons to make mine look better. :p I do think, however, that the "known" sites should be on the bottom and collapsed by default.

[Znrl]

Here is a small update where I fixed buttons that I forgot to replace and added a customize button.

How I would make it usable is that the buttons are only for checking and unchecking and temporarily allow and custom shows the customize button (if it is clicked or something is changed it is displayed black otherwise greyed out) which opens the customize area.
Default isn't needed as a seperate button then because you can just uncheck and if everything is unchecked it means default.

edit:
Actually temporary and custom should if changes are made both not be global but per site. While trusted and untrusted (and default) are global and therefor only changed at the option page.



edit2:
not the complete options of course... just some samples

[Mistame]

I like the options layout and the preset customization. They "checkbox" method is actually more confusing, IMO. Since no two permission modes should be active at the same time, it really doesn't make sense from a usability perspective. Not to mention, having the "Default" visible helps identify what state a site is currently in. All the icons being just grayed out does work, but not as well as having the Default icon. On the options page, I'd put a row of checkboxes above the header of the site list to act as a filter, where only the sites matching the selected filter(s) are visible.

[Znrl]

Of course you shuldn't be able to have more than one active.
Known sites bottom makes sense. I thought about it but i was too lazy last time.

One thing that came in my mind is that you should be able to group and collapse scripts from the same domain.
For example Ebay:
...ebayst atic.com
https:// se cureinclude.ebaystatic.com
https:// ir.eba ystatic.com

So you could only have "...ebaystatic.com" displayed with an indicator that there are (2) subdomains.
You would at least have only half the amount of sites displayed since you always have at least 2 per domain.

Another thing would be to set a rule only at this site.
So you could "trust" google at google.com and maps.google.com (or some others) but have it on "default" for every other domain.
You could also "trust" something globally but disallow it at a specific site (or set custom rules there...).

I tried to do sth. that indicates this...
It gets a little messy but I the popup is normally a lot bigger compared to its content.
If you want to see "default" there could just be a checkbox in options "show default". Just like for labels and so on...



I did replace the icons to test it without any real styling and stuff:


Size isn't too bad I guess. I just don't really want to waste my time trying to set it up... as long as there is no official statement about those things.

edit: The red X es in that screenshot are there because I was editing it for the options menu and I wanted them as a "delete" button as I already wrote somwehere. They shouldn't be in the popup.

[varlamovs]

If you don't mind I'd suggest to stride-forward simplify buttons by removing the "S" from them altogether because you know it's obviously we using NoScript and don't have to show it on every button , so maybe leave only something like:
- yellow clock or hourglass for "temporally";
- green "V" in circle for "allow";
- red "/" in circle for "block";
- black gears for "custom."

[Znrl]

I thought about that as well but I wanted to stay close to the icons we already had.
There is also the possibility to add some more like that identicator that this domain has site specific rules (I would maybe move this setting towards the "all this page" column to activate site specific modifications rather than have it somwhere e.g. in the custom settings),
that lock icon which already is there or an delete button for the known sites list in options. So it would be harder to tell which icons are there to set script rules.

There is that other suggestion I posted in the third Post (http://mutik.erley.org/ns/).
There the icons are more like you suggested.

Well the problem right now is that I have no idea what Giorgio has in mind (and even though people seeing the UI first I could understand if UI isn't his priority now).
I don't really want to spend more time on that as long as there is nothing from him that makes me think he uses something of it.
Otherwise I would even try to finish an edited demo version of NoScript with that UI. It would probably change then because it's always different when you actually set it up, add some hover effects and stuff and especially trying to add labels as an option.

It could even be themeable like you could choose between a classic text based but limited version or one that works well with mobile/touch/small/high res/braille/whatever people create.