I’ve been evaluating Discourse for a while now to use on a a parenting and a gardening community I help manage.
Users on the parenting forum are youngish (20-40) and the gardening community are older (60-80), but what they do have in common is a high percentage of users on mobile devices (primarily iphone and ipad). On the parenting forum, just over 80% of traffic is on mobile devices (imagine a mother, small baby in one hand, phone in the other).
I’ve used Discourse before, but not on mobile. When I started using it on mobile to test the feature set, I was surprised by how janky the experience of creating a new topic is, as well as some other quirks.
On my iPhone 6, running iOS 10 and using Safari:
when I create a new topic the modal jumps around as I switch between fields
The text formatting icons are tiny (although perhaps this could be dealt with through custom css?)
The location of the upload image button sits underneath my keypad - I have to know it’s there to know I have to scroll down to upload an image
I’ve made a screencast of my phone here we’re I’ve attempted to show this behaviour: https://youtu.be/Ewux3UW8nLg
I was excited by the release of the iPhone app but because that just gives you a webview, it doesn’t solve any of my issues.
Does anyone else see these issues or is it just me?
I love the featureset of Discourse, the community around it, and the desktop experience, but the mobile experience is probably going to mean we end up going with something else…
I’ve noticed the same thing. I’m actually also evaluating discourse for use for a parent community!. And have the same feedback from some of the testers that have used it on mobile about how the text input jumps around.
( this is probably not that useful of a reply to you other than to add a plus one that I’m in the same situation!)
we do not really optimize for create new topic on mobile, do you know your community to be creating a lot of new topics on mobile, versus reading and replying to existing topics? How many new topics per day do you expect?
formatting generally should be done with markdown, which does not require a toolbar. See http://commonmark.org/help … That said I agree on mobile the toolbar should be removed altogether or simplified, this is something @sam pulled forward into mobile that didn’t use to be there at all.
TL;DR we have not spent a lot of time looking at Create New Topic specifically on mobile, but it is the harder case because several extra fields are required including title, category, and even tags (if enabled).
Thanks for the reply, @codinghorror. I understand the challenges!
On a typical day on the parenting forum we get somewhere between 30-50 new topics, about three-quarters posted on mobile, so it’s a significant enough number that I worry about degrading the experience
Markdown - yeah, I know, that’s cool, but in my world of users who aren’t versed in it and don’t sit at a laptop all day it’s difficult, particularly for newbies. When you’re learning markdown you really need some helpers, or another tab to check things, which is harder on mobile.
If the toolbar was the only issue we had I’d make a case for removing it in our version but really the biggest problem is the modal jumping around.
Note than an iPhone 5 is a pretty small device these days, the iPhone 6 and 6+ (or 7 and 7+) are considerably larger.
With regards to the video. When you say “modal” what modal are you referring to? I’m not seeing bouncing? @jesscmc it looks like you explicitly chose to show the toolbar, which is not the default? Perhaps we should remove the toolbar option when creating a new topic @sam as there is no room for a toolbar on new topic specifically.
Another option, on new topic mobile, make the post content viewport considerably smaller, like 2-3 lines max. So there’s room for the keyboard to fit plus suggestions etc. Like so:
I think the problem she said is the category selection.
EDIT: Now I understood the problem. When you click New Topic we focus title. So the keyboard shows, and everything goes up. Then you select a category, and the keyboard disappears, so everything goes down. Then you click on the body and keyboard shows again, and everything goes up.
Possible Workarounds:
Makes selecting a category go direct to focus the body
Looking at the video the big complaint is that “full screen” mode keeps collapsing and expanding as you switch fields, this is something we can look at sorting out
Yeah as @Falco pointed out, category selector is mucking stuff up big time, can reproduce on iPhone and iPad, will fix
Might it be possible to split these up into multiple steps, only showing one at a time? So the first thing you’d be presented with would be a single field for the title and buttons for “Next” or “Cancel”. Next tab would be the category selector, and lastly the body, at which point you’d see the “Create Topic” button.
Phone UX is definitelly something I’d vote for improving I’m sure we can do better than current state. Ratio of mobile users is still increasing and this will be worth it for future.
Perhaps the mobile category selector should use type-to-complete like desktop? That might be the simpler fix. And the keyboard can’t collapse when you are in a text entry field…
We should be way less aggressive about “maximizing” the editor space with the keyboard visible – I don’t know that people on mobile really need 10+ lines of post body visible. Being really aggressive here means the key UI for Submit and Upload are not even visible on an iPhone 5, as you can see in the source video.
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…
I like the way @erlend_sh is thinking here… Another couple ideas to explore:
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.
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?
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.
As an added bonus you also get this which has bugged me for years
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.
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.
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?
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:
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, 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!
I’m sure we can do better than current state. Ratio of mobile users is still increasing and this will be worth it for future.
