Desktop layout: de-float (again)

[abettermap]

Full circle back to the orig suggestion or something similar. No more crippling map offsets.

[abettermap]

@rperlin-ela Any opposition to this? It would help a lot of things in the code to reduce complexity for current and other stuff in the scope, ranging from auto zoom map to auto hide panel bar to incorrectly positioned mobile map pop-ups, as well as some difficulties I'm having with the search panel. So let me explain the idea since the mock-up isn't quite 100%.

Mobile

Mobile would stay as it is now, the only exception possibly being a 24/7 search button in the bottom right corner of the map instead of in the panel bar. The button would always be shown except on the homepage. It would trigger a search tabs popout like we originally discussed rather than smash the search tabs into the panel (except Home of course, which will still show the search tabs 24/7).

Alternatively, we could just keep the search icon in the right side of the panel title bar like we discussed, and not put it in the map. But regardless of where the button goes, I'm leaning towards popout for non-Home views.

Right sidebar (desktop only)

This would not actually be filled in with color like shown in the picture, it would just be the normal map buttons like we have now, and likely just a green border along the right side edge to frame it in a bit and not waste map real estate.

The only addition would be adding the search icon where I have the settings icon shown in the photo (I made it before we decided to axe settings). 

Left nav sidebar (desktop only)

Pretty much how I have it pictured, except Details becomes Info and maybe its button goes at the bottom of the bar on its own and possibly has its text omitted since an ℹ️ button is pretty intuitive.

Bottom bar (desktop only)

I could go either way on this one but it seems like a easy place to sprinkle in about, help, and feedback links in a subtle manner on desktop and creates a nice framing effect on the page.

Main content

This wouldn't change, except if we add the search icon to the bottom right corner of the map then we could remove it from the top bar and only keep the Close button up there.

As for the colored bar background, we could either omit it like I've shown, or keep it like we have now. With the new layout change I might be able to hide it on scroll, which I was not successful at getting to work yesterday. 

Big one but any thoughts? 

[rperlin-ela]

This is tough, since I'd love to cut through a bunch of problems and keep the momentum going. But at first glance, it kind of just doesn't feel right. It could be because I'm so used to the way things are. But I think what feels strange is having those panel icons in your face all the time top left, when I'm used to having them in my peripheral vision and being able to focus on the content itself. Back button feels extra strange in this layout.

I could see having Search somewhere outside the panel, and I don't think I have any objection to pop-out, but I would want to make sure the placement doesn’t feel “neither here nor there” somewhere random between the zoom tools and the panels

[abettermap]

i think i see what you mean about the Back btn, but it doesn't feel as strange as our current layout on desktop when the panel is collapsed. looks quite silly:

only slightly better w/o panel margin:

much better w/sidebar:

maybe we should remove the panel toggle from desktop?

[abettermap]

(and go with the second layout above, that is)

[rperlin-ela]

That’s a good point, it does look a little silly collapsed, but not too painful and kind of an edge case. And indeed the collpased sidebar works. Is it too weird to collapse “up”? I don’t collapse very much, but overall I think it’s better to allow if possible even on desktop

On Mar 24, 2021, at 10:30 AM, Jason Lampel @.***> wrote:

(and go with the second layout above, that is)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/212#issuecomment-805869577, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5DKW4BK2C2CADELE7TTFHZR3ANCNFSM4ZVQHFIA.

[abettermap]

Collapsing to top is not a bad idea, would bring more layout balance and be a definite improvement over what we have, although keeping the floating panel/nav approach intact, even though I worked so hard for it, does not help with the zoom/offset issues.

I do think the sidebar looks better in all scenarios though, and the Back strangeness is pretty minimal, so wouldn't mind a third party's opinion on that at some point. 

[rperlin-ela]

Sure we can kick it over to Maya and others, but I think the issue of Back (not to mention Timeline making things even more vertically crazy) would have to be solved. And even without that issue I feel from your sample that uncollapsed it’ll be pretty busy to have all that up top unless you can work some visual tricks. I can’t fully grasp how this relates to zoom and offset issues but the basic layout is a very fundamental thing which I think deserves top priority

On Mar 24, 2021, at 11:01 AM, Jason Lampel @.***> wrote:

 Collapsing to top is not a bad idea, would bring more layout balance and be a definite improvement over what we have, although keeping the floating panel/nav approach intact, even though I worked so hard for it, does not help with the zoom/offset issues.

I do think the sidebar looks better in all scenarios though, and the Back strangeness is pretty minimal, so wouldn't mind a third party's opinion on that at some point. 

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

[abettermap]

but I think the issue of Back

what is the issue exactly? is it that it doesn't have the green behind it and if it did would potentially bleed into the nav?

(not to mention Timeline making things even more vertically crazy)

