The inside story of the iconic ‘rubber band’ effect that launched the iPhone

By

Bas Ording Apple interface designer
Former Apple designer Bas Ording created the rubber band effect, which convinced Steve Jobs to build the iPhone.
Photo: Jim Merithew/Cult of Mac

iPhone turns 10 One day in early 2005, interface designer Bas Ording was sitting in a secret, windowless lab at Apple HQ when the phone rang. It was Steve Jobs.

The first thing Jobs says is that the conversation is super-secret, and must not be repeated to anyone. Ording promises not to.

“He’s like, ‘Yeah, Bas, we’re going to do a phone,'” Ording told Cult of Mac, recalling that momentous call from long ago. “‘It’s not going to have any buttons and things on it, it’s just a screen. Can you build a demo that you can scroll through a list of names, so you could choose someone to call?’ That was the assignment I got, like pretty much directly from Steve.”

Ording is one of those little-known Apple employees who has had an outsize influence on our digital lives. He is responsible for a big chunk of today’s computing interfaces. He’s mentioned briefly in Walter Isaacson’s biography of Jobs, and described as a “wizard” and a “god” in another book, Becoming Steve Jobs.

But Ording should be better known. In the 15 years he worked at Apple, he was one of the leading designers of the iOS and Mac interfaces we use every day. He’s the brains behind the iPhone’s “rubber band” scrolling, OS X’s Dock magnification effect, Expose and many more. Yet practically nobody knows who Ording is because of Apple’s super-strict secrecy policies.

Ording holds hundreds of patents and was a key witness in the Apple-Samsung trials, but he has not given many interviews. In this exclusive extract from Unsung Apple Hero, a Cult of Mac ebook detailing his career at Apple, Ording tells how he created iOS’ rubber band effect — the iconic touchscreen animation that convinced Jobs to build the iPhone.

Apple’s early multitouch experiments

Original iPhone design team
Members of the original iPhone software design team: Freddy Anzures, Imran Chaudhri, Bas Ording, Marcel Van Os, Steve Lemay and Mike Matas.
Photo: Imran Chaudhri/Instagram

Several months before Jobs’ phone call, Ording and Imran Chaudhri — a colleague in Apple’s Human Interface Group, a team of software designers responsible for the user interfaces of Apple’s software — had been working with Apple’s Input Engineering group.

Headed up by Steve Hoteling, Input Engineering was responsible for computer inputs: keyboards, mice, trackpads and the like. They had been experimenting with a new multitouch input device acquired from FingerWorks, a startup Apple bought earlier that year.

Hoteling’s group was exploring new ways to interact with desktop and laptop computers, which had been dominated by the mouse and keyboard for 20 years. FingerWorks’ iGesture Pad was one of the first gesture-sensitive touchpads on the market. Instead of tracking just one finger, like most trackpads at the time, it tracked multiple fingers; hence ‘multitouch.’

Resembling a big black plastic touchpad, the iGesture Pad was sold to desktop computer users as an alternative to a mouse that might prevent or mitigate repetitive strain injuries. RSI sufferers could replace their mouse with a pad that tracked their fingers instead.

Fingerworks iGesture Pad
FingerWorks’ iGesture Pad, a multitouch input device for RSI sufferers.
Photo: Fingerworks

Working with Chaudhri and Duncan Kerr, a designer in Jony Ive’s industrial design studio, they covered the black iGesture Pad in a piece of paper, and projected a screen on it. The projector was hooked up to a computer, which projected the image of OS X onto the paper on top of the multitouch pad.

Ording used Adobe Director, a multimedia authoring tool, to make a demo to track his finger moving across the screen. It required a special extension to Director to import the multitouch data. The first demo was just moving a dot around the screen. Then they made a demo that tracked two fingers, allowing him to zoom into an image. He chose a map of Cupertino, California, centered on the Apple HQ at One Infinite Loop.

“I spent like an hour or something slicing, making screenshots of Google Maps, the satellite views, and like stitching it all together in Photoshop so we can get that data,” Ording said. “I made one large image with all those stitched-together screenshots and that’s what I used for the demo, so I could just pan around.”

Immediately, they felt they had something special.

“It felt like magic,” said Greg Christie, the former head of the Input Engineering Group and Ording’s boss. “It was magic paper.”

At that point, they realized there were a lot of possibilities. The interaction was very different from using a mouse.

The thinking behind the iOS rubber band effect

