Scanning patterns in Facebook’s new photo layout

I’m intrigued by Facebook’s new photo view layout, which they’ve started rolling out to users this past week. I like the maximum size increase, and the lightbox effect looks really slick (if somewhat familiar).

facebook's new wider photo layout
Facebook’s new wider photo layout

I suspect, as many others have, that two main drivers of the redesign were to move comments ‘above the fold,’ and to be able to place ads much closer to those comments. If that’s the case I completely understand the decision, but I’m really curious about how this fits with (or goes against) users’ preferred visual scanning habits.

There’s been a lot of eye tracking research conducted on web users in the past, but most of it has focused on text-only pages, or on pages where images are just a supplement to lots of text. If the habits found in those studies hold true in all cases, then something like Jakob Nielsen’s f-pattern would indicate that moving comments to the right side would be an improvement. As they’re brought up higher on the page, comments are in an area where users will be more likely to see them.

On the flip side, research from Catalyst Group [pdf] indicated that when text-heavy data is organized into columns, users find those multi-column layouts suboptimal to single-column layouts. Users found multi-column layouts more “tiring” to use, and more difficult to develop a scanning strategy for. But the caveat remains: the original Nielsen article describing the f-pattern, and the Catalyst Group report were both focused on text-heavy content. Are there differences when a photo is the primary area of focus on the page?

visual scan pattern comparison - old vs new facebook photo layout
my scan pattern for Facebook images – old vs. new

I think this article on design layouts is really instructive, particularly the part toward the end about focal points. It makes sense that the photos, comments and ads force users out of common scanning patterns and into a pattern imposed by the elements’ placement on the page. My gut feeling after using this new Facebook photos layout is that it puts a little more strain on the user than the previous version, by pulling users out of their natural visual scanning flow. While that can serve a clear purpose in art, it seems less useful in a situation like this, where Facebook is hoping users spend lots of time viewing album after album of photos (and the accompanying ads). The new layout’s scanning pattern from photo in the middle to comments on the right just didn’t feel natural to me. It’s entirely possible that I’m simply more used to the old vertical layout, but I’d love to see more research done in this area to get a better feel for what’s really happening.

Adventures in responsive design

I was pretty excited when I first started reading about Ethan Marcotte’s ideas on responsive design, and had really been itching to use some of those techniques on a project. After finally being able to try a few things out on a forthcoming project at work, I got comfortable enough to make my own site more responsive.

I started by tackling the way the site would be displayed on small screens like mobile devices. A lot of sites I’ve seen (mediaqueri.es is a great resource) use a stacked navigation menu for small screens, which I like a lot. I was worried that the stacked menu pushes content off the screen though, so I decided to move the navigation menu to the bottom of the screen, below the content. I also included a menu button that jumps down to the menu, for users to get there without scrolling through some of the longer pages like blog entries. As media queries recognize the screen getting larger, the menu icons spread out horizontally above the content, and eventually stack along the left side in their own column.

screenshots of tsuch.net on an iphone
responsive layout for small screens

Continue reading

DELETE a form field in MailChimp

Deleting a form element in MailChimp is sometimes necessary, but it should be done with great caution — if you delete a form field, you’re also deleting any data associated with it. Yesterday I had to do just that, and noticed a small, but pretty great element of MailChimp’s user interface:

dialog box for deleting a form element in mailchimp
dialog box for deleting a form element in MailChimp

In order to delete a field, MailChimp requires you to type “DELETE” into a text box before confirming (it doesn’t even accept the word in lower case).

Continue reading