Mozilla LizardReader Concept

Mozilla recently made an open call to designers to get involved in their project “Lizard Reader”. Lizard Reader was created by Les Orchard and is an aggregator for various new feeds from the Mozilla community. Tweets, blog posts, bug reports, wiki changes, code submits, etc get collected. The opportunity for designers is to submit concepts, sketches or prototypes of a intuitive, easy readable and fun frontend for the engine.

Our concept

We here at Datavisualization.ch are very fond of the open source mentality and are using most of the Mozilla products on a daily basis. Therefore we couldn’t let the chance pass us by and not submitting something. So here goes my concept:

I’ve chosen the sea as a metaphore. News items get dropped into it and then float to the ground where they get arranged and archived just like sediments in the sea. The names of the authors or creators float in the air and arrange themselves just like a swarm of birds.News items basically consist of an author, date, title, body text and a link to the original ressource. Items can be viewed in a more detailed version by clicking on it.

Lizard Reader Default

By hovering over a name one can see the items by this author.
Lizard Reader Connection

Lizard Reader Connections

When a post is viewed in more detail it pulls related posts in a hierarchic view. Related posts could be by the same author, covering the same topic, edits on the same wiki page or reporting of the same bug.
Lizard Reader Hierarchy

To get an overview over past days the user can “dig” deeper in the ground and reveal past layers of sediments. By the density and chromaticity of the layer one can judge what happened during the day without having to view every post by itself. This creates a fingerprint and patterns for different activities in the community could emerge.
Lizard Reader Timeline

I encourage you to leave your feedback about the visualization – I know there’s always space for improvement.

Share this article

Subscribe for more

Give Feedback

  • http://www.naehrstoff.ch/ Peter Gassner

    What a beautiful concept! I love the sea metaphor, I can already see how the items sink down to the ground. And with these names floating in the sky it’s as if they sent some oxygen down to their news items, the way they’re hooked up and all.
    But why do you use these tiny rectangles at the bottom? Couldn’t these be as wide as the title bar in the original items? Maybe they could even contain the first line of the first paragraph. This would of course take slightly more space, but hey, the stack could be _meters_ deep …
    Oh, and I truly like this color scheme!

  • http://www.naehrstoff.ch Peter

    What a beautiful concept! I love the sea metaphor, I can already see how the items sink down to the ground. And with these names floating in the sky it’s as if they sent some oxygen down to their news items, the way they’re hooked up and all.
    But why do you use these tiny rectangles at the bottom? Couldn’t these be as wide as the title bar in the original items? Maybe they could even contain the first line of the first paragraph. This would of course take slightly more space, but hey, the stack could be _meters_ deep …
    Oh, and I truly like this color scheme!

  • http://www.artillery.ch/ Wiederkehr

    @Peter:
    I thought about using bigger archived posts at the bottom. I decided to show the title / date by hovering over the item and then revealing all the details by clicking on it. I’d like to let the width adapt to the availyble space and keep all items of one by on the same line. This way the user could tell the density of posts of a day just by looking at the relative thickess of the items themselves. In the visualization all items have the same size, so this could be misleading. Imagine a variation in thickness of the items from line to line and the fingerprint would be even more obvious.

  • http://artillery.ch Benjamin Wiederkehr

    @Peter:
    I thought about using bigger archived posts at the bottom. I decided to show the title / date by hovering over the item and then revealing all the details by clicking on it. I’d like to let the width adapt to the availyble space and keep all items of one by on the same line. This way the user could tell the density of posts of a day just by looking at the relative thickess of the items themselves. In the visualization all items have the same size, so this could be misleading. Imagine a variation in thickness of the items from line to line and the fingerprint would be even more obvious.

  • http://wa.emvbusiness.com/ Web analytics

    Beautiful heat map… who decide the tag?

  • http://wa.emvbusiness.com Web analytics

    Beautiful heat map… who decide the tag?

  • http://www.artillery.ch/ Wiederkehr

    @Web analytics:
    Not sure if i got your question right, but the tag is given by the source. All entries are aggregated from different sources like Twitter, Wiki, Blogs, Bug Reporting etc. therefore the color depends on the source.

    The names floating above are the names of the authors of the posts.

  • http://artillery.ch Benjamin Wiederkehr

    @Web analytics:
    Not sure if i got your question right, but the tag is given by the source. All entries are aggregated from different sources like Twitter, Wiki, Blogs, Bug Reporting etc. therefore the color depends on the source.

    The names floating above are the names of the authors of the posts.

  • Pingback: Mozilla LizardReader Refinement on Datavisualization.ch