General facelift to landing page

[thatbudakguy]

Copied from @mapninja's notes:

Earthworks is now 7+ years old, and as such, is in need of a UI refresh.
Suggest a survey of Geoblacklight and other data catalog instances for comparison.
Modernizing icons and redesigning of the "Explore" pre-facted searches images.

[thatbudakguy]

blocked while we (the GIS team) collect some examples of other GIS data catalogs we like and post here with notes for UX designer.

[dmede]

This is the first in a series of comments on EarthWorks design updates. Design suggestions based in part on the Harvard Geospatial Library (HGL) site https://hgl.harvard.edu/#.

Landing page layout:
EW issue: EW landing page is a narrow scroll down design. On a typical laptop screen the bottom of the main interaction area is not visible. A portion of the search map is off the page. Eyespan between page elements is large with lots of waste space between elements. Footer is out of site, requires scroll to find bottom of page. Overall feel is of quickly designed layout.

Compare to HGL: HGL layout is 50/50 “map forward”. Splits page L and R between search map and Search box with Topic facets. Wider design fits modern screens. Easier to navigate, everything is in eyespan. Footer is clearly visible, no need to scroll page to orient yourself. Has more modern/clean look.

Recommendation: Change EW to a 50/50 split layout on wider page to eliminate the need to scroll to see all main page elements. Tighten up element spacing. Reduce unneeded static text guides like “Explore” or “Search an area…”. Move Topic box labels inside their boxes.

[dmede]

Search map extents:
EW issue: EW main search map is a full width frame that shows the map as a repeated set of land masses. Confusing to look at initially. On the results page the map frame is square but small and the map contents are still scaled out too much, showing too much repeated terrain. Different colors between map frame background and map water highlight the awkward arrangement of the map extent inside the map frame.

Compare to HGL: HGLs 50/50 page design allows for a larger map overall, with a better aspect ratio that better fits the map extents. The initial map view still repeats land masses but the effect is less obvious. Color matched ocean and map frame background make the map appear more seamless.

Recommendation: move to 50/50 split design, use a larger square map frame, set frame and ocean colors to be the same or similar. Set initial global map view to a larger scale (smaller area shown) to reduce duplication of map areas.

[dmede]

Frames
EW issue: EW uses many individually framed boxes for site elements. The frames add unneeded visual complexity, are distracting and appear dated.

Compare to HGL: HGL uses relatively few framed boxes. The site is broken up into seamless panels or areas and uses visual hierarchy/contrast to separate page elements. The look is cleaner, more modern, less distracting.

Recommendation: Tighten up map design overall. Move to contiguous panels instead of discrete boxes for website elements. Areas that need to be separate “buttons” do not need to be framed if designed for contrast (see Explore boxes on HGL).

[dmede]

Explore/Topic quick link boxes:
EW issue: EW “Explore” boxes use detailed image thumbnails that can be hard to view on small screens. The specific images do not adequately suggest the breadth of each topic. The detail and color makes it impossible to label the boxes internally, forcing labels outside the box, increasing wasted space in layout. Mousing over the boxes does not create state change.

Compare to HGL: HGL uses simple icons in a unified Explore box design. Explore text can be included inside ea box. Mousing over the boxes creates an immediate state change that indicates the box is a link.

Recommendation: Regrid the Explore boxes to be 4x4. Use unified symbology with topic icons and internal labels. No frames on boxes.

[dmede]

Clearing a search
EW issue: EW uses “Start Over” button to clear an active search which returns you to the Home page. This is an unnecessary visual trip once the user is in the active search and facet area.

Compare to HGL: HGL uses a “clear all” link to remove search tags without moving you off the current page.

Recommendation: Drop the home page reset function of the Start Over button, consider using the “clear all” text instead.

[dmede]

Results page, search box and tags layout
EW issue: On the results page, EW puts the search bar in a separate area above the search tags for a given search. Looks disjointed, wastes space to right of search bar.

Compare to HGL: HGL keeps all search related items together in the dame panel, the search bar and resulting search tags.

Recommendation: move search tags next to search bar to simplify page layout and help relate active tags with current search.

[dmede]

Search map detail:
EW issue: EW main search map uses the Humanitarian OSM base. The HOSM map is designed for a different use case and carries too much detail for our needs. High detail, lots of color, lines, labels and POI map elements conflicts with legibility of search results over the map. Saturated ocean color is distracting and makes design for seamless map frame difficult.

Compare to HGL: HGL search map is square framed, larger overall, and uses better initial view scale so less land is repeated.

Recommendation: Use larger square map frame (ideally as part of the 50/50 page layout. Res et initial map scale to show less repeated land. Change to a less detailed basemap.

[dmede]

Search bar design
EW issue: The main search bar fill color is a light tan, surrounded by a larger box with a slightly darker tan fill. This reduces contrast and legibility. The “Search” button is a solid med blue which has a heavy visual weight and draws attention away from the actual search field area. The search box is too large, unnecessarily wastes page space. There “Discover and download GIS data and maps” header is unnecessary, also wastes page space.

Compare to HGL: HGL uses a simple high contrast search bar design that seamlessly integrates with the rest of the page layout. No extra colors or framing elements. No unneeded text prompts.

Recommendation: Remove search bar from enclosing box. Eliminate color fill for main bar and Search button. Move to 50/50 layout.