nerdhook

If you’ve upgraded to v2.2 of the iPhone OS, you’ve probably noticed the toolbar changes in Mobile Safari. Here’s a screenshot of the new toolbar:

While I’m glad Apple designers keep attempting to improve the interface, I think they continue to miss the boat. In this case, I believe the changes do nothing to improve the usability of MobileSafari, and aesthetically are a step-down from the previous version.

Let’s start with what I think is wrong with the new toolbar:

1) The Google search box has been made entirely too wide. In fact, it’s so wide, the initial “Google” text of the box itself doesn’t come close to spanning the width of the box. They’ve left-justified the text, which to my eye looks unbalanced. The new proportional relationship between the address bar Google search box just seem off now; the search box is just too wide. Further, there is no real practical benefit for the user for having a wider search box; as soon as the box receives focus, it is scaled the entire width of the toolbar to begin accepting text.

Therefore, the only purpose the wider box serves is to provide a larger target for selecting search. But honestly, who has fingers or thumbs which justify these proportions?

2) The new toolbar design has caused the refresh button to be moved into the address bar itself, this is a fine idea. However, given the current width of the address bar, the refresh button ends up entirely too close to being in the center of the screen. Maybe it’s just me, but I tend to navigate (scroll, zoom, etc.) starting from the center of the screen. Therefore, I also end up selecting the address bar (to enter a new URL) in the center of the screen… the shortest distance. This means I have inadvertently refreshed quite a few pages since the update. Depending on Mobile Safari’s ability to render the site with any degree of speed, this can be a costly mistake. Perhaps this is a problem I’ll avoid with further use of the redesigned toolbar, but it seems like a step backward.

If I were king of the world, here’s how I would tweak the current design, and at the same time solve one of Mobile Safari’s most annoying problems:

1) Shrink the width of the Google search box. Take about 40% off, so the width is just as wide as the current “Google” text. This should be plenty wide for any user who is typing on the iPhone keyboard.

2) With the screen real-estate freed up by the more narrow search box, make the address bar wider. But don’t stop there, with the extra width of the address bar, add a separate stop button (left justified on the address bar itself), and make the current refresh button handle just a refresh, not the dual functionality of stop/refresh as it currently does.

This would solve one of my biggest frustrations with Mobile Safari: attempting to stop a page from loading, only to have the touch take so long to register, by the time it actually does register, the button has changed (back) to refresh. Thus instead of the page stopping, it actually starts to reload from scratch.

It seems obvious the Apple designers want Mobile Safari to look and behave as much like the desktop version as makes sense, and I applaud that effort. And in an ideal world, I would agree with the decision that refresh and stop can share a button as you would never need to overlap the functionality of those two actions. But this approach is just not pragmatic in the current iteration of Mobile Safari, and I think the user experience suffers because of this design decision. Perhaps when the browser can render pages close to as fast as the desktop version, this will cease being an issue. But as of now, I think erring on the side of usability is the right approach.

(Bonus) Why not add a “scroll to end of page” feature in the browser? Currently you can scroll to the top by tapping the menu bar. Why not allow a tap of the bottom toolbar within Safari anywhere except on one of the existing 5 buttons to scroll to the end of the current page? Seems helpful to me.