Hiding the keyboard in a mobile app with a chat

Question

I'm having some trouble hiding the keyboard in a mobile app with a chat hover the main UI (3).

On iPhone, this action is usually done by clicking on the zone (3) or dragging down. But in my application is not possible to perform such actions.

• Right now, I am using a hide button (2) next to the input field, but users have some difficulties understanding how to hide it.
• In addition, they press the close button (1) and leave this application area accidentally.

Note: in Android is not so problematic because the user can hide the keyboard with the "back" button.

Any recommendations?

*iPhone wireframe from Michelle

Answer 1

I assume tapping zone 3 is not possible because it contains touch sensitive elements that would be triggered?

1. Option (questionable)

would be to have something like an invisible "security layer" on top of that zone that catches a touch event and dismisses the keyboard, without triggering the onTouch listeners of the elements beneath. I think I've seen this in some apps before but can not remember a specific example currently.

But this would definitely have to be user tested for acceptance before.

2. Option

Since you said your users were pressing the X in the navigation bar anyway, maybe putting the hide keyboard action there would help them find it? (And help differentiate it from the dialog closing action).

Of course only works if you don't already have an action there.