Visual representation of headings: an update from the team

Announcement
1

Hello folks!

We’ve seen a lot of talks about the representation of the heading in Bear 2.0 and we would like to explain our stance on that and show a small design update that might make the UI better.

When we designed the icon for the heading we considered all the feedback and issues that we got from 1.0 and what we wanted from this feature, here is a quick recap of that:

  1. it should be easy to understand that the header icon is clickable
  2. visually out of the way and subtle
  3. text (“h1, h2…”) is not great as it did not resemble an icon, and it was making the notes harder to scan because it was text (markup) near other text (actual title)
  4. heading level should be “easy” to read

Points 1 to 3 we got right, 4 it seems that it is still shaky. We were hoping that the typography would be enough, but from your feedback, we’ve missed the mark.

We iterated on the icon once again and this is the new result:

Bitmap
Bitmap762×755 71.4 KB

We’ve retained the shape of the icon and added a small number to indicate the header level. This doesn’t change how the markdown hiding works, it’s just a different header icon.

Let us know what you think about this!

29 Likes
3

It seems a great idea :grinning:

1 Like
4

I like it! <post must be 20 char>

2 Likes
5

yes, very much prefer this to the current one :slight_smile:

1 Like
6

Yes. This makes sense when hiding markdown is switched off.

7

This is a good solution, I think. Thank you.

8

The best of both worlds :grin:

1 Like
9

Looks wonderful! Great job, team!

1 Like
10

I think that is a really great idea. I believe it should satisfy all by not being intrusive but it also communicates the heading level.

11

Clever! Well done team, and thank you

12

Fabulous, best of both worlds. This one works for me (and hopefully everybody else, too)

13

I like this too. Easier to quickly see the specific heading size.

14

Okay I like this.

<post must be 20 characters>

15

This is fantastic! How soon can you bring it to Bear 2? :joy:

16

I am liking this. Great solution to the issue.

17

master stroke. a wonderful solution.

18

Errr…not sure how I feel about this one. The header level indicator of Bear 1 was one of those things that I immediately fell in love with. And now it’s hard to let go.

I wish we would simply have that preserved and nothing more. Maybe that and a reversion to placing header levels in the page gutter.

But hey, that’s just me.

3 Likes
19

The header icons are in the gutter. You probably mean something else?

21

On iOS? <chars must be 20>