Headerbar buttons layout

[nana-4]

Since the current headerbar is packed with many buttons, it has several issues:

• It looks crowded.
• It requires a wide window width.
• Icon buttons are hard to understand their roles until showing the tooltips (since these icons are not very common) - which reduces the usability.

[nana-4]

Here's my proposal:

Pros:

• Much looks clean.
• No need to rely on tooltips.

Cons:

• 2 clicks required to push the (menu) buttons.

[actionless]

what about having export as a 3 linked buttons:

     ______________   ______________   ___
   (  Export Theme  |  Export Icons  |  ▼  )
                            ___________/\______________
                            |                         |
                            |   Export Terminal…      |
                            |   Apply Spotify Theme…  |
                            |_________________________|

[actionless]

also, one more idea to reduce top panel free space -- what about linking not only export but also making all the left-side icons except for Import to be a big .linked block?

i saw similar pattern in gtk3-widget-factory:

[actionless]

what do you think?

[actionless]

[nana-4]

I'm sorry for the late reply.

also, one more idea to reduce top panel free space -- what about linking not only export but also making all the left-side icons except for Import to be a big .linked block?

Maybe somewhat better, but it will not solve the issue I mentioned above:

Icon buttons are hard to understand their roles until showing the tooltips (since these icons are not very common) - which reduces the usability.

[nana-4]

Regarding the .linked Export buttons on the right:

It looks somewhat better than the current buttons style, however, I think the headerbar would appear to be still crowded on non-tiling WMs. Also, displaying only "Export Theme" & "Export Icons" looks quite arbitrary and no regularity to me.

I got another idea for the Export buttons layout, so please check https://github.com/themix-project/oomox/issues/190#issuecomment-454480311.

[actionless]

(since these icons are not very common)

that's why i replaced clone to "save as" but feel free to propose other more common icon choices

linked

i can push it to a separate branch so you can test how it looks for you on non-tiling wm

[nana-4]

but feel free to propose other more common icon choices

I'm proposing the text-style menu items (except for Save button) instead of icon buttons.

I barely understand what "Save" icon and "Remove" icon are, but can't understand what "Save as" icon and "Rename" icons are at a glance (unless I show tooltips on them).

i can push it to a separate branch so you can test how it looks for you on non-tiling wm

Thanks, but I'm already testing how it looks on GNOME :) My impression is the same as above.

[actionless]

yeah, but after looking at the tooltip once you will already know it, while extra clicks you'd have to do every time

so the point is what's for to look pretty if it will cause user to do extra work?

I'm already testing how it looks on GNOME

i see on your screenshot left button group is not linked yet, so after linking them it will be even more compact, i've pushed to branch linked-buttons

[actionless]

however in gtk3-widget-factory example X button is separated from button group, mb it would make sense to do it the same way

[actionless]

and also about "save as"/coppy icon readability -- i think previous was more comprehensible (since it had two documents) while current looks almost the same as "save" and hard to distinguish

[nana-4]

yeah, but after looking at the tooltip once you will already know it, while extra clicks you'd have to do every time so the point is what's for to look pretty if it will cause user to do extra work?

In order to know it, users need to familiarize and remember it. The point is not only people who frequently use the app enough to remember it.

In my personal experience, I always at a loss which icon button to press while displaying tooltips, because those icon buttons are still ambiguous and difficult to understand to me. So I'd prefer one extra click rather than displaying tooltips for a few seconds while wondering.

Also, as a mouse user, I'd be glad if there is a right-click menu on the sidebar items which has "Save as", "Rename", and "Remove" items.

[nana-4]

and also about "save as"/coppy icon readability -- i think previous was more comprehensible

If you'll stick to the icon button style, I'll agree with it. Renaming to "Save as" I suggested was premised on making it a text style.

[actionless]

Also, as a mouse user, I'd be glad if there is a right-click menu on the sidebar items which has "Save as", "Rename", and "Remove" items.

