Desktop Guidelines

I have been writing desktop software for many many years, and have basically just laid out the GUI however seemed to look best at the time…
But was wondering if anyone knew of any specific documentation (“Apple HIG” is too general) the specifies

  • how far horizontally a textfield should be from the label describing it
  • how far apart vertically lines of controls should be
  • should they be a fixed # of pixels? or should the distances be based on the font size used in the label/control?

This would relate to a desktop screen, not an iPhone/iPad screen

The “snap to” isn’t perfect on some of these things so you have to fidget with arrow keys sometimes.

  1. I usually right-align the label and let the inspector snap it (12px)
  2. It depends on the control, I find that the IDE snap of 12px is a bit much and will sometimes shrink it to 6px or 4px. Checkboxes I put 2px apart vertically (top + height + 2px) in the IDE and it looks fine.
  3. You shouldn’t be doing anything to the font size.

Thanks, but that doesn’t answer the question about “official documentation”, just that you lay things out how they “look best” to you at the time…

Like I said, it varies by control. You have to look at each control doc: https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/ControlsAll.html#//apple_ref/doc/uid/20000957-CH46-SW1

Other than that spacing is suggested by Xcode snap guidelines, I just tried to summarize it for you…

never mind…

Pardon me, but you may be chasing something that does not exist. Unless you get into the principles of composition familiar to artists. There are indeed rules like the famous golden ratio, but that is going way beyond usual UI design. Although it can certainly be applied here.

https://blog.prototypr.io/golden-ratio-in-ui-design-8d11e66582c3

There was an interesting discussion here.

But the short answer to your question is no, I dont think so. There is no golden rule. As Tim says, xcode, visual studio and xojo all have snapping, which most use to place controls apart from each other.

I’m not too up to speed on macos yet but here’s the Windows UWP design guide, if you’re making consumer facing apps over the coming years this will be a good place to look:

https://developer.microsoft.com/en-us/windows/apps/design

Much like in other design fields (retails, print, web etc.) getting inspiration from those around you, perhaps from those with more budget, experience or team members dedicated to this field is one method,

http://windows.appstorm.net/roundups/25-beautifully-designed-windows-apps/

http://lmgtfy.com/?q=beautifully+designed+mac+programs
http://lmgtfy.com/?q=beautifully+designed+windows+programs

Oh, but there is. I pointed to pertinent links. The big discussion is how to apply the golden rule, but it had been applied to countless cases from architecture to sculpture, to painting, lettering design and to photography among others for over 2,000 years.

What does not exist AFAIK is a concise manual explaining do’s and don’ts as described by Dave.

In fact, discussions about applying the golden rule to UI generally end up in endless threads with tons of controversy, like the one I linked to on reddit.

Those links have nothing to do with what Dave asked for though, overall look and feel yes, control spacing, no.

He didn’t ask about that, though.

Julian, I am terribly sorry, but your reflexion shows you indeed have no idea what the golden rule is. Precisely composition is where it applies best. Control spacing IS composition.

Sure, Dave asked for a recipe book. That does not exist at that level of specificity. But there are very precise rules at the first link I posted that show extremely well how to apply the golden rule to UI.

Evidently, I see someone has some level of dislike for academia, here.

Sorry Michel, I was answering Dave’s question and I’m not even going to take that bait on your response above, my Computer Science degree with a final year dealing with HCI tells me to not bother debating with you on this. Our opinions obviously differ here.

Anyway, Dave, looking briefly at

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html

it would seem that Apple don’t following that strict of a ruling on this type of stuff, I can see instances of central alignment, left alignment, spacing used for separators as well as horizontal lines, its a bit of a mishmash on desktop.

Programs are so varied, their data and importantly localisation is so varied, while your overall layout can be influenced by a “golden rule” when it comes to the pixels between labels and controls, I think its down to you. Having a set of nicely formatted and positioned labels might be ok in English, but what about another localisation? If the words are longer you’ll need some white space on the left of those labels in English, so you’ll need to right align them etc. etc. I’m sure you’re aware of all this though as you’ve been doing it for so long :slight_smile:

My only other suggestion would be to have a play around with xcode layout or visual studio, drop some simple controls on and see what their spacings are set to and compare those with Xojo (I assume they are close if not the same).

Hey Dave,

designing a User Interface is usually about functionality and aesthetics. Where both “words” of can’t be divided.
So it does not necessarily depends on how many pixels a label is apart of a textfield,
more like it’s important to keep consistency. When developing application for a couple of system,
it does not matter if they are 12px or 14px apart from each other - as said keep it straight and keep your measurements on
a specific amount. As the other people already said: there are many Design Guidelines, suitable for the systems of their vendors,
there is always a way of represent your ideas in a completely different style with your own guidelines.

I might have a couple of good website of inspiration, psycologic principles, ideas & inspiration, and guidelines for you dear fellows:

Interaction Design Foundation
Designmodo
eWebDesign

Even though those website not always represent inspiration for Desktop development,
in times of emerging systems which combine many Screensizes and Orientations,
they could be a good point of start.

Dave, I, too, know of no guidelines other than the HIG, but over the years that I’ve been putting out apps and worked with other app devs, I found that there’s also a kind of fashion, and that changes over time.

Years ago, listboxes that spread over the entire window’s width were always having that spacing at the borders. Nowadays, that looks old fashioned. Several people have mentioned that to me about my quite popular “Find Any File” and “Prefs Editor”. So now I’m trying to go with the current fashion and make them wider, right up to the window edges.

That’s why I also made an effort to write a ListBox replacement using the native NSTableView control on OS X - to make it look less old fashioned.

OTOH, I mainly make tools, often for special uses, and those users don’t care at all. So, when I’m lazy, I just go with Xojo’s snaps. But when I make an app that I want to sell on the open market, where it has to look attractive and up-to-date, I make an effort to make it look like current popular apps (still working on that, don’t judge me on currently released products :wink: