Evolutility follows the "flow positioning" method. Elements position is entirely determined by their order in the metadata, which does not require any description of the positioning, absolute or relative, of the user interface on the screen. The ordering of the information and the internal description of each element (such as field type, width, and height) implies the coordonates of every element on each screen.
You can organize fields in panels (sections) on the page. Panels are placed sequentially, left to right, until a width of 100% is reached. Once the maximum width is reached, the next panel will appear below the previous group of panels.
In the following screenshot the form is organized into 4 panels for name (width=60%), contact information (width=40%), address (width=60%), and misc.(width=40%). Each of these panels contains one or several fields.
Inside each panel, fields are placed using the same rule: placed sequentially, left to right, until a width of 100% is reached.
Lastname: width=100% Firstname: width=100% Title: width=50% Company: width=50%
Lastname: width=50% Firstname: width=50% Title: width=50% Company: width=50%
The previous 2 screenshots demonstrate how elements are re-positioned simply by changing their width.
The "flow positioning" method is also quite flexible as it allows different numbers of fields on different rows which is quite useful for cases like an address.
Address: width=100% height=2 City: width=62% State: width=15% Zip: width=23%
This positioning scheme is forgiving in the sense that any value greater than 100% will be considered as 100%; a field of width less than 100% between two fields of width 100% will also behave as 100%.
The Edit and View mode follow the same positioning. For other modes, fields appear or not based on the attribute search for search, searchadv for advanced search, and searchlist for list. All fields present in the metadata will appear in the export mode.
Labels positioning is more important for usability than we often imagine. In his latest book "Web form design", Luke Wroblewski dedicates a full chapter to field labels positioning. Evolutility follows it as a guideline.
From the ancient Greek architects to Da Vinci or the French impressionists, many great Masters noticed the golden ratio (golden ratio on Wikipedia) in the human body and everywhere in nature. They incorporated it into their art in a very consistent way.
Universally recognized as more aesthetical, the golden ratio can be used in web application screens simply dividing space close to 2/3 - 1/3 ratio (more exactly 62% - 38%)... as long as it doesn't get in the way of usability.
Standard ratio: 50% - 50%.
Golden ratio: 62% - 38%
We can apply the golden ratio in a recursive or fractal way by also applying it for fields on 2 columns of 62% and 38% inside a panel. The difference is subtle but at the unconscious level users should feel more confortable with proportions which remind them of their environment or their body.
4.1