search

geosolutions-it / geonode-mapstore-client

MapStore Client for GeoNode
Other
2 stars 131 forks source link

UI/UX design for the landing page #188

Closed giohappy closed 3 years ago

giohappy commented 4 years ago

UI Framework

Currently GeoNode uses bootstrap version v3.3.7 directly inside the django template while MapStore uses bootstrap v3.3.5 inside the library react-bootstrap v0.31.0. The selected framework for the UI could be bootstrap because is a familiar framework used inside both applications. We could try to use the newest version v4.5.0 provided by react-bootstrap v1.3.0 with the idea to update this library also inside MapStore(*) in next phases in the meanwhile we could use both versions: the new one in the GeoNode SPA and the old one in MapStore. It's possible to use two different versions of the same library using npm >= v6.9.0.

Note: use react-bootstrap-v1 for new components in the GeoNode SPA while scss files for customization are under the /themes/geonode/scss/ directory.

(*) We need to evaluate the migration of react-bootstrap to new version as soon as possible. (MapStore)

General Theme

We should change variables and custom scss styles inside the /themes/geonode/scss/ to get a "clean and lightweight design". This work should follow the whole UI Design development.

we added a test page at spa/bootstrap-theme in the test branch that gives a preview of all bootstrap styles (development only)

Header

The header should be compact, small and provide basic customizations. We should evaluate the compactness using the scss bootstrap variable before adding custom styles. It should display a logo, a title (optional) and links. Links for register and sign in should be included, taking into account that authenticated users will see their avatar and name with a dropdown list and additional links.

Customizations:

image

Jumbotron

We should provide a Jumbotron under the header that shows a cover image. We should investigate different approach to this component. Proposed behavior:

image

image

The proposed behavior needs to be adapted to the GeoNode functionalities where the search and list of cards are directly connected. So we need to evaluate if the search can be included or not.

Note: It will be interesting to test both approach to se which one fit better the homepage.

Search bar and Filter

The search is an input with an inline magnifying glass icon and it should provide options with autocomplete functionality. The filters should be integrated or directly below the search input and provide filter by:

Note: we could use query params and routing path to store the filtered value in this way we can share directly the applied filter by copying the url.

Cards container

The cards container should list all available resources in GeoNode. The cards needs an easy way to be discernable by resource type and loaded using infinite scroll.

Current resource type in GeoNode:

Expected resource type in GeoNode:

Each card should display:

Clicking on a card a detail view should open on the right (similar to Google image search).

image

Detail view

The detail view shows a preview of map component ( only if type is layer or map) with some general information:

We should provide also a toolbar with the following actions:

Featured resources

We should provide a section to show featured resources or datasets. We could use different approach:

image

Cards of featured resources should be similar to other cards in the homepage and we should investigate if their position is enough to identify them as featured.

Footer

We should make a proposal for a footer that can be used in the main page and viewer page

giohappy commented 4 years ago

(From Alper on Skype)

By following the design document & github issue, i have implemented below

I am waiting or your feedback http://demo.geo-solutions.it/mockups/mapstore2/geonode-spa-2/#/

Here are the things i tried to implement item by item

  1. Edge Browser like jumbotron and searchbar
  2. Search bar is fixed to top when page is scrolled
  3. Cards have different sizes (1x1 1x2 and 2x1) and thanks to a library called Masonry.js, they fit screen well
  4. Clicking on cards open a detailed side panel and 5 different resource type is rendered
  5. All the data is randomly generated mock data taken from original geonode website

I did not want to make more progress on this without getting a feedback.

image

giohappy commented 4 years ago

@simboss I invite you to add your comments to this first draft. I will add mine asap.

giohappy commented 4 years ago

A first round of comments.

1) we don't want the dynamic layout, with different ratios per tile, as offered out of the shelf by masonry. We want fixed sized tiles 2) we don't want tiles animations. Tiles layout should be reponsive (adapt number of tiles per row/col depending on viewport), but not the animation effect provided by masnory 3) Bigger cards 4) Sligthly rounded corners for the cards 5) White background by default.... The beackground of the "top" search area will be eventually substituted by custom background images / colors. 6) More spacing between cards 7) Distinct image / text sections, no "faded" text with color background 8) White background for the card's text section:

image

9) The single card / tile should be more similar to the following examples:

image

