and thirdly

Optimal iPhone UI

I was asked via email:

It’s my job to research user interfaces and what makes a successful UI. My two conclusions I’ve come to so far are that UIs need to be invisible and familiar.

I was hoping you may have something to add, from your perspective, about what makes an optimal UI.

The “invisible” bit gets most of the way there for my taste.

As a user, I hate buttons and toolbars and sliders and panels and drawers and splash screens and instructional screens and settings screens. In short, I hate UI. I want to notice it as little as possible.

As a developer, I hate having to stop my work because I have to arrange a transaction with someone else (like a designer) to get something done. To minimize external-person dependencies, and because my graphical design skills are abysmal, I avoid needing icons, backgrounds, textures, or logos. The original Instapaper web layout only had one image.¹ Since then, I’ve made extensive use of CSS for styling and Unicode characters for icons to minimize the need for images. Designing “invisible”, minimal UIs isn’t just a preference for me — it’s simply more practical.

But I look at Apple’s iPhone apps, and I don’t feel like my method is lazy or sub-par: all of their apps are the same way. They’re content-focused, with minimal UI. Think about it: what’s the UI to the Photos app? Messages? There’s almost nothing there. Even Safari is just two toolbars and a bookmarks list.

My design goal for Instapaper is for it to look and work like a hybrid of Safari and Mail. It’s not exciting and it won’t win much “design”² recognition, but it’s how I believe most non-widget iPhone apps should be designed: just barely enough UI to get the job done, with the vast majority of the screen devoted to the content.

What’s particularly interesting about the iPad is that its screen is actually too large for this to apply as universally as it does on the iPhone. This is one of the reasons why Instapaper’s iPad edition can’t just be a recompile of the iPhone version: everything’s out of proportion and it just looks strange. It’s like maximizing a browser window on a 30” monitor. And, as I said last week, I suspect most initial versions of iPad apps will have this issue because their developers either didn’t have the time to do more complete redesigns or because they underestimated how different their iPad versions should be.

It was the “Read Later” bookmarklet. Jacob corrected its jagged edges for me, unsolicited via email, before I even knew him. In the new layout, these are pure CSS, but I’ve added a few small icons where it made sense to do so. ↩

On the internet, “design” usually means heavy use of rich graphics and textures. This isn’t how I think about it. ↩