Florian, many thanks for the prompt, generous and gracious reply to the prior post (about optimizing cover art space).
Your mention of optimizing vertical space motivated me to do a mock-up applying some hard learned methods to do just that.
Extra commentary and a bit of over-explaining is not meant to "talk down" to anyone, but offered with the hope that it might be accessible to a wide audience. A slightly abridged version of the following text is repeated on the attached image so it can be easily referenced while viewing the mock-up.
The methods below, pushed to the limit, could probably reach 14% in vertical space economy in the attached example, without compromising utility to the user or legibility—and perhaps even enhancing legibility a bit. A few more tricks might get the example to 18% with little downside to the user. However, depending on the program libraries in use, the development time beyond 10% or so might be unreasonable.
- Field names forced to all caps to offset a 20% reduction in base font’s vertical height. All caps also avoid descending characters which allows the labels to move closer to the field box for additional reduction in vertical height and a tighter association with the field. This also gives the field labels a diminutive size and distinctive look. According to human interface theory, as field labels do not (typically) change often and are quickly learned with data-entry and cleaning, diminished prominence (contrast, size, etc.) is appropriate.
- Removed the bright single-pixel highlight of the field box to avoid visual interference with bright field text and content—simultaneously reclaiming a tiny amount of vertical height.
- Darkened field data box to improve contrast for readability and increase focus and to offset decrease in border contrast (a result of above step).
- With reduction of field label height and tighter field label spacing, fields can be moved closer and retain improved legibility. The space between fields and their labels must of course be much smaller than the space between fields to preserve proper intuitive association.
- The relaxed multi-line spacing of ~1.3x is recommended for longer text bodies than typically encountered in metadata. Therefore, this example uses tighter spacing of ~1.2x to recover additional height.
The font size for field values remains unchanged.
Note: Custom colored thumbnails make file-type apparent at-a-glance, avoiding the need to display the extension and saving horizontal space in filename lists.
For further study: These concepts are covered in courses on Human-computer Interface (HCI) for programmers and developers and in texts such as "Looking Good in Print", originally published to help desktop publishers obtain an understanding of visual appearance and legibility in print and on screen. They are also similar and related to ergonomics.
