MapKnitter Front Page UI discussion

[jywarren]

Arriving at the front of MapKnitter, we see a map of maps and a list of recently started maps, and some recent authors.

We could do better! I'm brainstorming, i think there may be 2 issues - a true front page that really welcomes and shows how these maps can be made -- with illustrations of balloon mapping kits, say.

Second, region-specific pages that show maps, mappers, projects, and more from the Public Lab community for a specific region. I'm brainstorming something like:

Note that this integrates more layers from https://github.com/publiclab/leaflet-environmental-layers/, as well as embedded content from PublicLab.org.

[IshaGupta18]

Yes we mostly definitely could do better. We can redesign this page (and potentially other pages too) for users to understand the site and it's functionality better. Also, for the users to create a new map, I was thinking of creating a walk-through for it, especially on this page

A lot of other features can be implemented on the front page, many in terms of design and we could brainstorm on them as we go along!

[grvsachdeva]

Nice ideas @jywarren and @IshaGupta18!

[jywarren]

Thanks all. @IshaGupta18 we are also transitioning to the idea of just uploading images rather than having a distinct step of making a map. So perhaps the front page might just have an "upload images" prompt that would make it even faster to begin mapmaking?

[jywarren]

Worked a bit more on this... i want to clearly show different ways of collecting images. And feature people. I annotated these mockups... what do you think?

[jywarren]

And again my mockups are here, which anyone is free to use/modify -- just make a copy of the slide before changing it please! https://docs.google.com/presentation/d/1TCZoTfuhamRVrUak8aDgqJAwSgyhRtZg2Pgacl2_4zc/edit#slide=id.g4e2261b4b2_0_0

[stefannibrasil]

hey, everyone! I was able to install the app properly in my machine so I can now start working with you :)

I was talking with Jeff earlier and I'm compromised to work on this, starting tomorrow. The mockups are great, thanks for sharing, @jywarren

I would maybe change the big picture with the text "Take your own aerial photos" to the top and the map where the picture is... Because, for example, when I use an app, I want to know first what is the purpose and then how I can use it.
I also think that having a CTA button on the picture that I mentioned would be nice, like "Add an image" or something. That way, the user would be more oriented to add the images, which is what we want, right?

I have some ideas but the mockups are a really good start. I'm excited to start working on this, today I wanted to first install the app correctly.

[IshaGupta18]

Yes @jywarren I think the mock-ups look great and I am too working on some myself. I think the image collection is a good idea, however, the user should be briefed about what exactly that would do. I am also working on a Welcome Page dashboard for new users and what all features and design should be published there, to differentiate it from the location based idea. I would soon be sharing my ideas with you and would love to brainstorm on this. Thanks a lot!

[IshaGupta18]

Also, @jywarren about the "upload images" feature instead of the "create map" feature, it could redirect to a new page where Image Collection can be handled separately, instead of uploading images from the same (dashboard) page. This way, there would be a proper way to upload images with all the features, instead of just file upload. I am thinking more about this on the new dashboard!

[stefannibrasil]

hi, everyone.
I was thinking about starting with the navbar, like making it similar to Plots2, that way we can start having a pattern or something. Then gradually, I can start working on the other components. Thoughts?

[IshaGupta18]

Hey, @jywarren I was thinking of creating one of the proposals for GSoC on Front Page UI of MapKnitter as I had gathered some ideas on the lines of the design suggested by you, should I carry on with it?

[jywarren]

Sure, that sounds good, although it's possible it might need to be combined with another project to make up enough work for the summer! And (optimistically) there is a chance it'd be completed by then too 😄

[jywarren]

I would maybe change the big picture with the text "Take your own aerial photos" to the top and the map where the picture is... Because, for example, when I use an app, I want to know first what is the purpose and then how I can use it.
I also think that having a CTA button on the picture that I mentioned would be nice, like "Add an image" or something. That way, the user would be more oriented to add the images, which is what we want, right?

These sound great. @IshaGupta18 and @stefannibrasil please share any sketches you have that could be incorporated into the design! Thank you!

I saw a great idea for the challenge of how to show locally where you're viewing the map on the front page. Note that I put in a "Share your location" popup but in showing locations we could do something like this:

[stefannibrasil]

HI all,

I added a new slide (number 2) with some comments there about my proposal. Forgive me that some components are not aligned, but I think you can understand my ideas there :)

