There's a bit more to UI design than layouts. Unfortunately this brings up the idea of "aesthetic", something that many developers are vocally uncomfortable with (i.e. challenged).

Consider the Preferences dialog in Mac Leopard's Mail client:

http://web.fastermac.net/~MacPgmr/Lazarus/Screenshots/mail_prefs.jpg

First look at the controls themselves. The glyphs at the top operate exactly like a TPageControl. Only it doesn't look anything like a TPageControl. Consider the history of the tabbed control. The first one I can recall was in IBM's OS/2, which looked exactly like a schoolchild's spiral notebook, with the spiral (wire) on the left and tabs on the right. When Microsoft added this to Windows, they got rid of the spiral and moved the tabs to the top, making them resemble corporate file folders. Now we have Apple's latest take on this. And what does it look like? Well, no metaphor or analogy comes to mind, but it certainly is something that any schoolchild could figure out how to use.

Note some characteristics of this dialog:

- Both glyph and text at the top so you don't have to puzzle out the glyphs or wait for some hint to pop up. Often Apple makes this optional, so you can choose to show just glyphs, just text, or the default, both.

- No Cancel or Close button. Apple seems to be moving away from what they standardized, which is the dialog that has OK/Cancel buttons or a Done/Close button. In this dialog, Cancel doesn't make sense since any change you make is immediately applied and reflected in the underlying app. Lazarus has a dialog like this (Project Inspector) where changes are applied immediately. However, in both cases I wouldn't mind seeing a Done button - clicking the close box always makes me wonder whether I'll lose my changes.

- Help button stands out yet doesn't intrude, doesn't take up much space.

- Button to the right of text are clearly labeled "Select" so nothing is left to chance. In Lazarus Compiler Options dialog, there are similar buttons, although labeled only with an ellipsis (...) - not quite as clear, particularly as there's plenty of space to widen the buttons and put a decent label on them.

I would submit that there is an operational aesthetic at work here in Apple's dialog, in addition to great looking controls.

Speaking of controls, one question that comes to mind is whether you could design a dialog like this in Lazarus.

I tend to design dialogs in what might be called the style of "VCL Gothic". Lazarus is like that too. That is, most dialogs are modal, most have OK/Cancel buttons in lower-right, etc. Right out of Delphi.

3 examples of the same dialog with different widgetsets:

http://web.fastermac.net/~MacPgmr/Lazarus/Screenshots/lcl_win32.jpg

http://web.fastermac.net/~MacPgmr/Lazarus/Screenshots/lcl_carbon.jpg

http://web.fastermac.net/~MacPgmr/Lazarus/Screenshots/lcl_gtk2.jpg

I like the look of all 3 of these (VCL Gothic aesthetic). There are some differences, though. For example, the Arial font on Carbon seems to be a bit wider than Windows' Arial and the font substituted for Arial by GTK2. And with the TCheckListBox at the top, you can't specify a horizontal scroll bar, yet GTK2 adds one anyway, apparently determining (correctly) that one of the items further down in the list is too long for the horizontal space.

But does any of these really look like a dialog you would find in Mac software? I would say no - they look like VCL dialogs ported to Mac.

Thanks.

-Phil

2009/11/13 Phil Hess :

Consider the Preferences dialog in Mac Leopard's Mail client: http://web.fastermac.net/~MacPgmr/Lazarus/Screenshots/mail_prefs.jpg

Did you notice the "color quoted text" comboboxes in the lower left are not equally spaced. I gather that is not an app shipped by Apple? Otherwise there QA departments needs a talk. :)

Overall I agree, Mac's design and layout is very pleasing to the eye.

Good eye! No, this is the OS X Mail client.

I think one of the things that make the Mac pleasing is that it appears as though their aesthetic includes the injection of just a tiny bit of, well, joy for lack of a better word.

Examples with the Mail dialog:

Note that the title of this panel is "Fonts & Colors". In English an ampersand almost almost suggests informality. A Windows programmer might have used "Fonts and Colors"; a Linux programmer maybe "Fonts / Colors".

The glyphs are generally amusing too. I like the General and the Rules glyphs. Very memorable.

