6.1 Qualitative Evaluation
6.1.1 Example A
The sequence of Figures 6.1-6.4 depicts the creation of the organizational chart shown in Fig. 6.4 with all intermediate steps:
1. The user selects a rectangle from the shape menu and clicks on the slide.
The text box is centered automatically. The user adds the desired text and changes the background color. The text color is adapted automatically, as shown in the first image of Fig. 6.1, to achieve a high contrast.
2. The user clicks on the rectangle to select it, presses the Ctrl key, and drags the rectangle downwards until the top of the dragged outline aligns with the bottom of the existing rectangle. The user releases the mouse button and the selected rectangle is copied. The copy is aligned with the previously inserted shape at the top, left, and right. The user changes the text of the copied rectangle and both shapes resize automatically as the second image of Fig. 6.1 shows.
3. The user selects both shapes, presses Ctrl, and drags downwards. The generated copy shown in the bottom image of Fig. 6.1 is aligned at the left and right to the original.
119
4. Again, the user selects both shapes and presses Ctrl-D for duplicate.
An insertion indication appears and the user inserts both shapes at the bottom of the page, without any alignment. The two shapes are duplicated another time and inserted inside the last inserted text box as shown in top image of Fig. 6.2.
5. The internal shape is duplicated, or Ctrl-dragged, another four times to create the center image of Fig. 6.2.
6. The user selects the two internal shapes in the upper row and adds an equal width constraint.
7. This is repeated for the three internal shapes in the lower column.
8. The pair of heading and text box is duplicated again and aligned as shown at the top of Fig. 6.3.
9. The same pair is duplicated to form the two columns of internal shapes in the following image. Both columns are constrained to have the same width.
10. The user draws three connecting lines shown in the last image of Fig. 6.3.
11. The finished diagram of Fig. 6.4 contains a few more explanatory text boxes whose positions are only determined by their content and align-ment constraints.
The result is shown in Fig. 6.4. Apart from the headline, which has been placed manually in the top left corner, no object in this sample has been manually resized or positioned. As described, the only user constraints are shape alignment and equal width constraints. All shape sizes and shape posi-tions have been calculated automatically and the resulting layout looks very balanced. The lower image of Fig. 6.4 shows the resulting layout after a some text has been added in the lower left text boxes. The layout automatically adapts without any user intervention. Appendix A shows an example of a complete constraint system generated to create a layout as shown in Fig. 6.4.
Figure 6.5 shows the original real-world example that has been created by a human expert. The original content has been removed. Directly below is the layout as calculated by the ICBM layout algorithm. Without prior knowledge, it is impossible to tell them apart.
6.1. QUALITATIVE EVALUATION 121
!"#$%&'()#$&
!"#$%&'()#$&
•!!"#$%&$%'()%*"+&,(%-&++./)%"0%1)+.2"3.%4"+.%5678(9%"0%4.#,.3:%
•!;&,%0.'()#%3.,%.%<#)$8(%)=>.'%
•!;&,%?"'()#%3.,%*"+&,(%
•!4)$'%.@#".A%&$%BCDEF%0"++"3&$/%'()%'()%*"+&,(%G"-)?@)#%
H>#&,&$/%
!"#$%"&%'()&*$!
•!"#$%&'!()*+!#&,!%&)'$!-+./0!&'!1234!
•!5+!67,0!0$$8!%&)'$!9+,,$',!:&0#!;7&+-7&<#!=)98.7+''+7!
•!5+!-&+-!&'!>)7&,!$?!%/9@$')7A!0/.+7<$9$,&,!
'"(+,%-$)(+%
•!B$7'!&'!0#+!>$9&,#!*&99)(+!$?!C+9)D$:)!E$9)!FG/<#A!$?!E)7,):H!
•!5&,!?)0#+7!:),!)!;7+'<#!+I%)0!
•!5&,!@$0#+7!:),!>$9&,#!
•!E+'0!).7$)-!&'!123JK!?$99$:&'(!0#+!0#+!>$9&,#!L$*+@.+7!M%7&,&'(!
Figure 6.1: The first two text boxes are created as copies of each other and both are left- and right-aligned.
!"#$%"&%'()&*$!
Figure 6.2: An existing text box is copied twice, one copy containing the other. The inner copy is then further duplicated. The inner text boxes are constrained to have equal widths.
6.1. QUALITATIVE EVALUATION 123
Figure 6.3: An existing text box is copied again and upon insertion it is aligned at the top and bottom to existing text boxes. Is is also filled with multiple copies of the same text box.
!"#$%&'()%*!
Figure 6.4: The final layout is seen above. If some of the text content changes as seen below, the layout adapts automatically.
6.1. QUALITATIVE EVALUATION 125
XXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX (XXXXXX 1 XXX 2)
* Xxxxxxxxxxxxx xx xxxxxx Xxxxx xxxxxxx xxx Xxxxxxxxxx/Xxxxxxxx xx xxxxxxxxxxxxx; xx xxx xxxxxxx Xxxxx xxx.
xxxxxxx xxx Xxxxxxxxxxxxxxxxxx Xxxxxx: Xxxx
Xxxxxxxxxxxxxxx
Xxxxxxxx
Xxxxxxxxx Xxxxxxxxxx xx xxxxxxx xxxx 25 - 50 Xxxxxxxxxxxxx üxxx xxxxx Xxxxxxxx xxx 6 - 9 Xxxxxxx
Xxxxxxxxxxxx Xxxxxxxxxxxxxxxx*
Xxx Xxxxxx Xxxxxxxxxx xxx Xxxxxxxx xx Xxxxxxxxxx-Xxxxxx
• Xxxx Xxxxxx
• Xxxxxxxxxxxxx (Xxxxxxxxxx)
• 2 - 3 Xxxxxxxxxxx xxx Xxxxxxxxxxxx-xxxxxxxx
• 1 Xxxxxxxxxxx XXXXX (xxxxxxxxx)
• Xxx. 4 Xxxxxxxxxxx xxx xxx Xxxxxxxxxxxxxxxxxxxx Xx xxx Xxxxxxxxx xxx Xxxxx
Xxxxxxxxxxx Xxxxxxxx
Xxxxxxxxxx
Xxxxxxxx Xxxxxxxxxx Xxxxx Xxxxxxxxxx Xxxxxxx
Xxxxxxxxxxxxxxx
• Xxxx Xxxxxx
• Xxxxxxxxxxxxx (Xxxxxxxxxx)
Xxxxxxxx
• 2 - 3 Xxxxxxxxxxx xxx Xxxxxxxxxxxx-xxxxxxxx
• 1 Xxxxxxxxxxx XXXXX (xxxxxxxxx)
• Xxx. 4 Xxxxxxxxxxx xxx xxx Xxxxxxxxxxxxxxxxxxxx
• 3 - 4 Xxxxxxx (100%)
Xx xxx Xxxxxxxxx xxx Xxxxx
Xxxxxxxxxx Xxxxxxxxx Xxxxxxxxxx xx xxxxxxx xxxx 25 - 50 Xxxxxxxxxxxxx üxxx xxxxx Xxxxxxxx xxx 6 - 9 Xxxxxxx
Xxxxxxxx xx Xxxxxxxxxx-Xxxxxx
XXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX (XXXXXX 1 XXX 2)
Xxx Xxxxxx Xxxxxxxxxx xxx Xxxxxxxx xx Xxxxxxxxxx-Xxxxxx
*Xxxxxxxxxxxxx xx xxxxxx Xxxxx xxxxxxx xxx Xxxxxxxxxx/Xxxxxxxx xx xxxxxxxxxxxxx; xx xxx xxxxxxx Xxxxx xxx. xxxxxxx xxx Xxxxxxxxxxxxxxxxxx Xxxxxx: Xxxx
Figure 6.5: The same layout created by a human expert (above) and the ICBM layout algorithm (below).