4

I need your suggestions how to organize and make a nice, graphical user interface.

Now I have something like this: enter image description here

There is a tree view (it takes a big space...) as a menu with assigned frames to each item. All frames have control buttons (a tool bar) and something from this list: list views, string grids, progress bars, memos, rich edits, web browser, color pickers, list boxes, labels, edits etc.

I don't have enough experience to create a good, easy and graphical UI, and I do not have any ideas what to make.

The most hard thing for me is I need to create a nice SDI, but the present UI is similar to a MDI (frames with lots controls are instead of windows).

So I'm trying to copy an UI from other soft: http://www.addictivetips.com/windows-tips/150-best-windows-applications-of-year-2010-editors-pick/ + SCREEN SHOTS. But I cannot find something appropriate for me :(

Added:

I have an idea to use a glass effect (a "menu" instead of a tree view on the left), but it looks complicatedly: buttons on a glass and buttons below (a tool bar).

enter image description here

Another version: enter image description here

Please, advice me what to do or give me a direction. Thanks!

maxfax
  • 4,281
  • 12
  • 74
  • 120
  • 2
    Your current UI looks fine. Glass will not make any UI easier to use, it was only invented to strike back at Mac bling lovers in the media. – David Heffernan Aug 21 '11 at 07:16
  • Thanks! I would like to have something that looks good :) – maxfax Aug 21 '11 at 07:23
  • 2
    It looks good to me. I would advise you to prefer text to icons. Icons, beyond a handful of well know standard ones, are hard to interpret. Text is the most effective way to communicate intent. An excellent book for user interaction is Alan Cooper's About Face. – David Heffernan Aug 21 '11 at 07:29
  • 3
    For UI and UX (user experience) advice, you could also visit http://ux.stackexchange.com where there are a lot of ui/ux experts. – Marjan Venema Aug 21 '11 at 08:11

4 Answers4

7

Consider that most monitors are now 16/10 or 16/9, i.e. not in 4/3 aspect ratio any more.

Therefore, it's not a loss of space to put a tree on the left, or even the commands toolbar on the left side instead of the top of the window. Your first screenshot was not the worse, in this aspect. I just write a log viewer with this design: the log events has the full application height.

Office 2007/2010 ribbon for instance is nice looking, but takes too much vertical space IMHO on daily use. Some users (among me) are frustrated by this ribbon. For instance, I don't find it very usable in a notebook. Greatest user interfaces gives full space to content, not commands. Chrome is a good example of this. And mobile applications tend to maximize the available space use.

Just my 2 cents.

Community
  • 1
  • 1
Arnaud Bouchez
  • 42,305
  • 3
  • 71
  • 159
  • They introduced the ribbon to, amongst other reasons, reclaim some vertical space. Telemetry showed that most Word windows were taken over by extra toolbars, e.g. acrobat. Ribbon can be closed up by double clicking a tab. Simple solution to all this is to turn your monitor on end! – David Heffernan Aug 21 '11 at 16:28
  • 2
    @David You're right, that was the theory. But honestly how many Office users knows about this double-click on a tab trick, and how many uses it? - for instance, I knew about it, but never used it... How many times did you hear, like me, that "I can't find this f...g command in the new ribbon, whereas it was there in my Word 2003 sub menu....". A docking solution, like in old toolbar days, was not so bad: dock on the left or on the top according to your screen (or on the right or the bottom, as a matter of taste). – Arnaud Bouchez Aug 21 '11 at 17:08
  • 2
    I don't think power users like you were the main use case for the ribbon! I'm personally a fan of the ribbon, but mostly because I have never used Office much at all. Having never learnt any ways to do things, I find ribbon easier than sub menu hunting. If you knew the old way then I'm sure the ribbon would be a wrench. One thing I know is that I don't want to add a ribbon to OrcaFlex. Existing clients would hate it. – David Heffernan Aug 21 '11 at 17:17
  • 1
    Sometimes i miss a 'search' function in ribbons.. like the one in Delphi's tool palette. – Wouter van Nifterick Aug 21 '11 at 17:28
  • That's why I always purchase 16:10 monitors instead of 16:9 – Gabriel Jan 13 '15 at 15:56
