iPhone and iPod’s Iconic Shapes

06.17.12 | Permalink | Comment?

Few people would have difficulty recognizing these two products as the iPhone and iPod:

iPhone and iPod’s Iconic Shapes

These shapes are iconic. They are also easy to draw: they took me exactly 6.5 minutes to draw them in OmniGraffle without looking at either product.

The question on my mind is: does Apple start with an iconic shape or end up with one?  The design process is interactive, so perhaps the question needs to be asked differently: is ending up with an iconic shape a design goal? or is the design of Apple’s products so simple that the iconic shape is just a byproduct?

Just wondering.

Filed under Design

GM’s Advanced Tech Window

01.18.12 | Permalink | Comment?

General Motors is not the name that first comes to my mind when thinking high tech, but it’s certainly trying.  One intriguing idea transforms the car windows into interactive, transparent displays:

Gm interactive1

Gm interactive2

The idea is too expensive to be practical at present, but it shows great outside the box thinking.  See demonstration video.

[Via Consumer Reports]

Representing Approximation

11.29.10 | Permalink | Comment?

While trying to get a new HP OfficeJet 4500 to scan, I ran into this dialog:

HP Ink Levels

The ink level that the printer reports to the computer has always been an approximation.  HP’s software now reflects that in a nice way.

Filed under UIs I Like

New Column Headers in iTunes 10

09.10.10 | Permalink | Comment?

I love them.  They make the standard Mac OS (and Windows’) column headers look so passé.  I hope that they become standard issue in Mac OS 10.7

iTunes10_column_headers.png

 

Children of a Lesser Tool?

06.02.10 | Permalink | Comment?

I’ve been really enjoying the roasting that Adobe’s Flash has been getting lately at the hands of Steve Jobs and Daring Fireball’s John Gruber. But Gruber extended the roastingto cross-platform toolkit Qt:

Consider, for one example, Amazon’s Kindle clients for iPhone OS and Mac OS X. The iPhone OS Kindle app is excellent, a worthy rival in terms of experience to Apple’s own iBooks. The Mac Kindle app is a turdthat doesn’t look, feel, or behave like a real Mac app. The iPhone OS Kindle app is a native iPhone app, written in Cocoa Touch. The Mac Kindle app was produced using the cross-platform Qt toolkit.

This was followed shortly after by a Design Dare article titled Steam Is a Port — the title itself implying that Steam is a lesser app for no other reason than being a port.

Not so.

What They Got Wrong

To say that cross-platform tools are evil because one can produce bad programs with them is like saying that paint should be banned because it might fall into the hands of the tasteless. Or taggers. So too bad for Da Vinci and Picasso.

I’ve worked with wxWidgets and I’m currently working with Qt. Both libraries will let you use native controls. Like artfully used paint, both libraries will let you create native apps that will shine bright and soar.

What They Got Right

On the other hand, both Gruber and Design Dare are correct: Kindle for Mac and Steam for Mac are, indeed, ports. They were designed for one platform first, and only afterwards ported to the Mac. This rarely works, not because it’s technically impossible, but usually because the programmers are not deeply imbued with the Mac culture to get the finer details of the interface right. Often, this is compounded by bad messages from management, e.g. “who cares… we just need a Mac version to cover all bases, wrap it up ASAP”.

BTW, this is precisely why Cedrus (where I work) offers a free iPhoneto all employees. It’s also why we have an iPad in the office that each employee got to take home for a week. We are not currently developing for iPhone or iPad, but if or when the time comes, using and knowing iPhone OS will be second nature.

Epilogue

The converse is also true: one can develop awful apps that don’t feel native even on Mars, all while using the platform’s native tools. Just try to buy a song or an app on iTunes. What horror.

Qt cascading style sheets, introduced in version 4.3, lets you customize each control like you won’t believe — and shoot yourself in the foot like you won’t believe either, if you’re not careful. I’m guessing that perhaps that’s how Kindle for Mac got itself in Gruber’s crosshairs. One single setting in a widget that’s high up in the hierarchy of controls can cause a button to look non-native. The uninitiated developer can then find himself trying to “recreate” that original look and never quite getting it.

Filed under General

Tweetie’s Beautiful Scroll Bar

05.18.10 | Permalink | Comment?

I dislike non-standard controls.  We sometimes run into them because the application is cross-platform, and the developers are either too lazy to bother giving the controls a native UI, or their cross-platform tool prevents them from doing so.  That’s why I’ve never even downloaded an Adobe Air application.  Yuck.

Other times, the developer gets creative with the look of the controls, but in doing so, rarely adds enough value to make up for robbing users of their familiarity with the native look-and-feel.

One exception is the scroll bar in Tweetie, a Twitter client:

Tweetie's Scroll Bar