not sure i understand this one either. timeline would stay the same in any layout.

to me i don't see the proposed nav as "up top" as much as "to the left" but that could definitely just be me, so if Ben agrees to help i think this would be a good one to throw to him and the group. i'm totally fine with being wrong, but more fine with it if it's from several users so wouldn't mind the extra cooks in the kitchen on that one!

[rperlin-ela]

I’m totally fine with opening to the group and Ben (I don’t think it should just be Ben), but I can’t speak to how long feedback and convo might take. I’ll be happy if everyone’s happy, and I’m totally not an expert here, just reacting to your two screenshots. To me, in those screenshots, it looks like Back points to Home and it just creates a lot of buttony things to click on in the upper left. Having a timeline drop down from Back would seem to open another set of clickable vertical options directly parallel to the panel buttons— so even more top-left Nav stuff, like 10 things to click on. As you wrote, top left is a special area, and that just feels like a lot of nav, a lot of decision fatigue up there. I want people to focus on what’s inside the panels, not where they’re going next. I want them to read the Descriptions, to look at the endonyms etc. and I enjoy how basically clean that top left space currently is. I like the panel buttons kind of being demoted down as they are now. But this is just my opinion, maybe there’s a middle ground, and I’m definitely thinking more about desktop here. (But in any case I think you said you’d leave mobile as is?)

On Mar 25, 2021, at 12:00 PM, Jason Lampel @.***> wrote:

but I think the issue of Back

what is the issue exactly? is it that it doesn't have the green behind it and if it did would potentially bleed into the nav?

(not to mention Timeline making things even more vertically crazy)

not sure i understand this one either. timeline would stay the same in any layout.

to me i don't see the proposed nav as "up top" as much as "to the left" but that could definitely just be me, so if Ben agrees to help i think this would be a good one to throw to him and the group. i'm totally fine with being wrong, but more fine with it if it's from several users so wouldn't mind the extra cooks in the kitchen on that one!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/212#issuecomment-807001854, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5DI6BM2UWUHSPLD2W3TFNM3HANCNFSM4ZVQHFIA.

[abettermap]

interesting, i see what you mean although i don't "feel" it, as my eyes are drawn to the Back btn and not the nav. its shadow, contrast, font size, and color (esp. against gray bg) stand out far more than the nav to me, especially since the nav would be stationary and more of a "oh that sidebar thing, it's been there from the beginning of my little UI journey" whereas Back only appears dynamically, which makes it even more apparent in that sense.

i guess i should've made a disclaimer on my screenshots or anything like that, which is that they're usually just meant to be quick ideas, not "this is 100% of the way i want the UI to look", so my bad for not pointing it out.

either way i think we should shelve this for now, it would be a lot of work and our current setup is technically working.

[abettermap]

(But in any case I think you said you’d leave mobile as is?)

yeah i'm pretty happy w/mobile as-is. really wish i could get the auto-hide to work on scrolling panels though. that's been the 💩 iest UI-ness failure of my week. i even tried dropping in the exact component i built in the sandbox into our code, just couldn't make it happen.

[abettermap]

what if the vertical sidebar nav was shown only in the collapsed position on desktop, but otherwise the same as we have it now (minus the floating on top of the map, of course, which is the main motivation for the issue) with the bottom nav btns when open? again, mobile would look the same, as would tablets up to 960ish wide.

[rperlin-ela]

So basically same as now, but on desktop it collapses to a vertical sidebar like your bottom-most screenshot (above)? I guess as long as it feels natural and not weird, sounds potentially fine, given that my objection is to the vertical sidebar when open

[abettermap]

correct, same as now but without the floatage. here's as close as i could get to the vision w/o too much time:

...on a 2012 13" laptop, and then on a 23" HD monitor:

the right side bottom buttons (only visible on desktop):

• search btn, which would just be another omnibox popout for easy access (in case user is scrolled down too far in the panel and the top bar is hidden), and some more real estate to promote your "search language SITES" mission. probably don't need "Search Locations" in there, just the omnibox.
• help btn would be a direct line to /Info/Help for users who want to know what's up frequently.

mobile users would still have access to all the critical things, and desktoppers just get some extra bonuses.

[rperlin-ela]

Seems fine to me

On Apr 7, 2021, at 10:55 AM, Jason Lampel @.***> wrote:

 correct, same as now but without the floatage. here's as close as i could get to the vision w/o too much time:

...on a 2012 13" laptop, and then on a 23" HD monitor:

the right side bottom buttons (only visible on desktop):

search btn, which would just be another omnibox popout for easy access (in case user is scrolled down too far in the panel and the top bar is hidden), and some more real estate to promote your "search language SITES" mission. probably don't need "Search Locations" in there, just the omnibox. help btn would be a direct line to /Info/Help for users who want to know what's up frequently. mobile users would still have access to all the critical things, and desktoppers just get some extra bonuses.

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

