All 5 books, Edward Tufte paperback $180
All 5 clothbound books, autographed by ET $280
Visual Display of Quantitative Information
Envisioning Information
Visual Explanations
Beautiful Evidence
Seeing With Fresh Eyes
catalog + shopping cart
Edward Tufte e-books
Immediate download to any computer:
Visual and Statistical Thinking $5
The Cognitive Style of Powerpoint $5
Seeing Around + Feynman Diagrams $5
Data Analysis for Politics and Policy $9
catalog + shopping cart
New ET Book
Seeing with Fresh Eyes:
Meaning, Space, Data, Truth
catalog + shopping cart
Analyzing/Presenting Data/Information
All 5 books + 4-hour ET online video course, keyed to the 5 books.
iPhone interface design

The iPhone platform elegantly solves the design problem of small screens by greatly
intensifying the information resolution of each displayed page. Small screens, as on
traditional cell phones, show very little information per screen, which in turn leads
to deep hierarchies of stacked-up thin information--too often leaving users with
"Where am I?" puzzles. Better to have users looking over material adjacent in space
rather than stacked in time.

To do so requires increasing the information resolution of the screen by the hardware
(higher resolution screens) and by screen design (eliminating screen-hogging
computer administrative debris, and distributing information adjacent in space).

This video shows some of the resolution-enhancing methods of the iPhone, along
with a few places for improvements in resolution.

The video is essential to the essay below.
Made in January 2008, using the original iPhone.

This video is also available on YouTube and Vimeo

In 1994-1995 I designed (while consulting for IBM) screen mock-ups for navigating
through the National Gallery via information kiosks. (The National Gallery had the
good sense not to adopt the proposal.) For several years these screen designs were
handouts in the one-day course in my discussion of interface design, and were then
published in my book Visual Explanations (1997).

The design ideas here include high-resolution touch-screens; minimizing computer
admin debris; spatial distribution of information rather than temporal stacking;
complete integration of text, images, and live video; a flat non-hierarchical
interface; and replacing spacious icons with tight words. The metaphor for the
interface is the information. Thus the iPhone got it mostly right.

Here are pages 146-150 from Visual Explanations (1997):





-- Edward Tufte


Response to Interface design and the iPhone

Now that higher-density displays are becoming available, both in computer monitors and in handheld devices like the iPhone, the big question becomes what to do with the extra pixels?

Tufte seems to propose to add more detail to increase value to the user. Apple seems to use more pixels for more readable fonts and higher-resolution icons. I think it is a matter of preference and we should leave the choice to the user.

A idea for better user interfaces from Jef Raskin comes to my mind again: a zooming interface. Safari on the iPhone already lets the user zoom in and zoom out to the for the user relevant information. Raskin's ZoomWorld makes this concept more universally available for all data in a computer/handheld device.

In my Palm that has a similar screen (resolution and density) as the iPhone, I have longed for a zooming interface. Wish Raskin was still around to drive and promote the development of this concept.

-- Marcel van Oosterwijk (email)


Response to Interface design and the iPhone

It is curious that the there are no linkages between the weather and the local time. If the Weather Application gives me the current temperature, I would quite like to know what time it is, or when the data point was measured. At present it simply shows a sun or a moon.

-- Tchad (email)


Response to Interface design and the iPhone

ET, your reflections on the iPhone could not be more timely for me personally: my team has been wrestling to articulate to ourselves what about the iPhone challenges us to break out of standard mobile-device GUI canons as we work on the product we're creating, and it's precisely what you call out: the felt naturalness of interfaces that convey information and options for action adjacent in space rather than stacked in time.

What do you see as the primary pitfalls of the enthusiasm so many of us are feeling now at the promise of being able to develop mobile applications that slide into the user's attention what's relevant when it's relevant rather than the user's having to drill for that information?

-- mumbles (email)


Response to Interface design and the iPhone

Love the networks your particular iPhone is able to "connect" to.

I'm particularly impressed you are the first one to use "channel 51, et. al" to connect with such high quality!

ET iPhone

-- Jeffrey Rutzky (email)


Response to Interface design and the iPhone

The interface design of the iPhone is great. Your video says the weather display is a good page to show off your iPhone.