It is simple, with an ever so slight gradient.  But the best part about it is the utter lack of background.  If the information fits entirely in the window, the scroll bar disappears entirely.  Beautiful.

Filed under General

Contacting the White House

03.02.10 | Permalink | Comment?

I had an idea regarding health care reforms.  So I went to whitehouse.gov and clicked on the Contact Us link.  As I was typing away, I realized that the reCAPTCHA words that I had to type were… “the mobsters“!

You just can’t make this stuff up.

Filed under General

Colts vs. who?! Or Watching For Your Biases

02.09.10 | Permalink | Comment?
Gotta admit, I know nothing about football. Our family’s sports fanatic is Robert, my brother-in-law. As I arrived at his place, my first question was “who’s playing”. Yeah, that’s how knowledgeable I am. It turns out that sometimes ignorance is, indeed, bliss.
When the score became 24-17 in the Saints favor, I told Robert that the game was over.
Robert: “No way, all the Colts need is a touchdown”.
Me: “It doesn’t look like they will score a touchdown”.
Robert: “These are the Colts [italics], they will score a touchdown for sure [italics], there is plenty of time left”.
Me: “Hmmm, I don’t know, they don’t look like that they have the fire in the belly.”
And they didn’t score. I was able to see it precisely because of my ignorance, and hence my lack of bias.
I won’t go on and on about how bias can affect your judgement about your own designs and user interface, except to say this: be aware of it, we all have it and it can mislead.

Gotta admit, I don’t know anything about football. Our family’s sports fanatic is Robert, my brother-in-law. As I arrived at his place, my first question was “who’s playing”. Yeah, that’s how knowledgeable I am. It turns out that sometimes ignorance is, indeed, bliss.

When the score became 24-17 in the Saints favor, I told Robert that the game was over.

Robert: “No way, all the Colts need is a touchdown”.

Me: “It doesn’t look like they will score a touchdown”.

Robert: “These are the Colts, they will score a touchdown for sure, there is plenty of time left”.

Me: “Hmmm, I don’t know, they don’t like they have the fire in the belly.”

And they didn’t score. I was able to see the likely outcome precisely because of my ignorance, and hence my lack of bias.

I won’t go on and on about how bias can affect your judgement about your own designs and user interface, except to say this: be aware of it, we all have it and it can mislead.

Catch Me If You Can

01.28.10 | Permalink | Comment?

Daniel Jalkutmakes the best case yet as to why desktop applications are here to stay and why web applications, almost by definition, will always play catch up with desktop apps:

When something truly innovating and mind-blowing happens on the web, I can drop it into a WebView on my Mac and make it a part of my desktop experience. When something mind-blowing happens on the desktop, you can bet you’ll have people scurrying to painstakingly imitate it on the web.

…I imagine in 5 or 10 years the web will have caught up to something resembling how desktops behave today. But I can’t even begin to imagine what we’ll have at our fingertips on the desktop, by then. iPad?  We ain’t seen nothing yet.

Web apps have their place for sure, but desktop apps will always be the ones passing the baton to web apps. I knew this by intuition but I’m grateful to Daniel for articulating it as only he can. In the past, I have alluded to project Luceen, a new product that we’re just starting to work on. I have discussed this product with only two or three people outside the company, and the inevitable question was akin to “why are you doing it as a desktop app? don’t you see your competitors are going web-based?”

I will be giving them the link to Daniel’s post if they ask again.

(via Brent Simmons)

Color Oracle

01.18.10 | Permalink | 1 Comment

Bernhard Jenny in Switzerland wrote Color Oracle, a nifty and free utility for simulating color blindness that no self-respecting programmer, UX practitioner, or web site designer should be without. It runs on Mac, Windows, and Linux.

I downloaded and tried the Mac version. It works well. When you run it, a small icon installs itself on the menu bar. To see your screen the way that a color blind person would, click on the icon and select one of three types of color blindness. Here is an example of before (left) and after:

The simulation is not continuous: once you’re seeing your screen in the eyes of a color blind person (usually male), pressing any key will return you to normal mode. But Color Oracle lets you assign a keyboard shortcut to each color blindness type, making it easy to simulate quickly. It’s a great way to get a “reality check”, in the words of Nathaniel Kelso, who helped with ideas and testing.

My first brush with what one can do for color blind persons was a 2007 post by Greg Raiz. Greg described how Apple was using red and green circles (same shape) to illustrate which stores had iPhone availability, and how they later switched to using different shapes (snapshot used with permission):

redgreen.png

For a company that cares deeply about user experience, one would expect Apple to provide a similar utility to its developers, preferably with continuous simulation instead of snapshots. But until then, Color Oracle is a great addition to our toolbox.

Filed under User Experience
« Previous Entries