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

fig. 02 – author’s posts

fig. 03 – tooltip

fig. 04 – hierarchy state

fig. 05 – skip through related posts

fig. 06 – link to origin

fig. 07 – date toolbox

fig. 08 – source filtering

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.