2025.1.0 Browser Extension UI/UX Megathread

… what about five horizontal tabs for users with organizations:

?

Essentially, the two / four filters would then all be moved down there and be able to create the different views of the vault.

One obstacle may still be, that the current filters also filter for the search… that perhaps could be taken over to the horizontal-tab-idea. (?!?)

Another obstacle might be, if there ever were more filters in plan… the horizontal space is limited if you want to stay on one row for the tabs.

PS: Thinking again about that… I think a “Vault” tab like that (as part of the five tabs in my right screenshot) wouldn’t make much sense - as it would only show the different vaults… and then, if you chose one??? :thinking: The problem with horizontal tabs like that: only one tab could be active at a time. Though it looks similar to the current filters, it would be different in effect… as only one “filter” could then be active with that tabs-idea. The current filters on the other hand can be combined and “filter” the “All items” list in every combination you like. :thinking:

Altough some detest it - the filters and “All items” in combination are not the worst of all ideas. IMHO.

It works but abbreviating collections to Coll.

I don’t think there is a way to get all 5 on a single line without getting too small with the font.

Another possibility is to combine Collections and Folders in to a single dropdown. Then from that dropdown you select collection or folder and then proceed accordingly.

Yes. And “All items” to “All”. It is crowded in that row.

Yeah, could be a problem. I mean, it fits in in my mock up - but if it would work in reality…?!

Could be an idea. But how would you call it then? And if you chose “Folders & Collections”, there would be no gain in space. :thinking:

Even if my idea is not practical - maybe it creates at least other ideas.

I personally can live with the current filters. But it would be nice for others, if there was a way out of the “there a no folders anymore (?!)” / “why filters?” / “why all items? - it’s useless” misery.

PS: I added some further thoughts to my tabs-idea in the “PS” of my previous post.

What about having stacked tabs. This will take up more room, but expandable. Maybe have preferences to enable/disable tabs people don’t want or need? If some options are disabled, then it may just be a single row of tabs?

image
Screenshot from Windows for an idea of how stacked tabs look

So, here are my problems with the new UI.

Filling forms is now cumbersome and less accessible

The most common action in a password manager is, well, filling password.

Old UI: Open the extension, click the fitting entry anywhere, get the form filled.

New UI: Open the extension, carefully navigate and hit the “fill” button, now fraction of a size of the previous hit area. Failing to hit the button by a pixel means you will open the entry details, which is relatively expensive to recover from.

This change is especially hard hitting for users who have a hard time using a mouse pointer, and who profited from the previous larger hit area.

This post was originally longer, with 3 illustrated examples that I carefully prepared screenshots for. However, the forum would let me embed only one image per post. I tried to split into separate posts, and hit a “only 3 posts per topic” limit. What is this? I spent an hour away from my paid job to prepare this, and now I can’t post it. If you are genuinely interested in feedback, consider relaxing these limits.

1 Like

“Edit” is not in the expected place, but separated in a button far away for no apparent reason

Let’s say we want to edit an entry now. How do we go about it?

Ah, there is a three-dot menu symbol next to each entry.

[see image below]

Let’s click it …

[see image below]

… ah. Uh. What? There is … no. No edit option. Huh! How on earth can I …

[see image below]

Ah! I have to click the entry to open the details, and then, instead of a menu entry, there is a button, and I have to move all the way down from where I was before to click it.

(As a new forum user, I am only allowed one image per post, so I had condense everything into one. Sorry.)

Why isn’t there an “edit” option in the very menu of the entry? This way, it’s two clicks instead of one, and I have to move to the other end of the UI to make the second click. This goes against even the most basic UI/UX rules.

Filling credit card data now requires 4 clicks instead of 1

Old UI: To fill a credit card, navigate to the bottom of the extensio UI, click the credit card entry in question. 1 click.

New UI: Click the filter button to open the filter options. Click “Type” to open the type menu. Click “card” to have the card entries appear. Click the card in question. 4 clicks.

