[WIP] Desktop: Emphasise note title

[miciasto]

Resolves #915

Remaining Tasks

• Start poll and discussion in forum to survey user opinions
• Wait for users to complete poll
• Update following review of poll results

Changes

The style of the note title is made to match the H1 style of the note viewer.

For aesthetics, the toolbar buttons are slightly reduced in size. The magnitude of the reduction is balanced between ensuring they do not look oversized against usability.

The welcome assets are edited to remove the now redundant title contained in the note bodies.

Tests

• Check title matches H1 in note body
• Check in split layout
• Check in view layout
• Check without tag bar
• Check with tag bar
• Check toolbar button highlights do not overlap title
• Check with zoom increased
• Check with zoom decreased
• Print output

Comments

1. Concerning the change to the welcome assets, I don't know if the edit is compatible aesthetically with other platforms. Will the notes appear nicely without duplicated titles on other platforms?

2. Could be considered to relocate note toolbar to above title

3. When tested with very large zoom, eg over 200%, display items start to become jumbled and overlap. This is not specifically related to this change or feature, so I do not consider it an issue for this change.

[tessus]

I'm not sure, if reducing the size of the toolbar icons is a good idea.

Some people have already voiced their concerns that some elements are too small.

[miciasto]

Yes, it needs careful consideration.

IMO the toolbar buttons appears oversized with respect to everything else on the screen. They dominate, but I think the note should dominate. The change was intended only to make the toolbar buttons consistent with the other equivalent elements on the screen.

I wonder how much of the user base this would be a problem for? With the zoom function, perhaps this is not an issue.

In the worst case, could I make it an appearance setting eg toolbar button size: normal or large.

[laurent22]

I agree with @tessus that the icons are already small enough by default. It's possible they are a bit too prominent though, but maybe the solution would be to make them gray for example. Or we could remove the button labels. I think this kind of discussion would be better suited for the forum, where we can post screenshots with alternative renderings.

Otherwise I agree with making the title bigger, but not bold, so perhaps if you could change the PR to be just about the title for now, so that we can merge this for a start.

[dbogdanov]

Could be considered to relocate note toolbar to above title

My intuition is that the area below the icons for text editing is what these icons can affect. As this won't apply for note titles, this change won't make much sense.

[miciasto]

@laurent22:

I agree with @tessus that the icons are already small enough by default. It's possible they are a bit too prominent though, but maybe the solution would be to make them gray for example. Or we could remove the button labels. I think this kind of discussion would be better suited for the forum, where we can post screenshots with alternative renderings.

Just to be sure, the icons affected are only those on the bar below the note title. However I understand your caution, and will start a topic in the forum.

Otherwise I agree with making the title bigger, but not bold, so perhaps if you could change the PR to be just about the title for now, so that we can merge this for a start.

Yes, I'll do this and let you know when ready. FYI the bold was added to be consistent with heading format.

[miciasto]

My intuition is that the area below the icons for text editing is what these icons can affect. As this won't apply for note titles, this change won't make much sense.

@dbogdanov: Agree, not the best idea.

[miciasto]

For reference, here is an updated screen image following the review changes:

[miciasto]

And here is an image when viewing a note where the note content starts with a h2 heading:

[miciasto]

@laurent22 review changes done. Please let me know if you think it needs any more changes.

Edit: I notice the print function appears to render the note with title in full h1 format (large and bold).

[laurent22]

Maybe it's just because I'm use to it, but the note title feels too large now, like it's not balanced with the rest of the app anymore. I wonder what other users think? Sorry @mic704b, your changes make sense, but design changes are always a bit tricky and need to be seen as a whole, which is why it's best to find some consensus in the forum first.

For the font size, I misunderstood what you were doing and indeed it would be best to define a new font size, which would be derived from theme.fontSize. You could set it in addExtraStyle to something like largeFontSize = style.fontSize * 1.5. In general all the htmlXxxx styles should be only for the rendering of notes.

[dbogdanov]

Maybe it's just because I'm use to it, but the note title feels too large now, like it's not balanced with the rest of the app anymore. I wonder what other users think?

I guess the will always be some disagreement. Perhaps the title font size can be configurable?

[miciasto]

it would be best to define a new font size, which would be derived from theme.fontSize

Thanks @laurent22 -- I'll implement the font size suggestion.

but the note title feels too large now, like it's not balanced with the rest of the app anymore

Concerning the look and feel, are you open to a new appearance setting so the user can configure? Perhaps initially limiting the choice to selection of options eg small or large.

I wonder what other users think?

Yes, as innocuous as it appears, this is dangerous territory! I will start the discussion on the forum, just putting together a few more screen shots.

Edit: forum topic started.

[miciasto]

@laurent22

I wonder what other users think?

The poll has been open for over a week, and we already have 52 respondents.

Results

The current result snapshot is:

It appears the majority are in favour of larger note titles, as large as proposed.

However, although in minority, a significant proportion would prefer smaller than proposed, especially if we include those who want no change.

Action

So perhaps the two options resulting from this are:

1. Modify this PR to make it an appearance setting; or
2. Continue with this PR as is

Please advise your preference (or other).

Comments received

For the record, here is summary of the comments received during the poll:

• make title bold and bigger
• make title as per H1
• make it a configuration setting
• use markdown in titles
• also want on mobile
• align elements across top (notebook, first note, title)
• show title at the top of the note
• swap title and toolbar locations
• reversed video option
• it will solve a usability issue - confusing title with searchbox

[laurent22]

Ok let's go with the large title then. Thanks for looking into it @mic704b!

[miciasto]

Thanks @laurent22, let's see how it goes.

[Perkolator]

Maybe it's just because I'm use to it, but the note title feels too large now, like it's not balanced with the rest of the app anymore.

I'm late to the party, missed this issue and forum poll. I'm on the same side with this as you are. It looks out of place now with the rest of the app. I think that visual development should never be left to common end users. ;)