But either way, I think the proposals are looking good! I added some ideas but any choice from the options would be a good advance for the project!

The reason I would like to start with the navbar is because 1) right now it's too big and 2) it will give time to discuss the other parts and 3) would be a good start. So let me know your thoughts and I can start working on that tomorrow 👋

[jywarren]

I think starting with navbar makes sense! I like the idea that the search bar would be a location search like Google maps maybe!

…

On Thu, Feb 21, 2019, 1:28 PM Stefanni ***@***.***> wrote: HI all, I added a new slide (number 2) with some comments there about my proposal. Forgive me that some components are not aligned, but I think you can understand my ideas there :) But either way, I think the proposals are looking good! I added some ideas but any choice from the options would be a good advance for the project! The reason I would like to start with the navbar is because 1) right now it's too big and 2) it will give time to discuss the other parts and 3) would be a good start. So let me know your thoughts and I can start working on that tomorrow 👋 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#327 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ8W-qz6WTqJ8GRqBFMv3BqaPqga3ks5vPvMfgaJpZM4aoMIR> .

[IshaGupta18]

@jywarren I was thinking of organizing the current front page of MK by making the featured mapper section of the front page. What we can do in that is, like you have drawn (for now) display a couple of featured authors and their maps and make a link to another page with all the maps like in the dashboard, but better designed and placed, as right now, the maps are too ill-placed. This way, the front page will look consolidated and all the maps can still be viewed at a fresh page and we would be moving forward towards a better design. What do you think?

[IshaGupta18]

@jywarren what do you think #327 (comment) ?

[jywarren]

@IshaGupta18 I think if we develop the "featured mapper" section in a template partial, then this sounds super, and we could then also add it into the new front page design when the time comes. We'd probably be developing a "shadow" front page at mapknitter.org/places or something, so we can test it even before it's completely done. Make sense?

I'm also thinking harder about what makes the "front" page different from a place-focused page.

1. The front page needs to rep balloon/kite mapping more, and show more general stories. There may not be enough "featured mappers" for a given region, so that might be more emphasized on the front and less on the place pages like https://mapknitter.org/houston
2. Pages like https://mapknitter.org/houston could result if you start typing a location and it auto-completes; if you type houst... maybe it autocompletes to Houston but then we convert that to /houston to refresh the page?
3. What about searching by dragging the map? Do we actually save the location names in the DB or do we rely on text geocoding to generate them?
4. related to (3), what if someone wants to make a map of a /very/ specific place or even project, do we let people "name" a page and then it's kind of just like the original "name your map" interface anyways? This needs some thinking through.

[jywarren]

I gave this another try, looking at how @stefannibrasil's idea of showing the map 2nd could lead into specific place pages like /houston or /houston/edit if you are adding (maybe?).

Notice the "expand" link to lower right, and the way you can select popular or recent or featured places just under the map.

Thinking hard about to name places, we may need to be careful about providing a name from a reverse geocoding lookup; it's easy to see how this could go a bit wrong.

Maybe the combination of always saying nearby _____ and the ability to click there to search for a new location at any time will help people customize exactly what they're looking at and what they want to call it. For example, in many areas we don't want to show nearby _____ if the person objects to that naming - like in a contested territory where that could be offensive to people.

Maybe if you drag the map far enough away, it clears the nearby _____ and tries to guess where you are?

[jywarren]

I also thought more about this section, and am thinking we could show it only on the individual place pages, like https://mapknitter.org/houston, and skip it on the front page, bringing the "ways to make a map" section up higher:

Thoughts?

[jywarren]

I want to break out the discussion of what goes on a "place" page into a separate issue pretty soon, as we're starting to see these play different roles. But here's my latest take on the "place" page:

[jywarren]

Noting #633 has a number of new front page updates!

[jywarren]

Wow there's a lot of progress here: http://mapknitter-unstable.laboratoriopublico.org/front-page

OK, so what additional steps do we need?

• featured mappers might use the last image they uploaded
• let's replace "waterproof mini camera" with this: https://store.publiclab.org/products/raspberry-pi-camera
• can we look at some other map styles using MapBox?
• what about the idea of "featured locations" along the bottom edge of the map?

[jywarren]

Can any link to /maps/new open an optional modal to log in first? But that has an option "make an anonymous map" with a link to "limitations", maybe going to publiclab.org/wiki/mapknitter-anonymous where we'll write some additional documentation?