Projects landing page

[abettermap]

Use same layout as langs landing wherever possible.

[abettermap]

@rperlin-ela i refactored and reusabilitized and it's looking pretty cool:

lots of colors going on but i'm ok with it if you are! user isn't likely to hang out on this page all day so a brief color attack isn't the end of the world.

if you're NOT ok with it let me know and maybe i can show you how to crank down the saturation.

couple considerations

project titles are truncated

...because i have the cards set to a fixed height. so, could make taller rows so names fit. the cards themselves could be smaller in that scenario too. the only drawback and maybe it's not even an issue is the extra space for the lil' guys:

Middle Eastern is looooong

i can make it wrap but that makes the others wider:

or no wrap, but then the rest of the rows are too tall:

i don't think it looks terrible though so i'd probably lean that way.

cards realllly feel like they'd link to languages

having lang name as card title, but linking to project, feels super weird but I don't know what the alternative is. any ideas? maybe we discussed this already.

map definitely won't be visible w/o scrolling back up

we had a shot at a no-scroll reality in langs landing due to just 4 continents, but not gonna happen in projects landing, so:

1. does that matter? it's not exactly a long way to scroll back up, but it feels choppy to not be able to see some of the markers' "legend" at same time as map (which i haven't added yet but i know it'll feel like that).
2. if it does matter, which of these two options is preferable?

A

back the way we had it (max height on container, with vertical scrolling):

B

allow another column:

C

A + B

D?

no D yet. personally i'd got with B or maaaaybe C. adding more scrolling vertically in addition to the horiz scroll w/in the groups feels weird.

in favor of C though: mobile. otherwise there's no way we'll see the map at the same time. i can probably set a breakpoint to add the vert scrolling on smaller screens only. would that work?

[abettermap]

RE: Middle Eastern: FWIW i tried ellipsis but couldn't get it to work since rotation = all hell breaks loose and troubleshooting those things becomes a mystery.

[abettermap]

i was able to fit it by increasing row height and decreasing font size for all the shtuff:

that work for ya?

[abettermap]

shoot, that causes this on langs landing though:

probably want 2x2 again yeah?

[rperlin-ela]

More later but we can live just fine with Midde East instead of Middle East if that makes a difference

On Jun 6, 2021, at 6:09 PM, Jason Lampel @.***> wrote:

 shoot, that causes this on langs landing though:

probably want 2x2 again yeah?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[abettermap]

did you meant Middle East or Mid East? either way, i'd like to stick with the usual policy of not editing the content to fit the layout rather than the other way around, but you have control over the title so do what you think and i'll make rows shorter if it's an issue. i don't like hardcoding sizes like this, it's not flexible at all, but the rotated text + grid + some scrolling = tricky, so fine for this time.

i don't think it's bad the way i've got it above, though. also if Middle Eastern is trimmed we're only talking about a bit of character savings. some of the others are long-ish as well.

Middle East would also not fit the adjective pattern of the others (except for noun Darfur, which seems like it could be Darfurian if that makes sense?).

anyhoo trivial stuff but a large convo is what to do with the popups. currently that and the markers are super baked around continent and lang-level stuff so it'll take some unraveling. might have to punt until next weekend, it's quite a mess in the code as it is, so just want to make sure i'm clear on requirements before i detangle this and markers stuff:

the markers have the same issue/feel as the cards- they seem like they'd link to a language, not a project. obviously i'll change the "View ..." btn text and heading/subheading, but that's not the issue as much as the lang-vs-projectness thing.

[abettermap]

just pushed up what i had so you can play around with it. let me know the plan for projects and i'll get back into it next weekend.

[rperlin-ela]

Langs landing is looking great, including pop-ups. Only small thought, sorry if you mentioned this somewhere already, is that on mobile it might not be obvious that one needs to scroll vertically for Europe (I only see the first three) and it might be great if possible to squeeze up to 4, so as not to have to scroll for that, given all the horizontal scrolling we’re already asking of the user.

