UI/UX proposals for the extension popup
I had some general gripes when using the browser extension. Thus I want to provide my ideas of how it could be improved.
To get it out of the way, here is my proposal:
You can also check out a somewhat interactive version here on Figma.
Now, let's go through the changes in detail:
- The logout button should signal a destructive action in color. Currently, it is styled like a primary button suggesting the user should click it.
- By moving the actions shown when no search was performed to simple buttons at the bottom, they remain accessible at any time.
- The white text on a green background has a horrible contrast ratio of 2.43:1 while black on green has a really good contrast ratio of 8.64:1. This makes it way better for accessibility.
- I changed the cog to a copy icon as I only found it to contain copy actions and the edit option. However, the edit option is already performed when clicking the entry itself.
- Even if no search is performed all entries are shown sorted alphabetically.
- I updated all icons from the outdated Font Awesome 4 icons to Material Design Icons. This is purely subjective, but I like the icons and the license model around it way more.
Some additional UX / behavioral changes I would like to see that can't be seen from the mockup:
- When reopening the popup the previous search remains as it does now.
- However, when opening the popup the search is focused and everything is selected so you can perform a search without clicking in the field and potentially clearing it first.