that could be a way to go, i only don't know how to make it discoverable for the new users what there are some extra actions (like renaming when you click on right side)

one of popular usability complains was like "i open app and ok, i see a lot of themes, but how can i create a new one"; which means what current workflow of creating new theme (editing factory preset and saving it or choosing factory preset and cloning it) could be done somehow more intuitive, but i really have no clue on this part

[actionless]

 _________________________________________
/ Hey buddy!                              \
|                                         |
| I've heard. You're about to make your   |
| cool theme. I'm here to assist you with |
\ that.                                   /
 -----------------------------------------
                \
                  \

...................................................

[actionless]

but jokes aside, Firefox is also showing such help balloons on first start and after major updates

and also we almost already have our own mr mascot guy, so those could be combined :D

[nana-4]

that could be a way to go, i only don't know how to make it discoverable for the new users what there are some extra actions (like renaming when you click on right side)

I suggested a right click menu as a secondary menu. I mean, it's a duplicate of the primary hamburger menu.

I believe the hamburger menu is the first place for users to look for something action, so I don't share the concern of discoverability.

current workflow of creating new theme (editing factory preset and saving it or choosing factory preset and cloning it) could be done somehow more intuitive, but i really have no clue on this part

Regarding that, I think adding "Create New Preset" item in the popover on the top left would help that. Of course, separately from "Save as" (or "Clone").

    ___
   | + |
   __/\___________________________________
  |                                       |
  |  Create New Preset                    |
  |  -----------------------------------  |
  |  Import Themix Profile…               |
  |  Import Colors from Base16 YML File…  |
  |  Import Colors from Image…            |
  |_______________________________________|

[nana-4]

but jokes aside, Firefox is also showing such help balloons on first start and after major updates and also we almost already have our own mr mascot guy, so those could be combined :D

I think adding a small usage guide in the README.md is also helpful.

[actionless]

"Create New Preset"

i am still not sure what that button supposed to do, since themes don't have so-called "initial state", mb just create a copy of random preset (not preset called "random")

usage guides are already in readme, in the most bottom section

[nana-4]

i am still not sure what that button supposed to do, since themes don't have so-called "initial state", mb just create a copy of random preset (not preset called "random")

I think it's better to make and load an "initial state" preset than to create a copy of random preset. The "initial state" preset should be very basic and standard-like. ("oodwaita" is a good example. Or maybe we can just reuse it as an "initial state" preset.)

The user's workflow should be as follows:

1. Push + sign button then push the Create New Preset item.
2. Input a new preset name dialog is opened, input the name, then push "OK" button.
3. A very basic preset is now created.

[actionless]

yeah, in ui it will be very easy to do, just bind 'new theme' button to "save oodwaita as..." (or other theme) action

[actionless]

one more idea:

[ + ]    Themix   [ Burger ]   | (sidebar split)      %ThemeName%      [ Save ] icon   [ Export Theme  | v ]   [ : ]

[actionless]

also it could be nice idea for hobby project to translate such ascii-"art" to gnome-UI mockups :D

[nana-4]

however looking on the mockups i see one important difference: in the mockups they're using Burger menu for app-level actions, and 3-vertical-dots menu for item-level actions. while in your mockups both are residing under Burger menu (which seems semantically incorrect)

I reread the GNOME's guidelines:

• https://developer.gnome.org/hig/stable/primary-menus.html.en
• https://developer.gnome.org/hig/stable/secondary-menus.html.en
• https://developer.gnome.org/hig/stable/sidebar-lists.html.en
• https://gitlab.gnome.org/GNOME/Initiatives/wikis/App-Menu-Retirement

You're right. Themix should have both primary and secondary menus :D

[nana-4]

For balancing, such a buttons placement may be better:

[ + ]  Themix  [ = ]  |  [ Export v ]      %ThemeName%      [ Save ]  [ : ]

[actionless]

please note what in my proposal Export is linked group of Export Theme and dropdown with other exports, that's important about clickpath for the main usecase