Extension UI

[Tamary]

@orpgol

Design and build UI for:

1. The reports from Twitter
2. A notification that says "this site is infected"

[orpgol]

Whats up @yuvadm ?
I uploaded a popup screen for the extension and the includes/style.css file affects everything outside the extension...
whats the drill with extensions? should i make a separate style.css for the JS functions and for the popup.html?
and should i add the style file for popup to the manifest or no??

[yuvadm]

@orpgol I'm not sure I understand where this popup screen fits in the flow of the extension, can you enlighten me?

Generally speaking, you should divide the files however it makes sense logically considering that some aspects of your extensions require common assets, while others need only very specific pieces which don't belong elsewhere.

Files should go in the content_scripts part of the manifest only if they need to be injected into each loaded page of your extensions.

[orpgol]

The popup is the name i saw for the extension GUI,
anyway i think i got it, one style.css that is for the zombie and what i want changed dynamically, that also goes into the manifest.
and one css file that is for the GUI part, and doesn't go into the manifest.
sounds right? ill see if that works...

[yuvadm]

@orpgol yep sounds good.

[Tamary]

Design for the live feed and reporting buttons (After clicking the extension's icon):

[Tamary]

And the pop up design:

[mushon]

Hi @Tamary,
I must say this is coming a bit late in the process. Assuming it needs to be implemented and live by tomorrow.
Either way, I think it would be more useful to see these designs in context as in overlaid on top of the browser itself. It would help us understand whether the size and context of the UI works.
My hunch is that a pop-up window is the wrong ui element for the task of informing of a contaminated site. Especially since we discussed an alert notification bar as is commonly used in browsers:

Moreover, if the alerts are basically a feed of tweets they should be based on what a Tweet can do, and boldening of text and custom icons are not really a part of it. So I think this needs some more work which means a very long night for all of you guys.

Good luck!
;)

[Tamary]

Thanks @mushon, you're right about the pop-up. I'll change that :)

About the options we're giving when the user clicks on the extension icon (warn others, report site, see reports) - Should I rethink the ui there too or is it ok at this stage?

[mushon]

Functionality-wise I guess it's ok, but the visual design is somewhat uninspiring. For now, I guess it would do the trick, but I'm pretty sure such an exciting project can/should inspire you to design something more edgy and dramatic.

[orpgol]

@yuvadm hey i tried what we talked about & also tried running the extension with no style files (and also no JS) and still it damages the websites, maybe i have a wrong definition in the manifest?

[yuvadm]

@orpgol Can you explain how websites are "damaged"? Open up the dev console, which CSS/JS files do you see that are injected into the page? If we can narrow that down we can see how stuff is breaking.

[orpgol]

@mushon and @Tamary what do you think?

[Tamary]

@orpgol - I think this looks good :)

1. Can we make it's width 100% of the browser and without the rounded corners?
2. Does is go away when it's clicked? maybe we can add a "more info" that will link to our minisite? What do you think?

[orpgol]

@Tamary it's a special library i found so it might be limited but i will check about 100% and corners.
I made it go away after a click or 4 seconds, we can add links in there and buttons.
if 'more info' will point to our minisite, will it need to look like a CDC page?
or it will just be a link to the story?

[Tamary]

@orpgol Cool.
And i'll create wireframes for the minisite today - I think it should looks like a cool CDC page with the background story, a map and a twitter feed so people will understand what's the situation right now. We can also link to the twitter page instead - what do you think?

[orpgol]

@Tamary to the minisite is better.
i'll start looking into the twitter api, and tell you what i find,
also i think the minisite should fit mobile devices as well, if you will design for that as well i can create media queries, so the site will change to look like an iphone/ipad app.

[Tamary]

@orpgol Great. i'll keep the responsiveness in mind.