4

With the infographics fever there are a lot of big resolution images around the web. Usually, the designers are constrained to create them using long vertical formats otherwise it would be too difficult for the users to browse/explore those images.

This problem extends to any kind of image with large width.

  1. Is there an intuitive method for browsing big images using the mouse or keyboard?
  2. What about interfaces incorporating horizontal movements or scrolling?

[Of course, all the above, ignoring pinch & zoom and focusing on non-touch devices]

3 Answers 3

4

The first big-resolution images were the maps. It is well-known nowadays how to display them effectively in the browser (called the tile-map technology).

Also take a look at prezi which effectively deals with high-resolution spatial infographics, it's just they call it presentation :)

I guess a third option would be to design the infographics on horizontally connected "slides", with navigation arrows to aid interaction. You can design a prototype easily in a presentation editor like Keynote or Powerpoint, just make sure there's a kind of "overlap" between the slides, maintaining continuity - so, the slider never moves a full step, see here:

Panorama slides with information continuity

And of course, a fourth option is to use accelerating panoramas, just like what you see here

4

Check out The Google Art Project, a good example of how tiles can be used to implement large resolution images. They use additional controls to:

  1. Further inform the user what they are seeing, aka what section of the whole image they are focused on.
  2. One click access to a variety of different viewing angles and other options.
2
  • Great example... I like how they used the tiles to explore the images. I wonder why it's not more widespread. Commented Aug 3, 2012 at 14:01
  • Google.com has so much software UI design in all of it's different products it could be a masters course on it's own. Thanks for the edit @mciarrocchi btw.
    – Rhodes
    Commented Aug 3, 2012 at 20:20
2

Horizontal websites are not universally embraced by the web design community, and I think it's mostly because they are not for every type of website or public. They work well with portfolios and galleries, but require a little knowledge (or imagination) of how navigation can work.

There are some excellent examples of successful horizontal navigation, using grab or simple scroll:

Great examples of gallery: Candice Holloway (literally) and Elfletterig

Personal sites and portfolios: Vanty Claire, The Horizantal Way, Lucuma, among lots of others.

The biggest challenge is how to make these sites intuitive enough. I found myself wondering how to make some of them work, and feeling a bit frustrated checking for scrollbars, buttons or dragging options (seems like lots of them use parallax effects).

In the case of infographics, horizontal scrolling should work perfectly for timelines. This is a common association (time "moves" from left to right, not in all cases but in most). So it depends on what kind of information you are displaying (you wouldn't use horizontal scrolling for a deep sea or atmospheric infographic!). I would only go for horizontal when there is a process involved in the representation, a development of events or facts. But mainly, I would make sure the site is easy to navigate, because the whole point of making an infographic is simplifying information.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.