Projects landing looks like it’ll be similarly great. I know here with 9 projects there will have to be both vertical and horizontal scrolling on mobile. Can stick with names as they are. Go with your gut on layout but it’s looking good— hopefully it’ll also be fine if we end up eventually adding a project or two also.

As for cards and pop-ups, tricky about linking to projects vs languages. Does it violate everything that’s holy in UX design— and is it even possible— to have the little cards inside (“Breton”, “Irish”) link to the respective languages while the bigger card (“Celtic”), including the bar that says Celtic and all the white space, links to the project?

I know the idea is to re-use langs landing layout as much as possible, but another thought is somehow to de-emphasize (de-box?) the individual language cards so that they don’t seem like clickable cards. I mean, I’m happy for people to be able to go to both— to click on languages from here as well as on projects as long as it’s not confusing, but the key thing is that they need to be able to get to projects. So in some sense it can’t be exactly parallel to what we’re doing with the continent groupings on langs landing. (Or if it needs to be, then we have to go back and create dummy pages for the continents, which on the face of it seems waaay not worth it). Sorry just thinking out loud here, but I’m open to any solution that feels decent and gets people to the individual projects.

I’m a little less worried about pop-ups because of the button text. I’m guessing two buttons inside a pop-up (“View Naso”, “View Indigenous”— maybe without the word “View”?) is considered crazy, but I’m not sure it’s so bad even to have just “View Indigenous” without the language option. Another idea would be to add the language name there like you added country, non-clickable but just fyi.

On Jun 6, 2021, at 7:08 PM, Jason Lampel @.***> wrote:

just pushed up what i had so you can play around with it. let me know the plan for projects and i'll get back into it next weekend.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Endangered-Language-Alliance/ela-website/issues/19#issuecomment-855477471, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5DGKO3HEWN4P3WGMXDTRP5V5ANCNFSM46GLIITQ.

[abettermap]

on mobile it might not be obvious that one needs to scroll vertically for Europe (I only see the first three)

Totes. And same issue with horizontal scrolling on the videos thumbs. “Mobile” is a really vast designation unfortunately as it includes hundreds or thousands of different screen sizes. Whatever is mobile to you on your phone… is totally different for fancypants users with huge iPhone phablets, or lil iPhone Xers like me.

The approach I’d like to take is what I did for the original NYC map breadcrumbs. I added a semi-transparent overlay mask so the stuff behind it is slightly hidden. Immediately suggests scrollability on any screen size and I think it would work for vertical and horizontal alike.

and it might be great if possible to squeeze up to 4, so as not to have to scroll for that, given all the horizontal scrolling we’re already asking of the user.

Hmm definitely won’t see the map then. And height of that scrollable section on mobile is currently based relative to screen height rather than number of rows. Four rows for you might be the whole vertical real estate of the screen to me, which makes it choppy in a different way if I based the height on rows.

I think I’d prefer the overlay mask approach either way. And a light outline around the scrollable section, or even a different bg color, so that it doesn’t bleed into the white background.

hopefully it’ll also be fine if we end up eventually adding a project or two also.

It’ll just be more scrolling but should look fine. Might consider scrollable section desktop too though. Again it’s based on screen height since that seems safer than number of rows if you want have any chance of seeing the map. We could’ve done the side by side layout but definitely would have scrolling then. M

Does it violate everything that’s holy in UX design— and is it even possible— to have the little cards inside (“Breton”, “Irish”) link to the respective languages while the bigger card (“Celtic”), including the bar that says Celtic and all the white space, links to the project?

Yeah it’s easy but I don’t think that’s solving our problem. I know we discussed it before on zoom but it’s not sitting well in my UX stomach! It’s not going to be intuitive to click those cards or at least not to know what they link to without an obvious “view project” btn for each. Even then… nnnnnot feeling it.

I know the idea is to re-use langs landing layout as much as possible

I know I put some time into it but I’m not feeling the cards for this. It just doesn’t make sense to have a bunch of items that are presented with different stuff but link to same thing.

but the key thing is that they need to be able to get to projects.

Exactly. So how about for projects landing we

