This issue contains the email exchange I had with Mozilla's @brampitoyo regarding the re-design of uBO's user interface, originally aimed at Firefox Preview but which is currently used on a…

Bram Pitoyo2019-11-12
Hi Raymond,
So glad to hear from you, and to have a chance to work together.
Maybe some buttons are not really needed on mobile?
Agreed. Generally, the more buttons we can take out, the less touch targets well have per page. Id be happy to assist you in doing an audit of features that are okay to excise for mobile, but I must first confess that Im not a domain expert!
I wonder whether the text will neatly fits for all languages such that the layout stays the same in all languages.
Our text list items can scale up to 234 lines. Hopefully this can help rectify the language-fitting issue.
For icon + label items, the space is more limited, so theyre not as stretchable. Id advise limiting the amount of items in this category. But a good alternative is to shorten some strings.
For example, instead of saying Open the logger, we may be able to say Logger. Instead of saying Enter element zapper mode, we may be able to say Element zapper. Im not sure if this will impact clarity, though!
How does the overview panel fits in there?
I spent most of today taking a deep dive into features and sub-pages within uBlock Origin. I was able to adapt them and address some of your thoughts around information density.
The good news is, I found that these adaptations can, for the most part, be mostly visual. This means that no new feature or change in functionality is required. In some cases, thats not possible. Have a browse below.
Main user interface
For starters, I thought that the entry point for the Overview panel should be clearly labelled.
Its up to you whether this panel is expanded downwards and upwards, or whether it opens as a sub-page. In the example above, it opens in a sub-page.
Overview panel
When users tap Overview panel, a familiar-looking table appears.
The Overview panel has a high information density, so adapting it was challenging. My main concern was to have sufficiently large tap targets (48dp) while not losing any feature or complexity.
In the example above, Global and Local Rules are modes that you switch back and forth from/to. Allow/block controls are presented as status to the right of each domain name, and can be modified via a dropdown menu (if Advanced mode) is switched on.
Domain details
One thing that was missing from the Overview panel is +++ —. I want not only to preserve them, but give them ample space so you can explain as much as youre able to.
To view this domain information, the user can tap the domain name. It will open another sub-page. It has enough space to contain almost anything you want.
Dashboard
The dashboard contains a lot of tabs. We have a scrollable tab bar design that can fit all of them.
These examples may not sufficiently capture the full complexity of uBlock Origin, but hopefully they can still give you a taste of the flexibility that our Android layouts can offer.
Let me know what you think of these? If its helpful, Id be happy to revise these designs and/or continue adapting more pages.