Download visualizations (Test.parascope.io)

[jenniferlin15]

The print and share functionality for the visualizations disappeared. Please add them back.

The existing functionality is displayed in the screen shot attached:

[jure]

This was sort of intentional, as it really eats up a lot of the horizontal space, which the visualizations really benefit from.

Could we instead consider moving these features into the menu with Edit/Start list? It also feels like a more natural position for the Share button at least (rough draft):

Happy to discuss!

[jenniferlin15]

From Sebastian:

for the visualizations tab, we'll create a new icon that will sit left of the existing stacked Edit List and Start Over buttons. This icon will unfold a drop down box with all the Share options and the Print option upon roll over. (Behaves in the same way as the Share button).

Icon could be a take off of the Safari share button:

for the metrics tab, add the new icon to sit left of the existing stacked Edit List and Start Over buttons. This icon will unfold all the Share options. Keep the Download display to the right of the metrics content where it is (no change) as that is the main action all users will be performing on the tool.

[jure]

Not sure I agree with this, seems like a way to introduce more inconsistencies. I.e., there is no other place in the app where we drop down from an icon.

It also adds the question of what the actual icon should be? The rest of our app doesn't really follow the thin right-angle visuals of iOS, so the icon suggested is not a great fit.

I'll try it out and see where we get.

[jenniferlin15]

We don't want to drop functionality but four horizontal buttons which are of the same kind is not ideal. These four actions are different by nature and so the UC best practice is to test them differently. I can have our UX guy create the icon. Will give him your input and he might decide to change it to something like the share button. On Tue, Dec 16, 2014 at 3:30 AM Jure Triglav notifications@github.com wrote:

Not sure I agree with this, seems like a way to introduce more inconsistencies. I.e., there is no other place in the app where we drop down from an icon.

It also adds the question of what the actual icon should be? The rest of our app doesn't really follow the thin right-angle visuals of iOS, so the icon suggested is not a great fit.

I'll try it out and see where we get.

— Reply to this email directly or view it on GitHub https://github.com/articlemetrics/alm-report/issues/104#issuecomment-67146276 .

[jenniferlin15]

Mockup from Sebastian:

The icons are html from Font Awesome: 1) http://fortawesome.github.io/Font-Awesome/icon/share-square-o/ 2) http://fortawesome.github.io/Font-Awesome/icon/print/
Can you work with this, @jure or do you need images for the icons?

[jure]

I can work with this, Jennifer, thanks! Looks good.

[jenniferlin15]

Very good. Sebastian is going to give his final word to move forward on this new design by Monday. I know you're working on faceted search right now so the timing should be perfect.

[jenniferlin15]

Okay here's the final design from Sebastian:

We create some space right below the Metrics Data and Visualisations tabs to put the Source information (currently located strangely at the bottom of Graph 1). Ex: SOURCE: 50 published articles from 2008-01-28 to 2015-01-16. This will give us room for the existing Print Visualizations button to remain in the same location. The Share functionality will get moved up beside Edit List and Start Over buttons. We'll use the html from Font Awesome (http://fortawesome.github.io/Font-Awesome/icon/share-square-o/), add the Share text, and outline the clickable area with a gray border.

The Share functionality is will work as follows:

Final thing: to balance the page, we will apply a small alignment adjustment on the Metrics tab and Visualizations tab. We need to create more space on the left margins. To do so, we will keep the number where it is, but align all the text beneath the title line to square with where the text begins (beside the number). Same with the visualizations. See screen shots below.

[jure]

Will implement Sebastian's design. About that last alignment, that's a bit tricky, since the numbers width varies from 4 to 6 digits. Not really sure how to go about aligning that.

[jure]

This design is really fiddly to implement, this is where I'm at currently:

Upon hover:

I'd not like to spend a lot more time on this, because like I said, it's incredibly fiddly. Perhaps the menu should be rethought at a certain point in the future, to account for the 3 different contexts (i.e. print, share, edit list), as it feels hacked on right now (and thus the implementation is necessarily hacky as well).

[jenniferlin15]

I agree, Jure. Thanks for your work. We will have to rethink all the functions once we can actually build in a way to actually legitimately download the visualizations. We couldn't build it in time for launch, and the Print button was the workaround due to performance limitations. (Not ideal at all.)