[abettermap]

Goin' fer it

[abettermap]

this was just an accident but it feels pretty natural.

as with all the hypothetical prototypes, don't assume it's exact. still in idea phase, but main things i'd change (on mobile):

• Home title bar would have the logo, either in a small version of its full state, or the favicon.
• panel would be taller than shown in screenshot.
• auto-hide top bar wouldn't make sense or be needed anymore. but we'd still keep the "back to top" btn.
• probably a green border at top edge of panel, or a shadow to show elevation "above" the map
• the map btns (zoom in, out, etc) could be smaller.
• the "panel close" X would do the usual, but i'd need to restore the floating arrow btn in order to have a way to open it back up again. or, just rely on clicking the bottom nav. could see it both ways.
• the Home btn icon in the screenshot could maybe be the favicon? logo in top-left is pretty standard.

drawbacks: not a lot, although it's kind of a long drive to the top of the screen on mobile. but i don't see the buttons up there being used anywhere near as often as the map (which would now be lower on the screen and easier to access) or the bottom nav and panels, the latter of which would have more room to see the important stuff in the panel.

i started making desktop changes first and it was pretty straightforward (and soooo nice to get rid of those offsets), just spitballing what to do on mobile so let me know what you think. i've always felt the panels didn't get the space they deserve on mobile (although auto-hide top bar helps), nor did the map, so proposed layout would alleviate both.

[rperlin-ela]

I think I’m really feeling this. Might be some details to iron out, and will also want to pay attention to tablet, but I’d say full steam ahead

On Apr 9, 2021, at 12:14 PM, Jason Lampel @.***> wrote:

this was just an accident but it feels pretty natural.

https://user-images.githubusercontent.com/4974087/114208415-ae747800-991a-11eb-9721-4a9b8092618d.png as with all the hypothetical prototypes, don't assume it's exact. still in idea phase, but main things i'd change (on mobile):

Home title bar would have the logo, either in a small version of its full state, or the favicon. panel would be taller than shown in screenshot. auto-hide top bar wouldn't make sense or be needed anymore. but we'd still keep the "back to top" btn. probably a green border at top edge of panel, or a shadow to show elevation "above" the map the map btns (zoom in, out, etc) could be smaller. the "panel close" X would do the usual, but i'd need to restore the floating arrow btn in order to have a way to open it back up again. or, just rely on clicking the bottom nav. could see it both ways. the Home btn icon in the screenshot could maybe be the favicon? logo in top-left is pretty standard. drawbacks: not a lot, although it's kind of a long drive to the top of the screen on mobile. but i don't see the buttons up there being used anywhere near as often as the map (which would now be lower on the screen and easier to access) or the bottom nav and panels, the latter of which would have more room to see the important stuff in the panel.

i started making desktop changes first and it was pretty straightforward (and soooo nice to get rid of those offsets), just spitballing what to do on mobile so let me know what you think. i've always felt the panels didn't get the space they deserve on mobile (although auto-hide top bar helps), nor did the map, so proposed layout would alleviate both.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/212#issuecomment-816793616, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5HB6LXNQRQHPYRTI73TH4RWVANCNFSM4ZVQHFIA.

[abettermap]

Cool. It will take some work but seems doable.

For tablet, assuming I understand correctly, I think we're at an impasse on layout. We've always had portrait tablet the same as mobile phones because the narrow 50-50 vertical strips of panel and map I think you are suggesting are not ideal. I can certainly work on improving the panel layout for tablets within the panel though, if that's the main problem? I agree that it's not stellar in portrait, but that screen size and orientation have always taken a backseat. Main thing is that it's clean and legible and usable, which it is, but the priority is on the larger and smaller screen sizes since presumably most users will be on either of those.

Do you have Google Maps on your iPad? I believe their layout for tablet is what we're currently using.

[abettermap]

btw i have no idea what these are! they just show up on my phone when i use the GH iOS app

are you wed to the top bar auto-hide? i mainly did it to increase space on mobile, but it feels far less necessary on desktop, and this new layout will make that bit harder to adapt. main thing i want to keep from that whole effort is the back to top btn, which is useful on all screen sizes.

[rperlin-ela]

strange but I don’t see them. not wed to that auto-hide, feel free to kill. all sounds good, do what you can

On Apr 9, 2021, at 1:01 PM, Jason Lampel @.***> wrote:

btw i have no idea what these are! they just show up on my phone when i use the GH iOS app

