Mobile toolbar design

As many of you know, there are many options in the mobile toolbar. And there will be more, as we port more functionalities to mobile, it will become more and more crowded.

From our observation of other editor type apps and from our own needs, we have came up with four categories of designs:

  1. Scrollable. As the name suggests, all options are horizontally listed, and the toolbar can be scrolled. The options can be loosely grouped, indicated by larger space between groups. Example: Bear.

  2. Two-level. Most options on the toolbar will trigger a secondary menu. For example, after you choose “block-level items”, you can choose between “paragraph”, “heading”, or “ordered list”. Example: Google Docs.

  3. Hidden options. Most frequently used options are directly accessible, whereas less used options a hidden in a “…” menu. Example: Dynalist before the toolbar revamp.

  4. Customizable. You can rearrange, add, or remove options on the toolbar. There might be a fixed number of option slots on the toolbar, or you can do whatever and the toolbar will scroll.

Which one do you like best?

  • Scrollable
  • Two levels
  • Hidden options
  • Customizable

0 voters

1 Like

Truthfully, I like a little of them all. Customizable with a two-level functionality and scrollable/hidden as appropriate. That said… that’s a massive pain in the butt for something that’s setup once and then generally just left alone.

I personally know I have my very few functions that I do daily on mobile… For me, I only really need The Date, the Right Indent (left indent can be done with enter so I don’t use that dedicated button), and the complete item check.

But I know my usage may not be yours, and may not anyone else’s. So I think that the customizable would be nice for everyone to have a few “most used” favorites, but I I think a 2-level menu doesn’t try to conform to anyone’s need and gives everyone all the functionality they may desire, even if it means a couple more taps. And finally scrollable because even a multi-level menu may still not quite fit in portrait mode

‘Most frequently used options’ + hidden - in all cases of ux/hci/ui/design this is what you want

  • but the key problem is that ‘Most frequently’ used is not the same to all or even most users

ideally, it’d be ‘fixed number of [custom] slots’

  • but specifically to mobile/tablet, some of those frequent things should be changed to gestures, voice & other ways of ux/ui/hci

  • prepare for the AR future, tho it’ll be a while… a long… while…


also you do not pick/select designs based on what other ppl are doing,

  • 'Scrollable Two-level. ’

  • they did it this way likely based on the number of discrete features they had

you should base the decision on the frequently used features most users are going to use

  • you pick a design cos it’s actually for your specific case, not theirs