Mobile editor preview button and toolbar

I started to use mobile (phone, tablet) more and more on forums. As you post images or links, you want to check the preview, but I find the two step click a bit inconvenient.

Have read this topic, where feature was introduced:

I find this mini-hamburger menu as very hard to notice (discoverability issue) and find two click process as two much for such common feature. I see this on same level as insert image, which is available all the time.

I see following two options how to improve it:

  1. Show toolbar always
  • Better discoverability for whole toolbar - I find that you can afford one additional line of vertical space for it on modern mobile devices.
  • Mini-hamburger removed for better top bar (prevent misclick on colapse editor)
  • Can move image button from bottom to toolbar to make it on same spot as others (consistency)
  • Preview button could be moved in the place of image upload button - as it has impact on whole post, similar as other buttons below.
  1. Add preview button next to image upload
  • Saves one click, improves discoverability
  • Maybe confusing with image button next to it?

I think option 1. would greatly improve mobile editor.

3 Likes

What are you talking about? The toolbar, which includes the preview toolbar button, does show by default on mobile. Are you on an unusual device?

Although now that I think about it, if we are removing the duplicated upload button from the toolbar, and we have the upload button at bottom right on mobile… preview button might make sense there since it is also a mobile only thing? What do you think @sam?

3 Likes

Interesting: on my forum (using PWA on Google Pixel 2 XL) when I reply, toolbar is missing:

On new topic is OK, and on meta I cannot reproduce missing toolbar.

I like that cause we can make the button a bit bigger as well.

4 Likes

If this should be the case, why not remove option to remove toolbar (mini-hamburger button)?

We’re short on space there because of the saving... saved status

49%20AM

Would it make more sense for upload to exist in the toolbar and preview to be on its own below? :thinking:

6 Likes

I think it makes more sense to use a glyph for saved, maybe a checkmark? “Saving” should be the spinning circle anyways… so go from

  • spinning circle (I’m saving!)
  • checkmark (saved!)
  • fade away…

Less translations = more betterer

8 Likes

Would love to create a nice animation for it :slight_smile:

EDIT: Opened a PR

Problem is that even after turning the “saving” into an animation, there can still be an error like “Edit Conflict” or “Drafts Offline” which then would still be displayed as text and thus require more width.

An Idea I have on this one would be to show a cross instead of a check if there is an error and show the error message as a tooltip if the user hovers the cross.

cc @awesomerobot @codinghorror

7 Likes

I can confirm that this is not always the case. It seems that the toolbar retains its visibility state from the last time it was changed (not sure what state it is in for a new user).

Steps to repro here on meta:

  • open composer
  • select hamburger menu to toggle edit toolbar (hide)
  • exit composer without saving
  • open composer
  • toolbar is still hidden (it persists even on browser close)

It is visible by default for a new user, except when the viewport is very small, and on new topic creation (as that adds category selector which takes up additional space).

I don’t think this would be clear enough, to the point where an X might be more confusing than having nothing at all… I’m also assuming that “drafts offline” probably happens more often with flaky mobile connections so there’s no tooltip.

I don’t think coming up with a “connection issue” type of icon would be too hard for the draft case… but edit conflict is much harder to convey. Maybe edit conflict could be more interruptive anyway? A little overlay like the posting errors? Not sure.

38%20AM

3 Likes

For “Draft offline” Fontawesome would have Icons like “signal-slashed” or “wifi-slashed”. But both icons are only available with the pro version.

And isn’t edit conflict already a full popup or sth like that? Probably no need for a draft status then.

Ok, this is probably what got me confused. Is it really not enough space to just have it always and remove mini-hamburger altogether?
I think such simplification would improve ux.

Love this idea, go with it :heart:

2 Likes

Opened a PR :slight_smile:

4 Likes

Are we clear to add the bottom right preview button on mobile now, and remove it from the toolbar on mobile @awesomerobot?

3 Likes

I think we still need an icon for “drafts offline” status

The only out-of-the-box FA5 icon that makes sense to me is the generic error

tried a couple custom-built options that might be a little more meaningful on their own…


3 Likes

I think the red exclamation point is a bit much, drafts offline is not really an error. Let’s go with red sync-alt?

Maybe some text explanation beside the icon would be helpful :slight_smile:
(I love those ones with grey backgrounds that are fading out after a few seconds.)

This is for mobile, there is no hover on mobile. Tapping on it could show something but the use case is so narrow I don’t feel we need to gold plate it.

1 Like