Fifteen years after the launch of the first iPhone and the company having passed the 45-year mark, there are still fascinating details about its creation. A story that has popped up on occasion is that of the creation of application icons. They have a specific size and it’s the same since the first iPhone: 57 pixels. Just like the perfect imperfection of the notch and all the Apple-designed corners, there’s a reason behind it.
In 2006 hardly anyone designed for touch screens, which is why Simple details such as the size of objects in interfaces were not controlled by the designers.Yes Today, even if you weren’t a designer, you would know the right size for a button, but back then you had to design everything by trial and error. In other words, try all possible options and choose the most suitable one for the best user experience, all options are all options.
The history of the creation of these icons appears in the book ‘Creative Selection’ by Ken Kocienda, a book that first breaks down some anecdotes about what it was like to work at Apple during those years. In Applesfera we analyze the book at the time.
In Cupertino, they had the first prototypes of the iPhone, a touch screen where they had put all the Material so you can call, connect to the Internet and listen to music. It was now a matter of making a Software to make it work for the user. The engineers began to realize that obviously on a small screen you can’t make very small untouchable butt ons or very big buttons
There was also an additional factor. Since the condition was to use the fingers and not a styleit should be taken into account that everyone has different fingerssome longer, some shorter, some wider, some thinner.
The game that discovered the efficiency of 57 pixels
One of the places on the iPhone where this dilemma was most highlighted was on the Springboard. The Springboard is the name given to the initial screen of the iPhone, the screen where all the application icons appear. have had make all applications accessible so that with a series of keys they could be accessed. The solution was found in a game.
Scott Herz, one of the engineers who was involved in the development of the first iPhone, quickly created a game. The game didn’t have much mystery, the squares just appeared on a blank screen and had to be pressed as soon as possible. Each square had a different size and appeared in different places on the screen. Whoever clicked the most boxes in the shortest time is the one with the highest score. They started distributing the game to the engineering team to play for a while.
To entertain themselves while they think about designing the iPhone? No, there was obviously a bigger goal behind the game: finding the optimal button size. The game analyzed which on-screen positions were the most successful and, most importantly, which size was clicked on the most. After a few days of play they obtained interesting results: if the square was 57 pixels in size, no matter where it was placed on the screen, it was practically squeezed with 100% accuracy
One of my favorite “features” of the original iPhone was those empty icon slots on the home screen. We could have filled them in, but we chose to leave them empty. We put the work into the apps we delivered, discarding the good ideas to focus on the good ideas. pic.twitter.com/q5hBMIOY3c
—Ken Kocienda (@kocienda) May 9, 2019
From there we know the rest of the story, the iPhone was created with its iconic (pun intended) home screen full of grid icons. It has been a symbol of the iPhone for over ten years, it has even been maintained in the iPad which is a much larger screen. And yes, the icons are still the same size of 57 pixels (x2 or x3 on higher resolution screens, but the same physical size).
Through | a16z