The project excited Jobs and other Apple executives, but the company couldn’t decide what to do with it. It could work with a tablet, or perhaps a touchscreen laptop. There was a protracted internal debate until one high-level meeting, when Apple executives decided to see if the technology could be used to build a phone.

After taking Jobs’ secret call, Ording set about making a list of names of people to call.

First, Ording isolated a corner of the tablet/projector demo, pretending the isolated area was a phone’s screen. He took a list of 200 names — all pulled from the address book of a colleague — and created a long, scrolling list in Director.

When he selected a name, it would slide over — almost exactly as it does in the current version of iOS — and a fake dialing screen would appear with a phone number. It didn’t do anything, but it demonstrated how making a phone call might work.

However, as he worked on his scrolling list, Ording noticed that when he got to the bottom or the top of the list it just stopped. He’d pull the list down but it would just sit there. It looked like it had crashed. Every time he saw it, it bugged him, but he didn’t know how to fix it.

He tried adding some space at the top. When he got to the top of the list, the small space would appear. But that didn’t solve the problem — it just repeated it.

The space just sat there, unmoving.

Ording figured the space would need to move with the user’s finger to show that it was still responsive. But that didn’t feel right, so Ording tried making it move more slowly than the user’s finger, just as an experiment. The effect was to make it feel elastic.

“I’m like, ‘Ooh this is kind of fun,’ and then, ‘Oh wait, now it needs to move back,’” Ording said.

When he made it snap back, it acted like a rubber band — it moved down, but then bounced back to its correct position.

The effect delighted Ording: It showed clearly that the end of the list had been reached, and that the device hadn’t crashed.

Bas Ording perfects the iPhone’s rubber band effect

Bas Ording created the iOS rubber band effect
Bas Ording created the rubber band effect that convinced Steve Jobs to build the iPhone.
Photo: Leander Kahney/Cult of Mac

It took Ording a couple of months’ work to get everything just right — the inertial scrolling, the rubber band effect and the name/phone number selection.

“I had to work on all these details, and it took actually quite a while to get it right,” Ording said. But the work proved worth it when he saw the final result.

“You could feel, ‘Oh yeah, this is going to work — you can scroll, you can select names, it feels good, it’s fun,'” Ording said. “And you can do other things with that too, and it felt good, yeah.”

With everything polished, it proved to be a pretty slick demo. It felt fun and functional — and like a true breakthrough moment.

Steve Jobs sees an iPhone breakthrough

When Jobs saw it, he immediately recognized that the effect would enable a multitouch, finger-driven interface.

Speaking at The Wall Street Journal’s D8 conference in 2010, Jobs explained it this way: “I had this idea about having a glass display, a multitouch display you could type on. I asked our people about it. And six months later they came back with this amazing display. And I gave it to one of our really brilliant UI guys. He then got inertial scrolling working and some other things, and I thought, ‘My God, we can build a phone with this’ and we put the tablet aside, and we went to work on the phone.”

In his testimony during the Apple-Samsung trial, former Apple VP Scott Forstall, who oversaw creation of the iPhone’s original software, likewise called Ording’s UI breakthrough crucial to the device’s development. When Apple execs saw the software in action, they knew the iPhone was going to work.

“We built a small scrolling list,” Forstall testified during the trial. “We wanted it to fit in the pocket, so we built a small corner of it as a list of contacts. And you would sit there and you’d scroll on this list of contacts, you could tap on the contact, it would slide over and show you the contact information, and you could tap on the phone number and it would say ‘calling.’ It wasn’t calling, but it would say it was calling. And it was just amazing. And we realized that a touchscreen that was sized, that could fit into your pocket, would work perfectly as one of these phones.”

This was the birth of the iPhone.

Sign up to get a free copy of Unsung Apple Hero, an eBook detailing Bas Ording’s career at Apple. We’ll email you a copy when the eBook is released in July. Unsung Apple Hero details Ording’s long career building key parts of the iPhone and Mac software. The book describes what it was like to work at Apple and to work closely with Steve Jobs, where he got his ideas from, and how he worked through problems like the rubber band effect. It takes a deep dive into his methodology with lessons for all designers. 

  • Karl

    “Sign up to get a free copy of Unsung Apple Hero, an eBook detailing Bas Ording’s career at Apple. We’ll email you a copy when the eBook is released in July. Unsung Apple Hero details Ording’s long career building key parts of the iPhone and Mac software. The book describes what it was like to work at Apple and to work closely with Steve Jobs, where he got his ideas from, and how he worked through problems like the rubber band effect. It takes a deep dive into his methodology with lessons for all designers.”

    Can’t see anywhere to sign up?