Designing for the Ideal

Sometimes a designer doesn’t completely account for the reality of how a solution or product will be used, and instead designs around a set of requirements that seem to be fully representative of the problem at hand, but are actually narrower in scope. I call this designing for the ideal, because the designer typically chooses a band of requirements that play nicely with the favored solution — content that looks great or inputs that behave wonderfully within the design as it is being crafted. More often than not though, when the product is released into the real world the designer is in for a rude awakening.

There was a bit of designing for the ideal, I think, when the three major browsers — Safari, Chrome and Firefox — each started presenting a gallery of a user’s most visited Web pages within new tabs, instead of just a blank page or a user’s designated starting page. This feature has been around for a while now, but it’s remained broken for quite a long time.


Visual Thinking

The intended behavior of the feature is to visually represent the sites that the user is most likely to want to visit when faced with a blank tab. The critical benefit here is the visual representation; when the feature works, what you should see are pictures of your favorite sites in miniature, but still large enough that they’re simple to make them out at a glance and to click on quickly without requiring lots of precision mousing. This is what distinguishes them from bookmarks.

However, what happens in almost every instance is that the gallery is full of sites that cannot be rendered — blank thumbnails. I spend most of my time in Firefox and Chrome, and this is usually what I see.

Firefox
Chrome

The problem here, apparently, is that this feature either cannot or opts not to render thumbnails of secure sites, those whose URLs start with https. There is some sense to respecting the security of these sites by abstaining from thumbnailing them, but the result is that it essentially breaks a feature that is presented repeatedly and prominently to the user. That’s pretty high profile breakage.

Had the designers of this feature fully accounted for how it would be used instead of designing for the ideal, they could have come up with some alternative solution. Perhaps they could have generated a generic, innocuous thumbnail, maybe with large typography, to stand in for cases where no thumbnail could be created. Or they could simply omit secure sites from the gallery altogether, though that would have subverted the notion of a user’s “top sites” somewhat.

Actually, Safari has finally resolved this problem by just generating thumbnails for everything, producing a much more complete user experience.

Safari

That happened relatively recently, I believe. What surprises me is that all three browsers shipped this feature in essentially broken form, and it’s still broken in two of them. Sometimes, the lure of the ideal is too great, I guess.

+

13 Comments

  1. I believe that this very same thing—designing for the ideal—will also apply to Facebook’s latest endeavor, Home.

    https://www.facebook.com/home

    All of the preview materials display gorgeous photography and not the ever present deluge of (text as image) memes. I am very interested to see what Facebook Home actually looks like in the wild.

  2. “What surprises me is that all three browsers shipped this feature in essentially broken form, ”

    actually, as firefox first shipped this feature, it wasn’t broken, as it *did* show thumbnails even for secure sites.

    unfortunately, that was seen as a “privacy concern”: link

    and thus, firefox was quickly patched to not display them. still far from ideal, it just didn’t happen as you described..

  3. I agree that the technical aspects of security are often overlooked. Although Safari services the user, I find Google’s solution by showing the site icon (favico) a decent enough compromise. Sadly, these are a bit small and I would have appreciated a centred and enlarged version of the that logo to maximise recognition.

  4. Are you sure it’s simply not a bug in your Chrome installation, or an overzealous extension. My Top Sites shows all https sites with thumbnails.

    That is — it doesn’t appear to be a conscious decision by Chrome developers.

  5. The Speed dial extension for Chrome does a wonderful job of this. As an added extra, it allows users to set their own thumbnails which can be anything, but they’re usually the logo of the website. A list of logos is actually quiet nice to flick through, rather than finicky thumbnails, which can take a little longer to visually process as a certain site. It’s a little “Appy” but nice.

    Still it’s a third party solution, could never imagine Google, Mozilla or Apple presenting logos over a web thumb.

  6. it doesn’t matter how Firefox came to be broken, because the user doesn’t know there’s a reason for it. if it was felt it was that big of a privacy concern to break the feature, then it would have been awesome to let users know _why_ images were broken, and to give them the opportunity to rectify it (or even not ship the feature).

    that said, it’s nice to finally understand why Firefox’s new tab page behaves that way.

  7. This feature called “the speed dial” origins from the Opera browser where it existed for as long as I can remember. What makes this feature useful is the fact that the user is manually adding desired websites in it and previews are created when it happens. So no broken thumbnails, no random reordering, no unneeded links.

  8. Madhava from Firefox UX here. You’re quite right about this being broken for users, i.e. broken, even though it came about by fixing a security/privacy issue. We’re going to show thumbnails of the un-logged-in front pages of the affected sites, so there’s a visual cue for the user. This is turning out to require a system to get thumbnails asynchronously so that the new tab page is still quick to come up – being worked on right now.

  9. We often see product features which are awesome when they don’t break. The problem is things do break.

    Designing good fallbacks, default states, error messages seems to take low priority for designers, which is odd because they are such an integral part of the user experience.

  10. Every time you restart Safari, it, I must say idiotically, refreshes all of the thumbnails of the webpages you have visited. That is a lot of bandwidth.

  11. Hello.

    Major Russian search engine, Yandex, released it’s own browser, based on Chromium, which resolves this issue by getting the logo (for popular sites) or the favicon (for not-so-popular ones), then capturing the main color of it and creating a thumbnail.

    http://browser.yandex.ru/#tablo

  12. Excellent post.

    Another oft-cited example of this failure that admittedly affects the aesthetics more than the usability is something like Microsoft’s flat mobile interfaces. In the press materials when the UI is populated with the beautiful, staged photos, everything looks nice, bright, and balanced with color.

    What happens when a typical user’s randomly selected, generally low-quality non-staged photos populate this system? Or when a user has no photos? It might still have emotional appeal, but suddenly the purported “beautiful” UI becomes drab or kitschy.