Sharing the experience
10 August 2011 | Posted in projects, storytelling, user experience, web 
A few days ago we lauched HDtravel, a new online magazine that features our favourite travel experiences in large photos and high definition videos. The idea is to present the stories with a personal touch and to create an uncluttered experience in order to create visual and emotional impact.
Designing the interface
One of the most important considerations when designing the interface was that it shouldn’t get in the way of the experience. The flow of the story shouldn’t be interrupted by the user having to click on images to see larger versions. Nor should users be distracted by other information on the page. Ideally, I wanted the interface to have an app-like experience, focussing on one thing at a time. This would also make it intuitive to use on iPads and other mobile devices.
I came up with a clean layout that displays large images and video in a continuous horizontal row across the screen. In theory it would have been possible to have each photo or video fill the whole browser window, but that would create too much of a slideshow feel. When looking at one piece of the story, I wanted the next and previous pieces to be partially visible in order to create context and visual flow.
Navigation
Unobtrusive, transparent controls are overlayed on the left and right to navigate to the next or previous photo/video. Controls that are not needed automatically fade out and become invisible. Fore example, when you’re at the start of a story, the “previous” button is not needed and therefore not visible.
Optimizing performance
With each story having up to 25 large photos, performance becomes a real issue. Especially when navigation and other elements only become usable after the whole page has loaded, the user would have to wait for an unacceptably long time before they can start browsing through a story.
Since there’s not much I could do about the actual time the content takes to load, I decided to focus on optimizing the perceived loading time. The basic elements on the page load fairly quickly, after which the photos are loaded one by one. A nifty piece of JavaScript make sure that the second photo doesn’t start loading until the first one is finished, etc. Preventing this asynchronous loading of images that would normally occur on a web page makes sure that the content the user would see first is also loaded first.
Navigation controls appear when needed, i.e. as soon as the second image loads, the “next” button appears. The navigation keeps track of how much of the content is loaded, and what part the user is looking at, to dynamically make the relevant controls visible. As long as content is loading, a animated graphic indicates to the user that there’s more coming.
Displaying text
Even though the stories presented on HDtravel are mostly visual, we wanted the ability to show a modest amount of text to complement the visuals. My first idea was to create blocks of text that would be inserted between the images, but it turned out this would really disrupt the visual flow. Instead, I opted for a transparent text overlay at the start of each story. This overlay is designed in such a way that the underlying image will show through, yet it keeps the white text readable over any image, whether light or dark.
The text overlay repositions itself horizontally, depending on the size of the browser window, in order to make the page look balanced. Once the user moves on to the second image of a story, the text overlay will fade away. It will become visible again should the user navigate back to the beginning. The text overlay box also provides a place for social media sharing buttons.
Designing for smaller screens
It’s all well and good to create a site with high resolution imagery, but what if the user is viewing it on a device with a small screen? In order to maintain a nice user experience, the images and videos will actually scale down to a smaller size when the browser window is too small to display the full size content. This also happens when the browser runs on a large screen but is manually resized. The page navigation automatically adjusts so that the current position within a story is maintained.
Other applications
The HDtravel interface could of course also be used for other types of content. It’s built in such a way that it can be easily integrated in other platforms and use different content. It lends itself to any type of high-impact visual storytelling, like the example below.
Reader Comments (1)
THIS is how travel, adventure, and art/artist/gallery sites should be produced if their intent is to engage, showcase, and cause physical longing for the places and/or objects in the photos and videos.
I just keep going back to the same two words I kept saying as I effortlessly flowed through the experience of the site, "My God..."