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.

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.

Advertisements
Posted in Europeana | Tagged , , , , , , , | 1 Comment

Europeana 1914-1918 re-designed: Content modelling, data entry and editorial support

As I mentioned in the introductory blog post there were some aspects of Europeana 1914-1918 that we felt needed to improved in order to make for a better user experience for our users.

Improving the consistency and quality of the content

Below are some of the actions we took to accomplish this goal. The data entry forms are implemented in a fluid grid to support our responsive design BTW.

  • We updated the underlying data model to make a cleaner separation between Stories and Memorabilia
    • We wanted to also treat both the person sharing the story and the persons the story is about into entities of their own. However, due to constraints we were unable to do so.
  • We updated the data entry forms, trying to strike a balance between simplicity and power. I’m not sure we made it completely on this one.
    • Specific improvements were made on batch uploading, copying metadata from story to memorabilia items and from memorabilia items to items
    • Simple help texts were integrated into the forms themselves rather than kept on separate help pages
    • We added some extra, optional, metadata fields to make more precise descriptions and classifications of stories and memorabilia possible
      • Specifically we added an option to make one image “the cover” of a story. The intention and hope is that contributors will apply this to portraits of the story protagonists.
      • Contributors too, are now allowed to upload an image/avatar to represent themselves
  • We’ve made it possible for contributors to revise and withdraw contributions after they have been submitted, reviewed and published. This was to make clear that the persons who share these stories “own” them, NOT Europeana.
  • When analyzing and modelling the content we kept in mind that what we did here would shape the way we could present and make findable the stories and memorabilia contributed
Screenshot from the storytelling form. Shown are the mandatory fields with optional fields for more detail in collapsed mode below.

Screenshot from the storytelling form. Shown are the mandatory fields with optional fields for more detail in collapsed mode below.

Improving the editorial support and localization

  • We needed to make it possible to localize the UI into any number of languages. A project goal over the next year is to hold Collection Days in all European countries touched by  the First World War after all.
    • We moved the copy text out of the HTML-markup and into separate YAML-files. Before this texts had to be edited in a mix of Ruby and HTML directly.
    • To simplify the actual localization work we signed up to Locale which helped our translation admins and translators in organizing and doing their work
  • We wanted to make it possible for our Marketing&Communications team to write news entries and choose stories to feature and for these to immediately show up in the UI
    • The legacy system lacked any true CMS-features at all and we couldn’t fit developing one into the scope of the project.
    • So we improvised by setting up a hidden blog which acts as a CMS and allows our site editors to feature content, which categories to feature as browseable, write news entries, and Editor’s Picks. And to do so in all languages we localize to.

In the next blog post: Designing and implementing the user experience.

Posted in Europeana | Tagged , , , , , , , | 2 Comments

Europeana 1914-1918 re-designed

Europeana 1914-1918 is perhaps my favourite Europeana project. Why? Because it’s a great project that just couldn’t have been done without us. Getting the EU-funding and having the pan-European network to then pull it off is, I think, unique to us at Europeana. The stories that the project collects are so rich in potential re-use elsewhere,  like for example exhibitions and immersive installations. Not to mention how much it means to the people who come to the Collection Days to tell the story of their grandfather or great aunt and how they were impacted by the Great War. As many wise people have concluded, in crowd-sourcing the process is perhaps more important than the outcome.

Screenshot of the Europeana 1914-1918 eCloud

The Europeana 1914-1918 eCloud splash page. Live, it’s projected in 3D on to a 9×3 meter screen.

Pity then that the old Europeana 1914-1918 site just looked so bad and interacted with the user so badly! Which is why a small Europeana team has been spending the better part of the last couple of months improving the site.  This work is now done and I think it’s perhaps our best work yet.

The new design is based on design principles and goals that I set up after having analyzed the project’s goals, the content it produces and how it produced by contributors and cataloguers. As always with a re-design the legacy system was perhaps the greatest constraint, but of course the two old favourites time and money made a showing as well.

