2

While working on long forms on mobiles, such as multiple business expenses, the CTA to finalise adding is getting hidden by the keyboard. The common way of putting one input field and one cta may not work on this. The form ususally has multiple expenses and each expense consists of at least 4 input fields and two CTAs. While I can group the expenses in accordions or send the user to a new page for adding another expense, the problem of 4 input fields and two CTA remains.

How can the forms fit the screen so that the keyboard does not hide the CTA and other important fields? The users are aged people and scrolling to find CTA may not be a plausible solution. Can the layout be changed or something?

1
  • 1
    Could attach at least one screenshot of the layout about what the problem is? It is easier to understand the scenario that way without any need for assumption.
    – Ay_An
    Jun 24, 2023 at 15:51

2 Answers 2

3

I encountered a similar problem when I was designing a currency conversion calculator. CTA buttons consistently present challenges in the context of a responsive mobile browser.

When I tackled this issue, I adopted an idea I had observed on Airbnb's platform. When a user navigates to the final two input fields, the keyboard retracts beneath the CTA button, causing the screen to lift slightly (ensuring it does not obscure the input field). I send this solution to the development team, and it was successfully implemented.

In all fields preceding the last two, the keyboard behaves normally, potentially hiding the CTA button. The rationale behind this is to provide users, towards the end of the form, the option to tap and visually recognize the CTA button. After all, the relevance of this button increases as the completion of the form approaches.

Example 1: Airbnb keyboard - it obscures the address field. Example 2: Airbnb keyboard - it elevates the CTA button along with the last typing field.

AIRBNB

1

If you ask me, use a floating sticky CTA to place it in the proper position above the keyboard. You can control and check keyboard visibility state by javascript. but as UX point of view, putting it above the keyboard and static in place, will make memorizing position of CTA better, which may lead to better experience.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.