.. aesthetics (are) important in UI. If you begin to look at something and want to avert your eyes, the site has failed.
I highly recommend the book Emotional Design
August 12, 2008
Aesthetics Matter
July 23, 2008
Wow, Macs Really Are Easier
Atul Varma learns to love his Mac
…In a nutshell, though, I had always assumed that Macs were only marginally easier to use than PCs. I guess I’ve found over the past two months that in some ways, this holds true—the Mac is essentially an incredibly sexy-looking PC, with the same annoyances and a few polishes that make it a bit more humane to use. In other ways, however, the difference is truly like night and day.
This is a story about such a situation.
… I had to go through 8 wizards in all, so that’s a grand total of twenty-four clicks required to unplug my keyboard and mouse from one side of my computer and plug them into the other side. I’m not actually installing brand-new hardware here.
The first time I had to plug this keyboard and mouse into my Mac, I was floored. In the best-case scenario, I expected it to think for a second or two and then give me a reasonably unintrusive message informing me that I could use my USB mouse and keyboard. That would have been pretty humane.
But it did one better.
The Mac didn’t tell me anything, because my mouse and keyboard just worked the moment I plugged them in. When you plug in a power cable or a pair of headphones into a computer, you don’t get some kind of confirmation message from your operating system, because it’s obviously supposed to just work—why should plugging in a USB keyboard and mouse be any different?
… I have to admit that when it all adds up, I find my Mac to be significantly easier to use than my PC.
May 28, 2008
The Minimum Screen Size You Must Support for Mac OS X Is 800×600
Mac OS X can run on systems with a screen size as small as 800 x 600 … Unless you know that your users will be using a specific display size, it is best to optimize your applications for display at 1024 x 768 pixels. … Design your user interface for a resolution of at least 800 x 600.
According to Apple’s Human Interface Guidelines (retrieved 2010-04-21).
May 27, 2008
Readable Colors
…
Also, in every color combination surveyed, the darker text on a lighter background was rated more readable than its inverse (e.g. blue text on white background ranked higher then white text on blue background).
I wish Columbia Blue and Red were tested in the survey. They were my high school’s colors; and they were terrible. The worst permutation was blue text on a red background.
Question for all you who prefer light source-code on a dark background: why do you like it?
May 18, 2008
Intuitive Considered Harmful
intuition
noun
the ability to understand something immediately, without the need for conscious reasoning.
“Intuitive” sounds like a great property for an interface to have, but in The Humane Interface
Many interface requirements specify that the resulting product be intuitive, or natural. However, there is no human faculty of intuition…When an expert uses what we commonly call his intuition to make a judgment … we find that he has based his judgment on his experience and knowledge. Often, experts have learned to use methods and techniques that non-experts do not know… Expertise, unlike intuition, is real.
When users say that in interface is intuitive, they mean that it operates just like some other software or method with which they are familiar.…
Another word that I try to avoid in discussing interfaces is ‘natural’. Like ‘intuitive’, it is usually not defined. An interface feature is natural, in common parlance, if it operates in such a way that a human needs no instruction. This typically means that there is some common human activity that is similar to the way the feature works. However, it is difficult to pin down what is meant by ‘similar’. … the term ‘natural’ (can also equate) to ‘very easily learned’. Although it may be impossible to quantify naturalness, it is not to difficult to quantify learning time.
…
The belief that interfaces can be intuitive and natural is often detrimental to improved interface design. As a consultant, I am frequently asked to design a “better” interface to a product. Usually, an interface can be designed such that, in terms of learning time, eventual speed of operation (productivity), decreased error rates, and ease of implementation, it is superior to both the client’s existing products and competing products. Nonetheless, even when my proposals are seen as significant improvements, they are often rejected on the grounds that they are not intuitive. It is a classic Catch-22: The client wants something that is sigificantly superior to the competition. But if it is to be superior, it must be different. (Typically, the greater the improvement, the greater the difference.) Therefore, it cannot be intuitive, that is, familiar. What the client wants is an interface with at most marginal differences from current practice — which almost inevitably is Microsoft Windows — that, somehow, makes a major improvement.
There are situations where familiarity is the most important concern, but they are rare. One example is a kiosk at a tourist attraction. Millions of people will use it only once, and they must be able to use it as soon as they touch it (because they will walk away rather then spend their vacation reading a manual). And in such cases, mimicking the most promiscuously used interface you can find, warts and all, makes sense — if that means more people will already know how to use it.
Outside of rare exceptions, software that people use enough to justify buying is used repeatedly. The value of the product is what people make with it, not what they can do with it the moment they open the box. Designing for the illusion of “intuitiveness” is clearly the wrong choice when it harms the long-term usefulness of the product.
This is not an excuse for a crappy first-run experience! The first impression is still the most important impression. By definition, the less familiar something is, the more exceptional it is. And an exceptionally good first impression is what you are after — so unfamiliarity can work to your advantage here. It is more work to design an exceptional first-run experience, but good design is always more work.
This is not a rational for being different just to be different. It is a rational for being different, when different is measurably better. For something to be measurably better, it first needs to be measurable. That means using precise terms, like “familiar” instead of “intuitive”, and “quick to learn” not “natural”.
May 9, 2008
The Back Button is Now #3
Among other things, (this study) found that the Back button is now only the 3rd most-used feature on the Web. Clicking hypertext links remains the most-used feature, but clicking buttons (on the page) has now overtaken Back to become the second-most used feature. The reason for this change is the increased prevalence of applications and feature-rich Web pages that require users to click page buttons to access their functionality.
April 25, 2008
Larger Displays are Better. More Displays are Better.
Here’s Jakob Nielsen’s economic justification for giving employees large screens,
Big monitors are the easiest way to increase white-collar productivity, and anyone who makes at least $50,000 per year ought to have at least 1600×1200 screen resolution. A flat-panel display with this resolution currently costs less than $500. So, as long as the bigger display increases productivity by at least 0.5%, you’ll recover the investment in less than a year. (The typical corporate overhead doubles the company’s per-employee cost; always remember to use loaded cost, not take-home salary, in any productivity calculation.)
Jeff Atwood has written a “one-stop-shop for research data supporting the idea that, yes, having more display space would in fact make you more productive”. But he warns us that “Having all that space can make you less productive due to all the window manipulation excise you have to deal with to make effective use of it.”He calls this the Large Display Paradox. But, there are solutions to this problem. Using software to divide the large single-display into a “grid” of virtual “monitors” is the one he proposes.
A recent and widely publicized University of Utah study concluded that people were less productive on a 26″ screen then an 18″ screen. (Unfortunately I haven’t found a better link to their actual data then this crappy PDF brochure.) However, they also found that people were more productive with two 20″ screens. Their 26″ monitor was 1920×1200 pixels = 2.3 MP, their 20″ was 1600×1200 pixels = 1.92MP, so two 20″ screens = 3.84 MP, quite a bit bigger then the 26″ screen, and with greater productivity. This supports the theory with the right windowing system, productivity increases as the number of usable pixels increases.
I’ve only found one exception to the “bigger is better” rule of workspaces. Portability (Availability) can be worth more then pure productivity. There’s an old gunslinger saying that “The best gun in the world is the the one I’ve got in my hand right now”. Similarly, having a “big iron” on your office isn’t much use if you are flying somewhere over the atlantic. There’s no substitute for having a computer in-hand. Even if you would be more productive using a 17″ laptop, it’s better to get a 13″ ultra-portable, if it means you are more likely to actually have it around when you need it.
Business travelers, and creative professionals who work better in eclectic settings, are examples of people who are better served by the smallest sufficiently-powerful laptop they can find. But for most people bigger is better. Fortunately, small laptops can be connected to large displays.
April 5, 2008
A Better Left and Right
Some people get very confused with right and left when driving (“Turn left here. No, the other left!”) I knew a girl who wrote “left” and “right” on the ends of her windshield with a sharpie, and it worked well for her.
Another solution is to use concrete terms, instead of abstract terms:
“Turn left” is “Driver-side turn”
“Turn right” is “Passenger-side turn”
Sailors have been using the concrete terms “port” and “starboard” for centuries, for the same reasons.
March 31, 2008
Resolution Independence
Displays are getting sharper all the time. Sharpness is very important, because things don’t just look better on high-resolution displays; they are measurably faster to use.
Low-resolution monitors (including all computer screens until now) have poor readability: people read about 25% slower from computer screens than from printed paper. Experimental 300 (PPI) displays (costing $30,000 (in 1998)) have been measured to have the same reading speed as print, so we will get better screens in the future.
The resolution of a display is measured in PPI, Pixels Per Inch, the number of pixels used to draw a one inch long, one pixel thick, line. A higher PPI means smaller pixels, and clearer images. You can calculate the PPI of your screen by
PPI ≅ sqrt(pixels_across^2 + pixels_down^2) / diagonal_inches
I am writing this article on an iMac with a 24″ screen, showing 1920 x 1200 pixels, so my PPI ≅ sqrt(1920*1920+1200*1200)/24 ≅ 93 PPI.
The resolution of a printer is measured in DPI, or Dots Per Inch. Unfortunately, DPI is often used as another term for PPI. That is technically inaccurate, but even Microsoft does it. SPI, Scans Per Inch, is another term that is used instead of PPI, but fortunately is correct when describing digital displays.
Bitmapped images are smaller on high-resolution displays, because the pixels the picture is made of are smaller. This can be a big problem for interface elements.
For example, today Apple’s interface guidelines say “The standard Help button is 20 pixels in diameter and should be placed at least 12 pixels from other interface elements.” On my iMac, a 20-pixel wide circle is about 0.21″ in diameter — roughly 1/3rd the diameter of a Dime. 
But on a 300 PPI display, it would be 0.07″ in diameter — roughly as thick as three pieces of mechanical pencil lead 
. As you can see, it’s way too small to comfortably click!
Just scaling bitmapped images, so a 20-pixel wide picture is always drawn 0.21″ wide, isn’t a good work around. It’s just emulating a low-definition, low-readability, display on a more expensive high-definition display. Another problem is that it looks terrible when everything else on the system is crystal clear.
It gets more ugly when the scaling-factor is higher, say for a display that matched the print fidelity of the tawdry magazines you see in the grocery check-out isle.
A resolution independent interface can be usably, and pleasantly, displayed on high-definition or standard-definition screens. There are two ways to build a resolution-independent display.
You can use vector images, which can be resized without problems. SVG and PDF are two popular formats. This sounds like an elegant “design once, show anywhere” solution. But in practice today building a vector image of the same quality as a bitmapped image can be very difficult, especially with complex images. This will change in time. Today designers create bitmap images by embellishing a vector image with bitmap-effects. As vector-imiging tools improve, they will be able to perform equivalent effects, but in a resolution-independent way.
Alternately, your app can carry-around a set of bitmapped images and draw the one that most-closly matches the current resolution. If you only have to support a handful of well-definied resolutions, this might be the best choice with today’s tools. The only caveat is that all signs point to vector-images being the future. Loading one vector image is also easier the selecting one of many bitmapped images to load. (And theoretically a vector image won’t have to be tweaked if we suddenly get one million PPI displays).
Already Solved
I think it’s important to note that Fonts have been facing an even more severe resolution-independence problem for decades, and have mostly solved it. The same font can be rendered well on a 1200 DPI printer, and a 72 PPI display. That’s a much bigger resolution disparity then a computer interface will ever have to deal with, because by the time a screen close to the resolution of a 1200 DPI printer is common, nobody will be using 72 PPI displays anymore (they aren’t even sold today).
Early fonts were bitmap fonts — a collection of bitmaps of what the font should look like at a particular scaling. But today vector fonts have replaced bitmapped fonts on the desktop, and even the iPhone. Vector fonts let us do amazing things with scaling (font specific stuff starts at 1:18). Vector fonts have been such an unqualified success, that it’s hard to imagine vector images not replacing bitmapped images for interface elements.
When Will It Happen
Year
Model
ResolutionSize DPI 1984
Original Macintosh512 x 342 9″ (8.5″) 72 1984 640 x 350 13″ (12.3″) 60 1994
Apple Multiple Scan 17 Display1024 x 768 17″ (16.1″) 80 2004 Apple Cinema HD display
2560 x 1600 30″ 100 I used the Tag studios Monitor DPI calculator to arrive at the DPI numbers in the above table. I couldn’t quite figure out what the actual displayable area of those early CRT monitors were, so I estimated about 5% non-displayable area based on the diagonal measurement.
Regardless, it’s sobering to consider that the resolution of computer displays has increased by less than a factor of two over the last twenty years. Sure, displays have gotten larger– much larger– but actual display resolution in terms of pixels per inch has only gone up by a factor of about 1.6.
I can’t think of any other piece of computer hardware that has improved so little since 1984.
It certainly doesn’t not look like we will get 300 PPI displays anytime soon! At the present rate, it will be decades before a $2000 display matches the clarity of a $20 printer.
However today’s smarphones and small-devices have much sharper screens then computers. The first generation iPhone is 160 PPI, the Kindle
UPDATE 2009-02-11: Wikipedia’s list of devices by PPI lists some very high PPI devices. The Sony Ericsson X1
phone has broken the 300 PPI “readability threshold”. The Fujitsu Lifebook U820 has a 270 PPI display. But the screen is only slightly bigger then the Osborne 1 “portable” computer of 1981. Still, if history is any indicator, once better technology is actually sold, it catches on very quickly.