Remember, your main concern is the user's experience. If you can reduce the user's effort to get a task done, this will go a long way to providing customer satisfaction.
When designing the look and flow of your screens, ask yourself a few questions:
- When is this used?
- Where is this used?
- When should I use x vs y?
- Is this required?
- Can this field be derived (auto-populated)?
- Does this data need to be collected now?
- How should this look and be styled?
- How is the experience on mobile?
Remember, "Less is more." When creating an interface for your user, you need to consider why every element on the screen exists.
Consistency with Style
Within web site design, a consistent layout and look is crucial. Consistency is more than just making everything look the same. Consistency communicates workflow to your users. They will know where to look, where to find things with ease, and where to go next.
Each control within Method has a customizable style. Since fonts and colors are set by Method, this section will focus on:
- Spacing and padding
- Width and positioning
Spacing and Padding
Padding improves legibility, helps guide the user's eyes, and makes it easier for the user to interact with the screen.
Padding is the space between the border of a container control and the inner content. If you are familiar with the margins and padding and are wondering about the difference, the margin is the spacing outside of the border.
You can individually set the padding for the top, bottom, left, and right side of a container.
You will find padding settings under Style in the properties panel of:
- Section cells
- Grid cells
Currently, there are only a few options for setting the padding of containers.
- None: No padding
- Regular: Defaults to no padding
- 1x: About a fourteen pixel whitespace
- 2x: Double that of 1x
The majority of containers have a padding of 1x. If a container has a grid, then the left and right padding is set to none.
Width and Positioning
Containers and columns within grids can have their widths set based on pixel width, and percentage of screen width.
Due to the relative size of browsers on different computers, it is best practice to set the width based on percentage.
However, you may have noticed that controls placed within a container with no columns will expand to fill the whole container:
In order to get around this, we use columns to divide a section into thirds, or quarters, with a width of 33% or 25% respectively. The choice of thirds or quarters depends on how much information needs to be displayed on the screen. The invoices screen, for example, have four columns of information displayed, and thus is divided into quarters. However, for screen which only wish to display one single column of information, then the screen is divided into three columns.
Of course, when it comes columns and row, care should be taken to make sure the screen looks good on mobile. For that, you should check out our article on Responsive Design.
On top of setting the width of sections, each control can be set to a specific width.
- Auto - Control is wide as its text inside.
- Fixed - Control is set to a width you specify in pixels (width cannot be smaller than the Auto width). This is useful if you wish a consistency on the width of your buttons.
- Full - Control will fill up the entire cell it is in. This is used when the screen is viewed on mobile and it can take up the full width of the display.