To explain the negatives of my switch from a Palm to an iPhone, I tell people that the iPhone can show videos, but it doesn't have a to-do list. The Palm 650 now looks to me like a little computer with a phone added on. The iPhone looks like a communications and entertainment device, with weak or non-existent productivity tools. I miss my spreadsheet, database, math programs, etc. However, I am happy to have made the switch, since the simpler set of programs makes for a more reliable system.

How would you design a to-do list for a iPhone? What could have been the thinking that led to not synchronizing with the to-do list in iCalc? Are to-do lists too mundane for the cool design?

Personally, I now use a workaround of untimed events for a small number of todos. There is an advantage to this method which is that it keeps me from putting too many items on the list since it is such an awkward system, in particular a long list of untimed events covers up way too much of the screen of a daily calendar.

-- Phil Straus (email)


More iPhone sparklines

Thanks to the Safari browser on the iPhone, those who miss sparklines may take comfort in visiting https://www.bissantz.com/sparklines/deltalife.asp.

-- Nicolas Bissantz (email)


Taking the weather app one step further

I love the notion of adding clarity by adding detail. Looking specifically at E.T.'s rendition of the weather app, I thought it could be taken one step further. The superfluous graphics have been removed and clarifying detail has been added, but I think some more care could be taken to make the interface a little more pleasing.

Here's my crack at it. Would be interested in hearing other's thoughts.

iphone weather interface

-- Matt Donovan (email)


No wonder cellphone interfaces have been inept

Interface design mumbo-jumbo ("neural networks," "need states") from this panel on human behavior and technology.

-- ET


Admin debris follow-up

Ryan Tomayko helpfully extends the discussion of screen-hogging computer administrative debris here.

Unlike chartjunk and PPhluff, at least admin debris sometimes does something by showing commands, giving instructions, surfacing tool palettes. But too often admin debris is just bad design, show-off features, and bloatware design. This was the case even back in the early days of screen design. Screens in DOS could show 24 lines of alphanumeric information; often 12 lines were devoted to admin debris and 12 lines to the viewer's data. This unfortunate tradition carried over to the GUI Windows world. Finally, after DOS and GUI, the iPhone platform demonstrates that there can be lots of functionally without deeply hierarchical screen-trivia and without admin debris. It took a long time to get the point.

-- Edward Tufte


Response to critics

iPhone interfaces

For the iPhone video, we hacked into the network ID field on our iPhone and put in the names of fast networks that are nonexistent or not available in the slow-network United States. Thus "ET 3G," "WiMax," "700 MHz," and "DoCoMo" as shown above .

This idea of this prank was (1) to make a little joke about the very slow AT&T Edge network in comparison to fast networks, (2) to indicate that our iPhone redesigns are for fast networks, and (3) to see if our viewers of the iPhone video figured out (1) and (2). All this turned out to be pretty much an insider joke. (In 200 people at Google who watched the video, about 5% raised their hand when I asked if they noticed anything special about the iPhone network shown in the video. This reminded me of the amazing video of the moving basketballs and the gorilla.)

Our comment thread on the iPhone video thread received a a number of earnest, detailed critiques. Some of these comments were based on the false premise that the iPhone was forever stuck on a standard US telco slow network -- and on the unfortunate premise that iPhone users are as dumb as the Edge network. (None of the critics looked carefully enough at the video to spot the hacked network markings and none got the point about designing for high-speed networks.)

Several of the critiques began with a user model that described users as superficial, impatient, and inefficient managers of information. What users are impatient about is low-content throughput and space-hogging admin debris, commercials, and lousy interface design. Several critiques relied on a concealed version of the irrelevant Magical Number +/-7 notion.

Well, I don't do Lowest Common Denominator Design.

Lowest Common Denominator Design is a sure road to dumbed-down, content-deprived, interfaces that feature themselves. LCDD is based, at its heart, on contempt for users and for content.

Instead, assume that users are smarter about the content at hand than interface designers. Such is often empirically the case; thus the best that design usually can do is to get out of the way and at least do no harm. More can be expected only at the very highest level, such as Apple.

-- Edward Tufte


Cellphone design in Japan: inaccessible great features

iPhone vs more complex phones in Japan, via Wired:

"In Japan, Cellphones Have Become Too Complex to Use"

Aoki, who carries two phones, a Sony W44S and an iPhone for accessing the web, has only a vague idea of all the things the Sony cellphone is capable of doing. "Every once in a while, you find an incredible function via the complicated menu," he says.