Can we make the share button much smaller (width and height) so that it is not the same size as Edit and Start Over? We went to visually distinguish the button from the stacked ones. If that is proving to be really hard, let me know. Thanks!

On Mon, Dec 29, 2014 at 10:51 AM, Jure Triglav notifications@github.com wrote:

This design is really fiddly to implement, this is where I'm at currently:

[image: image] https://cloud.githubusercontent.com/assets/238667/5571555/7a0c0e3a-8f93-11e4-8cdd-a47e932f3e19.png

Upon hover: [image: image] https://cloud.githubusercontent.com/assets/238667/5571566/a9ffb268-8f93-11e4-96ed-83e2ce38c448.png

I'd not like to spend a lot more time on this, because like I said, it's incredibly fiddly. Perhaps the menu should be rethought at a certain point in the future, to account for the 3 different contexts (i.e. print, share, edit list), as it feels hacked on right now (and thus the implementation is necessarily hacky as well).

— Reply to this email directly or view it on GitHub https://github.com/articlemetrics/alm-report/issues/104#issuecomment-68285542 .

"The blessed will not care what angle they are regarded from, Having nothing to hide. Dear, I know nothing of Either, but when I try to imagine a faultless love Or the life to come, what I hear is the murmur Of underground streams, what I see is a limestone landscape."

• WH Auden

[jure]

Managed to get a bit closer to the design:

On hover:

I didn't make it smaller, but I made it less intense (which was easier to make it look OK). I think this is good now, but feel free to reopen if you think something else could be done.

[mfenner]

Something related to this: how can a user go to a shared report, log in, and add it to his list of reports? The User/Report relationship is many-to-many, so multiple users can be associated with a single report. This could be done in a future iteration, but is easy to implement.

[mfenner]

One other consideration for the share button is to use icons from Glyphicon or Font Awesome, more consistent with the share icon.

[mfenner]

Can we change the button text from Edit List to Create Report if a user goes to a report (e.g. via share button) that is not yet associated with his account? The link should be changed accordingly.

[jenniferlin15]

New button looks good, Jure. I think it works. Let's go with it.

Martin, the button is indeed from Font Awesome as many of our components are.

On Mon, Dec 29, 2014 at 1:19 PM, Martin Fenner notifications@github.com wrote:

[image: bildschirmfoto 2014-12-29 um 22 18 36] https://cloud.githubusercontent.com/assets/23151/5573168/b1f89916-8fa8-11e4-8ebf-11de4ae38809.png

— Reply to this email directly or view it on GitHub https://github.com/articlemetrics/alm-report/issues/104#issuecomment-68304137 .

"The blessed will not care what angle they are regarded from, Having nothing to hide. Dear, I know nothing of Either, but when I try to imagine a faultless love Or the life to come, what I hear is the murmur Of underground streams, what I see is a limestone landscape."

• WH Auden

[mfenner]

@jenniferlin15 I was suggesting to use the icons for Google+, Facebook, Twitter and Email from Font Awesome, e.g. or

[jenniferlin15]

oh i see. sorry - thought you meant the Share button. if you want to pursue this, fine with me. i would prioritize this lower on the list. we have a bit of template alignment work left to do, which Sebastian is mocking up now. this will put a sense of margins back into the template and restore the content proportion feel and look. that's highest priority before we launch.

On Mon, Dec 29, 2014 at 1:40 PM, Martin Fenner notifications@github.com wrote:

@jenniferlin15 https://github.com/jenniferlin15 I was suggesting to use the icons for Google+, Facebook, Twitter and Email from Font Awesome, e.g. [image: bildschirmfoto 2014-12-29 um 22 39 17] https://cloud.githubusercontent.com/assets/23151/5573349/af6cc4da-8fab-11e4-8f06-5fee958b2dca.png

— Reply to this email directly or view it on GitHub https://github.com/articlemetrics/alm-report/issues/104#issuecomment-68306127 .

"The blessed will not care what angle they are regarded from, Having nothing to hide. Dear, I know nothing of Either, but when I try to imagine a faultless love Or the life to come, what I hear is the murmur Of underground streams, what I see is a limestone landscape."

• WH Auden