Add OnMouseOver/OnClick Links

[zang0]

In all of our maps, currently, on mouseover, we over data, but no click ability to modify the comparisons or navigate. Lets try something like the following:

_1. add the mouseover window for onclick as well so our upcoming mobile exp can benefit _2. the windows should add 2 icons attached below. 1 adds the region to the current comparison. The navigate icon takes the user to that URL.

To @erhodes87 to comment on the navigation and generate some icons if its a go. Idea is to use this in lieu of the left column for a 1st Mobile take as well as offer an adjunct for larger screens.

[erhodes87]

I'll get a first version of these out later tonight for review. Thanks!

[zang0]

Great. Thx!

[erhodes87]

here is what i mocked up. It seems like we should remain consistent with how we are using icons and colors, so i kept the plus sign with the blue for adding/comparing, and the search as the bright red for the go to URL. I also kept words in there to help people understand the expected function. Let me know what you think. https://www.dropbox.com/s/ej7bvjanzhejk7m/ODN-results_refine_V14.psd?dl=0

[erhodes87]

I also have an example using the arrow like icon as requested above. let me know if I can make any changes. https://www.dropbox.com/s/gfho58lbxd10tra/ODN-results_refine_V14alt.psd?dl=0

[zang0]

I like the second one w/ the Nav icon, more clear that it's not a search. Can we:

_1 Include the text and nav in the single mouseover in the mocks so its clear, i.e. something like:

Pierce County, Washington High School Graduation Rate (2013): 90.4%

+ Add > Go To _2 Can we add a permutation to dig deeper for cases like our crime reports. Ex: see: http://www.opendatanetwork.com/region/1600000US2407125/Bethesda_MD/city_crime/theft_rate/2015?

we want a prominent deep link to this URL:

http://bit.ly/1Yxxqmz

Note: in this case, its important to communicate that they are digging deep into what's behind the summary statistic AND they're going off site. We might also take the Crime Reports icon and incorporate.

?s: Do you think it's too crowded to have 3 icons in the mouseover in this case? If so, perhaps we can have a slightly different navigate icon that indicates you're going offsite and digging down in lieue of the red onsite navigate icon.

Find me on google chat if its easier to chat live.

[erhodes87]

I think three icons look great. Here is the design: https://www.dropbox.com/s/tu9wmzsicgoz103/ODN-results_refine_V15.psd?dl=0

[zang0]

Looks good. Per our last conversation:

_1 we want the design to also have a CrimeReports icon linking in from above the plots

_2 only pages that have the Public Safety category should have the More option. Can we also create an appropriate icon for Tosh to add based on the CR site icon: https://socrata-crimereports-ssl-herokuapp-com.global.ssl.fastly.net/assets/crimereports-553df132331c1f5a2676c4abc4f6828f.svg

[erhodes87]

here is a mock up showing how the crime reports logo might be added to the graphs. https://www.dropbox.com/s/tu9wmzsicgoz103/ODN-results_refine_V15.psd?dl=0

[zang0]

Looks good. To Tosh to implement.

[ToshMeston]

Lane, would you create the event handler to pop up a div when a region is clicked? Is the popup you use for cities customizable also? Thanks.

[zang0]

How's this one coming?

[ToshMeston]

How does this look? The usability of popping the popup on hover was a little rough as the popups tend to disappear before you can get the mouse over them, so I have only done popups when you click a region or city circle. This way will work for touch screens as well. I also removed the border from the legend and popups to make them better match the light-weight design of the V15 PSD.

Fixed.

[zang0]

Nav feels pretty good! Some comments:

_1 Lets add an x in the upper right corner to close any given tooltip. This will allow the user to close the default tooltips should the screen get too cluttered.

_2 If >1 region is selected (e.g. http://opendatanetwork-staging.herokuapp.com/region/0500000US53033-0500000US53061/King_County_WA-Snohomish_County_WA/population/population/2013?) the tooltip should include the Go to link still

_3 The More link should always be on the selected regions if they exist. Ex: http://opendatanetwork-staging.herokuapp.com/region/1600000US2407125/Bethesda_MD/city_crime/theft_rate/2015? Bethesda should have it

_4 Change 'More' to say 'Dig In'

_5 Lets close the selected tooltip when the user clicks anywhere on the map, not just when they click on another region.

_6 Can we center the Add/Go To/Dig In

_7 Can we not bit.ly-ify the More links? as a user, makes me suspicious and i want to know i'm going off domain. The CR URLs are slated to get less burly.

[erhodes87]

Tosh, do you need anything from me for these adjustments?

[ToshMeston]

Add the 1-7 things above. How does that look?

http://opendatanetwork-staging.herokuapp.com/region/310M200US42660-310M200US38900/Seattle_Metro_Area_(WA)-Portland_Metro_Area_(OR-WA)/population/population/2013?

Fixed.

[zang0]

looks terrific! totally changes how i use the product. filing anything else in individual tickets.