Test your UI with a range of desktop settings

It is getting more and more common to see badly written UI that cannot handle different desktop settings. One reason is that most so called UI text book does not talk about DPI (Dots Per Inch) display settings.

Everyone assumes that it is always the default - 96 DPI. Sorry I have news for you. When you write a Windows program, there are certain things that belong to the users and there are things within your control. One of the things that is beyond your control is Desktop display settings but the operating system has functions to allow you to discover them and to react accordingly. The last bit is often left out by the programmer who then assumes the defaults or the same settings as their desktop.

To change this setting in XP, just bring up the Display applet in the Control panel, go to the Settings tab, then press Advanced button. In the general tab you can change the DPI settings. Many do not even know about this.

My development machine is always set to be different from the standard to catch violators - myself included. It can also work the other way - a program developed with 120DPI will not display properly in 96DPI environment.

So you need to test both and the best way is to use a Virtual Machine. Fortunately WinForm in .Net 2 has a built in facility to adjust for these.

Below are some bad examples.

From the internet banking department of one of the largest banks in Australia - Commonwealth Bank of Australia:When the 'menu' is dropped down, the distortion is more pronounced:

The bank's did not actually leave their customers in the dark. Here is a cop out from the bank:

Why do the navigation tabs within NetBank (i.e. View Accounts, Transfer Money, Bills, Admin & Services) appear to be so large or small?

This could relate to the Dots Per Inch (DPI) setting on your computer.

The normal DPI setting is 96 DPI. If you are using Windows XP the best way to check your DPI setting is as follows:

• Open Display icon in your control panel;
• On the Settings tab, click Advanced
• On the General tab, in the DPI setting list, click the DPI setting you want to use.

This is a real cop out because such demand is not necessary as million of other web pages can handle this issue without any problem. I suggest that it is their programmers' lacking the skill to deal with this. One of their subsidiaries' web page handles this perfectly.

On a smaller scale, the popular NantAddin for Visual Studio demonstrates a very commonly made mistake:

The almost disappeared OK and Cancel buttons are marked in red rectangle.