I fail to grasp how quadrupling the number of clicks for an action that worked fine is meant to improve usability.

Only comfort: I can click the card entry just anywhere – thankfully, there is no “fill” button (yet).

These are just the core annoyances I now have to deal with every day. I can not find an upside like “okay, but this clearly improves something somewhere else”. I’d be very glad if the previous behaviour could be restored where it worked fine.

1 Like

This can be changed:

The edit button is the same place that it was in the old version. Although not a new issue, I do agree with you that adding “edit” to the menu does make sense. You might consider adding that as a feature request so that we all can vote on it and maybe get a bit of attention to the idea.

A fix for this is “coming soon”. In the meantime, a workaround is to mark them as favorites.

Dear Bitwarden team,
I’m using Bitwarden for years. Today after month of teeth grinding, I’m thinking about migration to ProtonPass. UX changes are nothing less than terrible.

  1. How could any UX person ever think that default action - clicking anywhere on the entry should invoke entry editing, and not entry filling on the page. In the meantime Fill is a pretty small button on the right side (so everyone has to travel even bigger distance). Its like a programming guys, writing (editing) once, reading (filling) many times.
  2. Cards usage is a horror. I was sad that Bitwarden can’t autofill many of the common payment gates here in Czechia, but I accepted it as sad reality of small market. Now you have improved it even more. I have to search for the card by name, or change the type combo, and after that I have to copy number, and cvv. God forbid if I’m not sure about the date. In addition, when Bitwarden window lose focus, I can start to search the card again. TXT file is more user friendly than this.

So please ask your UX person, to use Bitwarden at least once a week and please adjust the UI to at least mediocre UX.

Thank you very much.

2 Likes

@dezo Welcome to the forum!

You can change that back to the old auto-fill behaviour by: Settings → Autofill → Click items to autofill on Vault view

The cards and identities will (optionally) come back as categories in the auto-fill suggestions section (like it was in the old extension) as you can see in this announcement:

Here you can even see a preview of that in a short video:

Ugh, this even further reinforces my conviction the that the “Autofill Suggestions” section must be made collapsible (like “Favorites” and “All Items”). Otherwise, before one can autofill any cards or identities, one first has to scroll past the “Autofill Suggestions” (and probably also the “Favorites” — the video preview unfortunately doesn’t reveal whether the “Favorites” section will be located above or below the Cards & Identities, but my guess is that it will be above).

With this in mind, it is unfortunate (and, frankly, a mystifying design decision even without this context) that filtering for Type=Card or Type=Identity for some reason moves the filtered results out of the relevant section (“Cards” or “Identities”, respectively) and into the “Autofill Suggestions” section. What’s up with that? This will probably break the fix that I suggested above (i.e., keeping the “Autofill Suggestions” collapsed for easier access to cards and identities), because if anyone who uses this method needs to search for a particular card or identity, the search results will be hidden.

As @nail1684 said, and as a workaround till this time arrives, one can mark them as favorites to make them easier to find.

1 Like

Thank you for the reaction. I was looking for the option to change behavior back for a few minutes, however I somehow missed it in an Autofill section.

With the cards I can wait for some time, today I just needed to replace card in 5 services, and it was extremely painful.

Yeah, I don’t understand why this was done… (or rather wasn’t done)

As they call it “sub-headers to autofill suggestions” I would think they become sub-categories in the autofill suggestions - and that would pretty much (structurally) be like the “Tab” tab of the old extension then, wouldn’t it?

Wouldn’t that be an expected result when the option “Always show cards/identities as Autofill suggestions on Vault view” is chosen then? I mean, if you get cards/identities per option always into the autofill suggestions… - and wouldn’t that be unfortunate, if that structure breaks when using the search?

Or did I get wrong what you meant?

