HeaderBar design and impelmentation

[Suzie97]

A headerbar is an important part of elementary OS apps. elementary OS doesn't recommend using menu bars which are used by most of the other photo editing applications.

Being limited to use a headerbar only, it gives us an advantage as well as a disadvantage at the same time.

Menu Bar Analysis

Menu bars can contain a lot of options which prove to be pretty helpful once the user has used the app enough and knows where each option is hidden. But this is also the problem with menu bars in my opinion. The poor discoverability. There is not much distinction between the options and the user has to rely on reading text for finding what he/she needs. This can be very tedious and unintuitive, when the user is just starting.

HeaderBar Design

Right now, I'm thinking about putting controls to hide and view the sidebars, like GNOME Builder, and the tools panel.

Also, I want the headerbar to display information about the document, provide controls to switch personas, control the zoom level, and provide a options to open a file, export and other similar things.

Prior Art

Affinity Photo

Pixelmator Pro

Adobe Photoshop

Akira

[Suzie97]

@abdallah-moh, @syfds, what are your thoughts?

[ghost]

Pixelmator Pro Merged with Akira

[syfds]

@Suzie97, I like the design you created in figma: minimal and clear. I'm personally not a fan of a header bar full of icons/shortcuts like implemented in Akira. For example I would move zoom widget to the bottom like in Photos. I find the approach in Inkscape with this left oriented toolbar quite intuitive:

[ghost]

@syfds I think having a bottom bar will take more space from the window I saved space in the design for the user to view the image freely
without having a small canvas to edit the Image

[Suzie97]

@Suzie97, I like the design you created in figma: minimal and clear. I'm personally not a fan of a header bar full of icons/shortcuts like implemented in Akira. For example I would move zoom widget to the bottom like in Photos. I find the approach in Inkscape with this left oriented toolbar quite intuitive:

We will also implement a left oriented toolbar, and as for the zoom button, I think having it in the headerbar makes more sense because the main goal is to give the content (image) full attention and make the interface almost invisible. So the less UI visible, the better. And for the other options that can be potentially included in a bottom bar, we will try to incorporate them in the sidebars.

And personally, I also like a nice and clean headerbar, but it is tempting to put more options at the headerbar like moving the layer to the top, smart search features etc.

I'll research and do some more revisions.

[Suzie97]

Sketch lets the user customize the toolbar, i.e. he/she can put whateever buttons he wants on it, other apps like affinity provide personas. Each persona adds and removes different buttons from the toolbar based on the workflow.

As @syfds said, some users might like a minimal headerbar with less buttons, while others might want all the shortcuts they can get on it. We can discuss on making the toolbar intuitively customizable.

[ghost]

I agree with this

[Suzie97]

@abdallah-moh do you have somewhat of an idea on how hard or easy the implementation of a customizable toolbar will be? Ideally, we would want to provide the functionality to just drag the buttons from a window to the headerbar like macOS apps and firefox.

[ghost]

First if the user removes something from the headerbar where will it appear

[Suzie97]

First if the user removes something from the headerbar where will it appear

see a video on customizing the toolbar on mac OS apps, we can do something like that

[Suzie97]

Sharing some videos on how to implement the customization of the headerbarThis is how the toolbar can be customized in macOS apps.

Pixelmator Pro

CustomizeTools.mp4

Prior Art in elementary OS

We can drag and drop apps from the applications menu to the dock, and drag an app icon out of the dock to remove it.

[hanaral]

The poor discoverability and 'takes up too much space' issue, imo, is completely ignoring the fact that all good implementations actually utilise modern paradigms like context based switching of context bound actions. Akira recently added this as an aim (by disabling/hiding out-of-use widgets), since it is necessary if we want an accessible and also visually appealing future. I think that the design and user experience from every level needs to be used to assess how a headerbar is used since at the end of the day, the app isn't just used from the headerbar, and it shouldn't be anyway.
Take a look at how Sketch on macOS has a limited number of buttons available based on what's selected:

Or Affinity Photo controls for live retouching

Versus selection refining

[Suzie97]

@hanaral, thank you so much for your interest and enthusiasm for this project. Your ideas sound good to me.

We do have plans for implementing a persona swticher, similar to Affinity Photo. But, different users have different workflows. And by default, it make sense for the options we choose to put in the ToolBar (headerbar) feel useful and familiar to a majority of the users. In order to achieve this, we'll have to do some research and if possible, some user testing.

A customizable headerbar is attractive to me because it lets the user adjust his own shortcuts (I'm saying shortcuts, because the main goal is to provide quick and easy access to the most relevant controls). But this also raises another question. That is, lets say the user is in the export persona and he/she wants to change the toolbar to suit his needs. So now, should the app let the user choose between all the options that can be put in the headerbar or only the options relevant to the particular persona he/she is in, which in this case is the export persona?

[hanaral]

@Suzie97 Since personas are a power user feature they shouldn't really override the specific tools for the context. Possibly the headerbar would only show the persona actions when nothing is selected or there is no extra context - and while the user is holding the predefined 'persona' key combo ( alt + shift ?)

[Suzie97]

@Suzie97 Since personas are a power user feature they shouldn't really override the specific tools for the context. Possibly the headerbar would only show the persona actions when nothing is selected or there is no extra context - and while the user is holding the predefined 'persona' key combo ( alt + shift ?)

By persona actions, do you mean the switch persona buttons or the actions associated with each persona? I just want to have a clear understanding. I'm sorry for the inconvenience 😅

[hanaral]

I mean the user-defined buttons toggled by switching personas. I don't see there being a problem with implementing a way to access personas, it could just be a searchable list popover like the language selector in Code

[Suzie97]

I mean the user-defined buttons toggled by switching personas. I don't see there being a problem with implementing a way to access personas, it could just be a searchable list popover like the language selector in Code

Thanks for the clarification, now it makes sense. 😄