The design principles and goals that we established:

  • 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
  • Ensure a good user experience whether you’re visiting the site on your PC, tablet or mobile
  • Improve the search for stories and allow for more exploration of stories via browsing
To fulfill the principles and reach the goals there were some non-end user facing aspects that had to be upgraded as well:
  • Improve the consistency and quality of the crowdsourced content
  • Make it possible to localize the UI into any number of languages
  • Make it possible for our Marketing&Communications team to easily write news entries and choose stories to feature

In order to accomplish all of this we pretty much rebuilt the Europeana 1914-1918 front-end from scratch and made some serious renovation work on its RunCoCo back-end.  In follow up posts to this one I’ll go into a little bit more detail on how we tried to fulfill the principles and meet the goals listed above. First up some details on content modelling, editorial support and localization.

Posted in Europeana | Tagged , , , , , , , , | 3 Comments

Trying out Storify and summing up Hack4Europe Riga

This weekend Europeana and the Europeana Network organised hackathons in Warzaw and Riga. I played some remote support for the Riga event as I couldn’t be there in person. It was a good event and the winning serendipituous search app is fun to play around with!

I decided to kill two birds with one stone by summing up the hackday with Storify. Neither Storify nor Hackathons are very hip anymore (they’re sooo 2011…) but I’m a dinosaur. In any case I think Storify could be a good tool to quickly make multimedia summaries of events and it was really simple to use thanks to a very smooth UI. The Storify export to a hosted WordPress blog went very smoothlys as well as you can see!

The Story of Hack4Europe @TechHubRiga

  1. Let’s start off our story by getting into the mood thanks to this video from one of last year’s #Hack4Europe events!
  2. Barcelona´s Europeana Hackathon in the Museu Picasso
    Tue, Jun 21 2011 13:12:18
  3. The Director of the National Library of Latvia makes the introductions at the Riga Tech Hub.
  4. LNB_lv
    #Hack4Europe! Latvia has just started. Some introductory words from the director of @LNB_lv http://pic.twitter.com/byNCvhFD
    Sat, May 26 2012 04:20:02
  5. Along the way there were some questions from the developers.
  6. I did my best to play API remote support.
  7. After hours of intense development it was finally time to demo the prototypes!
  8. LNB_lv
    #hack4europe Latvia presentations have started. 2 days of great work done for @EuropeanaEU http://pic.twitter.com/9Tr6tNjV
    Sun, May 27 2012 08:12:30
  9. LNB_lv
    1st presentation “Postcard from Baltics” #hack4europe Latvia @EuropeanaEU http://pic.twitter.com/bN5GUMLl
    Sun, May 27 2012 08:17:09
  10. LNB_lv
    And here comes the 3rd application “europ.in” #hack4europe Latvia @EuropeanaEU http://pic.twitter.com/v5dkAhLy
    Sun, May 27 2012 08:44:09
  11. Euro.pin took home the honours!
  12. LNB_lv
    The winner of #hack4europe Latvia – “europ.in” Congrats @captsolo @torbjon @EriksRemess 🙂 http://pic.twitter.com/5XEuEqTE
    Sun, May 27 2012 09:52:13
  13. With the special prize from Microsoft Latvia going to History4You.
  14. Europ.in allows you to browse images from Europeana Pinterest style. Start of with a query, explore further via the resulting items and share your results on the web. It makes searching Europeana content a little bit more fun and visual than in the regular portal! The app is online so try it out.
  15. We at Europeana would like to thank the organizers, sponsors and above all the developers who came to the hack!!! Though I couldn’t be here it was fun to take part on the remote. To round off our little Hack4Europe story I’d just like to show you all what gents our hackers are!
  16. TechHubRiga
    Dear @TechHubRiga residents #Hack4europe has left you some food for breakfast, enjoy! http://pic.twitter.com/j3tNCLur
    Sun, May 27 2012 12:07:38
Posted in API, Europeana | Tagged , , , , , , | 1 Comment

Improving the Europeana Exhibitions user experience on mobile – a Responsive Design approach