keep the vertical layout Scrap the cards One “view project” btn per project group List the languages and endos and their marker symbols, within each project group …but don’t make the languages clickable

I’m guessing two buttons inside a pop-up (“View Naso”, “View Indigenous”— maybe without the word “View”?) is considered crazy, but I’m not sure it’s so bad even to have just “View Indigenous” without the language option. Another idea would be to add the language name there like you added country, non-clickable but just fyi.

I concur almost. Can we just have project title as popup heading, language name as subheading, then generic “view project” as btn text? It’s not obvious to the uninitiated that the per-instance btn text refers to a project.

I don’t think our cross-linking approach from the nyc map translates as well to the ELA website, so I’m feeling less inclined to encourage it as often here. Maybe it’s just for projects landing, but there’s not a lot of opportunities to link to individual projects besides that and the handful of other sprinkles. NYC Map is a true single-page web app and the nature of how we set it up makes it really cross-linkable IMO.

does that make sense?

[rperlin-ela]

Yeah I realize my screen is just my screen, totally leave this to you, you get the idea. Can’t totally picture the overlay mask but go for it if it seems right!

Projects landing approach sounds good. For the pop-up, "popup heading, language name as subheading, then generic 'view project' as btn text” also good

On Jun 7, 2021, at 9:33 PM, Jason Lampel @.***> wrote:

on mobile it might not be obvious that one needs to scroll vertically for Europe (I only see the first three)

Totes. And same issue with horizontal scrolling on the videos thumbs. “Mobile” is a really vast designation unfortunately as it includes hundreds or thousands of different screen sizes. Whatever is mobile to you on your phone… is totally different for fancypants users with huge iPhone phablets, or lil iPhone Xers like me.

The approach I’d like to take is what I did for the original NYC map breadcrumbs. I added a semi-transparent overlay mask so the stuff behind it is slightly hidden. Immediately suggests scrollability on any screen size and I think it would work for vertical and horizontal alike.

and it might be great if possible to squeeze up to 4, so as not to have to scroll for that, given all the horizontal scrolling we’re already asking of the user.

Hmm definitely won’t see the map then. And height of that scrollable section on mobile is currently based relative to screen height rather than number of rows. Four rows for you might be the whole vertical real estate of the screen to me, which makes it choppy in a different way if I based the height on rows.

I think I’d prefer the overlay mask approach either way. And a light outline around the scrollable section, or even a different bg color, so that it doesn’t bleed into the white background.

hopefully it’ll also be fine if we end up eventually adding a project or two also.

It’ll just be more scrolling but should look fine. Might consider scrollable section desktop too though. Again it’s based on screen height since that seems safer than number of rows if you want have any chance of seeing the map. We could’ve done the side by side layout but definitely would have scrolling then. M

Does it violate everything that’s holy in UX design— and is it even possible— to have the little cards inside (“Breton”, “Irish”) link to the respective languages while the bigger card (“Celtic”), including the bar that says Celtic and all the white space, links to the project?

Yeah it’s easy but I don’t think that’s solving our problem. I know we discussed it before on zoom but it’s not sitting well in my UX stomach! It’s not going to be intuitive to click those cards or at least not to know what they link to without an obvious “view project” btn for each. Even then… nnnnnot feeling it.

I know the idea is to re-use langs landing layout as much as possible

I know I put some time into it but I’m not feeling the cards for this. It just doesn’t make sense to have a bunch of items that are presented with different stuff but link to same thing.

but the key thing is that they need to be able to get to projects.

Exactly. So how about for projects landing we

keep the vertical layout Scrap the cards One “view project” btn per project group List the languages and endos and their marker symbols, within each project group …but don’t make the languages clickable

I’m guessing two buttons inside a pop-up (“View Naso”, “View Indigenous”— maybe without the word “View”?) is considered crazy, but I’m not sure it’s so bad even to have just “View Indigenous” without the language option. Another idea would be to add the language name there like you added country, non-clickable but just fyi.

I concur almost. Can we just have project title as popup heading, language name as subheading, then generic “view project” as btn text? It’s not obvious to the uninitiated that the per-instance btn text refers to a project.

