Europeana 1914-1918 re-designed: Designing and implementing the user experience

Do you remember the design principles from the introductory blog post? No worries, here they are again:

• Showcase the stories told and the memorabilia shared, not the project and its consortium members
• Showcase the real persons these stories are about and the memorabilia they left behind
  • Showcase and empower the person, often a descendant of someone the story is about, sharing this story with us
• Improve the search for stories and allow for more exploration of stories via browsing
• Ensure a good user experience whether you’re visiting the site on your PC, tablet or mobile

I’ll actually focus the most on that last bullet point first as it was as much a constraint as a goal. Also, since we were doing a responsive design (our chosen method for improving smartphone and tablet UX) we chose to change the process a bit. Specificallywe spent much less time on the wireframing. Instead we moved quickly from lof-fi wrireframes to designing on screen. Some of the layout ideas in the sketches and wireframes just didn’t translate well into an actual tactile/swipe-controlled experience across devices. In those cases we chose reality over the wireframe.

In comparison to our first attempt at responsive design I think we did better this time in letting the display flow from the nature of the content rather than just by establishing artificial break points. Also,  we opted this time to not use one of the existing frameworks for responsive design, but rather developed a specific CSS of our own.

In terms of time, our front-end developer Dan probably spent the most time on the image carousel on the story display page. First of all getting it to interact with the user, via mouse and touch both, at different viewport widths took some work. But then we noticed in early testing that when stories consisted of dozens, sometimes even hundreds, of images the loading time at low connection speed was just prohibitive. So the image slide-show was re-factored to load three images at a time.

Loading time, despite server-side processed images served at different sizes for different viewports (and the media queries to go with them), is certainly the greatest challenge in responsible responsive design.

Below some screenshots showing the results of trying to reach fulfill the design principles. I think they speak better than my texts.  Or just go to Europeana 1914-1918 and try it out for yourself.

If you’ve got any feedback or want to share your own experiences and views on designing crowd-sourcing experiences or on responsive design the comments are free!

The search features auto-completion but the layout is meant to encourage users to explore the stories by category. The categories are represented by images. The underlying category thesaurus makes this exploration agnostic to language specific labels.

The search and explore result page is image-centric but with enough captions to not rely on the images alone. We’re certainly inspired by Pinterest here and used Masonry.js in our implementation.

The 960 pixel viewport design of a story page. Media slide-show and story take equal prominence with the layout. Note that the storyteller and the story protagonist are also in focus.

A story page at a lower viewport width. Note the change in layout of the top menu and that the story components are now stacked in a single column.

About these ads