Arrangement of multiple boxes with different length

Question

I have multiple boxes with different user data. One box contains data like email, zip others contain things like bank data or other private data.

Problem: The boxes differ in length.

Solution

Left side in the image:

• Pro: If the user opens a contact, the data is in the same place
• Con: Empty space

Right side in the image:

• Pro: Most space is used
• Con: If the user switches between the contacts, the data may jump in the position.

It is something like a crm for internal use. The hr departments wants to view the records of the employees. Every employee has a page like this. The boxes contain all the related records of the employee.

The uses reaches the page through a list that can be filtert to find a certain employee.

What would you choose and why?

Answer 1

Given this is an application that is used repeatedly and used for reference purposes, you want the design illustrated on the left and keep information in a consistent location. As observed by Jef Raskin in The Human Interface, users tend to automatically memorize the location of things on the screen, and so will tend to look in the same place for the same information across employees. As CRM application, users are not necessarily reading one box after another in sequential order. They’re most likely scanning for a specific box of info to read or update to complete a task. Moving boxes around thwarts user’s natural tendency to associate things with places.

You can get some more efficient use of space by keeping the relative position of the boxes constant but dynamically resizing some boxes to accommodate the information for each employee. For example, if Box 2 were wider for some employees, you could let it “push” boxes 3 and 4 to the right, or if Box 3 were not so tall, you could move all boxes below up.