search

DFO-Ocean-Navigator / Ocean-Data-Map-Project

The Ocean Navigator is an online tool that is used to help visualise scientific research data. a users guide is available at https://dfo-ocean-navigator.github.io/Ocean-Navigator-Manual/ and the tool is live at
http://navigator.oceansdata.ca
GNU General Public License v3.0
49 stars 20 forks source link

Redesign Web UI #385

Open htmlboss opened 5 years ago

htmlboss commented 5 years ago

As I mentioned in the User Interface Overhaul project, our current web UI is garbage compared to industry standard. Also since DND wants more flexibility in their data visualisation it's clear the current design needs to be dumped.

I think I have an idea that should be able to accommodate their requirements. I'll post a mockup here when it's ready.

In the meantime, it would be good for users to list their requirements (even if they're sky-high wishful thinking) so I can take them into account.

NoahGallant-MUN commented 5 years ago

We've already started the implementation of a new web interface to allow for more flexibility. I'll post an image later today so you can provide some feedback. It still resembles the old one though so it could still be changed more.

htmlboss commented 5 years ago

That sounds good. For UI stuff it's good to get lots of feedback from different people since it's a very finicky thing. Recruiting some guinea pigs to try out the design is also fun lol

jmunroe commented 5 years ago

Following on #383 and #384 , could of the JavaScript experts (@htmlboss, @NoahGallant-MUN) remind me how React and Bootstrap 4 work together? Is React is a library of widgets and Bootstrap is the framework?? Or are we doing some sort of 'Reactstrap' thing?

Even a pointer to a recommend url that explains how these pieces work together (ideally, in the same we we want the Navigator to be structured: React / Bootstrap / Flask , no jQuery )

(Every time I try and figured about all of the possible libraries and frameworks are positions reminds me why I have be hesitant to dig too deeply into JavaScript / front-end development. Its a jungle out there.)

dwayne-hart commented 5 years ago

UI/UX has been troublesome for various groups since time began.

Best, Dwayne

On Wed, Mar 20, 2019 at 1:59 PM James Munroe notifications@github.com wrote:

Following on #383 https://github.com/DFO-Ocean-Navigator/Ocean-Data-Map-Project/issues/383 and #384 https://github.com/DFO-Ocean-Navigator/Ocean-Data-Map-Project/issues/384 , could of the JavaScript experts (@htmlboss https://github.com/htmlboss, @NoahGallant-MUN https://github.com/NoahGallant-MUN) remind me how React and Bootstrap 4 work together? Is React is a library of widgets and Bootstrap is the framework?? Or are we doing some sort of 'Reactstrap' thing?

Even a pointer to a recommend url that explains how these pieces work together (ideally, in the same we we want the Navigator to be structured: React / Bootstrap / Flask , no jQuery )

(Every time I try and figured about all of the possible libraries and frameworks are positions reminds me why I have be hesitant to dig too deeply into JavaScript / front-end development. Its a jungle out there.)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/DFO-Ocean-Navigator/Ocean-Data-Map-Project/issues/385#issuecomment-474915286, or mute the thread https://github.com/notifications/unsubscribe-auth/AqWeuRT7DMMzn8QjaS_7ppyi-czsRyD1ks5vYmHpgaJpZM4b_qIi .

htmlboss commented 5 years ago

Bootstrap is just a CSS library for responsive styling. It does have jQuery deps but the React port we use (although an older version) removes that dep.

React is a UI library that handles rendering and event dispatching inside the javascript DOM.

htmlboss commented 5 years ago

I expensed a team license for https://refactoringui.com/ for Shopify, but I think this would be something to explore with Fraser. It's really really good and will serve as an excellent shoe-in since we won't be getting a dedicated UX person any time soon.

NoahGallant-MUN commented 5 years ago

image

htmlboss commented 5 years ago

Now I obviously don't have the full background of what features are required but I can kinda see what DND is going for here, and I think you're on the right track design-wise. One of the main things I've been trying to is condense all the junk that's present on the current UI into something logical.

I'd focus on getting out all the functionality that DND wants and then look at cleaning things up (styling, locations, etc) if time permits. Once you're there I'll send along my suggestions and a wireframe for you.

Good stuff so far. I'm very interested to see the final result 🎉