Steve Jobs introduced the iPhone at MacWorld on January 9, 2007, to a crowd of people dazzled by its multi-touch abilities. Later that year, on June 29, it was available for the public to purchase. At the time, no one could predict the scale of impact the iPhone would have on our relationship with technology. This mobile device shifted consumer’s expectations about user interface (UI) design in ways previously unimaginable. Let’s take a look at a few of the ways the iPhone’s revolutionary user interface has influenced UI design since 2007.
Simplify, Simplify, Simplify
When it was released, the iPhone’s simplicity shocked people: how could you navigate a device with only one button, and no stylus, trackball, or keyboard? However, Steve Jobs was determined to make it as easy as possible for users. He was known to review each screen, and if he couldn’t complete an interaction in three intuitive clicks or fewer, he would tell his team to go back to the drawing board.
The iPhone was not the first touchscreen phone — that would be the IBM Simon released in 1992 — but it was the first touchscreen phone that capitalized on years of UI research to make it more intuitive than anything else on the market. Now, 14 years later, people have grown to expect that their devices will be easy to use right out of the box, and other companies like Samsung have mimicked features of the iPhone to simplify their devices for users.
With one large screen, UI design suddenly played a larger role than ever before. The iPhone debuted with no physical buttons (except for the Home button), so every touchscreen “button” had to be designed to be intuitive. When Jobs introduced the iPhone at MacWorld in 2007, he pointed out that current phones on the market have keyboards “that are there whether you need them or not, and [have] these control buttons that are fixed in plastic and are the same for every application.” By introducing the ability to change and optimize the user interface and buttons for each application, the iPhone untethered applications from the fixed keyboard and changed UI design forever.
Skeuomorphic Design & Flat Design
Throughout its life, the iPhone has had an immeasurable impact on both skeuomorphic and flat design. As mentioned in our blog post about product design changes in the last decade, skeuomorphic design mimics concrete objects’ appearances and interactions while flat design abandons rules and properties of the physical world to create something innately digital.
When the iPhone was first released, its UI design followed skeuomorphism, meaning that applications resembled physical objects. For instance, the calculator app looked like a 1977 Braun ET44 calculator, and the notes app mimicked a notepad. The real-world cues built into the UI design were intentional, as they helped people transition from an analog to a digital society. Apple made people more comfortable with using technology, then pushed the boundaries because they knew people understood how to use it.
In 2013, Apple released iOS 7, which abandoned skeuomorphism and cemented the flat design trend. In this update, the iPhone’s UI design no longer had reflective surfaces, bevels, or drop shadows. Text or icons replaced many push buttons because people no longer needed the visual cue to understand that they should put their finger on it. iOS 7 was minimalistic, leaving textures behind and using white space to its advantage. There were now blur-transparency layers that slid over content, which had never been done before and were not skeuomorphic whatsoever! The iPhone influenced UI design by creating a new, natively digital style that reflected how people now lived comfortably in a digital world.
Application shortcuts now used fewer colors, shapes, and details. For example, the former Safari icon resembling a glossy compass was replaced by a flat compass. These updates influenced app designers to simplify their UI and visual language, as their glossy icons no longer looked aesthetically pleasing next to Apple’s flat, futuristic iOS 7 icons. The iPhone’s shift to a clean, soft, and flat UI design shaped users’ expectations for all devices.
The iPhone’s App Store launched on July 10, 2008, about a year after the original iPhone became available to consumers. Like the iPhone itself, few people realized how significant it would become.
The App Store launched (and changed) career paths for thousands of digital product designers, developers, and even marketers. Thousands of jobs were created as people began to realize the potential in developing apps for users to purchase and download. The iPhone’s multi-touch screen and disappearing keyboard gave developers the power to design apps with innovative and unique interaction patterns that over time also migrated to website development. The App Store also led to a new standard in the world of branding. App icons became a secondary logo mark for brands, often almost as recognizable as some companies’ actual logos — an icon made a company distinguishable in just a small set of pixels.
Moreover, the iPhone pulled more people toward consuming content on custom apps (both web wrappers and native) rather than web browsers. For instance, when the iPhone launched in 2007 Facebook was solely web-based, but today 98% of users browse it on a mobile device. The shift to consuming content on apps led to a huge societal change in how people accessed information. For the first time, consumers weren’t tethered to a single place — they could get information on the train, in their car, at the park, or literally anywhere! Industrywide, there was a shift in focus on responsive and adaptive web design that allowed for web and mobile browsing. Mobile apps and websites could now utilize (or purposefully not use) scrolling, swiping, tapping, long-press functionality, and more.
In 2007, no one could have imagined the impact the iPhone would have on user interface design (except possibly Steve Jobs himself). It changed the way we all see, think about, and interact with technology. Ultimately, the iPhone wasn’t just a cool gadget that made phone calls and sent text messages — it was a catalyst that set the precedent for technology as we know it.