I don’t think our cross-linking approach from the nyc map translates as well to the ELA website, so I’m feeling less inclined to encourage it as often here. Maybe it’s just for projects landing, but there’s not a lot of opportunities to link to individual projects besides that and the handful of other sprinkles. NYC Map is a true single-page web app and the nature of how we set it up makes it really cross-linkable IMO.

does that make sense?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Endangered-Language-Alliance/ela-website/issues/19#issuecomment-856371510, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5AQUWBPPTCFGTTXOY3TRVXQDANCNFSM46GLIITQ.

[abettermap]

too much? 😄

having fun resurrecting gradients from the 2000's haha

blue looks pretty rad IMO:

anyhoo i'll hold off on that but i am pushing what i have to deploy shortly. definitely abandoned the vertical text for projects landing. langs landing is same as before.

haven't touched popups yet, and the markers are still wrong. mañana...

[abettermap]

i just ran w/the gradients, deploy on its way, let me know what ya think. and be sure to try things on mobile, i added the "mask" thing i suggested.

[rperlin-ela]

Pretty stylish retro touch. At first I wondered if a few of the gradients are a little over the top, but I think I dig. And I think the mask thing, or the whole totality, does a good job of making clear that people should click "View Project"

[abettermap]

cool, if the gradients look over-retro'ed, let me know and i can dial it down. i can add as many color stops for the gradients as needed, and control the direction easily (e.g. 45 degrees or top to bottom). played around w/a few params and this was better than some of the others.

i finally got the projects markers and popups detangled from the langs stuff. i'm still not clear as a Language-ignorant Johnny User what these things mean though:

so i'd propose one of these:

or my fave:

any combo thereof would provide more clarity to non-linguists. even though i know what the things mean (because i just coded it haha), it's not clear when clicking a marker what "Circassian" means. is it a project, language, or location?

i'll run with my fave and push it up unless i hear any opposition from The Ross Corner (sounds like a podcast) in the next 15-30. not set in stone of course, but i'm going to wrap it up for the day once i confirm proj and lang instances are still working.

[abettermap]

yeah this doesn't feel terrible so ima roll w/it for now:

[abettermap]

sorry if you're getting GH-pummeled, last thing for now...

for projects instance, how would you feel about using the project color for those markers instead of gray? i know there's no legend but maybe if user arrived from projects landing (as opposed from a lang instance or the nav menu) then the color meaning will be floating around in their subconscious and the reinforcement of color will kick in at some point.

it's pretty subtle and certainly better than gray:

[abettermap]

aaaaaand if we do that, would you want that color for lang instances too? e.g. blue instead of gray here:

[abettermap]

ah but the non-project ones will still be gray. no worse than we have now though.

not related to projects landing but shouldn't langs landing popups be like this (instead of city title + country subtitle)?

similarly for langs instance, instead of this:

use this?

sorry if we discussed already....

[rperlin-ela]

Non-project ones being gray on their instance pages seems fine. I like the project colors on the others.

On Jun 13, 2021, at 7:41 PM, Jason Lampel @.***> wrote:

ah but the non-project ones will still be gray. no worse than we have now though.

not related to projects landing but shouldn't langs landing popups be like this (instead of city title + country subtitle)?

https://user-images.githubusercontent.com/4974087/121825212-b7652b00-cc76-11eb-9406-0869c2bf39a8.png similarly for langs instance, instead of this:

https://user-images.githubusercontent.com/4974087/121825237-e11e5200-cc76-11eb-8125-0bbd3dfc087e.png use this?

https://user-images.githubusercontent.com/4974087/121825257-f7c4a900-cc76-11eb-89a1-0784b51b34df.png sorry if we discussed already....

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Endangered-Language-Alliance/ela-website/issues/19#issuecomment-860287169, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5CYOK5PKO4TC3T75DLTSU637ANCNFSM46GLIITQ.

[abettermap]

Closing this. We should be good except for excluding markers without associated projects. I added that to the big catch-all issue.

Other than that might tone down the gradients but that's about it.

[abettermap]

Closed by #10