UI refresh?

[rowanwins]

Gday @tmcw

Thanks for undertaking this project (the original and the to-be version), I couldn't tell you how often I use it! As I mentioned on slack I'd also half-heartedly started recently working on a more modernised replacement.

If you're interested I'd be happy to attempt to give the UI a bit of love. I can start with throwing together a few mock images and take it from there.

Cheers Rowan

[tmcw]

Definitely! To sync up so we're on the same page, here's what I've been thinking:

• It's ugly, but the current geojson.io works pretty well on a UX level just from being so straightfoward. I think the least straightforward stuff is the Gist/GitHub import, which has UX problems with clickability and generally looks pretty trash. I think there are plenty of other places to improve upon the design, but am a bit wary of a design that makes any kind of beauty-over-functionality choice.
• The file icon and UI definitely seems weird. Basically geojson.io maintains a little metadata beyond the geojson object: where that object came from (github or gist), and what it's name is/was. This isn't very well-represented by the UI.

[rowanwins]

Gday @tmcw

So a couple of quick points of clarification

• My understanding is that someone will need to have authenticated with github somewhere along the way to either
  • load a file from github or gist, or
  • to save it to github or a gist, or
  • to share a map

• Are there any bits of functionality or menu items from the current site that you are planning on dropping?

• Are there any major bits of functionality or menu items that you envisage might get added?

• Not sure how you feel about React component libraries, but I've typically used something like AntDesign which I think provides a nice neutral set of components. It's got some neat components, eg for table editing. Would you have any objections or suggestions if I started looking at something down this route?

Anyway stay tuned, got a few thoughts bubbling through my head, hope to have some mockups by the end of the week.

[tmcw]

My understanding is that someone will need to have authenticated with github somewhere along the way to either

Yep, that's the case. In the old days, you could create a gist anonymously but you can't anymore. And maybe someday there'll be a github alternative for sharing generic data etc, but... I'm not seeing one sprout up and I haven't seen any issues/PRs proposing any other auth integrations.

Are there any bits of functionality or menu items from the current site that you are planning on dropping?

Nope, none off the top of my head. I want it to be on par with every feature, unless something really stands out as useless or outdated. I do think that the 'Meta' menu could be better structured and organized, because it's a mishmosh of extra ways to import, things that modify the map, and just general controls. Some of those, like 'zoom to features' should probably be a map control, and things like all the "Load X from string" items should be better grouped. "Add custom layer" should be closer to the layer UI, too.

Are there any major bits of functionality or menu items that you envisage might get added?

Not really! I'd like to address some of the noted issues with geojson.io - like how it's impossible to edit objects in features in popups, but other than that, no whiz-bang additions in mind. I'm open to any, but, yeah.

Not sure how you feel about React component libraries, but I've typically used something like AntDesign which I think provides a nice neutral set of components. It's got some neat components, eg for table editing. Would you have any objections or suggestions if I started looking at something down this route?

I haven't used any component libraries in the past... I'm open to the idea of them. The master branch is currently just tachyons + normal ol' react HTML elements, which has been a recipe that worked really well for custom / efficiency-first applications, but admittedly this project would probably benefit from a larger set of assumptions, so that we don't have to rethink all the basic styles just to build some tabs etc. Is AntDesign what you'd use? Seems pretty good.

[rowanwins]

I do think that the 'Meta' menu could be better structured and organized, because it's a mishmosh of extra ways to import, things that modify the map, and just general controls.

Sounds like we're thinking about much the same stuff

Is AntDesign what you'd use?

I used it a little while back on a fairly similar project and I found it very good. The basic styling is nice (IMO) and if you do want to add custom styles it's pretty easy to override compared to some other component systems I've used. It also has a import on demand option which means you only need to pull in the components you want to use so you don't blow out your app size with stuff you're not using. Anyway perhaps we just give it a whirl and see how it works for us - if its not working for us we can always change it :)

[rowanwins]

Gday @tmcw

So here is a very very rough attempt at a layout after a few hours (mostly reminding myself how react works!).

A few comments

• I've given the menu's an overhaul and attempted to group the functionality more logically. All the primary bits of functionality now sit on one side of the app rather than split across left & right menus

  • My placement of the sidebar on the left was intentional to give it a different feel from the existing site but I'm not really fussy

