You are trying to create a tabbed application, so I would suggest using some kind of tab control.
Even by default in Delphi you can add images to tabs.
Something like that:
A few considerations:
How often is the application used?
If the application will be used very daily by your users, try to maximize the usable space, i.e. make controls as small as possible.
If the application is rarely used by your users, make the controls large and bright, check each button to make everything clear, and the time that determines where it is minimized also means using familiar user interface elements.
Do you target elephants or mice?
If your audience is computer savvy (mouse), you can get away with a lot of experimentation and bling; If you are dealing with perpetual beginners, you will need to stick to the basic things.
Remember that the user interface is a contract.
Make sure the controls behave as advertised. If something looks like a button, then it behaves like a button. Do not mask the menu so that it looks like a listbox / treeview.
The menu performs an action (this is a hidden button), the list selects one element that can be influenced.
My opinion
I do not like your initial screenshot because it is trying to force tabsheet / pagecontrol in a tree-like format by naming the item menu. This creates a clumsy interface.
I have never seen a menu used to switch between views, and the tree structure makes a strong target for concealment possible. In addition, it allows multiple investments.
A tree is a concept that every programmer understands, but very few people outside this grok group, IMHO, do not use the tree in your application! and avoid the tree structure.
This is poor control to work because:
- This allows nesting> 2 a NONO in my book;
- It's too small to hit with a mouse, worse with a touchpad;
- What is ahead of the [>] icon, why do I want to collapse a tree with one level of nesting, and when will I do it, and [+] is displayed in front of the "main menu", where on the earth are my objects the submenus are gone?
I like your latest version, but
- Each button needs text labels;
- Make a vertical pagecontrol, look like some kind of tabbed sheet, this will make your intention instantly understandable;
- I would like to see the status bar;
- The glass may look cool, but the presence of garbage from the screens under the shine through your application surely makes everything busy, not very good if you are trying to focus on this particular application;
- Be sure to set the delimiters between all panels and make sure to visually highlight the delimiter by setting
beveled:= true and width/height:= 5 so that you can strike at this delimiter - The
info panel has its own signature, a huge waste of space. It is bad enough that in every window there is a title bar that does almost nothing, do not multiply non-interactive space.
Finally
Do as David says and buy a copy of about face , this is the best UI design book I've seen far. http://www.cooper.com/#about:books
Johan source share