10) I would consider a space to add a "quick links" bar above the cards grid. These could be quick filters for the listed cardws (Maps, Layers, Stories, Dashboards, specific resources categories, etc.) that could be customized, e.g. a customer might want to add custom quick filters.

11) I guess you hardcoded the header bar, to resemble the one from GeoNode. I wouldn't try to make it the same, otherwise we will be forced to keep them aligned. I'd use a visually distinct bar, with GeoNode logo, SignIn/SignOut and User button, but not the menus for maps, etc. Maybe we could put a "Workspace" link to redirect the user to the "real" GeoNode backoffice (Layers page maybe?)

image

12) What is the purpose of the "x" icon ?

image

Please @simboss and @allyoucanmap add your comments, if you want.

alperr commented 4 years ago

@giohappy I have tweaked the mockup considering your comments.
You can check the demo page

http://demo.geo-solutions.it/mockups/mapstore2/geonode-spa-2/#/

geonn

  1. Done. All cards have the same aspect ratio
  2. Done. Masonry was responsible for animation and calculating the layout for different aspect ratio elements since we don't need different aspect ratio elements to fit into container. I have removed masonry from the project, and all the responsiveness is done via bootstrap4 display flex utility classes.
  3. Done.
  4. Done.
  5. Partially Done. Bootstrap offers 2 flavors of white (bg-white and bg-light). I have used bg-light (which is slightly grayish) for background and bg-white (pure white #fff) for card backgrounds. I haven't made any change on "the background of the top search area" yet
  6. Done.
  7. Done.
  8. Done.
  9. Tried to match to given examples as much as possible.
  10. Not Done. More details about this request would be helpful.
  11. Partially Done. Simplified the top navbar.
  12. Removed the icon. That "x" icon was put there unintentionally.
afabiani commented 4 years ago

Not really good on a mobile device

image

giohappy commented 4 years ago

Actually we never said how it should behave on mobile explicitly, but it's expected to work (at least not to break). The basic idea on mobile would be to slide up the panel, over the cards grid.

On Wed, Sep 2, 2020 at 5:09 PM Alessio Fabiani notifications@github.com wrote:

Not really good on a mobile device

[image: image] https://user-images.githubusercontent.com/1278021/92001490-06248280-ed3f-11ea-8560-23c0abf886cd.png

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/geosolutions-it/geonode-mapstore-client/issues/188#issuecomment-685800001, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAELN6MOMZZ43V52AVST57LSDZN23ANCNFSM4QM7PALA .

alperr commented 4 years ago

I have implemented a basic layout change for mobile and low-width screens. http://demo.geo-solutions.it/mockups/mapstore2/geonode-spa-2/#/

giohappy commented 4 years ago

@alperr your solution is a quick workaround, but imho it doesn't reflect the usual UX on mobile. You can have a look to what we've done here (you can only browse the news as anonymous user): https://app.mapstand.com/ or the typical approach provided by Google Maps on mobile (even the browser version).

this is the basic solution I expect to see.

alperr commented 4 years ago

@giohappy I tried to make the layout similar to https://app.mapstand.com/ and updated the demo page. http://demo.geo-solutions.it/mockups/mapstore2/geonode-spa-2/#/

I have made the following changes to the mockup

  1. Changed detail panel background to a light color (just like mapstand.com)
  2. Added a share button to the detail panel and grouped with close button
  3. Added resource title to the top of detail panel

Below changes are applied only for the mobile version (where width < 576px)

  1. Cards are smaller and have fewer details (removed category)
  2. Removed advanced search text link to increase the space for card list
  3. The details panel container becomes vertically scrollable
  4. Details panel preview image is shortened hence abstract and other info can be seen on first open.

Here are a couple of screenshots for different screen widths (These breakpoint values are taken from bootstrap 4)

Desktop (width > 768px)

1

Tablet (576px < width < 768px)

2

Mobile (width < 576px)

3

giohappy commented 4 years ago

ok @alperr. Now we can stop since we need to plan the next steps together with @allyoucanmap

giohappy commented 4 years ago

I attach a couple fo screenshots from the mockup done by the Thunen Institue, just to take inspiration....

image

image

giohappy commented 4 years ago

as from our call, the UX that we're going to test is the one offered by the usual search engines:

Microsoft Edge

INITIAL:

image

SCROLL:

image

Bing

image

Google

image

Firefox

image