https://user-images.githubusercontent.com/4974087/114215328-b6d0b100-9922-11eb-9ad5-78259de5ca1d.png are you wed to the top bar auto-hide? i mainly did it to increase space on mobile, but it feels far less necessary on desktop, and this new layout will make that bit harder to adapt. main thing i want to keep from that whole effort is the back to top btn, which is useful on all screen sizes.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/212#issuecomment-816821269, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5EABR4HMJ5AVY22X6DTH4XFXANCNFSM4ZVQHFIA.

[abettermap]

sorry one more thing, but i'm scrapping my "vertical nav" bar if that's ok? we'd just not have a nav bar shown on desktop but rather a lil' floater like the good old days:

you said you don't use the "close panel" btn often on desktop (i don't either), but one suggestion from that email from the NY guy included a "fullscreen" option (i assume he was referring to the map), and this would be more or less that.

[rperlin-ela]

Sure, go for it.

Test a little on tablet if you can just to see, especially as you make these changes. On Portrait the panels take up a lot of the screen

On Apr 9, 2021, at 1:04 PM, Jason Lampel @.***> wrote:

sorry one more thing, but i'm scrapping my "vertical nav" bar if that's ok? we'd just not have a nav bar shown on desktop but rather a lil' floater like the good old days:

https://user-images.githubusercontent.com/4974087/114215706-25ae0a00-9923-11eb-9177-231d3030aab6.png you said you don't use the "close panel" btn often on desktop (i don't either), but one suggestion from that email from the NY guy included a "fullscreen" option (i assume he was referring to the map), and this would be more or less that.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/212#issuecomment-816823462, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5FRG7MLOBMDHBTDAW3TH4XSVANCNFSM4ZVQHFIA.

[abettermap]

This is what I see on my iPad, are you seeing something different?

[abettermap]

It's coming along on Phone, still have some tweaks to do for sure and especially on the awkward tweeters in the middle of the screen size spectrum, but here's how it's looking so far.

The only thing I've noticed that feels really weird with this layout is the panel close button. It feels like it would affect the panel title bar too, but it only closes the panel in this new layout. So, either it seems like it should:

• follow suit with desktop and go truly full screen, hiding everything and then show the floating panel toggle button. Maybe towards bottom of screen?
• or, change the button to an icon that indicates maximize-ness
• or drop that button entirely and instead have a "full screen" button below the 3D button, on all screen sizes, and it changes back and forth between "full screen" and "collapse" icons.

The X feels pretty natural on desktop though, mainly because the panel floating toggle appears next to where the panel used to be. It feels natural on mobile too, except for the fact that it doesn't close the title bar.

I'll keep plugging away at some options but let me know if you have any initial thoughts. I can push up what I have although it's not ready at all in the tablet landscape department. Probably just a few lines of code but they're mixed across a lot of files since there's so many bits affected by this.

Btw not having to deal with offsets anymore fixed lots of problems like the off centered pop-ups on mobile, and indirectly the issue where neighborhood click would make the map go back to 2D. I wouldn't be surprised if it's a little more performant too because so many things were riding on the complex offset stuff.

[rperlin-ela]

Looking pretty nifty to me on desktop, and I’m glad it’s solving problems. Mobile screenshot looks good too. Keep pluggin!

On Apr 9, 2021, at 7:56 PM, Jason Lampel @.***> wrote:

It's coming along on Phone, still have some tweaks to do for sure and especially on the awkward tweeters in the middle of the screen size spectrum, but here's how it's looking so far.

https://user-images.githubusercontent.com/4974087/114250657-a852bb80-995b-11eb-91cc-1518c5363e12.jpeg The only thing I've noticed that feels really weird with this layout is the panel close button. It feels like it would affect the panel title bar too, but it only closes the panel in this new layout. So, either it seems like it should:

follow suit with desktop and go truly full screen, hiding everything and then show the floating panel toggle button. Maybe towards bottom of screen? or, change the button to an icon that indicates maximize-ness or drop that button entirely and instead have a "full screen" button below the 3D button, on all screen sizes, and it changes back and forth between "full screen" and "collapse" icons. The X feels pretty natural on desktop though, mainly because the panel floating toggle appears next to where the panel used to be. It feels natural on mobile too, except for the fact that it doesn't close the title bar.

I'll keep plugging away at some options but let me know if you have any initial thoughts. I can push up what I have although it's not ready at all in the tablet landscape department. Probably just a few lines of code but they're mixed across a lot of files since there's so many bits affected by this.

Btw not having to deal with offsets anymore fixed lots of problems like the off centered pop-ups on mobile, and indirectly the issue where neighborhood click would make the map go back to 2D. I wouldn't be surprised if it's a little more performant too because so many things were riding on the complex offset stuff.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Language-Mapping/language-map/issues/212#issuecomment-817032881, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMNKB5FMSIPW2WTN5A5NVXDTH6H3FANCNFSM4ZVQHFIA.