Login form structure and Layout

[GuessMo]

Feature request

Hi, firtst at all I really like your plugin and use it almost every day.

In my oppinion the layout of the login screen seems to be a bit unstructured and chaotic. So here are some ideas for better UX design. If you like it feel free to use them or ask for more. I would like to help you making your tool even better 🙂

And maybe there is a way to support a dark theme ... 😍

[subdavis]

That's... Damn. That's really nice.

I'm going to be really busy with a technical rewrite for the next month or so, but this is awesome. If you have a mock-up of what the list view could look like, I would really like to see it.

Keep doing God's work.

[GuessMo]

Cool!

I am glad you liked it. Of cause I can make some mockups for the list view and post it here.

Stay tuned 🙃

[zmilonas]

Hey @FlorianSteller thanks for the beatiful mockups and nice UI change.
In terms of implementing it I'd be happy to help!
At the same time I'd wait with releasing it just a little while since we just introduced a small UI change recently.

In terms of UX I'd also would like to if possible introduce some changes to better prioritze the mian functionality and make sure everything is clear. UX in Tusk is still crippling thanks for poinitng us in a direction!

[GuessMo]

Hi @zmilonas glad you liked it, too.

The mockups are made from the features that are now implemented. Of cause there is a lot more possible. If you got any recommandations or future implementations that I did not consider please let me know. I just did some like fun makeup thing of what I have seen as a user 🤠

I recognized some UI changes you did not quite long ago. But there are so many views like the settings page that could be redesigned to better fit into the product. What about making a "full package" of UI changes? This will take some time I guess 🤓

"In terms of UX I'd also would like to if possible introduce some changes to better prioritze the mian functionality and make sure everything is clear" - What about cleaning up the Login screen and move the settings for passport into the bullet offcanvas menu?

So here are the views for mockups I thought they could be helpful:

• Login ✅
• List view
• Detail view
• Search for items
• Settings (some small changes like making select boxes nice and adaopting the "look and feel" so the settings are not feeling like being from another extension anymore)

Let me know if I missed something.

By the way: If you got any new feature that has to be impemented you can tag me if you like. I am sure we will find a good solution for the existing layout and I can rethink of it while integrating into the new mockups. ✍🏻

[zmilonas]

@FlorianSteller

I'm really happy for a redesign of settings and Login!

Don't get me wrong, the changes I did recently are miniscule and I'd be happy to replace them! Not mad at all 😅

For the UX point I just want to make sure we're on the same page and together with a beatiful UI - which you created mockups of - we remember about awesome UX which do not mean the same thing ;).

I am not sure about the specific detailedchanges I'd implement but we have an issue that not all of the functionality like keyboard shortcuts, TOTP, autofill, Details' View existance (:joy:) are prominent enough.

I'd love to emphasize all of these features incorpotaing them into your very nice UI and color scheme.

A lot of work ahead of You and us! Super awesome that you're willing to devote Your time for this project 😄

[GuessMo]

I d not get you wrong. Everything fine 😺. I would be very happy being a part of this!

[subdavis]

I'm glad you both so interested in this!

I would encourage us to consider this task an opportunity to clean up the HTML/css practices, as there is probably a lot more CSS in this project than there needs to be.

I'd also like to see the other mockups and break them into a list of workable issues before anyone starts coding.

I'd like to block this on completion of #259 since that will heavily impact the frontend. I expect that will take 1-1.5 weeks more.

Thank you!

[GuessMo]

So here we go! Next mockups. 😀

[GuessMo]

Klicking in the entry text in list view starts autofill of recognized form. No copy button needed ^^

[zmilonas]

To be honest I don't like the EntryList changes, they seem a little bit like forced minimalism. I do not agree that removing the buttons from the EntryList view is a good idea because very few people actually go to the EntryDetail view and use the information from there.
I'd also ask you to take into consideration a currently open pull requet for TOTP that affects the EntryList view - #204

[GuessMo]

Ah, ok. If you prefer keeping the buttont, shoud we provide one button for user and one for password? This is something i missed a few times ...

The List View: I will go for a bit less minimalism 🤓

[subdavis]

For the record, I'm going to consider using Vuetify.js for the UI after the state changes are done.

I've always truly hated material design input groups, so I might ditch that for the unlock screen you made.

I like your search bar a lot. I also kinda like the idea of inline details, rather than making that it's own page.

I also love this color palette with the teal and soft red.

I don't like the minimal unexpanded list entries. They need to have copy and auto fill and show all the info they currently show.

[GuessMo]

Hi, sorry for answering that late. Lots of work to do these last days of the year ...

@zmilonas @subdavis I have updated the list view that now brings back the buttons you missed last time and some other small improvements ^^

Btw: is it possible to get the logo as an SVG file so I can invent it for dark mode?

[subdavis]

https://github.com/subdavis/Tusk/tree/develop/assets/icons/sizes

Each folder has a logo in like a zillion different formats. Once again, thank you @ggabogarcia ❤️

[GuessMo]

Here we go! Inverted logo version. Including a new icon in the Browser bar.