One of Windows Vista’s new abilities was targetting high resolution display devices. But when you’re running on a high-density display, thigs get fuzzier, not sharper.

Below is a comparison of various text sizes, with and without ClearType, using various scaling methods.

Vista DPI Font Scaling Methods

Rather than rendering text larger, Vista blows up the already rendered text; making it fuzzy and painful to look at. i realize why it’s happening. The new composition engine in Vista is using the power of your 3D video card to run the user interface. It’s very easy for it to apply a simple scaling as they’re about to show it on the screen.

 What they should have done is intercept all drawing function, and draw the text (and lines, and polylines, and bezier’s, and ellipses, etc) at a different size. For everything else (i.e. bitmap blits, texture fills, etc) perform the nieve scaling.

Align Your Controls

From the Windows Vista version of Adobe Reader: 

adobereaderalignedbefore.png

 The controls on the right side are hard to scan – they’re all aligned seemingly randomly. They really should have been aligned as:

adobereaderalignedafter.png

 Now it’s easy to scan two columns of options.

Too Much Search Criteria

Users’s don’t know, or care, how you store data in the database; nor should they have to.

It’s common today for a database front end to supply search boxes for each (potentially useful) database column:

searchcriteria_bad.png

In this case, Supplier Name and Supplier Number really are the same thing – they identify the supplier. These can be merged in one search criteria filter: Supplier.  

Same with City and Province/State – they’re both an Address. The user doesn’t care that we stored them in 2 separate columns in the database; she just wants to search by the supplier’s address. So we merge them as well, giving us:

searchcriteriabetter.png

Users don’t think of addresses as seven different fields:

Street1: Johnson Janatorial Supplies
Street2: 17 Piney Park Road
Street3: Unit Nº34
City: Ashville
State: NC
Zip Code: 28806
Country: USA

They think of them as a single block:

Johnson Janatorial Supplies
17 Piney Park Road
Unit Nº34
Ashville, NC  28806
USA

It’s not the user’s problem if an address is stored over multiple database columns. It’s the job of the computer to search them all as though it were one block of text.

Taking these ideas further, people have seen how powerful Vista’s new single search box is.

vistasearchboxempty.png

The user doesn’t need to know where a file is, or it’s name; she only needs to remember something. After that, it’s the job of the computer to find it.

This also works for business applications. The user doesn’t care if the supplier has an ID, a Name, a Short Name, an Accounting System Name, a Legal Name, and a Display Name. She only cares that she saw a Johnson:

vistasearchboxjohnson.png

It’s much more powerful to find something when you can just keep trying words – adding them as you narrow the results.

Detailed search criteria can be useful; mostly when you’re picking between existing groupings (e.g. active/inactive, gold/silver/bronze, cash/credit, customer/employee, etc), or trying to generate a report.

But for blind searching, a single box that does all the work for you is much more powerful.

Stopping The Proceedings With Idiocy

In his book About Face, Alan Cooper rails against the sin of stopping the proceedings with idocy. This is when you force the user to stop whatever they’re doing to get rid of a dialog box.

Alan Cooper argues that there is rarely, if ever, a need for a dialog box. Sometimes this is very difficult to do without lot of work. Other times, it’s very easy. For example:

supplier-deleted-renamed.png

Of course it’s deleted, i just deleted it. The cursor changed to an hourglass for an instant, and then the supplier disappeared from the list. Don’t stop me telling me the obvious, or to put it another way:

 Don’t stop the proceedings with idocy.

Splinter Cell Causing Chaos Theory

i installed the patch Splinter Cell: Chaos Theory today. Now when running the program i am presented with the dialog:

 splintercellchaostheorybad.png

My inital, and ongoing confusion is: what will happen if i push Yes? The text says “Continue?” rather than “Reboot?“. This makes me think that it will Continue, rather than Reboot

Unfortunatly i can’t trust them to do what they say, because if i guess wrong my computer’s going to shutdown.  (i’ve had an important program running for the last few weeks, which i don’t want to interrupt simply because StarForce says so.)

So i hit “No”, and forgo playing the game.

The dialog itself could be much clearer. This is what i was able to whip up fairly quickly:

splinercellchaostheorybetterandbuttons.png

The text is now white. The text on the original was mostly gray on black – not very easy to read.

The buttons are much clearer now about what they’re going to do, explicitly saying “Reboot Computer” and “Exit Game”.  Now you don’t even need to read the text, you can just pick your poison.

Also, the explanation text is before the choices, which is how people read: top-down.

 In this example, there is a better way altogether: don’t have any dialog. The problem is the StarForce copy protection drivers that UbiSoft uses. Thesedrivers have been causing people all kinds of blue-screens, slow-downs, inability to play the game.  UbiSoft should just not use them. In fact, UbiSoft has stopped using them, but not in time for the game i own.

p.s. the Russians who created StarForce have a propaganda site with a StarForce removal tool. There’s also a mirror of the removal tools on the Boycott StarForce site.

Okay. It’s OK not Ok, okay?

As Microsoft mentions in their User Experience Guidelines, the caption text on an OK button should be written as OK rather than Ok.

Here is an example violation from the the database management software Aqua Data Studio:

okcomparewhite.png

AquaSoft’s site is full of screenshots that show off the mixed case Ok button.

Historically OK may be an acronym, but when putting it on a dialog button in Windows it’s all caps. None of these variants are correct:

badbuttons.png

 There’s only one OK button:

ok.png

Okay?

p.s. Aqua Data Studio is a much nicer tool for managing a DB2 database than trying to suffer through IBM’s Control Center, which have enough UI issues to warrant their own entire blog.  In fact, some companies have rules in place forbidding the use of DB2 GUI tools, and everything must be done from a command line.

Just do it

A good user interface does what the users asks. The user shouldn’t have to fight the computer at every step. They want the computer to do something, so just do it.

In this example, we are awarding a contract to a supplier. After selecting a supplier, the user pushed the toolbar button:

tbawarditem.png

 Rather than awarding the item, the user is presented with a rather unfriendly error message:

Not very helpful

This isn’t very helpful. The user asked to award a contract to this supplier. She did not ask if it was already awarded to someone else. She isn’t even given a hint by the software as how to proceed. At least we could be helpful and tell her who the other supplier is:

dialoglesshelpful2.png

But we’re not really accomplishing what the user asked. If there is no way for her to award the item, then she should not have been able to reach this “error” condition in the first place:

badbetter.png

Disabling the toolbar button makes it clear that what she wants is just not possible. Rather than being led to believe they can award an item, and then having the rug pulled out from under them - it’s understood from the beginning that they can’t. But there’s still a better way.

If the user is allowed (i.e. there is a process, and they have permission) to unaward contracts from one supplier, and give them to another, then do so. The user wants it done, so just do it:

dialogmorehelpful.png

This way everyone’s happy.

  • the computer does what the users asks
  • the computer is satisfied that it has given the user fair warning; that the user might be making a mistake
  • the computer is forced to do the grunt work, which computers are good at


Follow

Get every new post delivered to your Inbox.