Offset between fields

Leave an offset of five pixels between entry fields.

Fields have ragged edges

At SAP it is common style to have fields that are left aligned with ragged edges on the right side.

Example of justified fields

Justified fields are not necessarily wrong. However, it is hard to figure out why one needs a birth date field with more than eight characters.

Offset between label and fields

As one can never predict the length of a field label on the one side, and how many fields will be necessary in one scenario in succession on the other, it is hardly possible to give a standard offset between label and entry field. As a rule of thumb one can say: In one row of entry fields that follow each other in succession consider the offset between the widest label and its entry field. If possible, try to avoid an offset smaller then 8 pixels, which is one character, and wider then 22 pixels, which is three characters. In the scenario on the left the offset between widest label and its corresponding entry field is 8 pixels.

Offset between label and fields

By restricting the space next to the widest label to a maximum size we ensure that the offset between the smallest label and its corresponding entry field is not too large and the user can still adjust label and entry field to each other.

Example of too large offset between label and fields

Here you can still adjust the largest label and its corresponding field but it becomes almost hard work adjusting "E-mail" to its input field.

Example of too small offset between label and fields

Though all offsets seem to look correct the missing offset between "Reenter Your Password" and its entry field makes the whole interface look ugly.