And the first time I saw the "Marker Felt" font it made me smile, which is probably the idea behind selecting it as a default font.

Also, color is used judiciously, but it's not a candy store. Note the choice of purple for the help button - this is a color you don't see much in dialogs, where reds, green, blues and grays seem to be the common colors.

It would be interesting to compare how this dialog looks in other locales to see whether they stayed with this fairly "light" approach.

Thanks.

-Phil

2009/11/13 Graeme Geldenhuys :

Sheesh, and they've misspelt "colours" ;) Here's firefox on gtk2 with randomly sized buttons:

http://imagebin.org/71597

Henry

2009/11/13 Phil Hess :

Good eye! No, this is the OS X Mail client.

After creating as many components as I have in fpGUI, I got accustomed to the idea of paying attention to detail. Lazarus IDE dialogs are a *real* eye-soar for me. But after using Lazarus for so long, I got used to them. ;-)

I think one of the things that make the Mac pleasing is that it appears

They seem to align things quite well also. Good vertical lines and not to many in each form.

It would be interesting to compare how this dialog looks in other locales to see whether they stayed with this fairly "light" approach.

That would be good to see. Many languages are longer in text than English. Afrikaans, my other native language is on average 80% longer than the same English text. This makes designing dialogs quite difficult - knowing that you must always leave enough horizontal space for components to grow.

2009/11/14 Henry Vermaak :

Sheesh, and they've misspelt "colours" ;)

:-)

?Here's firefox on gtk2 with randomly sized buttons:

I simply can't get used to the "chocolate" brown colour theme of Ubuntu. After a new install, that is the first thing I change.

After creating as many components as I have in fpGUI, I got accustomed to the idea of paying attention to detail. Lazarus IDE dialogs are a *real* eye-soar for me.

Strange, I noticed the same just today in another dialog :-(

When I come across it again in my IDE experiments, I'll update such ravioli GUI to something more regular.

DoDi

2009/11/14 Graeme Geldenhuys :

Yeah, that's my wife's laptop. Something to do with chocolate, no doubt :)

Unfortunately this brings up the idea of "aesthetic", Consider the Preferences dialog in Mac Leopard's Mail client: http://web.fastermac.net/~MacPgmr/Lazarus/Screenshots/mail_prefs.jpg <http://web.fastermac.net/%7EMacPgmr/Lazarus/Screenshots/mail_prefs.jpg>

I don't think this dialog has a lot do to with "aesthetic".

It looks cheap to me. The Icons look like randomly collected from the net. No common height or color style, strange vertical alignment (see RSS).

Vertical alignment is almost inexistent anyway.
Look at the checkboxes vs. the comboboxes.
comboboxes blue green red don't even have the same distance

Nah, really... ;-)

i'm not posting this in defense but...

It looks cheap to me. The Icons look like randomly collected from the net. No common height or color style, strange vertical alignment (see RSS).

the RSS icon has a shadow under it... obviously it is part of the graphic... a few others also have similar shadow... i do agree that the icons are not as uniform as they should/could be ;)

Vertical alignment is almost inexistent anyway. Look at the checkboxes vs. the comboboxes. comboboxes blue green red don't even have the same distance

yeah, that was already mentioned... but no one mentioned that the RED one isn't really red, either... it looks like dark charcoal over here...

Nah, really... ;-)

waldo kitty wrote

yeah, that was already mentioned... but no one mentioned that the RED one isn't really red, either... it looks like dark charcoal over here...

It's red, but simply not a bright red. Instead they choose a dark red which is a lot more readable on a white background compared to bright red.

Regards,
- Graeme -

FWIW: dark red is more easily seen as a shade of red than that which was shown... again, as stated above, all views of the related communication box were not "red" with regard to that combobox...

not that that is "our problem" or not...

FWIW^2: yes, my monitor is calibrated as are all of my printers and they all showed and printed the same non-red charcoal color...

again, :sigh:... apparently not our problem since it is not a dialogue generated by out code ;) :? :(

waldo kitty wrote

not that that is "our problem" or not...

Very true, so we leave it at that! :)

Regards,
- Graeme -