Q: What’s wrong with fullscreen browsing?

A: It makes a lot of sites look worse when compared to the windowed version.

Of course this is a matter of opinion but, since I purchased a monitor so I could work dual-screen, it’s something I’ve been noticing a lot more: there’s just not much point running a browser full screen unless you know you’re going to be in there for a long time, which is unlikely due to the nature of most people’s workflows (work on an essay, check something on Wikipedia, get distracted by Facebook, return to their essay).

The problem is that a lot of sites employ the ‘horizontal toolbar’ design pattern in order to fit in with the browser’s user interface (which, for future reference, I call the chrome of the browser. This is apparently wrong ^[1], but I only found out during the course of researching this article. I’m going to keep using the term because it’s a much better name).Now, there’s nothing wrong with this under normal circumstances, as it minimises use of vertical monitor space whilst keeping the bar’s contents prominent ^[2], but it just doesn’t work as well in full screen. It forces a chrome where the user has explicitly specified they don’t want one.

It also means the user can no longer ‘throw’ their cursor to the top of the screen if they want to use the items at the top: in most browsers this triggers the display of the full screen version of the chrome, meaning the user has to retreat from the edge until it disappears so they can try again. This particular aspect of full screen mode is a lot more irritating in Firefox than Internet Explorer (click for examples) as the chrome actually displaces the page, making the user move back further than they need to.

Twitter exemplifies my first point – they force a thin toolbar on you, meaning you have to force yourself to ‘go slow’ to avoid triggering the browser’s toolbars when you want to use any of the functionality placed there. Furthermore, it contrasts with a lot of profile designs (specifically, everything without a lot of black), causing it to seem like a disparate entity to the rest of the page.

Twitter’s and Diaspora’s sites share a lot of the same criticism. Both sites employ the use of one of my personal bugbears ^[3]: page elements fixed to the browser window. This makes sense in Twitter’s case, however flawed the ‘infinite stream’ concept may be, but with Diaspora it’s just unnecessary. And does Diaspora even need a toolbar? With so few links, it would have been simple to choose a different layout.

WordPress.com’s implementation of the top toolbar is particularly horrible. Luckily this one doesn’t stalk you when you scroll (unlike the admin bar now included in WordPress 3.1), but it is tiny. 28px is barely anything, leaving hardly any room for the user to slow down ^[4]. I find it strange how a company so comfortable with using larger-than-usual fonts everywhere would miss this.

There are a few of ways to avoid this problem, mostly involving putting a bit of space between the chrome and the site. This does have consequences: the site’s navigational area usually decides the structure of the rest of the site; for example, if there is padding at the top, there should usually be padding around a lot of the other site elements.

Apple’s site demonstrates this concept well: there’s a 10-15px gap around all of the main blocks of content on the page. It’s not much, but it gives the user a clear barrier on the page they probably won’t want to cross.

Another nice site is 4iP.org.uk. 4iP is the baby of Channel 4, a company well known for slick designs on and off TV. The page as a whole is very nicely designed, but I’d like to make a point about the top navigational bar. It’s still present, and just as thick as Twitter’s, but you’ll notice how it appears to be part of the background rather than an explicit entity on its own. I’d like to theorise that this simple fact makes it easier to use: the edge of the background provides a clear landing zone ^[5], and since movement over short distances is more controlled than over long, this particular navigation bar is easy to aim for and not miss.

The horizontal toolbars wouldn’t be a problem if it weren’t for the current implementations of full screen modes. Unfortunately, this is one of those things that have crystallised into a ‘standard’ feature which all users expect and ignore alternative implementations of (more on these in future posts), and designers will just have to design around it. I’ve offered a couple of solutions, but I’m interested to see if anyone comes up with any more, or, indeed, if anyone disagrees that this is an issue. Hit me up in the comments.

UPDATE: I’ve since found out that Fitt’s Law is what I’ve been describing. Read more about that here.

——