Any tool to check UI controls alignment?

Question

2.00/5 (1 vote)

See more:

Is there any tool to check if UI controls on a desktop app or a web app are properly aligned, the distance between them is consistent and the controls are following UI standards?

Because if there isn't any already, I am planning to write one. :)

Posted 16-Mar-12 16:36pm

PravinSingh

Updated 16-Mar-12 16:37pm

v2

Add a Solution

Comments

Sergey Alexandrovich Kryukov 16-Mar-12 23:34pm

Why did not you share platforms, languages, application types, UI libraries to be used or other relevant detail?
--SA

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2012-03-16T17:30:00

Solution 1

I don't know if such tool is available. I would not be surprised if there are no such tool, and I know why: it would be useless. I can guess where it comes from: you probably develop UI manually, it means by some sort of graphical designer, and you use absolute positioning. In other words, you "program" with the mouse, and the accuracy of such work is limited. If you do not do so by yourself, you probably picture the users who develop UI in such manual way.

I would advice you rethink your idea of doing such works, because in this way you would be helping to support very louse way of UI development. Not only decent software is not developed this way, even minimally professional work is not done this way.

You did not share your platform, the platform of prospective target project, the language, UI library to be used or targeted or other important detail, so I cannot give you exact advice, but in decent UI development everything is aligned automatically in first place. The adequate programming techniques include such things as using parent-child control relationship and hierarchic layout structures, docking, padding, margins, anchors, grids and the like. Alternative methods include calculation of the control positions/sizes during run time; those different methods could be combined together.

If this is not the case, UI development method would have too high development cost and too low quality at the same time. The tools like the one you are proposing cannot save it.

—SA

Posted 16-Mar-12 17:30pm

Sergey Alexandrovich Kryukov

Updated 16-Mar-12 17:36pm

v6

Comments

PravinSingh 17-Mar-12 0:37am

Thanks for your input, SA. I was primarily targetting .Net and MFC based Windows desktop applications, and in such applications UI is developed manually, using the mouse (Unless, of course, the controls are dynamic and rendered programatically)and Visual Studio does use absolute positioning. Although web apps use all the techniques you mentioned, my focus is desktop apps.

I have seen many of my 'moderately professional' colleagues working on professional software somehow fail to get the alignment right (despite Visual Studio's excellent snap-lines based automatic alignment). Today I was visiting the site of Digimaker[^], a .Net based content management company; and the help file of their product[^] has some screenshots of their product and the text boxes are not equidistant from each other. This got me thinking that there maybe many 'decent' products suffering from UI inconsistencies and a verification tool might help.

I plan to make it as a command line based tool so that it can be used as a Visual Studio add-on and can also be added to the build script (a crude way of forcing standard compliance :)).

Do you still believe it'll be a waste of time developing this?

Sergey Alexandrovich Kryukov 18-Mar-12 14:06pm

Yes, pretty much. You see, you could reach the goal, in principle, but who would be the target user? Even the snap-line approach is uses in a very low-quality code (you called it automatic? yes, the snap itself is automatic, but "development" using it is purely manual). I would speculate that it could be used in something quick-and-dirty development only. Decent UI does not simply use this absolute positioning approach at all, and your goal targets only this thing. Do you think someone will run your utility and then accurately fix the picture by a pixel or two? It would not pay off. Just the procedure of running your utility and taking into account the results would be too slow compared to a good layout design which does not require manual. Decide by yourself, but you would be targeting very incapable users, or those who are lazy to learn simple basics and do something the "simplest" (but extremely ineffective in long-term perspective). I tell you, the problem of alignment (in desktop applications, too) does not exist. It only exist in manual mouse clickers, not in real developers.
--SA

PravinSingh 20-Mar-12 5:52am

Thanks, I guess your point is valid that the users who are too lazy to do something right will be too lazy to run a check on their work. But I must admit that I am a mouse clicker myself and all my life I have seen static UI in desktop apps getting developed only with mouse. Just to verify, I downloaded the source code of Notepad++ (which I think should qualify as a decent software) and all the dialogs are made with mouse, in absolute positioning. Like this:

IDD_REGEXT_BOX DIALOGEX 0, 0, 370, 180
STYLE DS_SETFONT | DS_FIXEDSYS | WS_CHILD
FONT 8, TEXT("MS Shell Dlg"), 0, 0, 0x1
BEGIN
LTEXT "Supported exts :",IDC_SUPPORTEDEXTS_STATIC,113,18,77,8
LISTBOX IDC_REGEXT_LANG_LIST,113,31,63,122,LBS_NOINTEGRALHEIGHT | WS_VSCROLL | WS_HSCROLL | WS_TABSTOP
LISTBOX IDC_REGEXT_LANGEXT_LIST,181,31,29,122,LBS_NOINTEGRALHEIGHT | WS_VSCROLL | WS_HSCROLL | WS_TABSTOP
..
..

The techniques you mentioned (docking, padding, margins, anchors etc.) are completely new for me and I'd like to learn more about them. Can you point me to some open source software on Windows which is developed using these techniques (would be great if it's in C++)?

Sergey Alexandrovich Kryukov 20-Mar-12 12:54pm

I did not even think about developing of UI in C++, some excluding very early code (used ObjectPascal, Delphi, .NET...), just tried, so hard to say... The Open-Source code is easy to find per library through Wikipedia. For example, you look for "Qt". It leads you to the link "Software that uses Qt" and, here you go. Same thing about some other libraries. "GTK+" -> "gtkmm" (for C++) -> just 10 names, but one of them is Inkspace, one of the best products ever, Open-Source... and so on...
--SA