Improving UX / UI of the settings page

[bf]

Is there interest into slight improvements to the settings pages? I've only used uBlock for some days, but I have already some thoughts on UI / UX improvements such as:

• Add "Select All" / "Deselect All" for easier selection of filters
• Improve the button placement (for example the "Apply" button)
• Use a more visually pleasing spacing of UI elements

Are pull requests with such additions generally accepted for uBlock or do you mind them?

[gorhill]

Selecting/deselecting lists is not something people do all the time: I expect people to set their lists once and then be done for a while. Also, I wouldn't want people to select all lists. Yes, uBlock is more efficient than others, but selecting all the lists -- something I never tried -- is certainly not recommended, one would end up with a huge amount of irrelevant filters (regional). Many lists intersects with each others, which uBlock needs to detect at parse time to avoid duplicate, thus necessitate CPU work at load time, delaying the time before uBlock is up and running: not recommended.

Placement of the "Apply changes" is all fine, it was placed there for good reasons. What do you have in mind?

As for the 3rd suggestion, sounds like quite subjective, and I don't intend to address subjective issues: everybody have their idea of what does "look better" (it happened before here), and if I start to accept everybody's idea (which are not necessarily shared by everybody else), this will be messy.

No, I generally do not accept that kind of pull requests. I accept pull requests for real issues -- something is broken, or missing.

[bf]

Thanks for your immediate reply. I appreciate your work in creating this great plugin, and I will further illustrate my points a bit. Without trying to challenge you, I would like to point out that uBlock, as it beats ABP from a technical perspective, is going to be seen by and communicated to potential users as an overall package. If you want it or not, uBlock's UI and UX are major parts of this, and in my eyes it would be sad if these issues hinder a broader adoption of it.

"Select All"

As I wish to deploy uBlock as an ABP replacement to friends and family, it would be nice if there was an easy way to select all items of a category in order to have an end result like in the following picture.

I see your point regarding the effort needed to consolidate / uniquify the selected filter lists, but this is a technical issue and should not create a bad UX when most people just want to "filter all ads / all tracking stuff" (and will do so as uBlock reaches a broader audience).

Placement of Buttons

Please see the picture as an example. At least on large screens, the "Apply Changes" button can and will easily be overseen. It's light color does not help with gaining the attention it deserves. The right-aligned button is unfortunate, too, as the rest of the UI is oriented to the left side of the screen.

General UI Style

To me, the settings interface seems a bit half-baked. Instead of using a framework such as twitter bootstrap, which presents you with sane defaults with regard to font size and margins, I see some custom-made CSS which simply does not look elegant. Although it is debatable to use a full-blown CSS framework in this case, some crucial adjustments to margin / font size are needed.

Additionally, from Twitter Bootstrap you would gain the ".alert.alert-warning" component which would solve problems with the "Apply Changes" button mentioned above.

[alejandrolemus]

I agree with @bf in general: the UI could use some tweaking/improvement. I know many programmers prefer to focus on the technical details rather than looks, and that's great, as I'm sure you have limited time for this project. But maybe would be productive to at least consider contributions on this subject.
I love uBlock and how it works, but I've seen more user friendly interfaces out there.

[dashed]

I'm fine with current UI/UX from functional perspective. But I agree that they can be improved.

+1 on better "Apply" button placement; especially on large screens. I wasn't even aware of this button the first time I used uBlock. For improvement, Since this button appears on changes, something like an alert UI with button placed on the right: http://getbootstrap.com/components/#alerts

---

In addition to "Select All" / "Deselect All", I recommend having some button to revert to default list settings.

---

One nitpick I have is that buttons in 3rd-party filters are way too light, at least on a Macbook on full brightness setting: https://github.com/gorhill/uBlock/blob/c123dba6f2415e4d6022cc76bbb279568f037596/src/css/3p-filters.css#L60

[Betsy25]

Perhaps Off-Topic, but it seems to match to purpose of this topic a little.

It would be ideal to have a clickable popup which shows all items on current tab, and colorize the blocked or hidden items. Something that i really miss after switching over from ABP.
Right now we only have the blocked item count on the icon without any idea what specifically was blocked.

Hard to find false-positives. For example, there is a problem using the default filters which mess with the page http://scores.espn.go.com/nba/scoreboard , when sports matches are underway, and the leading scorers/rebounders/assisters change, they seem to be blocked by uBlock, resulting in blank spaces.

[alejandrolemus]

@Betsy25 You might want to check version 0.8.5.0-dev.0. I think you are referring to something similar to what is shown in #433.
You could also try uMatrix, from same developer, which gives much more control.

[gorhill]

I consider the UI just fine.