Mozilla LizardReader Refinement

I’ve continuously worked on the LizardReader concept we’ve created for Mozilla and presented a few weeks ago in a past article. While I’m currently working on an interactive prototype I thought it would be great to take the time and refine the interface choices and explain some of the features and flows in more detail. If you are not familiar with our concept, the initial post about the Lizard Reader would be a good starting point.

Application stages

The application has two different running states. The first one is a progressional real-time feed of post entries and the second provides a browsing experience to the user. The following principles should describe the application flow in more detail:

  • The author’s name would occasionally pop on the screen and dropping an item into the application. The names behave like floating bubbles interacting with each other by pushing away and bouncing off each other.
  • The dropped item float to the bottom of the application and simultaneously fading away. Once an item reached the floor it merges into the sediment layer. The sediment layer consists of all the previously posted items. The width of an item depends on the amount of already posted items in the layer (fig. 01).
  • The names also begin to fade away but stay longer on the sky if the author has dropped several items – so the more a author contributes the longer his name will be visible.
  • By hovering over an author’s name the user sees all the connected posts (fig. 02).
  • By hovering over an item in the sediment layer the user gets to see more details about the item shown in a tooltip (fig. 03).
  • By clicking on an author’s name the user switches to the browse mode and the continuously stream stopps flowing. Now the author’s latest post gets shown in the center of the screen (fig. 04). Closely related post items (same author, same title or same link) get organized on the primary hierarchy level. Loosely related posts (same type and similar publishing date) gets organized on the secondary hierarchy level.
  • Once a post is selected the user can skip through related posts by using the left and right arrows beside the post (fig. 05).
  • by clicking on the world icon the user is taken to the original publishing location of the viewed post item (fig. 06).
  • Sources can be filtered by checking or unchecking the source box (fig. 07).
  • The scale of the timeline can be varied using the toolbox by hovering over the date icon (fig. 08). Scale presets are “Day”, “Week” and “Month”. The sediment layer will therefore be filled with post items from today, the current week or the whole current month. using the calender interface the user has the option to check the state of the community for a certain date or time period.

fig. 01 – flowing state

lizard_reader_06_thumb

fig. 02 – author’s posts

lizard_reader_07_thumb

fig. 03 – tooltip

lizard_reader_11_thumb

fig. 04 – hierarchy state

lizard_reader_08_thumb

fig. 05 – skip through related posts

lizard_reader_09_thumb

fig. 06 – link to origin

lizard_reader_10_thumb

fig. 07 – date toolbox

lizard_reader_12_thumb

fig. 08 – source filtering

lizard_reader_13_thumb

Hopefully these explanations give more insight in the concept I’m working on. I encourage you to hand in any feedback that you might come up with. If there is anything I should clearify, please let me know.

Share this article

Subscribe for more

Give Feedback

  • http://flowingdata.com/ Nathan

    It’s looking nice. Let me know when the interactive prototypes come out :)

  • http://flowingdata.com Nathan

    It’s looking nice. Let me know when the interactive prototypes come out :)

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

    Could you also imagine offering a possibility to increment or decrement the speed and direction at which you browse through these news items? I’m thinking of this because I find the calendar selection tool a bit too disrupting: to go back in history you would have to click on one day after the other, when it really should be a flow of items going back- or forwards. You know, like when you stir up a glass of sparkling water: if you stir enough it gets really bubbly and when you let it relax it’s a lot of fun to watch (to some people :) ).

  • http://www.naehrstoff.ch Peter

    Could you also imagine offering a possibility to increment or decrement the speed and direction at which you browse through these news items? I’m thinking of this because I find the calendar selection tool a bit too disrupting: to go back in history you would have to click on one day after the other, when it really should be a flow of items going back- or forwards. You know, like when you stir up a glass of sparkling water: if you stir enough it gets really bubbly and when you let it relax it’s a lot of fun to watch (to some people :) ).

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

    @Peter: Thanks for this inspirational suggestion – you just sparked some ideas on how to reduce interface chome but keep or optimize functionality.

    @Nathan: I’ll keep you up-to-date with the progress.

  • http://artillery.ch Benjamin Wiederkehr

    @Peter: Thanks for this inspirational suggestion – you just sparked some ideas on how to reduce interface chome but keep or optimize functionality.

    @Nathan: I’ll keep you up-to-date with the progress.