search

dragos-efy / efy

User Customizable CSS / JS framework. Private, modular & convergent apps
https://efy.ooo
GNU Affero General Public License v3.0
63 stars 1 forks source link

Change the EFY UI customization button icon from a generic hamburger menu to a more descriptive icon to improve UX #11

Closed codenyte closed 8 months ago

codenyte commented 8 months ago

The icon on the button that opens the UI customization button is just a generic hamburger menu, that may cause confusion for some users as it might be interpreted as some kind of sidebar for the website, not as a theme customization menu.

Current design: image image

Therefore, I suggest using a different icon. I don't know how icons are handled in EFY, but I found the palette icon on Font Awesome: https://fontawesome.com/icons/palette?f=classic&s=solid

It would be better from a UX perspective, because it is much more descriptive than the generic hamburger menu.

dragos-efy commented 8 months ago

It's a generic icon on purpose, because in terms of UX you likely want users to use 1 menu for everything, rather than 1 for design and 1 for the app settings. And the efy menu allows devs to add their own navigation links at the top of it as well as their own components, html etc. We actually do that with Piped, but you can see it on mobile, or if you make the window width small, cuz on desktop the window is wide enough to allow the navigation menu to be on the top right area.

However, yes, the efy menu can work isolated too, which is the default behavior, to add a floating button if the app doesn't integrate its own menu with efy. Also, apps are not tied to using that icon, they can make every html element trigger the efy menu to open / close if they use the efy_sidebar_btn attribute and use any icons they want.

You have a point tho, cuz some people don't know about efy until they open the menu, so I had some people not realizing they can do all the crazy cool stuff efy allows them to until someone told them or they opened the menu. My idea is to maybe add a small thing next to it the first time they open the app that says something like Open this menu to customize the app maybe. I'm not sure yet what solutions are best, but yeah, the icon or type of element that triggers the menu is already customizable. You can even add 40 of those buttons, all different if you want lol. Thanks for the feedback, lmk if you have more!

codenyte commented 8 months ago

It's a generic icon on purpose, because in terms of UX you likely want users to use 1 menu for everything, rather than 1 for design and 1 for the app settings.

Realistically, I haven't seen any website/app that implements EFY in this way. Even Piped or the EFY Website exclusively use the sidebar for UI customization.

Also, apps are not tied to using that icon, they can make every html element trigger the efy menu to open / close if they use the efy_sidebar_btn attribute and use any icons they want.

Thanks, I didn't realize that it's possible to easily change the icon

Thanks for the feedback, lmk if you have more!

I will definitely do so, the idea of EFY is great and I love the design and customization options