Design ad-view page

[mushon]

I like @dhowe's suggestion to make the log page a grid of ads as a full-frame collage. I think using Masonry could make sense though we will need to check it with different ad sizes. Designer's Toolbox has a good documentation of what to expect. Wikipedia also has a nice SVG for that:

I imagine a gif animation of our clicking finger bouncing on top of each of these ads and the whole page auto-scrolling slowly ad infinitum. Hovering each of the ads can give you some metadata (where does it lead, when was it clicked, how many times was it encountered, etc…)

This could also be the leading aesthetic of our landing page which I will expand on in its own ticket #13

[dhowe]

Nice -- or some reason I imagine a circular presentation, where the ads attempt to pack within a vaguely circle-like space. But we might want to do some testing to see how many of the real ads we're getting map to the sizes/shapes above. They could also jostle for position, sort of like: http://mrl.nyu.edu/~perlin/experiments/poetry/, as they compete for your attention (just one idea)...

[dhowe]

Changed title to differentiate between ad-view and log-view, both of which likely need a bit of work (though more for ad-view)

[dhowe]

I had messed around a bit with Isotope -- not sure how it compares to Masonry. Depending on the number of ads collected, we may want to allow some overlap in the display as well... ?

[mushon]

Isotope was developed by the same guy who's behind Masonry. Actually Masonry is a feature within Isotope. The main thing that Isotope adds to the mix is dynamic and optionally animated sorting and filtering which could be a nice feature for us.

Mushon Zer-Aviv Mushon.com | Shual.com | @Mushon

On Jan 9, 2014, at 7:42, dhowe notifications@github.com wrote:

I had messed around a bit with Isotope -- not sure how it compares to Masonry. Depending on the number of ads collected, we may want to allow some overlap in the display as well... ?

— Reply to this email directly or view it on GitHub.

[mushon]

I'm using Isotope and working on the www folder, will have something for you to see hopefully later this week.

[dhowe]

Simple isotope demo is now included in version 0.4.12 (click 'view-ads' in the ADN-icon-menu)

[mushon]

View Ads option is not clickable in 0.4.12 (FF 26.0)  --  Mushon Zer-Aviv | Mushon.com | Shual.com | @mushon

On January 18, 2014 at 4:06:47 PM, dhowe (notifications@github.com) wrote:

Simple isotope demo is now included in version 0.4.12 (click 'view-ads' in the ADN-icon-menu)

— Reply to this email directly or view it on GitHub.

[dhowe]

It is for me (see below). Is the plugin enabled (the icon is pink)?

[mushon]

It is pink but it’s as if the button isn’t clickable.  --  Mushon Zer-Aviv | Mushon.com | Shual.com | @mushon

On January 22, 2014 at 11:42:08 AM, dhowe (notifications@github.com) wrote:

It is for me (see below). Is the plugin enabled (the icon is pink)?

— Reply to this email directly or view it on GitHub.

[dhowe]

Are you seeing any notifications, like this?

[dhowe]

You may need to restart the browser after update ... ? When I click on view-ads, after visiting new york times, I see:

[mushon]

ok, it was the lack of restart that caused the mistake. We might need to require a restart then. I see this and the alerts now.  --  Mushon Zer-Aviv | Mushon.com | Shual.com | @mushon

On January 22, 2014 at 11:46:55 AM, dhowe (notifications@github.com) wrote:

You may need to restart the browser after update ... ? When I click on view-ads, I see:

— Reply to this email directly or view it on GitHub.

[mushon]

Here's a sketch of what we're looking to solve:

Look into 2D Bin Packing solution in order for us to reach a solution like this one: this is implemented in python (more tests)

What you can see in this example is that these are actually 4 quadrants each building from its axis source outwards. I think we can do something like this.

These are the results of my search:

JS libraries

• Packery - from the same person behind Masonry and Isotope (GPL for non-commercial use)
• Nested - responsive packing lib, worth looking into. (no license found, seems to be open)
• Incise: 2D bin packing with javascript and - doing it in Canvas
• Binary Tree Bin Packing Algorithm - A javascript binary tree based algorithm for 2d bin-packing suitable for generating CSS sprites

Algorithm documentation:

• Packing Lightmaps - pseudo code to explain the logic
• Fast Optimizing Rectangle Packing Algorithm for Building CSS Sprites

SO

• Programmatically arrange rectangular UI objects in an abstract way, without gaps - same problem we're trying to solve
• Algorithm needed for packing rectangles in a fairly optimal way

[mushon]

Eventually, Packery will be added as a layout mode to Isotope, so you will be able to filter and sort Packery layouts with Isotope.

http://packery.metafizzy.co/faq.html#difference-between-isotope-and-packery

interesting…

[mushon]

This (using Packery) is looking promising: http://codepen.io/anon/pen/IJjvG

