Display layout components

These are guidelines for the components of a display layout.

Headers

Height: Use default height for headers that contain only single-height labels. This can be altered when a larger font is used on header text or when the labels use more than one row to display.

Grid column headers are not used on responsive pages.

Data rows

Height: Use the display layout default height for single-row height data. Height of rows containing more complex data arrangements is your choice.

Labels

Naming:

  • The component name on the layout uses this format: [PropertyName]["Label"].
  • The data on the layout contains a string in this format: [StringName].

Justification:

  • Labels that appear to the left of the associated value are:
    • Usually right-justified
    • Have no colon
  • Labels that appear above their associated components are:
    • Right justified for dates, decimals, and integers
    • Left justified for text
    • Center justified for images

Label width (soft standard):

  • For labels that appear to the left of the associated data, use the US English string length plus 30% (to allow for foreign translations).
  • For column header labels that have only one word, use the US English string length plus 30%.
  • For column header labels that have multiple words and where wrapping occurs, make sure the full English text displays.

Columns of data with labels on left:

  • In most cases, labels should be right-justified as mentioned above. For responsive pages, we sometimes have left-justified left-side labels, when in a column of data/labels.
  • Data can all be left-justified in order to visually tie/group the labels to the data and for the data to be all aligned despite their data types.

Components (soft standard)

Naming: The component name and data fields on the layout both use the property name.

Width:

  • Text data: Width of bound data when populated only with capital Xs.
  • Numeric data: Width of bound formatted data.

Buttons (soft standard)

Naming: The component Name field on the layout uses this format: [StringName]["Button"]

Width: US English string length plus 30%. (Our tool set adds left and right padding and allows word wrapping.)

Positioning:

  • Buttons that appear on a line by themselves or only with other buttons should not be considered a header. They can appear on a styled task/command bar or simply on the page.
  • When multiple buttons appear above a header, horizontal positioning is your choice.

Images (recommendations)

Naming:

  • The component Name field on the layout uses this format: [ImageName]["Image"]
  • The component Data field on the layout is the image filename with extension.

Format:

  • PNG or GIF is preferred for icons, because it allows transparency.
  • Icons should have a 1:1 aspect ratio.
  • JPG is preferred for photographs, because it compresses better.
  • Item photos should have a 4:3 aspect ratio.

Photo size in pixels for item and item category photos:

  • Preferred size: 2400pixels X 1800pixels
  • Minimum size: 640pixels X 480pixels

Background:

  • Icons and graphics should have a transparent background.
  • Item photos should have a transparent or white background.

Error message handling

Required and invalid field level validation errors:

  • When required information is not entered by the user and an action button is clicked, the fields that are required and contain blank values should be highlighted. An error message should display at the top within a cell in the layout. A single error message should be displayed, with this wording:

    mEnterRequiredInformation = ["Enter required information in the highlighted areas."]

  • When information entered by the user is not valid and an action button is clicked, the fields containing invalid information entered should be highlighted with an advisory error message displayed next to that field, stating the following:

    mCorrectInvalidEntry = ["Correct invalid entry."][Reason if exists.]