Now you’re ready to add fields to the body part of your Main Detail layout. You have a lot of space here and many design choices to make. How should you organize the information you want to present?
It helps to approach it with the same principles that you applied to the body part of the Main List layout, grouping your content and prioritizing the groups.
What are the main goals of the user coming to your Main Detail layout? In the example solution, the user’s main goals are:
- Identify that they’re viewing the right person
- Contact that person
- Take notes about the contact relationship
- Track sales activities involving this contact
What are the main goals for your users? Here are some possibilities to get you thinking:
Once you identify your users’ goals, create groups of fields to meet the goals. Then prioritize those groups and let this influence where you place them on the layout, remembering the rule that the upper left is the most important area.
Here’s how we approached the example solution:
We divided the screen into two columns, placing main table fields on the left (with one exception) and secondary table fields on the right.
This created a clear visual distinction between the Contact and its related Activities. It also follows a common design pattern of showing hierarchies of data from left to right, starting with the top of the hierarchy.
For example, the Mac OS Finder shows folder structures in this way:
You can see that the example solution took similar approach, with the Contact (parent) on the left and the Activities (children) on the right:
This means that the first three groups all belong on the left, since they are all groups of main table fields. Because the “Identify the person” goal is the most important, it was placed at the top. “Contact the person” is the next priority, so it was placed in the middle, leaving “Take Notes” at the bottom.
Add your main table fields to the layout, organizing them into groups that support your users' goals and then presenting the groups in a meaningful flow.
- Abbreviate long field names so that no field name is much longer than the others.
- Right-align the field names and make sure the right edges all line up. You might make an exception for large fields such as notes, where placing the label above the field might make more sense.
- Left-align the contents of the fields themselves, give the fields a standard width, and align their left edges.
- For grouped fields, make sure their top and bottom edges touch, possibly even overlap by one pixel.
- Make sure there is enough space between groups that the user perceives them as separate from one another.
- Set up each grouped field to display its top, left, and right borders — but not the bottom. That is, except for the field on the bottom, which should have all four borders.
- Consider using a tab to create sub-groups of fields, where the most important sub-group is displayed by default and the others are hidden unless needed.
- Make sure that the fields on each tab maintain the same relative positions to give the perception of stability as the user switches from one tab to another. Avoid the wiggling motion that results from the fields not being in perfect alignment.
- Set each field’s fill color to white. This causes the fields to stand out against the beige background, helping the user to perceive groups of fields as blocks of white color. The color white is also linked psychologically to data entry, like a blank piece of paper to be written on.
This is what the example solution looks like at this point in the process. Your solution will be different, but this should give you a sense of how things might look: