Hi HN,
I teach tech design history, and one of the key stories I cover is the development of the original iPhone keyboard by Ken Kocienda. Reading about it in his book “Creative Selection” is great, but I wanted my students (and now you!) to actually feel this step in the process.
So, I built a web simulator of the “Blob Keyboard”, Kocienda’s very first attempt at a touchscreen keyboard that actually works, from September 2005:
Try the Blob Keyboard: https://juliendorra.github.io/blob-keyboard-simulator/blob-k…
– Tap for the middle letter
– Swipe left or right for the side letters
More on the github repo: https://github.com/juliendorra/blob-keyboard-simulator
The Blob Keyboard prototype emerged during a UX crisis for iPhone team (their software keyboard just didn’t work at all, fingers being too big, and the Newton failure loomed over them), highlighting how innovation is rarely a straight path. It was developed on a tethered touchscreen display codenamed “Wallaby”.
To make this simulator as authentic as possible, I referenced images from Kocienda’s book and even got direct feedback and guidance from Ken Kocienda himself on Bluesky.
What to expect (or… what not to expect):
This is a reconstruction of a very early prototype with limitations reflecting that specific moment. The goal was to test first if typing with accuracy was even possible, as all the rest was moot if it failed!
It’s NOT QWERTY: They were still hoping to get us out of QWERTY, but then familiarity won.
No Backspace: You can’t delete.
No Cursor Movement: The text field is just a simple display.
No Caps or Numbers: Only lowercase letters.
No Smooth Animations: Keys just “pop” instantly when pressed. Kocienda noted that your eye fills in the gaps, giving a sense of movement.
Best Experience:
While it works with a mouse/trackpad on desktop, it’s designed for touchscreens to better replicate the original Wallaby hardware interaction. Use it on your phone!
This project aims to provide a tangible glimpse into a turning point moment in iPhone development and the iterative nature of design. It’s like stepping back in time and trying out that early demo on Kocienda’s desk.
I would love to hear your reactions and thoughts on experiencing this piece of UI history! What other significant prototype do you wish you could experience?
15 Comments
DerJacques
This is really cool! What a neat little exploration.
I didn’t know about the history of the iOS keyboard, and this was a great insight.
smitelli
The thing I found interesting in trying to type out a single test sentence is how many of the letters were reachable with just a tap. It wasn’t until I really studied the layout closely that I noticed that it wasn’t in true alphabetical order. Oddly intuitive, although I would probably despise using it long-term.
gfiorav
Spent maybe 3 min with it and got the hang of it. I thought no qwerty was going to be a deal breaker but I think I could get "fluent" with it in a day or two.
The worst parts are: no upper case and the fact that there's no connection between what you typed and the keyboard once you submit.
bryanlarsen
Does the book discuss capacitive vs resistive touchscreens?
At the time you basically had two choices for touchscreens: resistive or capacitive. Resistive was "obviously" the way to go because it was far more accurate. Choosing capacitive was inspired — when used with stubby fingers the accuracy problem was moot, and it allowed multi-touch.
Just before the iPhone came out I was fairly confident I knew what the future was. It was now possible to create a phone with the horsepower to run a real web browsers. 800×600 pixel screens were available which would display normal web pages nicely, and a resistive touch screen with a stylus would make them useful.
Then the iPhone came out. 320×480 screen meant normal web pages wouldn't display properly, inaccurate touchscreen meant tap targets needed to be increased massively. Why would anybody buy an iPhone which didn't allow you to install apps, and the web was unusable because it required rewriting every page since existing pages were unusable. Instead you could buy a phone which allowed you to install apps and which allowed you to usably access the web. Obviously the iPhone would be a failure. :)
endofreach
Wow, i always think "i wish there was a demo" of each iterative step on these kind of design journeys. And especially the iOS keyboard, as i thought a lot about it. Awesome that you made this.
I really like their idea to make the touch keyboard work well by increasing the (invisible) "padding" area for the key most likely to be typed next. So obvious in hindsight but demos like your's show part of the journey.
There are rumors that in the beginning they tried the ipod wheel as the user input interface.
While working on my device, that idea is super motivating. I know where i am headed and have done a lot of work and really got something very, very interesting already. But a few parts are yet not clear at all. But, i am definitely further than our "clickwheel" stage. Not yet at the "secret padding" stage for some input ideas, but still.
In case you are free and interested to loosely talk about ideas or feedback you have for a very novel device (and interface), please let me know how to reach out. Just because you made this demo, i feel we'd get a long & i can learn a lot from you. And this might be a very interesting challenge for someone like you. Anyway, great work!
ano-ther
Cool. And nicely implemented.
Having texted with T9 this didn’t feel too alien. Just the accept button slowing me down.
dvdkon
Thanks for making this! I hadn't even heard of this keyboard layout prototype until now.
I have a few friends that use gesture-based keyboards similar to this, and I myself use gestures to type diacritics and punctuation. So this idea is still alive after almost two decades, just not mainstream.
werecat
Neat prototype. While the key layout is unfamiliar, I could definitely get used to this. The layout reminds me of old cell phone typing, where each number had a set of letters associated with it and you had to press multiple times to get the letter you wanted. I wonder if testers at the time got confused trying to type like that.
collingreen
This is cool! Thanks for building it and sharing it. I think phone keyboards are simultaneously amazing that they work at all and also still need huge improvements. There was a moment in the early mobile app explosion where we had some cool experimental keyboards but they mostly fizzled out, were acquired and shut down, or didn't reach their potential (looking at you, keymunk). I still think about this space all the time but, like password managers, it requires such a vast amount of trust I think it's a hard business to get into.
Was hoping the LLM boom would help us get sane autocorrect to help bridge the gap but so far that hasn't happened either.
michaelhoney
This is excellent and I appreciate your work. I love seeing prototype interface, and this one has real promise. I immediately found myself thinking about alternative layouts, particularly adaptive ones with common letter-pairs appearing radially.
kace91
Isn’t this basically just t9 from the physical keyboard era? I was very used to it as a teenager.
vik0
This is great! Thank you for sharing!
mutant
You can spell “this is the shit” without needing angled letters
spiffytech
Reminds me of Thumb-Key: https://github.com/dessalines/thumb-key
I'd be interested to try a full-featured Android keyboard like this.
bramhaag
Unexpected Keyboard [1] has a similar concept: you can tap keys to enter letters or swipe to the corners to input special characters. It also has all of the usual modifier keys so it's really nice to use together with Temux.
[1] https://github.com/Julow/Unexpected-Keyboard