How To Fill Space With Minimal Inputs

A design challenge many developers face is filling in white space on screens that don’t require a bunch of inputs. For example, you may just have a log in screen that only requires a name and password, or a checkbook application that only needs the account name and balance.

Unfortunately, there are not many resources out there to help you decide how to fill empty space. The reason for that is likely as a result of there not being a right or wrong answer to this situation. What you do with these inputs, or in addition to them, can vary based on the input you are requiring.

It is important to remember, though, that as a developer you can look at the strengths and weaknesses of other published applications for advice. Let’s take a look at some apps that are out there and how they conquered this problem.

Facebook

I would not be surprised if many of you have forgotten what the log in screen for the Facebook mobile app looks like. This is a one-and-done activity, so it is very easy to forget. If you did forget, it looks like this:

Facebook

With two input fields, a radio button, and a log in button, there’s not much to fill the screen. Centering the input seems like the right choice, as it helps break up the amount of blank space on the screen. This app goes a step further by adding some branding the logo on top,¬†as well as some helpful links near the bottom. The Facebook login screen is a great example for filling in some space without cluttering the UI.

Cash Caretaker

While the published app looks very different, I’d like to give you a sneak peak into the new Add Account screen for my Cash Caretaker app:

Cash Caretaker

Since this screen only requires two inputs, an account name and starting balance, there is not much screen space required. Unlike the Facebook example, this activity is not a log in screen, so branding becomes unnecessary; I don’t need much help, either.

To work around this, I’ve designed this activity to match the other activities I have which now use CardViews. In the Add Account activity, I can create consistency with the other screens and keep the keyboard open to eliminate the blank space on the activity.

Another application that does this is Wunderlist:

Wunderlist

Quotes

The last example on how to accept minimal inputs is using a dialog fragment. Some of you may have already read my app review of Quotes; If you haven’t, take a look at this input of a new quote:

Quotes

A DialogFragment is another great way to accept input for one or two quick items. It allows the rest of your app to fill up the space in the background, while making your input the primary focus when it’s open. This tactic could have been used in Cash Caretaker as well.

What are your favorite ways to handle minimal input screens? Let us know in the comments!

 

Share this post...
Share on Reddit0Share on Google+5Tweet about this on TwitterShare on LinkedIn0Share on Facebook0

2 Comments


  1. Dialogs can be a nice way to get this done when the input fields won’t be very long. However, I do like the use of CardView in this way. Nice job!

Leave a Reply