participedia / frontend

DEPRECATED - see https://github.com/participedia/api/ instead
MIT License
3 stars 2 forks source link

Map overlay graphics for review #903

Open jesicarson opened 5 years ago

jesicarson commented 5 years ago

A few options for the homepage.

There are some considerations to work out, ie:

As a beginning for visuals to consider, I was thinking that after activating the map, a small red info icon in the bottom right corner of the map could bring the overlay back up if people wanted to see it again. And, when re-sizing screens, in option A the content would move towards the centre of the screen, and options B and C the large text would disappear and the popup and anyone can join text would move to centre.

Feedback welcome!

Info icon on map: all - map info icon

Option A: all - map overlay a

Option B: all - map overlay - b

Option C: all - map overlay - c

scottofletcher commented 5 years ago

Not a fan of B or C - there's too much text to take in. Ideally, the 'tag line' should be front-and-centre and needs to be updated to "A collaborative effort to document public participation and democratic innovation around the world". Maybe the version on the map doesn't need the "around the world" part though? The map kind of makes that obvious.

I'm also not a huge fan of having "Public participation occurs when citizens collaborate to influence civic life" for a couple reasons: 1 - 'citizenship' is more of a Western/Global North concept. Public participation also occurs in non-governmental settings (including organizations) where citizenship may be out of reach for many/most or it may not exist in the same way we conceive of it (ie. as a 'license' - often but not always received at birth) to participate and benefit from the actions of other community members as an equal) 2 - influencing civic life is not a requisite of public participation. This is more of a poli-sci definition (ie. "policy/measurable political change or it didn't happen"). we have cases of informal participation that had their direct influence(s) on personal/private life (ie. outside of the public/civic sphere). 3 - formatting to look like a pin on the map which makes me question the utility of the other pins (ie. are they just for show? are they cases?)

As well, I would avoid defining or narrowing the definition of public participation. even though Democratic Innovation, Participatory Democracy, Civic Engagement, and Participatory Governance are all appreciably broad, we've learned that our readers take things literally - as in the case of the heading "Deliberation, Decisions, and Public Interaction" (which was similarly meant as a 'catch all' for ever conceivable type of participation but which clearly failed).

I would be in favour of A with some changes:

Random suggestion: maybe the Login button at the top right should be red like "Join Now"?

jesicarson commented 5 years ago

@scottofletcher what do you think about removing the tag line from below the map area - placing it on the map overlay? so new users would see it - BIG, and you could always click the info icon to bring it back if you wanted to. This would be rather than having the tag line twice - once on the overlay and then consistently below it. What do you think?