The manufacturers, who realize the absurdity of piling on features that don't work well, are caught in a vicious cycle of materialistic consumers who always want the newest high-tech handsets, and carriers that have complete control over what products and services are provided to their customers.

-- Edward Tufte


Dashboards on the iPhone

The iPhone with his high resolution screen seems to be the a nice device for delivering interactive sparkline dashboards.

-- Andreas Lipphardt (email)


New York Times story

John Markoff visits the iPhone and this thread in the New York Times:

"On a Small Screen, Just the Salient Stuff"

When Steven P. Jobs introduced the Apple iPhone 18 months ago, he contended that viewing the Web on it was comparable to browsing on a desktop personal computer.

As it turns out, Mr. Jobs may well have understated the quality of the iPhone Web experience. Visiting Web sites that have been redesigned for the iPhone is often a quicker and more pleasing experience than it is on those increasingly cinema-style desktop displays, which routinely have 20-inch or larger screens.

It seems counterintuitive, but small really is beautiful.

The experience is not limited to special-purpose applications -- say, to public transit sites like Nextbus, which are ideally suited for viewing on a smartphone. Evening commuters impatiently waiting for their rides home obviously are not going to race back to the office to check the schedule on their PCs -- but they can find it easily on their hand-held devices.

A quick trip to Web sites like Facebook, Twitter, Zillow or Powerset, all of which have been redesigned to take advantage of the iPhone, makes it clear that bigger is not necessarily better when it comes to exploring cyberspace. By stripping down the Web site interface to the most basic functions, site designers can focus the user's attention and offer relevant information without distractions. (continue reading)

-- Edward Tufte


iPhone as a platform

Brad Stone in the New York Times here, on the dramatically higher media habits of iPhone users vs other smartphone users:

Mark Donovan, an analyst at M:Metrics, says a major factor in the iPhone's success as a media platform can be credited to AT&T and its unlimited data plan for iPhone users. "Once you take away the uncertainty of data charging, you really incentivize people to use the device," he said.

But then he gushes about the iPhone, sounding a lot like another dyed-in-the-wool iPhone convert (which, he concedes, he is.) "Apple really made a device that is Internet-centric and really fits the kind of digital lifestyle that a lot of people who are jacked into the Internet all the time are used to," he said. "They did a great job of crushing some of the sweet spots of mobile Internet usage."

-- Edward Tufte


Regarding the iPhone mobile "gesture" interface there is already a desktop equivalent called the "surface computing" interface.

I believe several of these surface computing machines are already in hotel lobbies like the Rio in Las Vegas.

The desktop version of the "gesture" interface or "surface computing" interface can do a lot more than the mobile version because it incorporates blue tooth technology so you can set a blue tooth device down on the surface and the computer will begin to communicate with it to perform tasks such as synchronizing files, playing music, launching corresponding content etc.

I tend to agree with you that these gesture / touch screen interfaces are the wave of the future but at the present time, a surface computer costs about $15,000. When the prices come down on these fancy touch screen machines to what ordinary people can reasonably afford, then I think you will see software applications begin to move toward this type of U.I.

-- Alex Lancaster (email)


I am a bit perplexed by the Microsoft Surface. It's a stark contrast to the iPhone, which was designed from the start using the mantra that form follows function. Almost everything that Apple displays on the iPhone is functional, as evidenced by ET's video above and Apple's demonstrations.

The Surface demos, meanwhile, depict a technology seemingly in search of a purpose. The intro video features primitive drawing and moving blocks and pictures around--all things that humans are capable of doing at a very early age. I was waiting for something in that video to grab my attention and demonstrate the value of the technology. Instead, they showed stock people experiencing nothing but vapid pleasure.

When they scaled up the iPhone to a $15,000 device, I'd think that they could at least have come up with a demonstration that shows it being at least as useful as an iPhone, rather than show off the MS Paint of the future. (The fact that people even use the MS Paint of today is beyond me; I've seen students draw sketches that purport to be engineering diagrams in Paint. Maybe the Paint User's Group is their target market?)

Lastly, a surface computer doesn't have to be $15,000. A device that's, say, 4 times the size of the iPhone could be at least as capable as a desktop computer, yet would certainly be possible at affordable price point. It's almost as if Microsoft priced the Surface outside of reach so that nobody will buy it, lest they realize that it's just a $15,000 coffee table. The fact that it's most visible appearances are in hotel lobbies makes me think that it's something out of Las Vegas: glitzy but useless.

