2 of 10 - Make sure your buttons are visible, even when the keyboard is displayed.

2 of 10 - Make sure your buttons are visible, even when the keyboard is displayed.

  • Comments 4
  • Likes

SIP_lgWe are continuing to elaborate on our top 10 list of things to do great when designing your app. Number two goes over login screens and some of the issues we know could be improved when creating screens with input fields.

On login and other input type screens, make sure action buttons are not placed at the bottom of the screen as the keyboard will hide them upon text field selection.. Some users struggle with this situation, leaving them in the dark as they perceive this as a cul de sac. Do not assume the user will tap outside a text field to dismiss the keyboard and reveal a “Sign In” button.

Our recommendation is to use the platform app bar with the standardized buttons for “OK”, “Cancel”, “Save”, etc… The app bar is never covered by the keyboard, therefore the actionable buttons are always visible.

If you must have buttons with text, given that text buttons are not supported on the app bar and they need to be placed on the screen, try to have them visible when the keyboard is displayed. You can use up to two input fields on the screen, plus one or two text buttons to accomplish that.

login_needed_lgAvoid login screens before launching the app.
Even if your app is only for registered members you must allow any user to browse your app—everybody will not know the service or product you are offering. Many users will download your app for a number of reasons, especially if it’s free. Requiring registration before communicating the value or benefit your app is providing presents a poor experience. Make sure new users can sample or preview what you bring to the table and have them sign up or register only when it’s absolutely necessary.

4 Comments
You must be logged in to comment. Sign in or Join Now
  • xer21 1 Posts

    Thats actually a really good tip, when I started I was thinking: "ok plop this sign-in button here, cancel over here... wait a second I cant see my buttons with keyboard! Hrmmm... how do I get them to move when keyboard is shown"

    I still think maybe you should have or post a way to make it so if the buttons are anchored to the bottom, and there is only whitespace between the text box and buttons, scoot them up. In the device emulator this actually happened a couple times for me but I couldn't figure out what I did, and it went away, I figured it was a bug.

  • is there a way to make a custom keyboard for all of the system?

    like an add on...?

  • hdw 25 Posts

    Nice to see you guys pushing the quality of WP7 apps .You should do something similar for Windows apps sometime

  • casaout 1 Posts

    In one of my apps I have two buttons (for "continue" and "cancel") at the bottom of the apps-page. When a user types something in a text field, I don't see this two buttons anymore (and this is, as you indicated not very nice). How can I show these buttons and also the keyboard at the same time? thanks!