Designing a layout

Good user interface design is rooted in some simple rules, and there are processes you can follow to design a great user interface. For example, imagine that you're building an app to capture travel expenses so that they can be claimed easily at a later time. The foremost thing we'll build over here is the screen that captures the details of a single claim. This is a perfect example of a modern form screen design.

When designing a layout, it's a good idea to use a mockup tool such as Balsamiq (https://balsamiq.com/), or even paper and pencil to think about the layout of the screen. Physical index cards make excellent thinking spaces as they have similar proportions to a phone or tablet. Using paper, especially, helps you think about the arrangement of the screen instead of being distracted by the exact colors, fonts, and spacing that should be dealt with in a common set of theming rules.

To start designing the screen, we need to consider what data we'll need from the user and how we might be able to fill some of it out for them. We also need to try and stick to the platform design language so that the application doesn't feel out of place to the user. It's also important when designing form screens to ensure that the entire input form will fit onto the device's display. Scrolling an input screen requires your user to remember what is not on the screen, and causes frustration and anxiety. Whenever you design a form screen, ensure that all the inputs will fit onto one display. If they don't all immediately fit onto the display together, first consider whether you can remove some of them. After removing any that aren't absolutely required, consider grouping some on a single line, ensuring that you put no more than two inputs per line. More than two input fields on a single line implies that you can probably turn them into a single input.

So, to get started, consider what information a user will want to capture for a travel expense:

• How much the expense was
• Some photos of the invoice, or maybe of the item purchased
• The date that they captured the expense on
• What sort of expense they're capturing such as food, transport, accommodation, and more
• A short description to help them remember what the expense was

Great, that seems like a good starting point, but they're not in a great order and they're not grouped at all. We need to consider what is most important, and what groups logically fit together well on-screen. For starters, let's focus on developing a portrait layout for a phone, since that will be our most common use case. So, the next thing to do is group the input components in a way that will feel logical and familiar to a user. When looking at an overview of claims, the things we'll want to list are as follows:

• The date of the expense:
  • The date that they captured the expense on
• The amount the claim is for:
  • How much the expense was
  • Some photos of the invoice, or maybe of the item purchased
• The description of the claim:
  • What sort of expense they're capturing such as food, transport, accommodation, and more
  • A short description to help them remember what the expense was

So, we'll group these three fields together, and put them at the top of the screen. This particular grouping will feel common to anyone who has used any budget or expense tracking software:

The Date is a special field, because we can easily populate it with the current date. It's most likely when the user enters this screen that they are capturing an expense for the same day. We still need to capture a category and attachments for the expense. Attachments will need a large amount of space so that the user can preview them without having to open each one to know what it is, so we'll put them at the bottom of the screen and have them take any space left over. That just leaves the category. The expense categories are best represented using icons, but we need some space for text so that the user knows what each icon means. We can do this in one of several ways:

1. Place a tiny label above or below each icon:
   • Pros: All the labels are always on the screen
   • Cons: The labels can be hard to read on smaller screens, and the icons take up more screen space:

1. Create a vertical list of icons and put a nice large label to the right of each:
   • Pros: The labels are easy to read, and always associated with their icons
   • Cons: This will take up lots of the vertical space that is best used to display attachment previews:

1. Show only the icons, and display the label when the user holds their finger over the icon (long presses):
   • Pros: The text takes up no screen space
   • Cons: This sort of behavior is not intuitive to users, and requires that the user selects the category to know what its label is:

1. Show the list of icons and the text of the selected category below them:
   • Pros: The text label can be large and easy to read, and takes up less screen space because only one label is shown at a time
   • Cons: The user must select the category to know what its label is:

In order to keep the label in a nice, easily readable size, while also drawing extra attention to which category is currently selected, this example will show you how to create option four, where the currently selected category name is shown below a horizontal list of the category icons. We'll also highlight the selected icon to help keep a connection between the two user interface elements.

The one remaining thing that the user needs to be able to do is attach files to the expense claim before saving it. There should be a nice, large area at the bottom of this layout that will make a perfect area to preview a single attachment, and if the user has more than one attachment, they can swipe left and right to switch between their previews. However, how can they attach them in the first place? This is where a floating action button is an ideal solution. You'll see floating action buttons everywhere in Android applications. They are usually near the bottom-right of the screen, where a right-handed person will have their thumb if they hold the phone one-handed, and out of the way of most Western content, which will be to the left of the screen (normally):

Floating action buttons are normally the most common creative (as opposed to navigation or destructive) actions on the screen; for example, creating a new email in the Gmail or Inbox app, attaching a file, and so on.

So now, we have the screen broken down into three logical areas, outside of the normal decorations:

• Claim details
• Categorization
• Attachment

Putting them together into a single screen layout concept gives you a wireframe, looking something like this:

This exercise of wireframing your screens before you start developing them is an extremely valuable phase, because it gives you time and space to think about each of the choices you could be making, rather than just grabbing the first available widgets in the toolbox and putting them onto the screen. Now that you have a wireframe, you're ready to get started with building the user interface for the application.