[kde-guidelines] Styleguide: Placement

[Thomas Pfeiffer]

On Thursday 09 January 2014 12:25:42 Heiko Tietze wrote:
> Place controls carefully with proper size and space between.
> http://techbase.kde.org/Projects/Usability/HIG/Placement

Not sure if people would look for size guidelines under "Placement". Maybe we 
should rename it to "Sizing and Placement"?

> == Purpose ==
> All controls have a default ''height and width'' to establish a harmonic
> overall picture. Nevertheless, size is used to direct user’s attention. For
> instance, a list that captures most of screen’s space points to the basic
> role in the current work flow. And, size can be used to indicate possible
> interactions. Smaller edits are probably constrained, for instance.
> 
> Similar to size, the ''space'' between controls generates a visual
> impression and supports layout. Space between controls indicates their
> relatedness. Objects with smaller distances are mentally associated
> according the Gestalt theory. ''Whitespace'' it is an important element of
> design which enables the objects in it to exist at all. The balance between
> content and white spaces is key to ''grouping''.

I made some language corrections to the two paragraphs above directly in the 
Wiki.

> == Guidelines ==
> === Size ===
> * If the control appears in a dialog or utility window, consider making the
> window and the control within it resizeable so that the user can choose how
> many items are visible at a time without scrolling. Each time the user
> opens this dialog, set its dimensions to those that the user last resized
> it to. 

Not sure if "making the window and the control within it resizeable" might 
lead people to think that controls generally should be resized along with 
windows, which not all of them should.
In fact, we might have to provide guidelines about which controls should be 
resized when the window resizes and which should not.

> * Size controls with a minimum of
> ** Icon: 16x16px
> ** Buttons:  75 x 23px
> ** Edits, Drop-downs: ≥80 x 23 px
> ** Text boxes: ≥80 x ≥39 px (text should not exceed 80 characters per line)
> ** Check box, Radio button including label: ≥80 x 19 px
> ** Group boxes: ≥120 x ≥90 px
> ** Tree view: ≥120 x ≥90 px
> ** List view: ≥80 px (per column) x ≥90
> * Make sure your application works with at least 640x480px, which is the
> minimum for KDE SC. 

Is 640x480 really still the relevant minimum size for desktop applications? 
Trying to cram everything into a 640x480 window might even lead to sub-optimal 
design for today's desktop/laptop screens...

>=== Space ===
> * Use default spacing of
> ** grouping frame and content: 8 px (1)
> ** related items within groups: 8 px (2)
> ** label and item: 2 px (3)
> ** related controls with same type (check boxes / radio buttons): 2 px (4)
> ** related controls with different type (check box / button): 4 px
> ** unrelated controls: ≥ 8 px
> {|
> 
> |[[Image:Spacing.png|thumb|300px|Sample spacing]]
> |}
> 
> === Resize ===
> * Provide resizing for all primary and mode-less windows.
> * Modal dialogs must not be resized.

Why must modal dialogs in general not be resized? Not all modal dialiogs are 
strictly question and answer. The File open/save dialogs are modal, and they 
definitely _should_ be resizeable.

> * If form resizing is not provided disable border icons and adjust form
> style. * Define a minimum size for resizable forms.
> * Make the content area scrollable if size is too small for all controls; do
> not scale controls.
> 
> [[Category:Usability]][[Category: Presentation]][[Category:Layout]]
> 
> 
> (I'm sure there is a lot to discuss from dev's pof)

Again: Thank you for writing the guideline!