Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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]

share|improve this question
add comment

3 Answers

up vote 4 down vote accepted

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

share|improve this answer
add comment

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.
share|improve this answer
    
Great example... I like how they used the tiles to explore the images. I wonder why it's not more widespread. –  Marcos Ciarrocchi Aug 3 '12 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 Aug 3 '12 at 20:20
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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