(but I guess you’re right - it’s all a bit speculation now, as the video doesn’t show all cases very well… and as you said, no favorites in the video… and who knows if the end result is a bit different as the video shows, as that PR is not yet merged…)

You are correct, the new “Cards” and “Identities” sections are in fact sub-sections of the “Autofill Suggestions” section.

So the behavior on filtering for Type=Card or Type=Identity seems to be that the subsection heading (“Cards” or “Identities”, respectively) is hidden when the results are displayed.

This does not seem to be equivalent to the old “Tab” structure, in which the URI-matched login items had their own section, on equal footing with the “Cards” and “Identities” sections. Perhaps one could make a convoluted argument that the structure is equivalent, if one interprets the new UI as having an “implied” sub-section for login items at the top of the “Autofill Suggestions” section, but with a sub-section heading (“Logins”) that is always hidden (not just when filtering for login items).

So this is even worse than I had thought, because it seems unlikely that Bitwarden will be amenable to implementing collapsibility for sub-sections within the “Autofill Suggestions” section (and collapsing the entire “Autofill Suggestions” section will not help, if the cards and identities are embedded therein).

 

As noted above, my initial impression was incorrect — the cards and identities are not moved into the “Autofill Suggestions” section when filtered, as they are already there. What seems to happen when you filter is that the subsection headings become hidden.

This design creates unnecessary scrolling and/or clicking to use cards and identities. The option should be renamed from “Always show cards/identities as Autofill suggestions on Vault view” to just “Always show cards/identities as Autofill suggestions on Vault view”, and the “Cards” and “Identities” sections should be top-level sections (not subsections). Furthermore, all top-level sections (“Autofill Suggestions”, “Favorites”, “Cards”, “Identities”, and “All Items”) should be collapsible.

For a user who does not open the browser extension when autofilling login credentials, this would allow easy access to cards and identities (by collapsing “Autofill Suggestions”, and perhaps also the “Favorites” section).