Also try zooming out to see how it would look when shrinked, pretty nice I think. I imagine it starting spawning more and more ads from the center outwards and when it reaches the width of the page it starts resizing the whole composition to fit until it becomes very very small. Then we can have a nice hover interface that with a slight delay would open a panel similar to what they have in http://www.tenthousandcents.com/

[dhowe]

I think I"m missing something.. are they any UI controls here?

On Jan 23, 2014, at 12:07 AM, Mushon Zer-Aviv notifications@github.com wrote:

This (using Packery) is looking promising: http://codepen.io/anon/pen/IJjvG

[mushon]

Disable your ABP + refresh (+ jump on Skype)  --  Mushon Zer-Aviv | Mushon.com | Shual.com | @mushon

On January 23, 2014 at 12:33:40 PM, dhowe (notifications@github.com) wrote:

I think I"m missing something.. are they any UI controls here?

On Jan 23, 2014, at 12:07 AM, Mushon Zer-Aviv notifications@github.com wrote:

This (using Packery) is looking promising: http://codepen.io/anon/pen/IJjvG

— Reply to this email directly or view it on GitHub.

[mushon]

Draft for ad view, logo and tool-bar icon:

[dhowe]

Nice! Some thoughts/queries: -- Aggregate statistics somewhere? Number of ads found/visited in session/overall, etc. -- What to do with multiples of the same ad (could show a #, but what happens in the right-hand inspector panel) -- How to show which ads have been visited (this will add a dynamic element to the view, updating as ads are visited) -- Color on the icon? gray disappears into the chrome...

[mushon]

Nice! Some thoughts/queries:

Thanks! :)

-- Aggregate statistics somewhere? Number of ads found/visited in session/overall, etc.

Can you give me an example of the queries we currently want to show?

-- What to do with multiples of the same ad (could show a #, but what happens in the right-hand inspector panel)

Yes, I was thinking of a # indicator on the top right corner of the banner, but I'll play with that a bit and post a new mockup

-- How to show which ads have been visited (this will add a dynamic element to the view, updating as ads are visited)

We can do a few things here: border color, opacity, size… we can make the pending banner dimmed and smaller (like 50%) and when it is visited pop it like popcorn to 150% and let it slowly shrink to 100%. This will obviously create quite a lot of action around it as the other banners try to rearrange themselves around it. I would however wait with that until we have the initial code for the bin-packing working, it seems like no one has done the job for us just yet

-- Color on the icon? gray disappears into the chrome...

I wanted to run this by you, I'm thinking of adding animation to the icon. Having it flicker a bit when it detects an ad and then animate the finger when the ad is visited. That way it would be visible only when it needs to be and would play nice with the other icons so to not feel like it doesn't belong there. Thoughts?

[dhowe]

Can you give me an example of the queries we currently want to show?

"Since today at 9:04am: 129 ads detected, 110 visited." "Since January 12, 2014: 2100 ads detected, 1190 visited."

I would however wait with that until we have the initial code for the bin-packing working, it seems like no one has done the job for us just yet.

Agreed. Perhaps you can put a 'bounty' on the question to add some motivation?

Also, I've written a circular-packer in JavaScript over the past couple of days... Its pretty close to being done, but has none of the slick features of Packery (animation, zooming, etc.). I'm wondering if we can merge it into the Packery code, so that it works as Packery usually does, but just uses my packer code instead of the stock (I imagine this is easier said than done, but the Packery code is up on github)

I wanted to run this by you, I'm thinking of adding animation to the icon. Having it flicker a bit when it detects an ad and then animate the finger when the ad is visited. That way it would be visible only when it needs to be and would play nice with the other icons so to not feel like it doesn't belong there. Thoughts?

That sounds good (though it would have to be disable-able in the options, so as not to annoy). The other idea I had was to show the number of ads found on the current page (as a little bubble on the icon, see below)... But I do think its important that we show/remind the user that ADN is 'working'...

Also note that (for me at least) most of the other browser add-on icons are not gray; Adblock (required) is red and placed in the bottom add-on bar, while Ghostery is blue (when active) and in the top-toolbar -- it also shows a number as I describe above:

So we should also discuss/decide on (default) placement of the icon... One thing to consider is that the AdBlock Plus options directly affect ADN, which might argue for putting them side-by-side...

[mushon]

Some updates, I've borrowed the purple color to indicate "visited link", it's used in the icon together with the # to indicate activity on the page. We can think of multiple states for the icon to indicate: off / on / on + ads detected / on + ads visited. Or do we want to make this distinction in the icon? Maybe we should just keep it to visited? I've also added the duplicate banner mark indication. If a banner has been detected multiple times it would mark the # and on hover slide through the different occurrences of that ad (showing its respective data). As for stats, I suggest showing it in the bottom left of the vis screen and updating it live.

[mushon]

This is designed and mostly coded. Let's close this and address more granular issues separately

[mushon]

Sorry…

--  Mushon Zer-Aviv | Mushon.com | Shual.com | @mushon