Discourse create new topic user experience on mobile

Are users really doing a lot of formatting on mobile? In my experience they just type words, sentences, paragraphs and leave it at that. For example, this post has zero formatting. Your original topic has a bulleted list which is done like this in Markdown:

words

* item 1
* item 2

etc. (dashes also work)

Originally we had no toolbar at all on mobile, and frankly I’d prefer to keep it that way…

1 Like

I like the way @erlend_sh is thinking here… Another couple ideas to explore:

  1. Use the full screen for the composer on mobile
    There isn’t really enough room to navigate when it’s up anyway. People can collapse it if they want to explore while they are drafting a topic.

  2. Make the category selector and/or topic entry separate modals.
    They could take less space in the composer of they were just links that opened a modal to enter them this way (kind of like the upload button).

I also like the idea of just hiding the toolbar on mobile… maybe an argument could be made to add a link to insert emoji could be placed next to the upload link?

1 Like

Enjoying this thread. Perhaps a first step might be to trigger a google analytics event when a post is made (distinct actions for new post, reply, personal message, personal reply). This way we could breakdown posts by device type and see which devices are under indexing. And if changes over time actually drive an increase in posting.

1 Like

I just tweaked the experience per:

https://github.com/discourse/discourse/commit/7b5b255168978a056c70bb2088b2515915155a48

As an added bonus you also get this which has bugged me for years

https://github.com/discourse/discourse/commit/9a685c64ee86682bc200f609bcfd7fdbb0950b82

This is deployed on meta, feel free to try it out.

Composer mobile hack now has a special mode for topic creation where it stays maximized even if you switch fields so it is significantly less janky. I also tightened up height when composing topics.

8 Likes

Thanks for bringing this to our attention @jesscmc I agree we could have done a lot better here – try it on this site now with the changes Sam just made in effect and see what you think.

3 Likes

This is fine I think. But this?

Please note that I’m not (this time!) advocating WYSIWYG, just that what should be a single indivisible object (an image) appears to the user as an incomprehensible blob of computerese that is easily broken. With no preview pane, how is the user supposed to know what it is?

13 Likes

Thanks, all - bowled over by the speedy response while I was asleep!

@sam’s changes have vastly improved the experience for me. The only real jump now is when you 1. tap new topic button, 2. tap topic title field and the composer jumps to the top. Wonder if it could expand to full screen immediately after tapping the add new topic button, so you don’t get the jump?

Re formatting toolbar, have also noticed (on mobile Safari on my iphone 6, anyway) that if you type something, then decide to format it, and you’re on the first line, you can’t actually use the formatting buttons as the iOS tooltips completely cover them:

True, having looked into it, they’re not doing it all that much. Native emojis and image upload really cover most of it.

I agree with @Tom_Newsom that the image upload ‘computerese’ is a downside.

5 Likes

I agree with the OP, I have an iPhone 7 plus and my Discourse installation is hardly usable there, other than reading.

When writing (creating a new topic or replying to an existing one) it is a pain, the phone keyboard covers the editor space, and if you tap anywhere outside the editor or close the keyboard with the “x” then your text disappears. Trying to recover it makes the screen jump a lot. And if you are finally able to recover the editor with your text in, the “reply” button is out of reach, and when you try to scroll the screen up to show it and press it, the screen jumps and you cannot press it anymore, you’re forced to cancel the editing and restart from the beginning.

When I first started discourse, I actually noticed this and brushed it off after getting used to it, but it does feel a lot smoother with this change. Great suggestion; it feels very nice now!

One minor annoyance that caught me off guard when playing around with it was due to fat-finger selecting categories - if there’s a link in the category description (eg, #support:wordpress) it’s very easy to press on mobile. When in a category dropdown selector, a finger tap on the category is most likely for selecting the category for my input, rather than a navigation. Found myself navigated to github, and took me a second to figure out how I got there!

Er what? I use the iPhone 7 with Discourse literally daily and I have no such issues.

The OP was talking about new topic creation, which I agree was a blind spot because I just don’t tend to create topics on mobile, I read and reply as 99% of my activity time on mobile. I suspect that’s true of most people as well.

The only alternative is this, but it has no provision for width or height:

![](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/e/3/e32ff62cdc3aac069d223a027386a8b104a164f6.jpg)

Most of that “computerese” is the path to the image. Compare with this:

![](/uploads/egg.jpg)

I suggest taking this to a different topic, though… further elaboration on it here is intensely off-topic.

Toolbars are generally quite crap on mobile for a variety of reasons. I wasn’t too happy that @sam brought them back, but there are a handful of power user things that can’t be done without them (like replying as a whisper, etc).

Anyway, better for this topic to stay focused on Create New Topic improvements.

1 Like

Seems pretty smooth @sam

I wonder how important it is to be able to see all fields at once. The composer field seems short compared to the reply window

What if as soon as you tapped into a larger compose window, it just scrolled the page down so the the post button could be visible?

Another note, on our community we sort all our categories alphabetically, but showing the hierarchy on the dropdown makes it difficult to use the selector. Perhaps if there was an easy wat to target the first category, we could hide them…

This is another argument in favor of typing to complete category rather than making people scroll through a list as I have suggested multiple times in this topic.

5 Likes

Sounds like a good option to let the community admin decide. Dropdown makes sense for less than 10 categories I imagine

2 Likes

Or as @mcwumbly suggested make category selection a full screen modal affair.

1 Like

I’'m not sure about type-to-complete category - if you’re newish, or not a daily user of the community, how would you know what to type? A two-step process or perhaps a simpler dropdown without the descriptive text for each category might be better.

4 Likes

I was under the impression that the select dropdown wasn’t going anywhere; but it would have the same kind of type-to-complete as the desktop experience does currently. Then selecting a topic could keep focus on the autocomplete element. This in turn would keep your keyboard, so as to not have the composer “jump” when the keyboard disappears.

2 Likes

Great to see discussion on improving the mobile experience. It is truly a mobile first world - in many countries the 50:50 in between mobile and desktop happened quite some time ago, and now mobile has globally surpassed desktop. It is also worth mentioning that in the developing countries the peoples’ first internet enabled device is very likely a mobile (of a lower price category). So they do not walk the desktop-laptop-smartphone path, but go straight to mobile.

That said, I don’t have a silver bullet how the mobile UX should be optimized. The screen estate remains to be a challenge. Proposed solutions may call for some A/B testing?

One thing that works particularly poorly in mobile is topic templates. They are not great on desktop and are close to unusable for mobile topic creation.

I just noticed that on desktop, there’s a auto-complete for category selection. Is this new in 1.7 or had I just never seen it before? Any reason why not to add it to mobile?

Keyboard pop is very disruptive and not to be done lightly. You immediately destroy half the screen.

4 Likes