• All the data loading and saving bits would appear in the bottom of the sidebar

  • Including a Github sign-in icon
    • When not signed in the Github related loading and saving menu items are disabled

• The top nav is for stuff related to the data you've got loaded

• I've added a few buttons just inside the map for stuff that didn't seem to sit well anywhere else, this includes the Share and Help buttons but could also potentially include things like the custom baselayer, clearing features, or zooming to all features

  • When there is additional content required I'm thinking they can open up to modals

At the moment I've just scaffolded it out as a standalone react app with 0 functionality, I find it easier to actually work with real sizings etc rather than in a psd, particularly if we choose to adopt a component kit like AntDesign.

Anyway if you think this layout is heading in the right direction I'll refine it further and start working on the styling etc. My gut feel having tinkered on it a bit is that it feels like it should come together. The layout feels like it's got a bit of flexibility if there are other odds and ends of functionality that need to get included. And the AntDesign components are working nicely to get those nice finishing touches like tooltips. I can also throw it up online if you want.

Anyway let me know what you think Cheers Rowan

[tmcw]

Cool,

I'm not super convinced about moving all the content into one panel

I can't think of an obvious problem in the current design that it solves, and I can think of one that it causes - actions that modify the JSON and don't clearly modify the map - like "Add Bounding Boxes". When you have a separate toolbar, and both a persistent map and JSON display, you can see that when you click Add Bounding Boxes or Flatten MultiPart Geometries - you can see what they do. But if the JSON table is hidden away at that time, they don't seem to do anything.

Also the expanding of 'Flatten Multipart geometries' with an icon, description, padding, means that we wouldn't be able to fit nearly as many actions on screen.

• I'm also not really into moving the panel to the left - again, not clear what problem it solves.
• And moving more of the UI to the bottom-left - not sure what problem it solves, and it makes the site less similar to common norms. A majority of websites have user avatar / status in the top-right, I can't think of any that put it in bottom-left.

Sorry to be kind of a downer about these, I do like the aesthetic. It's more that - I think it's changing the layout and basic arrangements that haven't been issues in order to be/look new, and I think that risks making the site less utilitarian, familiar, and introducing new problems.

[rowanwins]

All good @tmcw - fast feedback is good feedback :) I had gone a bit wild in re-imagining things, wasn't sure how much we were trying to differentiate this site from the current, but happy to bring things back a bit towards the existing layout.

[rowanwins]

Take 2 with something more inline with the current layout.

• Tools I was going to keep as those data related tools (eg add bbox, create random, flatten)
• I haven't decided on the map related tools (eg custom basemap, zoom to features), perhaps as icons somewhere over the map, the main risk I think is getting them confused with the editing tools
• And the 'clear features' could kinda go anywhere, in some regards it is quite similar to the 'new' button, only difference being one opens a new window with no data and the other simply clears the existing data so I'm not sure if you've got any thoughts on that
• I've put the github login in the top left near the load and save functions as they are the thing it most closely relates to, so hopefully that makes some sense.

Closer?

[rowanwins]

And with a bit of styling applied using this colour palette. Although it looks a bit greyer in the picture than what it looks when viewed as a real app shrug

[tmcw]

Yeah, I think that's the right direction! I'm cool with moving the GitHub UI to the left, not totally sure whether it makes sense to expand on these words, like "View as JSON" vs JSON, etc - I kind of favor compactness where there isn't much potential for confusion.

[rowanwins]

Cool, glad this is getting closer. If i get some time tonight I'll see if i can pull down this repo and start getting things set up.

[tmcw]

I've made some aesthetic changes to the project, generally in the direction of a vaguely Ableton/brutalist style with pops of bright color, absolute blacks, chunky system fonts.

Sorry for the misadventure. All in all, I was more wedded to the existing basic layout conventions that I first realized and while I'm all about a tighter overall aesthetic, it's a bit unconventional and pragmatic, like the original geojson.io. style. Hope it wasn't too big of a time commitment, and thanks for giving it a shot.

[rowanwins]

All good @tmcw , sometimes you just gotta try these things out and it doesn't always work.