penge/block-site

Minimal UI/UX updates

decimoseptimo opened this issue · 8 comments

Block-Site

  1. New label for on/off switch and move to the top for visibility
  2. Simplier block list (BL) description
  3. BL Entries as text value to ease updating
  4. Add tiktok to BL

Great extention guys. Here I propose some improvements.

penge commented

Hi @decimoseptimo

Ad 1)

  • Extension isn't enabled or disabled in Options, just the blocking. To enable or disable extension, you'd have to visit chrome://extensions. Therefore calling it "Extension enabled?" woudn't be correct.
  • By moving "Extension enabled?" to the top we get 3 visual groups: toggles, list, toogles. Easier is to have just 2: list and toggles.
  • To block pages, we shall define them first, reason why list comes first.
  • Enabling or disabling isn't top priority (to be placed at the top).

Ad 2)

  • Doesn't sound simple. It introduces 3 terms: Block list, blacklist, whitelist.
  • There is only one visible list, thefore naming 3 lists (Block list, blacklist, whitelist) isn't correct.

Ad 3)

  • It is one big text, I guess it cannot get easier than that. Once there will be additional options to each site, which coudn't be expressed easily inline, list will be split into separate list items.

Ad 4) I like TikTok.

Hi @penge

  1. That's a design que from dark reader. The label isn't that relevant. It's a feature of a quick on/off switch for when you need fast access to some blocked page. It's more of an "app level disable" of the blocking capabilities.
  2. There's already a list, of blocked domains, that can be excluded. I'm suggesting using common names to represent them.
  3. I don't get your point here. I refer to making the default block list, as editable values. It's got good defaults, one should be able to pick up for there.
  4. Makes no sense for tt to get special treatment over fb, ig... isn't the default, a list of timewaster socials?

I'm not a hundred solid on these, are just recommedations, thanks for following up.

penge commented

Hey @decimoseptimo

  1. See previews below. Preview A = toggle where it was. Preview B = toggle at the top.
  2. I have simplified descriptions.
  3. There is a placeholder for empty list. Should be enough for explanation.
  4. There are many sites that could be suggested and I would like to keep the list short. I would actually prefer to reduce the list, remove twitter for example.

Preview A

Screenshot 2023-03-29 at 02 40 18




Preview B

Screenshot 2023-03-29 at 02 47 15

I like both, I just prefer the enhanced visibility of "enabled?" at the top.
Although ! prefix to ignore is commonplace, it'd be nice to keep a legend to it i.e. "prefix with ! to ignore"

penge commented

@decimoseptimo

Here's an update, going for Enabled at the top, and added explanation for !

Screenshot 2023-03-30 at 11 54 20

Screenshot 2023-03-30 at 11 55 31

Nice. Can we prepend with "List sites to..." it'd feel more like an instruction.

penge commented

@decimoseptimo

Hi, here's example of "List sites to..." and short just "Enter...". Which one do you find better?

Screenshot 2023-04-01 at 17 34 35

Screenshot 2023-04-01 at 17 34 42

Note: "Enter" and "prepend", would be instruction words.

I think "list" sounds more natural.