Create initial wireframe mockup

[abettermap]

Description

Coding a UI can be a lot more efficient if there's good guidance to start from, so let's get some of the main stuff sketched out on paper and then maybe on to Google Slides for discussion:

App-wide layout

• Top-level navigation: off-canvas on mobile? Fixed position?
• Header/site banner: fixed above content or adjacent to it?
• General layout on sm, med, lg screens

Map

• Map itself: always visible or can some components (listed below) be on top of it temporarily? Super clean start with btns that open more options, or show options first? Probably find a balance.
• Panels on top of map vs. adjacent (pros and cons); collapsible? seems overkill/wishlist either way this early.
• Popups: simple and full "Info/Detail View" (Popups/Info View: create initial design #23 has much detail)
• Misc: any sort of map-wide settings, maybe something like "Auto-zoom to results on filter change"

Controls and filters

• Advanced Search form/s: modal, side panel, vertical menu? Modal easiest by far. Should Search form be opened/toggled by a button next to its corresponding layer, or should it be its own tab/view? Again, modal easiest and seems intuitive and clean if hidden by default and triggered by btn. Could also argue for collapsible selection below layer name, but based on all the filtering options that could get crowded fast (could have additional collapsed sections but modal or dedicated nested panel seems better since less clicking for users). It could also be a drill-down panel one level deeper than the main controls panel.
• Layer controls: visibility toggles (switch vs. checkbox), baselayer switcher (???); language points only: symbology, label controls. Should Adv. Search btn be near here or totally separate?
• Zoom vs. filter: consider including a section with dropdowns for zooming to geog. extent (e.g. Neighborhood, borough, county, etc.) rather than filtering. Separation of concerns and maybe more intuitive this way.
• Map controls: hide on mobile? zoom in/out, home, other?

Other views and components

Less detail than map stuff, but worth noting:

• Results table: need to be seen w/map 24/7 or can it be separate page? Consider how it relates to routing and filtering as well. Seems like user should have an easy way to access filters from any view since language points' state in map should be one and the same with the tabular results. Also consider how routing from the table plays into this. If table is on its own page, seems like clicking a "View Details" btn for a record would show you the map with the "Details View" just as if you'd clicked on a simple popup in the map.
• About page
• Some way to submit feedback: bug reports, feature requests, questions, and a way to report language corrections
• Anything else? I'm sure I'm missing something, it'll probably come up when the pencils are out.

Interactions

• Definitely add relationships to show how each view influences the other.
• Routing notes, where applicable.

Related items

• Inspirations (too many!): Establish UI likes/dislikes from existing maps #13
• Popups/Info View: create initial design #23 has a lot of info.
• Jason has other project whiteboard, may be of use

Resolution

Bust out the analog tools.

[abettermap]

Super rough but it's a start, and there's a few patterns I can start coding now: https://drive.google.com/drive/folders/17_GpbkGXOMduuHznQeEuT9xS_6qY97u5?usp=sharing

[abettermap]

Got as far as we need to with this- my paper mockups weren't very legible but I walked through most of the concepts w/Maya over Zoom today and I think we're past wireframe stage now. Got some agreement and direction from the team on what I've coded so far, so let's call the wireframe step complete, and can make new smaller issues if needed, but most likely coded prototypes going forward.