RSS
Designing Windows Correctly
| Language: | C |
| Category: | Desktop |
| Date: | 2008-11-19 |
| Author: | .NET Essential Library Developer |
When you write your own program you're going to sell, it is very important to think over its interface. Like with people, first impressions on a program are most lasting. If its windows are disgusting, nobody will pay a dollar for the program. How can you create something attractive so that a user spends more than five minutes on getting acquainted with you program? This isn't that difficult. Correct design is a sort of art.
Previously I tried to find non-standard solutions in the main window to stand out against my competitors, but my programs sold badly. After three years of such a practice I made a standard window with simple buttons and common menus, and sales increased thrice. Users don't like to make heads or tails of complicated interfaces and strange controls. They like simple programs that can be used immediately after installation.
If you write a small utility with just a few features, its windows and buttons can be of any size, shape, and color. For example, a dialer can be round, oval, or look like an exotic animal (with a texture or without it), and its interface can include three text boxes (the telephone number, login, and password) and a dial button. A user will quickly understand a simple interface regardless of how it looks like. Therefore, you can use your imagination and attract new users with non-standard, but beautiful and convenient interfaces.
A good example of a small utility with simple features that conquered the world is WinAMP. The program is very simple, and the user will always understand how to play music, regardless of the appearance of the main window. In this case, the solution is non-standard. However, a beautiful solution allows a program to win in its market niche. If you add a feature that allows to change the program's appearance (supports skinning), you'll gain half of the victory. After that you can provide an original interface with serious features.
When you create a program with a lot of features and a complex structure, the main window should be rectangular and have standard Windows colors. Imagine Word's main window is round or oval. Perhaps, this would be beautiful and interesting, but I would uninstall such a program at once.
Make sure to stick to de-facto software standards in the area you're working in. For example, PhotoShop interface became a standard for graphics editors. Previously, all software manufacturers tried to invent something special. However, they eventually reconciled themselves with the fact that Adobe introduces the fashion, and now they stick to its standards.
When Flash 5 was released, the developers at Macromedia tried to make its interface as close to PhotoShop's as possible. Despite one of these applications works with bitmap graphics and the other with vector graphics, they became alike. For example, the toolbar disappeared though it improves usability. As a result, Macromedia Flash 5 became extremely popular, especially with professional artists. In fact, graphics features didn't change much in version 5. The main innovations were advanced ActionScript and the new interface. Artists don't program, so they don't care about ActionScript. However, they liked the interface because it was familiar, and they didn't have to spend months on learning and getting accustomed to it.
When you start a new project, look at your competitors first. Pay special attention to those who control the market and has the maximum sales. You should stick to their standards. If the leaders use original solutions, you can try to make something similar. In such a case, movement in another direction, such as using classic solutions, will be mortal. Of course, you'll be able to find your customers, but they won't be numerous. Compete in quality, features, and convenience, not in bright toys. Otherwise, you'll lose.
If you are an innovator in grain, you can try your own way. Maybe it will be successful. You'll never know until you try. Risk of failure increases, but if you hit the nail on the head, you'll dictate the fashion and reap a rich harvest. If the programmers at NullSoft didn't risk and create something original, WinAMP would never be so popular despite its high performance and a lot of features.
I saw a few players that could surpass WinAMP in many features, but it was a pioneer that conquered the hearts of many music lovers. The other programs are just followers, and now the player market is flooded with players with non-standard windows and support for skinning.
3D FTP is a negative example. Its developers liked WinAMP's success and provided skinning support in this FTP client. I've never seen so terrible application. Can you imagine Adobe PhotoShop or Microsoft Word with skinning support? Those programmers were either drunk or kids who know nothing about standards. 3D FTP client was very powerful with a plenty of features (that surpassed many competitors). However, it died in the pink. Its authors should have looked at Cute FTP or CyD FTP Client and make 3D FTP's windows look like the windows of these two applications. In addition, they should have deleted skins and non-standard controls.
Windows operating systems conquered the market thanks to the standard interface and the unified appearance of all applications. Because of this, every dummy knows where he or she should look for file open or print commands, edit commands, etc. Having started an application, it is easy to guess which buttons to click to make it work.
Creating an interface is a vast subject, and many books have been written on it. However, if you know at least its basics, you can achieve incredible success.
The Main Window Interface
What is designed first when creating any program? Of course, it is the main window interface. As you already know, the window should be rectangular and include the system menu. Never remove the borders of the main window without necessity.
There should be a menu and a toolbar with buttons for commands used most frequently at the top of the window. There shouldn't be any additional controls above the menu and toolbar.
There should be a status bar at the bottom of the window. It will display hints about selected commands. Don't think your users will be cute enough to guess anything without hints. Each command should have a brief but clear description that should be displayed in the status bar. The commands in the menu should be short, and a more detailed explanation of a command being executed should be displayed in the status bar.
When a toolbar with buttons is used in a program, sometimes it is difficult to guess the purpose of a button from the icon on it. Some programmers believe it is enough to put these icons next to the corresponding menu items to help a user understand what is what. However, the user shouldn't have to open a menu to find the command associated with a particular button. He or she should have a possibility of determining the purpose of a button with a pop-up hint or the status bar.
The status bar can also contain information on the current program status or on the progress of an operation. Don't display this information on individual panes or additional windows. The status bar was designed for this purpose.
The names of menu items should be as informative as possible, but they shouldn't consist of more than three words. More comprehensive information can be displayed in the status bar. For standard items, use commonly adopted names. For example, don't use "File/Create a new crack" instead of "File/New". The first would be too long and senseless.
The toolbar also should be as standard as possible. The toolbar with the main commands (such as New, Open, Print, etc.) should be at the top of the window. Don't put it at the side or bottom. It is best to use standard icons that are used in MS Office applications or other Microsoft applications. Users got accustomed to them, therefore, they will find your interface familiar.
If you cannot draw, find icons on the Internet, but don't create pictures which nobody will able to understand. On the other hand, if you have artistic skills, you can try to draw icons similar to those used by your competitors. Users who used other manufacturers' applications will be able to switch themselves to your product easily. This is very important, and you should give much attention to icons.
Icons should be explanatory and associated with the command. If a hippopotamus is drawn on a button that sets a color palette, even Nostradamus would be unable to guess it.
It is recommended to make the toolbar adjustable so that a user can remove unnecessary buttons and leave only those he or she actually needs. However, if there are just 10 buttons on a toolbar, such a feature will be excessive. In this case it would be best to allow the user hide or show the entire toolbar.
The buttons on the toolbar should be grouped by purpose. When there are too many buttons, use several toolbars, but don't throw everything in one heap. When grouping the buttons, you can be guided by the arrangement of the commands in the main menu. If you provide more than two toolbars, you should allow the user to rearrange the toolbars and hide or show any of them. Thus every user can decide how much of the working area he or she needs, and how it will be used.
Controls
All controls in all windows should be from the standard Windows set. Don't create irregular buttons just because you can do this. One time I made round buttons and plane textboxes. This didn't increase sales. In addition, it was difficult to create a consistent design.
Hundreds of professionals at Microsoft rack their wits on making the user interface simpler. Don't consider yourself more clever than they. You can create your own control only if the control you need to fulfil your task is missing from the standard set. However, you should try to achieve the simplest solution, not the most beautiful.
Dialog Boxes
Dialog boxes deserve special attention. They are used by users to enter data into the program and obtain the results. If something is inconvenient or annoying, the user will simply run uninstall.exe. You should design every control with special care.
"About" window of The Bat!
The only window that can look as you wish is the About window. It is likely that the user will never see it. If he or she sees something unexpected, this won't be a problem. In the other cases no decorations are allowable. However, even the About window should contain a Close or OK button because it would be difficult to guess that the window can be closed only by clicking a particular area within it.
What should a dialog box look like? Undoubtedly, rectangular. In addition, it is desirable that its width is greater than its height. Such dialog boxes are perceived better because humans are used to perceiving everything in the horizontal plane. We watch wide-screen films, and the horizontal resolutions of monitors are greater than vertical. This is why, it is easier to make wide dialog boxes "tasty" and "pleasant to the touch".
Look at the backup dialog box of The Bat! (Fig. The backup dialog box of The Bat!). Its height is greater than the width, and the dialog box doesn't look fine. I understand its developers who tried to provide as many options as possible in this dialog box. However, the box itself and uneven controls are a little annoying. In addition, the last checkbox is moved to the right. This is a mistake. All controls should be left-aligned, and such jumps to the right deteriorate the appearance of the dialog box. If a control depends on another, it is best to disable it (with the Enable property), rather than move the control.
The only successful arrangement in this window is that the controls are well-grouped. Checkboxes are in one group, and radio buttons are in the other.
Look at Fig. The improved backup dialog box of The Bat!. I deleted a couple of unnecessary controls (they could be left, but the program's functionality won't suffer without them). In addition, I aligned controls and made the dialog box wider. Now it looks differently and, believe me, in the application it looks even better and is much more convenient.
The backup dialog box of The Bat!
The improved backup dialog box of The Bat!
If you need to display properties of an object (document or file), the dialog box should be stretched vertically. This is an exception, and you should always stick to it.
All information should be grouped by topics using tabs. A good example of such an approach is the file property dialog box in the Explorer or the document property dialog box in the Microsoft Word (File/Properties).
Property dialog box
No object has so many properties that it would be impossible to arrange them in four tabs of a dialog box. If your object has too many properties to fit in four tabs, you should optimize it. Try to decide what information is necessary for a user, and what can be deleted.
If your application has just a few parameters, you can create something in MS's style, i.e., with a set of tabs. When there are many settings, stick to Netscape Navigator's style: Put a hierarchy at the left and display the appropriate settings when an item is selected in the hierarchy.
Don't try to associate a bulk of information with one item. Readability will decrease, and it will be difficult to locate necessary settings. Try to leave enough space between the items and use indentation so that the dialog box looks fine.
mIRC settings
Improved mIRC settings dialog box
Some unused space appeared in the dialog box, but this doesn't mean you can decrease its size. It is likely that the other dialogs need to have this size. In the main window, you can put as many controls as possible to make it as informative as possible. By contrast, in dialog boxes you don't have to use the space completely. The appearance is more important.
Don't spare time on creating a convenient and beautiful interface. The best program with a lot of features won't sell better than a simple and convenient utility.
Remember, if you don't know what to do, look at your competitors!