Overlapping buttons in iOS Dutch

On smaller iPhones with Dutch as language the buttons at the bottom of the message composer are overlapping:


Screenshot taken on an iPhone 5c with iOS 11.2.6. That’s an old model, but still widely used and I’m getting reports that is no different on more recent models.

Yes, our language has longer words for “saved” and “Upload”. But on a 4.6" Android 7 it looks like this:


Another minor detail: inconsistent capitalization.


@awesomerobot perhaps we can change saved to an icon on mobile?


Agree but saved is a rough one for iconography unless you still use floppy discs …


Right, other than a floppy not a lot else makes sense for save… we’d just be coming up with ideas that aren’t very clear to most people (and the floppy icon has slowly been losing clarity for decades now too).

So we could instead assume upload and cancel are mostly understood through icons…

In this last example, we could also remove the word from the uploading progress indicator (to save space) and it could occupy the same space as saving/saved.

Then if they’re icons… are they clearer as buttons? is the image icon clearer than the upload icon (especially in the mobile context)?


I think upload / image is more than important enough to be elevated to button status. Cancel, definitely not.

I very much like your idea of avoiding the “what the heck glyph do we use for save” conundrum in favor of making cancel and upload glyphs, instead … let’s do that! :wink:


Cancel as a glyph can kick in on narrow with a media query, on my iPhone X there is plenty of room

1 Like

I think it’s OK to use the glyph for upload and cancel on desktop too @awesomerobot – less translations, more room!

But the click target is so small for my old fingers, cancel is easy to click, a tiny x is not easy

1 Like

Cancel should be smaller, it is a much rarer action. And destructive.

1 Like

Opgeslagen / saved always appears within a split second after I type the first character, even when I’m on a slow 3G connection. Before that there is a blank space. So my impression is that it is a status indicator, while the other 3 on that bar are “user action” items. I dont’t think any of my users would even notice if it doesn’t appear, nor would they know what to do then.

But if it needs to be there: would it not be easier to make the font on iOS a bit smaller, like it is on Android? You probably know by now that I’m not a software developer.

BTW this is only the 3rd day of my Discourse trial and I love it! Coming from SMF.


Just pushed an update on this — replacing the cancel button with an X in the composer everywhere, and changing “Upload” to the button on mobile.


The icons are very clear (probably the upload one less so) but quite hard to press on a small screen.

Can you make the buttons hit test areas wider?

Also I think cancel should be a much lighter grey, it feels far too strong at the moment.