-- Michael Belisle (email)


I very much enjoyed Prof. Tufte's read of the iPhone interface and would be interested in reading his take on Google's Chrome browser which was just released today.

It seems like Apple, Google, Mozilla (their new launch of Firefox 3) are all scrambling to increase the ease of use of their products. I think one of the drawbacks with the focus on how an app is used is the that the products seem to create a preference for operation versus displaying the richness of the content inside the applications.

Mozilla's new Firefox (v3) has a great feature they call full zoom - which allows you to effortlessly increase an entire web page without corrupting presentation style. Google's Chrome allows you to create application shortcuts that will then open the app outside of a browser... which is pretty cheeky of Google to have an application called Chrome that shows, potentially, no chrome.

If all the common browsers shared these and similar features then the applications could focus more on the painting and less on the frame.

-- Cody Dennison (email)


One of the biggest issues I have with the design of the iPhone is the lack of a hardware toggle-switch, perhaps on the left side of the device that would allow me to scroll without using my thumb. The reason is this -- I can read and process a page of information faster than I can remove my thumb from the screen. For applications like the Weather or the Stock app, this is not an issue. But with the NY Times app, or any application that contains several sceens of text I find myself annoyed, constantly trying to "read through my thumb". The screen resolution can push the limits of technology, but it can't let me read text through skin and bone. I've never read anything about this phenomenon, although I have mentioned it to several friends who have damned me because it now bugs them also.

The iPhone is a revolutionary interface, but we've got to find a way to get our thumb out of the way.

-- Keith P. Luke (email)


Avoiding an interface for an interface

The iPhone platform provides a rich quick smart interface that explains itself. Thus the paper manual accompanying the device beomes a pleasant joke, a few pages.

Similarly, a flat interface eliminates the false friends of help screens, the conventional repackaging and fixing up of lamely designed product in the users manual. For the same feature set, the bigger the manual, the more poorly designed is the interface. Good, usable features should explain themselves.

-- Edward Tufte


Sparklines are shown here as a generalized display mechanism which works on any Smartphone, Blackberry or iPhone 2G/3G. More details at http://www.transpara.com.


-- Michael Saucier (email)


Do you think it would make more sense if the iPhone interface were upside-down?

In my opinion it is difficult, when using the iPhone one-handed to reach the button when it is at the bottom. I think it would be much easier to reach if it were at the top.

Similarly, would it not make better sense for the menu icons that appear at the bottom of the screen to appear at the bottom of the screen?

-- Antoin O Lachtnain (email)


Admin and marketing debris: MapQuest vs. Google maps

Excellent essay by John McKinley, comparing interfaces of MapQuest and Google Maps.

Mapquest

Mapquest in 2009

Google Maps

Google Maps in 2009

At some point along the journey, Mapquest has lost its way, in terms of the primary mission it is meant to serve. It is all about simple, informative directions.

The current experience is, as a friend of mine says, a dog's breakfast. I am not sure what my eye is supposed to be drawn to. It sure the heck isn't the actual directions - they barely begin above the fold. This looks like a misapplied implementation of a tactical focus on short-term revenue (e.g., note the big slug of non-relevant sponsored links for Florida and Cancun smack dab in the middle of the page).

Now, look at the Google Maps display - it is all about consumer payoff. I see the turn-by-turn directions and the map rendered above the fold, and the first sponsored link is on the left rail after the directions.

Google Maps is about, of all things, maps.

-- Edward Tufte


Bruce Tognazzini, the founder of Apple's Human Interface Design group, has some suggestions for improving the design of iPhone's Springboard.

-- Niels Olson (email)


Droid resolution

Droid's 3.7 inch screen resolution is 854 by 480, for a pixel density of 267 ppi, which is super.

See the Gizmodo review for details.

Maybe Andrei and I will make another video, this one on Droid resolution.

-- Edward Tufte


stock market page

I was surprised you did not go into some of the more interesting (and hidden) features in the iPhone Stocks app.

First, the relatively obvious features. On the main screen, the stock-symbol list is scrollable. Tapping one of the red or green pills will change the data displayed: market cap, stock price increase, percentage increase. The panel below the list is swipe-able, revealing a scrollable news list, company stats, and the stock chart.

