Apple's first iPhone was announced on January 9, 2007, and released later that year on June 29. The iPhone release brought with it a sea change that affected not just the phone's industry of relevance - technology - but the culture, society, and people interacting with this technology throughout a significant portion of the globe. 2017 marks 10 years since the release of the first iPhone and, while likely not to be as revolutionary as the first iPhone, Apple announced a dramatic departure from previous iterations of the iPhone, the iPhone X, on September 12 at the Steve Jobs Theater. In order to understand the design challenges created by the differences between the hardware and software of the previous iPhones and the iPhone X, let's travel back through time and review the evolution of the iPhone.
The iPhone: A History
The first several iPhones maintained a similar form-factor in shape and size, with the only significant hardware design difference being the switch from smooth beveled edges on the iPhones 1 - 3GS to the square, chamfered edges on the iPhone 4. The square form-factor was preferred by many because it allowed the holder to more firmly and solidly grasp the phone, reducing the chance of the phone being dropped or knocked out of a hand. It was during the time when the first few iPhone models were released that Android phone manufacturers began selling dramatically larger phones, then dubbed "Phablets." Apple soon faced sharp criticism from tech pundits and consumers alike for not offering larger phones to help resolve the issues with Antennagate, to which Steve Jobs replied "No one is going to buy that," because, "you can't get your hand around it."
Apple's position on large phones began to shift, however, with the release of the iPhone 5 in September 2012, the year following Steve Jobs' death. The iPhone production cycle typically takes 3 years from inception to product release, so Jobs would have participated in the early design and production of this larger iPhone before his death. The 5's size increased only in height, making it the largest iPhone to date, but still smaller than the largest available Android phones. This minor increase was further proof that Jobs' belief that getting your hand around the phone was critical to its ergonomics.
The demand for even larger iPhones continued after the iPhone 5 and was met by the release of the iPhone 6 and 6+, two entirely new phone form-factors, both even larger than the 5 and comparable in size to some of the largest Android phones in production. The two iPhone sizes were designed to give customers two sizes to choose from to suit their needs, but the 6+ featured top-of-the-line hardware, giving it a higher quality camera and longer battery life, among other improved features. This year, Apple is releasing a radically redesigned iPhone X - a significant departure from the hardware design of iPhones past.
The iPhone X
The iPhone X features a new, edge-to-edge screen. Because of this increased screen real estate, a series of dramatic changes to other hardware elements have been implemented. Where current iPhones have top and bottom bezels that house the cameras, speaker, sensors, and home button, the iPhone X ditches the home button altogether and condenses the top bezel into a notch (a hotly debated, controversial design decision) that includes the cameras, sensors, and speaker. Apple began preparing users for a home button-free iPhone with the 7's removal of an actual, physical button in favor of a pressure sensitive area of the screen that provides haptic feedback upon activation.
Bigger, but Smaller
The increased screen size of the iPhone X provides the most screen real estate of any iPhone to date. Despite the increase in screen size, the overall size of the phone has barely increased, clocking-in slightly taller and wider than the iPhone 8 but noticeably smaller in height and slightly narrower than the iPhone 8+. The iPhone X now has 145 points of increased height at the top of the phone. This area has long been used to house standard navigation patterns and controls that allow a user to move between features and sections within the apps being used. Between the device height increase and notch addition, and the removal of the physical home button, Apple's iOS design team has been forced to redesign iOS 11. They did this by rethinking interaction patterns established in the very first iPhone and version of iOS, in what I consider to be their first honest attempt at designing software that solves the usability problems created by the iPhone's large sizes.
Problems with Large Phones
I've consistently been an iPhone purchaser since the 3GS was released, upgrading to the new phone each year. My favorite iPhone by far was the iPhone 4/4S. It was easy to hold with one of my tiny hands, fit perfectly into my tiny lady pockets and was easy to remove and replace back into my pockets. When it was rumored that the iPhone 5 was to be larger, I was upset that the phone could be much more difficult for me to hold and use. While the 5 didn't fit quite as effortlessly in my pockets, the increase was not dramatic and I did end up liking the additional screen height. It may have been the perfect iPhone.
Form or Function, you can't have Both.
The iPhone 6 and 6+ were announced, and I was very disappointed by the increased size - so much so that I decided not to upgrade. The Universe had other plans, though, and my 5S died just a few weeks after the new phone was released. I was presented with a dilemma that some small-handed iPhone users may find themselves facing as well: purchase the smaller iPhone because it would be easier to hold, use and slide in and out of small pockets, or purchase the larger phone to have the most critical features - better camera and battery - but suffer the consequences of dealing with a large phone. I ended up choosing the largest model in favor of the better camera and battery life and have very much hated the size of the iPhone ever since, though the camera is amazing.
One-handed Use is Challenging
One-handed large phone use is a larger challenge than many expected, especially for those with small hands. There are a variety of constraints that can make large phone use difficult, but the most important constraint that challenges a person's ability to easily and comfortably use a large phone is one-handed operation.
The Three Zones of Reachability
The thumb is the primary digit of operation and interaction with the touch screen during one-handed use. With the home button anchored at the bottom of the phone, many people grasp their phones at the bottom, unlock the phone with their thumb and use the phone by maintaining the same grasp position, creating three zones of reachability:
- the bottom third of the screen - easily / comfortably reachable
- the middle third of the screen - a stretch to reach depending on your hand size, handedness and your grasp on the phone
- the top third of the phone - nearly impossible to comfortably reach during one-handed use.
One of Apple's attempts to address these constraints prior to iOS 11 was through the aptly-named Reachability feature, which allows a user to lightly double-tap the home button to shift the interface's position on the screen down 50%, hiding the bottom portion of the apps in order to move the top portion of the apps into the two comfortable zones of reachability. While I'm sure this feature is very helpful for some users, I don't usually remember that it exists until I accidentally activate Reachability while trying to perform another task.
The left image demonstrates the reachable zones of the iPhone 7+ for a person with similarly small hands compared to the right image of how iOS' Reachability feature moves the Impossible Zone content into the easy to reach area.
Design Recommendations for the iPhone X (and other Large iPhones, too)
The ultimate purpose of the work we do as digital designers and developers is to create products - apps, websites, hardware and everything in-between - that can be used as easily and effortlessly as possible. Our due diligence in research, thought and execution affords the best possible experience for everyone that uses the products we build. When considering how to design an app or website that can be easily used with one hand, the following recommendations can help you arrive at a successful solution.
Reachable is Usable
It is important to ensure that primary controls and action items are placed within areas of easy access, which, especially for large phones, is near the bottom of the device. iOS 11 deprioritizes the pattern that includes the nav bar at the top of the screen in favor of moving it to the bottom bar for maximum reachability.
Keep Controls Persistent / Floating
Consider using persistent / floating control areas in the thumb zone to facilitate maximum reachability, but be cognizant of the OS' Control Center activation pattern and bottom nav area when determining where to place these control elements.
Wunderlist has placed their list creation button in the center, floating just above the bottom of the screen. This is easily reachable for both left- and right-handed users.
iOS 11's first foray into optimization for one-handed use and handedness is the new QuickType keyboard one-handed mode that allows a user to select a keyboard mode that shifts the keys slightly to one side or the other.
While this is a good first step, it doesn't go far enough. I would like to see handedness optimizations further expanded and have wanted to see handedness become a system setting in the operating system itself since larger phones were first released. Allowing users to set their profile as left- or right-handed could afford designers and developers the ability to query this setting and deliver an entire experience with controls placed in areas that are optimized for easiest use by left- or right-handed users.
Lyft's current interface is featured in the left of the image and has placed the ride selection control in the left. I've mocked up a mirrored version of this interface that places that same control on the right side for right-handed users.
New Size, New Dimensions for Everything
The iPhone X's increased pixel density, 20% increase in screen height with new aspect ratio that impacts scaling and cropping, rounded display corners all present yet another set of dimensions and considerations to accommodate in comps and final output assets. The iPhone X's display will require @3x assets for crisp rendering, and it seems that iOS 11 begins to handle using vector PDFs for assets in a much nicer way than in previous OSes.
Be Cognizant of Edge Cases
With the new screens likely being edge-to-edge, the term edge case will take on an additional meaning. The screen edges will be more likely to be obscured by user's hand during use, so implementing appropriate margins should help ensure full visibility of the content. iOS 11 now includes a new property,
safeAreaLayoutGuide, deprecating the previous
bottomLayoutGuide, to allow developers to implement the recommended minimum margins in the app's layout. This is especially important for handling device orientation changes with the iPhone X's notch implementation.
Follow the Leader
Especially with the release of a new iOS version, it's important to study Apple's implementation of design patterns within their system apps, review Apple's Human Interface Guidelines (HIG) and watch their WWDC videos regarding the HIG to understand how Apple envisions an app's design following best practices for the software and hardware platforms they've created.
Favorite WWDC '17 Design Sessions
- What's new in iOS 11
- Essential Design Principles
- Design for Everyone
- Size Classes and Core Components
- Communication Between Designers and Engineers
Our Customer Experience and iOS Development teams have been enjoying using iOS 11 and cannot wait to get our hands on the iPhone X and dive into the exciting opportunity to design and develop apps for these new software and hardware platforms.