Like many other GLAMs we at Europeana have been thinking about how to best adapt our sites to the fact that the proportion of people using smartphones and tablets to access the web is growing quickly. For many people a mobile device is their only device they use to access the web! The latter is estimated to be true for about 25% of web users in the US.

The strategy we’ve adopted at Europeana to meet this challenge has two parts:

  1. To gradually re-design our sites according to the responsive design paradigm, rather than develop native mobile applications
  2. To develop our API to be as mobile development friendly as  possible and so indirectly support development of native mobile apps

The first of our sites to get the responsive once-over is our exhibitions area. This is our first attempt at responsive design and has been very much learning by doing! There’s plenty of polishing and optimization (download weight and performance) to do but it was time to release the responsive exhibitions into the wild. Please let us know how it works for you!

In terms of tech our exhibitions are based on the excellent Omeka platform with a Europeana specific and heavily modified theme. It’s this theme that now has been upgrade to be responsive. We developed the them based on the Foundation framework from ZURB.

Screenshot from Screenfly form Quirktools. It shows a page in our exhibitions as accessed via an iPad in portrait mode.

Screenshot from Screenfly by Quirktools. It shows a page in our exhibitions as accessed via an iPad in portrait mode (768 pixels width).

As part of the update we’ve also added and adapted a couple of features to our exhibitions platform:

So what have we learned from this experience? Well, since I don’t code I’ll focus my main three take-aways on process and organisation:

  1. With responsive design it’s more important than ever for product manager, UX designers, web developer, front-end developer and test engineer to work closely together!
  2. In terms of the design process, with responsive design I find lo-fi wireframes on paper to be fairly useless. I recommend going quickly from sketching by hand on paper stencils or whiteboard to prototyping in HTML on screen.
  3. Use real mobile devices to test! Services like Screenfly and emulators can help to test your fluid grid but they are not of much use in testing your interaction design or the real user experience.

Currently we’re working with a general, and responsive, re-design of Europeana 1914-1918 which will soon go public. After that we do the same with our portal. More on those projects later!

Do you have any feedback on our exhibitions? Do you have any experience developing responsive sites for GLAMs? Please share!

Posted in Europeana | Tagged , , , , , | 2 Comments

Some thoughts on API Strategy shared at the Open Culture Data Masterclass

Last Monday I had been invited to make a short presentation on API Strategy at the Open Culture Data Master class (link leads to a site in Dutch BTW). As you can imagine from the name of the Master class focus is on data, content and the licensing there-of. The students all come from Dutch GLAMs and I guess the reason I’ve been invited as a speaker and mentor was to share some experiences we’ve had at Europeana with our API and what conclusions on strategy that can be drawn from those. Time was short so this presentation was hardly in-depth.

As you can tell from the presentation we were very much tentatively finding our way at Europeana on how to best fit an API into our product portfolio. In some ways we’re still finding our way and I’m really looking forward to when we can declare our API as Open and all the metadata it makes available as CC0-licensed! From my own point of view that’s when the API takes its place along side our portal as one of our main products.

To the participants in the class who wish to learn more about API strategy (and tactics!) I recommend reading APIs: A Strategy Guide by Daniel Jacobson, Greg Brail, and Dan Woods. Two good blogs to follow are API-evangelist and the Apigee blog. The best overview, and discussions, of GLAM APIs and other technologies for re-use I know of is Museums and Machine-processable Web. These resources offer a lot more in-depth knowledge and experience and is very recommended reading for any GLAM considering to add an API to its products.

Posted in API, Europeana | Tagged , , , , | Leave a comment

Another test

Just doing some mock-ups for a new feature. Nothing to see here, move along.

 

About Otto Dix

Wilhelm Heinrich Otto Dix (2 December 1891 – 25 July 1969) was a German painter and printmaker, noted for his ruthless and harshly realistic depictions of Weimar society and the brutality of war. Along with George Grosz, he is widely considered one of the most important artists of the Neue Sachlichkeit.

Find out more about About Otto Dix in Wikipedia

A selection of works by About Otto Dix in Europeana

Find more works by About Otto Dix in Europeana

 

Posted in Europeana, Wikipedia | Tagged , , , | Leave a comment