In a previous post, I discussed design considerations to make “pinch to zoom” work well. This is very important when you want to show your PC website to smartphone users. I concluded that it is vitally important to keep the length of each row short, and that 50 letters per row is optimal.
In this post, I would like to investigate whether or not a larger screen like that on recent Android devices would help. Specifically, I would like to discuss whether the Galaxy Nexus with a 4.7 inch screen (W 2.28 x H 4.05 inches) provides a better viewing experience compared to the iPhone 5 with a 4.0 inch screen (W 1.96 x H 3.49 inches).
As described in more detail below, my conclusion is that due to software optimizations in mobile Safari, iPhone 5 (and to a lesser extent iPhone 4/4s) provide a better experience than the Galaxy Nexus. This is despite the Galaxy Nexus having a significantly larger display.
A similar conclusion was reached by Ben Bajarin of Tech.pinions in his blog post.
Safari auto-resizes text to make important stuff legible
In a “pinch to zoom” interface, it is vitally important that the user can recognize what part of the screen they should zoom into. This means that important headers and links should be large enough to be legible, even without zooming-in. We want to see if this is the case
In the following image, I have compared the nikkei.com front page on the iPhone 5 and Galaxy Nexus. The images are drawn to the same scale so that you can directly compare sizes.
As you can see, both smartphones display the headers of each article quite well (red arrows). These headers are both equally legible. The text is smaller on the iPhone and larger on the Galaxy Nexus, representative of the difference in screen width.
However when we look at the smaller headers/links which I highlighted with yellow arrows, the situation is reversed. On the iPhone 5, mobile Safari automatically enlarged the text to make them legible. However, Chrome on the Galaxy Nexus rendered them in propotion to the rest of the page and they are barely readable.
When you look at the text body, you realize that the lines are shorter on the iPhone 5. This is because mobile Safari again is automatically enlarging the font-size so that it would be legible. As a result, the body text is larger on mobile Safari compared to the Galaxy Nexus.
iPhone 5 does not increase text size universally. For articles that are not accompanied by large header text, iPhone 5 tends to treat them as unimportant and does not increase text size.
The end result is that despite the iPhone 5 having a significantly narrower screen, the text is actually larger and easier to read than on the Galaxy Nexus.
We can also see this in action on www.asahi.com. The iPhone 5 is significantly easier to read.
Font size in pinch-to-zoom view is larger on Safari
As a side-effect of font-resizing, the text is much larger and easier to read after the user has “pinch-to-zoom”ed. The following screen shots are on www.asahi.com after zooming in to the top news section. As a side note, zooming was easier on the iPhone 5 because mobile Safari has better auto-zoom level detection. Hence a double-tap takes you to the zoom level on the screenshot, whereas a double-tap on Chrome does not. With Chrome we had to do an actual “pinch-to-zoom” gesture, which is more cumbersome, to get to the zoom level on the screenshot.
As you can see, font sizes are significantly larger on the iPhone 5. This is due to the rows having less characters per line as a side-effect of the auto-text resizing I described in the previous section. The font-size on Chrome, although legible, is not ideal. Any website that has been optimized for mobile would use a much larger font.
This situation is very serious for text-heavy pages. As you can see in the following screenshots, the iPhone 5 screen is much much easier to read.
On mobile optimized websites neither has an advantage
Mobile optimized websites are designed for narrow screens and assume that the user will scroll down to read more. Font sizes will be more-or-less the same regardless of screen size, hence the difference is only in how much a user has to scroll. Given the easiness of scrolling on smartphones, this is generally not much of an issue.
In the next screenshot from IT Media mobile, you can see that the Galaxy Nexus shows a bit more information at the bottom of the screen. Still, not enough is visible so even Nexus users will scroll down.
The font sizes are almost identical and easily legible.
Although Firefox is not the default browser on Android and we won’t use it to compare with the iPhone, Firefox has very interesting text-autoresizing and is worth mentioning here.
Simply put, Firefox is extremely aggressive with text-autoresizing. The resized text is very large and easily readable. I expect many people to find this very nice.
The Mozilla organization is preparing FireFox OS for low-end smartphones. FireFox OS will probably use the same aggressive text-autoresizing. This is ideal for low-end smartphones which are likely to have smaller screens than high-end Android phones. Text will be easily legible despite small screens, and is likely to be much better than text on high-end Androids with large screens running Chrome.
The algorithm for resizing text on FireFox is described here.
Despite the Galaxy Nexus having a significantly larger screen than the iPhone 5 (4.6 inches vs 4.0 inches), viewing PC websites is actually much more comfortable on the iPhone. This is due to important software optimizations in mobile Safari.
If you are designing a PC website and you want it to also be usable on iPhones, you can be more relaxed about the recommendations that I gave on my previous post. You don’t have to be too picky about the maximum characters per line, because mobile Safari will do the work for you. However, if you want to make it usable on Android, then the burden is on you. The designer has to make sure that the line length is short enough to be easily legible on Android smartphones, and large screen sizes don’t help much.
On the other hand, if you are creating a mobile website, as long as you are adhering to the general guidelines for a mobile site, usability will be basically the same on both iPhones and large-screen Android phones. Large screens do not provide an advantage. Likewise, Android’s lack of optimization is no longer a disadvantage.
How this effects screen size trends
A recent trend in smartphones is the rise of the “phablet” category, namely the popularity of the Galaxy Note which is a smartphone with a 5.5 inch display. This screen provides 18% more width than the Galaxy Nexus.
As discussed above, screen size alone is not important. When we compare the Galaxy Note (simulated screenshot below) to the iPhone 5 for the body text, we actually see that the iPhone 5 still has larger text and better readability. In fact, in order to surpass the iPhone 5 in font size when reading PC websites, Android devices need to get up to 7-inches.
I suspect that the rise of “phablets” is a result of the lack of software optimization in Android browsers. The iPhone and mobile Safari can provide readability that surpasses “phablets” on much smaller screens.
The larger view
Incremental feature improvements provide actual benefits only when the previous technology was insufficient. Large screens provide benefits to smartphone applications if and only if the current screen size is restricting usability, and the improvements are significant enough to overcome the limitation.
What this means is that applications that have been optimized for small smartphone screens will not receive significant benefits from an incrementally larger screen. This is the situation that we saw with mobile-optimized websites. A larger screen allows you to see a few more lines. However, since scrolling is so easy on smartphones, the benefits to usability are limited.
On the other hand, viewing PC websites that have not been optimized for mobile are a great opportunity to show off the benefits of a larger screen. Viewing PC websites is by far the most irritating activity on smartphones because the text is often too small to be legible, and scrolling horizontally to read as single line of text is truly annoying. It is these times when we wish we had a larger screen or a tablet.
Therefore, the benefits of a larger screen on smartphones should mainly be measured by how easy it is to browse PC websites. However, due to lack of text-resizing, large-screen Android smartphones actually provide a worse browsing experience compared to the iPhone. Without text-resizing, a screen size approaching 7-inches is required to display websites with the same font-size as the iPhone.
The situation is different with tablets. Because tablets like the iPad have fundamentally larger screens compared to smartphones, it is possible to provide a different user interface. Optimized applications have multi-paneled navigation systems, for example. Therefore with tablets, the issue is whether the screen size is large enough to house the different user interface or not.
In the eyes of most web designers, tablets at or below 7-inches do not have sufficient screen real-estate to accommodate multi-paneled navigation, whereas the iPad mini does. Many web designers give 7-inch tablets the smartphone version in their responsive designs. On the other hand, the iPad mini will get the same multi-paneled navigation as the iPad. In a nutshell, anything below 7-inches is a smartphone, and anything above 7.9-inches is a full tablet.
- For optimized websites and applications, anything below 7-inches is basically the same. You get the smartphone experience. You only get a significantly better experience if you go to or above 7.9-inches (the iPad mini).
- For non-optimized websites, incremental increases in screen size can potentially benefit the user experience. However, the lack of automated resizing in Android browsers results in a worse experience than mobile Safari, despite a significant advantage in screen size.