Crafty Cat

It’s no secret that the use of difficult CAPTCHAs (Completely Automated Public Turing test to tell Computers and Humans Apart) in Web forms can confound ordinary people, drop conversion rates, and increase errors in addition to (hopefully!) keeping the bad guys out of your site. As a result, I’m always interested in alternatives to standard CAPTCHA techniques.

Once such approach brought to my attention recently can be found on They Make Apps. Instead of the distorted text strings that typify most modern CAPTCHAs (above), the sign up form on They Make Apps uses a slider that asks people to: “show us your human side; slide the cursor to the end of the line to create your account.” Moving the slider to the right completely submits the form and triggers error validation just like a standard Submit button would.

I don't have any data that suggests this implementation impacts conversion rates (up or down). It doesn't seem to cover accessibility issues since it requires a mouse or drag gesture to work (no keyboard support). And at large scale, it won't keep spammers out effectively. CAPTCHA busting farms already employ human labor to crack distorted text CAPTCHAs at incredibly cheap rates (moving a slider would be even faster & easier) and it's likely trivial to develop a script that will adjust the slider automatically to submit the form. But it is still nice to see people exploring different approaches.

Tags: forms, guidelines, usability, UI components, innovative UIs

For three generations of the iPhone, Apple kept the screen consistent (320×480 pixels and 3.5 inches diagonal). But now Apple’s new iPhone 4 boasts the “highest resolution phone screen ever (960×640 pixels and 3.5 inches diagonal).” What’s the impact to designers?

But first, why is it an issue? Because of PPI (pixels per inch) or pixel density variations.

“A screen with lower density has fewer available pixels spread across the screen width and height, where a screen with higher density has more — sometimes significantly more — pixels spread across the same area. The density of a screen is important because, other things being equal, a UI element (such as a button) whose height and width are defined in terms of screen pixels will appear larger on the lower density screen and smaller on the higher density screen.”

Initial Palm and Android smartphones were in the same ballpark as Apple’s first set of iPhones so ppi (pixels per inch) was roughly the same across these devices.

• iPhone: 320×480 | 3.5 in | 164ppi
• Palm Pre | 320×480 | 3.1 in 186ppi
• Palm Pixie | 320×400 | 2.63 in | 194ppi
• T-Mobile G1 | 320×480 | 3.2 in | 180ppi
• ?MyTouch 3G | 320×480 | 3.2 in | 180ppi
• ?HTC Hero | 320×480 | 3.2 in | 180ppi

The next set of Android phones featured much higher PPI only to be bested by Nokia’s next generation of smartphones and finally the iPhone 4.

• Motorola Droid | 480×854 | 3.7 in | 264ppi
• Nexus One | 480×800 | 3.7 in | 252ppi
• ?HTC Desire | 480×800 | 3.7 in | 252ppi
• Nokia N97 | 360×640 | 3.2 in | 229ppi
• Nokia N900 | 800×480 | 3.5 in | 266ppi
• Apple iPhone 4 | 960×640 | 3.5 in | 326ppi

So how do designers manage these jumps in pixel density? Here’s a round-up of recent articles that tackle the issue.

Designing for iPhone 4’s Retina Display by Josh Clark (author of Tapworthy) looks at the impact of the Retina Display on iPhone application development.

• Starting in iOS 4, dimensions are measured in “points” instead of pixels. Conveniently enough, the iPhone screen is 320×480 points on both iPhone 4 and older models.
• On iPhone 4, a point is two pixels; draw a one-point line, and it shows up two pixels wide. So: just specify your measurements in points for all devices, and iOS automatically draws everything to the right proportion on the screen.
• To add high-resolution images to your app, you have to include a second set of all your graphic files. For every image in your app, add a second version that’s twice the size, adding @2x to the name.
• Photoshop fans should learn to get comfortable with Illustrator. By building your app graphics in vector format, you can export them in whatever size you like with limited muss or fuss.

How to make your web content look stunning on the iPhone 4’s new Retina display by Aral Balkan outlines the high-level impact of the Retina Display on Web design & development.

• If you want your applications and web sites to look beautiful on the iPhone 4’s new retina screen, you’re going to have to create high-resolution versions of your bitmaps and/or use vectors.
• You basically have to design liquid interfaces (and interface elements) for your apps.
• SVG can help in creating resolution-independent designs.
• Since browsers do not currently have automatic support for loading high-resolution versions of image and video assets, we can use a combination of CSS media queries and JavaScript for the same effect.
• With CSS3 media queries you can then build Web sites with completely different CSS files based off the pixel-ratio of CSS pixels to device pixels, including higher res artwork as necessary.
• This approach also degrades gracefully, since you can specify the lowres CSS file and then higher res CSS files inside media queries that will be ignored by browsers that don’t understand them.

High DPI Web Sites by Dave Hyatt outlines how the WebKit team is thinking about allowing Web authors to effectively support very high resolution devices.

• Most Web site authors have traditionally thought of a CSS pixel as a device pixel. However as we enter this new high DPI world where the entire UI may be magnified, a CSS pixel can end up being multiple pixels on screen.
• Safari actually supports PDF as an image format (the hands of the clock Dashboard widget are an example of this). However other browsers do not support this format. The agreed-upon standard for scalable graphics on the Web is SVG.
• Our goal with WebKit is to make SVG a first-class image format, so that it can be used anywhere you might use a PNG, a GIF or a JPG.

Targeting the iPhone 4 Retina Display with CSS3 Media Queries by Walt Dickinson shows how to use CSS3 media queries to target the Retina Display.

• In order to preserve the design of existing websites, images are automatically pixel-doubled. And this creates a schism between “device pixels” and “CSS pixels”.
• With CSS3 media queries, you can use device-pixel-ratio, for targeting specific pixel densities. This tells browsers to include High PPi CSS files only if the device pixel ratio is 2 or higher. This CSS file overrides the background images of some of my site’s graphics with higher resolution versions and uses the background-size property to set the correct CSS pixel dimensions.

If you’ve come across any other resources on designing for the Retina Display (326ppi), let me know!

Tags: screens, technology, mobile, apple