Suggested design mockup

[rnkn]

Hello again,

I hope you don't find this impertinent, but I took the liberty of making a rough design mockup for a slightly different UI I think could be nice. It's just made by throwing together screenshots, so please forgive the messiness. The idea would be to look as close as possible to the Safari Bookmarks sidebar and iCloud Tabs popover:

The major change would be using an Outline View instead of Table View for passwords and icons for folders/passwords. However, I don't actually think this introduces a UX benefit, rather my only reason for suggesting it is because I think it would integrate more closely with the macOS/Safari GUI and add a little more visual space around each entry.

The additional design differences would be:

• Adding a title like the iCloud Tabs popover.
• Adding a little padding around the search box.
• Changing "Search" to "Search Passwords" like the bookmarks sidebar.

I understand there might very well be technical considerations to do with searching that necessitate the Table View; if so please ignore the suggestion to use an Outline View.

Passafari 0.5 macOS 10.15.2 (19C57)

[rnkn]

Oh I'm sorry, I neglected to mention one of the other main design ideas: that upon opening the popover, all password entries would be displayed for scrolling through (like the bookmarks sidebar), which would allow interfacing with both keyboard and mouse.

[adur1990]

Hi,

thank you for your contribution :)

First of all, I like the idea! But there are some open questions I would like to discuss first.

Passafari has two views. First, the Safari extension popover, second, the status bar popover. Generally, both work the same, but with one slight difference. When you click on the status bar icon, the popover will be shown with an empty search field. I think it could make sense to improve the UI as you suggested. In Safari, however, the behavior is slightly different. Generally, you want to use Passafari (or other password manager extension) to show passwords for the current webpage. I think it would not make much sense to show other passwords. At least I think so.

The second question is how to highlight search results. Currently, matching passwords are added to the table view. What would you suggest using your UI mockup? I can think of removing non-relevant entries from the UI, but maybe there are better options?

[rnkn]

I am having second thoughts about the merits of an Outline View instead of a Table view. Here’s the bookmarks sidebar with results narrowed to “github.com” as if visiting Github and these were passwords:

Hmm I think your Table View looks better, and seems to fit more for passwords. The other thing is that once I finish typing a search in the Safari bookmarks sidebar, I need to press tab to then highlight something and scroll up/down, whereas I feel like I should be able to just press the down arrow. This highlight in Table View is almost impossible to see (at least with Dark Mode).

I think you can safely disregard the above mockup.

One place where I think a search box works nicely with Table View UI (?) is in the Help menu. So basically, disregard everything I’ve said except that I think the search box could have a little margin around it, like in the Help menu.

[adur1990]

I intentionally avoid the margin around the search box, since I use a popover instead of a menu. I will give it a try, but can not guarantee if it will it make upstream, sorry :D

[rnkn]

Now that it’s become a permanent fixture of my computing life, I’ve grown accustomed to the current aesthetics, so I’d be happy with whichever way you went. Thanks for taking the time to consider this :)

[rnkn]

p.s. I’ll close this issue because I don’t think it really reflects something actionable.