Second, the more interesting, non-obvious features. Rotating the phone to landscape reveals a full-screen chart. You can swipe the top to change companies, or choose a different time scale. You can also run your finger along the line and receive detailed stock-price information on varying scales (hours, minutes, days). Running two fingers along the line will display the price and percentage difference between two points on the chart..

This last feature—direct interaction with data—provides a specificity and precision which a sparkline can only gesture to. Of course, the design constraints of a touch interface (namely, the size of our fingers) dictate the size and information density of the directly-manipulatable elements on the screen. This would suggest a middle ground that can be partly defined as a relationship between passive and active consumption of data: sparklines for high-level overviews and context, with an ability to "zoom in" for in-depth exploration of data. In effect, a zoomable, interactive sparkline.

-- Dave Chiu (email)


reply: stock market page

Didn't go into the features you mention because they didn't exist when Andrei and I made the iPhone video 25 months ago.

It would pleasing if the video prompted these new features, which happily showed up in the 3G release.

-- ET


Now that we've had the iPhone around for several years, and the iPad has followed, last year Apple previewed Mac OS X Lion at their "Back To The Mac" event with the theme being what Apple learned from the iPad to bring over to the Mac (even though the iPad came after the iPhone, Steve Jobs said in an interview last year that the iPad was in R&D first before the iPhone).

In Mac OS X Lion one of the highlighted built-in features (with API support?) is "Full Screen Apps". Apple particularly highlights how Full Screen Apps are well suited for smaller displays. With the iPhone and iPad getting the lion's share of attention these days, it seems Full Screen Apps combined with an assortment of track pad gestures could go a long way toward bringing us into an information rich world that further eliminates computer administrative debris and is much better suited for spatial adjacency. Case in point, its incredible how small and portable (yet powerful) the 11.7" MacBook Air is. For people who like to create and develop, the MacBook is still difficult to beat (you can drop into a terminal shell and write Unix shell scripts if desired, which isn't possible on the iPad or iPhone). Has anyone given more thought or have any hands-on experience with marquee Apple Lion apps that take are Full Screen Apps particularly on MacBooks with small displays?

-- Eddie Visc (email)


In response to Eddie Visc's question, I am using the new Lion interface with Aperture and Safari fairly frequently. As a point of reference, I am working on a 15" notebook screen which isn't quite as limited as the new Air's display, but has still seemed limiting when working with pro apps (interestingly enough, developers of pro apps seem to use far more administration space than consumer app developers).

The full screen feature has been around for Aperture for a very long time, but the asthetics have noticeably changed in the new OS. Most notably, enabling full-screen mode causes an animation that shows the active window moving to the left or right of the desktop, illustrating that the full-screen-application is now a separate workspace. Aside from moving the Aperture window out of the frame, it leaves the window organization of the previous workspace intact. This intelligent use of workspaces is perhaps one of the best changes in the lion interface overall, because it uses a very easy to understand spacial metaphor that even attaches to the gestures you use to move between spaces. To switch between various work enviroments, you may use a multi-fingered swipe on the trackpad to grab the workspace and move to the left or the right. Animations like the one I mentioned mean that is extremely easy to remember and keep track of where you are in relationship to other windows, even without seeing them. Far better than minimizing. In addition to literal computer administration space, there seems to be another important aspect of interface design which is mental focus required for computer administration, and the new interface with spaces certainly requires less thought than the previous implementation of spaces.

Another point of contention with the new OS has been switching the scroll behavior when using a trackpad to 'invert' it, which I actually have found very intuitive. By 'inverting' the scrolling direction, the trackpad becomes a metaphorical touch-interaction space for the document you are working with. After you get used to thinking backwards, it begins to feel like you are pushing the page and it is responding to your touch, instead of feeling like you are giving the computer a command to move the page. Again, the physical metaphor of computing that started in the iOS interface has served the user well here.

Back to full-screen operation, in Safari, I have found that the primary downfall of full-screen viewing is that content creators on the web are still assuming that their canvas is relegated to a small area of an otherwise debris covered screen. In general, going full-screen simply gives you more empty space, or increases margins on a page and ends up wasting space. Strangely, the optimized interface for reading articles that Safari provides still appears with a thick border around all sides when switching to fullscreen view, which may be a valuable reminder that you are viewing a subset of a webpage but increases the user's focus on the interface, not the content.

-- Andrew Howe (email)




Threads relevant to interface design:


Privacy Policy