I also agree that the map pin thing could be confusing and that people take things literally. Do we want to avoid placing our own definition on public participation at all? i just wonder if people get what "public participation" is right away, and was thinking if we define it or give an example it might help. I think at least there should be an FAQ question under the help menu that answers "What is public participation?" (maybe we could be honest and say it can't really be defined because it is so complex and broad, but here are some ways to think about it.. or something)

scottofletcher commented 5 years ago

@jesicarson RE tag line placement: sorry that's what I meant! Here are the elements I'd combine:

RE definition: avoid for now. we're actually working on a glossary of terms like 'public participation', 'deliberation', 'democratic education', (etc.) but we need all of our partners to weigh in first. right now there are just too many definitions and too much disagreement over those definitions to put anything out there. for now, let's adapt the list of 'general types of methods' and/or 'general types of tools' to give examples of what participation looks like. For example: Public participation occurs when:

Does that work? When would you need a full list by?

jesicarson commented 5 years ago

Ok this is good. Thanks! Regarding a definition, I think that list is great for the FAQ section, and it can always be updated.

scottofletcher commented 5 years ago

those were just the first few examples, I'd like to revise the list before it gets put up

jesicarson commented 5 years ago

Sounds good. You can post the list whenever you're ready in #904 and the copy deck.

plscully commented 5 years ago

@jesicarson @scottofletcher I think we're getting close on this. I prefer removing the tag line from below the map area and placing it on the map overlay. I created this doc in the Copy Deck folder with a summary of possible text for the overlay & text in lower left corner of map. That should be a better place to word craft than here. We can also wait a while to work on the best way to describe/define public participation, and to decide where that text belongs. https://docs.google.com/document/d/1Nmdagogb04JXzYkCFdVnd3ckpzWevl3TbjPJA6G6kzc/edit?usp=sharing

jesicarson commented 5 years ago

@scottofletcher @plscully Updated designs E & D for review:

Option D all - map overlay - d

Option E all - map overlay - e

plscully commented 5 years ago

I like both options and don't have a strong opinion about which one is preferable. It's just the font size that differentiates them, right? @jesicarson Can you please run this by a couple of people with good eyes for design and see what they prefer? Thanks!

jesicarson commented 5 years ago

Thanks Pat will do!

scottofletcher commented 5 years ago

I like the second version! Can the Join Now button be bigger, though? And can it be centred over the "Anyone can..." section?

plscully commented 5 years ago

@scottofletcher I think the Join Now button is positioned so that its left-hand margin aligns with the overlay and the cc. That is probably the cleanest way to present it. I don't have an opinion about the size of the button.

scottofletcher commented 5 years ago

@plscully yes, I see that it's aligned to the CC. I was just speaking from personal opinion that I think it would look better if it was 1) larger, and 2) either aligned with "Anyone can" or was centred over that paragraph. whatever the design-folks think is best though.

jesicarson commented 5 years ago

F all - map overlay - f

G map overlay g

H map overlay h

scottofletcher commented 5 years ago

Oh my gosh I love it! I can't decide which I like better. F is good but it's missing the map key (and adding it might make things too busy). G is probably my favourite, but could we use the new tag line?

plscully commented 5 years ago

I like Option H the best, but with Option G's styling of the longer, thinner "join now" with the pins below it.

plscully commented 5 years ago

Yes, so I agree with Scott that G is best, but with the new tag line

scottofletcher commented 5 years ago

tag line's good, yeah? mashup of a bunch of press release intros Jesi and I drafted!

jesicarson commented 5 years ago

I think its getting there! Not 100% sold on the word "written" because not all of the contribution is about writing (leaves out contributions of media and data), but it does rhyme, which is cute :P

Here's the latest (OPTION I) with your input. I will be running this by Amber Thurs and will let you know if she has feedback.

map overlay i

Here's the homepage which will load the google map once the overlay is clicked (displays info icon in bottom left corner, which if clicked would bring back the overlay) (note, mockup shows old xyz map, not google map - we should try to colour match if possible):

google map w info icon bottom left

plscully commented 5 years ago

We could substitute either "created" or "produced" for "written". Created seems better to me; it rhymes a bit and it plays off our "creative commons" stance

scottofletcher commented 5 years ago

'community-driven, collaboratively created' just doesn't sound right... I think it's one too many 'c's! what about 'generated'? or 'authored', 'recorded'? otherwise, I like 'produced' I personally don't think 'written' implies just text, but maybe that's just me. I think people get that, by 'written', we mean compiled/created. the enhanced visuals of the site imply that images/multi-media are a part of 'documenting'.

jesicarson commented 5 years ago

@ascott latest design files here

jesicarson commented 5 years ago

Latest mockups (OPTION J)

Homepage Default (overlay) Map Overlay - Home Default

Homepage with Map Activated (overlay can be reactivated by clicking the info icon) Map Overlay - Map Activated

Mobile design in progress Screen Shot 2019-05-07 at 1 56 32 PM

plscully commented 5 years ago

Looking good! Very nice!

scottofletcher commented 5 years ago

@jesicarson @ascott The tagline needs to be changed at the bottom of the page as well

jesicarson commented 5 years ago

@scottofletcher @plscully FYI: Further review by Amber of the tagline has led us to defer back to the original tagline: "A global community sharing knowledge and stories about public participation" because it is shorter visually as well as easier to digest informationally, at-a-glance. I will also be updating the visual design of the overlay following the review by Amber today.

jesicarson commented 5 years ago

Post review, updated draft "Option F" from an earlier iteration, now OPTION K:

OPTION K - Homepage default Map Overlay F updated-Homepage Default

OPTION K - Map activated with legend (join now button persists until logged in) Map Overlay F updated-Activated Map not logged in