When it comes to searching and filtering, in my opinion, the “All Items” section should actually show search/filtering results for all vault items — the “All Items” area should not exclude those items that are also shown in other sections (“Autofill Suggestions” and “Favorites”, as well as "Cards and “Identities”, if Bitwarden ends up taking my advice). The search terms and filters should be applied to all non-collapsed sections on the Vault view (“Autofill Suggestions”, “Favorites”, “Cards”, “Identities”, and “All Items”). That way, someone who needs to search within their autofill suggestions or within their favorites could expand the corresponding section(s) when searching or filtering. Others, who do not want autofill suggestions or favorites to be prioritized when searching/filtering, would be able to collapse the “Autofill Suggestions” and “Favorites” sections, but expand the “All Items” section when searching.

There could even be a customizable option that allows users to specify which sections are to be collapsed/expanded when searching or filtering.

1 Like

One note and one suggestion:

At the moment, I can click to autofill for logins, but it doesn’t work for cards and identities. That’s highly confusing. Maybe that’s covered by the identities & cards coming soon section. Great! If not, please make the behavior consistent across objects.

Autofill suggestions are great for logins! When there is a page, say a payment page, where cards / identities are detected as useful suggestions, they all get jumbled together. It’s messy and confusing. (And I’m not sure the sort is consistent / alphabetical.) How about leaving the suggestions for just logins and using favorites for the other objects? That has to be the more common use case for most users of a (primarily) password manager.

Hey @smr there was a bug in the identities/cards functionality, and an upcoming update will create a more persistent experience.

2 posts were merged into an existing topic: Context menu password generation ignores parameters

Rounded edges. :face_vomiting: I am disappointed every time another app switches to giant rounded edges and tons of padding/margins. It’s the trend, but I cannot understand why it’s the trend, other than being the Tailwind, Android, and iOS default style. It looks cool for about 5 minutes, and then the lack of utility follows.

It’s weird to defend round edges by stating they soften and humanize the UI. I actually want the opposite! My screen isn’t squishy, and my browser extensions aren’t writing poetry about love. Yes, a round button is a bigger target for a round fingertip, but you weren’t planning on using the negative space anyway (unless BW wants to try out a very, very experimental and potentially-cool-but-only-because-no-one-does-it-yet “bee’s nest” hexagon tile GUI; then I’m all ears, for at least 5 minutes until the lack of utility rears its ugly, giant-round-cornered head) and I’m very rarely on a touchscreen while using the extension. Round fingertip? What about my sharp-edged fingernail? The pointy tip of my mouse cursor?

It’s visually unappealing when done incorrectly (which a few people here have identified; BW is a bit guilty here) and it doesn’t serve a purpose when done right. I would much rather prefer sharp corners, careful alignment, enough padding to obey Fitts’s law and absolutely no more, subdued colors with good contrast.

(Sharp corners are in the Material You spec, but evidently no frontend designer ever reads that far, it seems.)

Menus should be loosely customizable and more difficult to get to based on how infrequently they are needed. I absolutely do not and will not use the GIANT SEND BUTTON on the primary dialog. It is a waste of space to me (but I’m sure other people think it’s swell). I don’t want to scroll at all if I search for a term but it has more than 3 matches. To add to that, I don’t need a big subheading element telling me THESE ARE CARDS, and this other group, THOSE ARE IDENTITIES; waste of space, little functionality or information.

That there is 12 mm between the edge of the extension dialog and the site icon? Waste of space (which would make the button width issue from @Nail1684 not so extreme) Between items? Well, I have 10 URL matches starting with address. but can’t even see them on a single screen unless I make the UI huge, which I don’t want to do either.

I would much rather BW focus on improving password field detection/filling than changing something that worked—presumably because Google wants everyone on Kotlin and Material You, but maybe because all the frontend new hires only think in terms of “xl:px-6 xl:py-1 xl:rounded-full xl:focus:rounded-3xl xl:border-2”.

You can’t autofill a password on the NXP registration website. The user field but never the password field is detected on any of the club login pages at https://vereinonline.org/

I’m sure there are many opportunities for improvements in this area, but instead we have the very visible (and mildly irritating) changes to the user interface.

2 Likes

I can offer one perspective on that. I like it when there is clear UI feedback indicating how I will interact:

  • rounded corners for fields I can type in,
  • round endcaps for menu and buttons I can click with my mouse
  • square corners for organizational elements with which I do not interact (e.g. perimeter of a modal dialog).

Bitwarden has some, but not all of this.

Historically, shading was used for this (raised buttons; recessed input fields), which equally satisfied me.

Bitwarden does have a form specifically for reporting auto-fill failures.

1 Like

Shading doesn’t waste space like buttons do, and to some people, it just looks better.

In contrast to the overly round fields of the extension, the fields on the Android app (2025.1.1) convey their purpose fairly well without being half- or full-radius-rounded (although they still waste a ton of space, but for a primarily touchscreen OS, this actually makes sense). I would find the rest of the picker elements (both Android and Firefox) more visually appealing if they were significantly less round—like most switches I interact with in the world; keyboard keys, sound mixer toggles, lightswitches. Then again, this is just my opinion and not an objective improvement suggestion. But I’m baffled that people designing UI’s are so… monoculture.

(I’ve got about a ten examples of Android UI and Google’s own Android apps butchering usability because some PM or very opinionated Design Guru think it looks great; the worst offender is Gmail with its stupid rounded rectangle checkboxes inside the rounded rectangle interactive boundary of each message. Good luck trying to efficiently select 25 messages to bulk apply labels! It looks silly and works worse than isolating the checkbox touch region from the message touch region by a half centimeter plus halving the margin on all sides.)

With that all in mind, the new generator is much more usable than the old ones. I’d be glad if the Android app went the same direction (or used at least a different length selector; I don’t enjoy needing sub-millimeter precision to select an exact character length, and there’s no way to manually enter a number or advance the selection by 1 in either direction.)