2

Personally speaking, about your first screen shot, the toolbar buttons are too big. They are much too strong a presence, even at second glance.

I would reduce their size. Or, when this program targets children or touching devices, the other controls and font sizes should be enlarged.

NGLN
  • 43,011
  • 8
  • 105
  • 200
2

You are trying to create a tabbed application, So I'd suggest using some sort of tab-control.
Even the Delphi default one allows you to add pictures to the tabs.

Something like this:

enter image description here

A few considerations:

How often is the app used?

If the app will be used very daily by your users, try to maximize usable space, i.e. make the controls as small as need be.
If the app is used rarely by your users, make the controls big and bright, label every button so things are clear, and time figuring out where is what is minimized, this also means using familiar user interface elements.

Are you targeting elephants or mice?
If you audience is computer savvy (mice), you can get away with more experiments and bling; if you are dealing with perpetual beginners you will need to stick to basic stuff.

Remember, the user interface is a contract
Make sure the controls behave as advertised. If something looks like a button make it behave like a button. Don't disguise a menu to look like a listbox/treeview.
A menu does an action (it's a hidden button), a listbox selects one item that can be acted upon.

My opinion
I dislike your initial screenshot because it tries to force a tabsheet/pagecontrol into the format of a treeview, whilst naming the items menus. This makes for a clumsy interface.
I've never seen a menu be used to switch between views, and the treeview makes for a mighty small target to hid. On top of that it allows for multiple nesting.
The tree is a concept that every programmer understands, but very few people outside that group grok, IMHO, don't use a tree in your application! and avoid the treeview.
It's a poor control to work with because:

  • It allows nesting > 2 a NONO in my book;
  • It is too small to hit with a mouse, even worse with a touchpad;
  • What's up with the [>] sign in front, why would I want to collapse a tree with just 1 level of nesting and when I do and the [+] is visible in front of "main menu" where on earth have my submenu items gone?

I love your last version, but

  • It needs text labels for every button;
  • Make the vertical pagecontrol, look like some sort of tabbed sheet, this will make your intent instantly clear;
  • I would love to see a statusbar;
  • Glass may look cool, but having the junk from screens below shine through your app sure makes everything look busy, not a good thing if you're trying to focus on this particular app;
  • Make sure to put splitters between all panels, and make sure to visually highlight the splitter by setting beveled:= true and width/height:= 5 so you can actually hit that splitter
  • The info panel has its own caption, a huge waste of space. It's bad enough that every window has a title bar that does almost nothing, don't multiply non-interactive space.

Finally
Do as David says and buy a copy of about face, it's the best book on UI design I've seen by far. http://www.cooper.com/#about:books

Johan
  • 74,508
  • 24
  • 191
  • 319
  • thank you very much! A very very valuable and complete answer! As I see you have a tool bar on the top + a page control. Do you use a tool bar as a main menu and sheets instead of my tree view? Will it look nice if I have already a tool bar on each frame (or on your sheet) and a tool bar on the top as a main menu? – maxfax Aug 23 '11 at 08:46
  • What do you think about apps from "Control Panel\System and Security\Administrative Tools" (Windows 7)?. Almost all they have a tree view as on my first image. – maxfax Aug 23 '11 at 08:49
  • About lacks of a tree view -> I can hide buttons, lines, increase an item height (it allows of to use large images). Finally, it is a gorgeous menu :) – maxfax Aug 23 '11 at 09:12
  • @maxfax, IMO this is an example of very poor UI design. The Control panel->system page is made to look like a webpage, but the links on the left open up a windows '95 style tabbed dialogbox where the tabs duplicate the hyperlinks on the initial page. It's a mess! – Johan Aug 23 '11 at 12:24
  • @maxfax, my gripes with the treeview are mainly with the mode where it actually displays a tree. In all other modes it's actually a very cool control. – Johan Aug 23 '11 at 12:28
1

First picture is the best version for standard desktops with mouse.

Third picture will be good for tablets with their touch screens. But it needs some improvements. Currently I can't see on which page I am now, even more: there are no signs that those buttons actually switch pages. I think, you need some sort of tabcontrol here.

Torbins
  • 2,111
  • 14
  • 16