Suggestions to improve UI and navigation

[d3netxer]

This is related to #322 #316 and #110

I was doing some thinking today on a few things to make the navigation and user experience better for the site.

Homepage Suggestions

• Humanitarian Mapping has a subtitle of "Remote Mapping Information". Is the goal for this section to eventually include guides on for both remote mapping and field mapping? Maybe change the subtitle to "core materials"
• When you navigate to the beginner section of the site, in the bottom of the sidebar you see the other guides. Also, when you navigate to the Humanitarian mapping section, in the bottom of the sidebar you see the other guides as well. The Other Guides are not linked to directly on the home pages, and therefore a little less discoverable and harder to find, but they consist of some really important guides!
• Therefore maybe there should be a different box below the "New to OpenStreetMap?" box with a title something like this "Don't Stop Learning!" or "Continuing Education" with a subtitle of "Intermediate and Advanced Mapping Materials" or "Additional OpenSteetMap Guides". All of the "Other Guides" would be in this section
• change 'More Guides' to 'Future Guides' or 'Upcoming Guides' or something like that
• I am attaching a very quick mock-up I made for visualizing
  

Suggestions to the Humanitarian Page Navigation Bar

There also appears to be an inconsistancy on the title of the humanitarian section. The top of the side menu is titled 'coordination' but why not title it 'Humanitarian Mapping' if that is what you clicked on to go to the page?

Proposed changes to left side navigation bar

• Title of Nav: Humanitarian Mapping (formally titled as 'Coordination')
• Introduction (formally titled as 'Humanitarian Mapping')
• Intro to HOT Remote Mapping (formally titled as 'HOT Remote Mapping' because some of the other sections below also are part of HOT Remote Mapping)
• HOT Tasking Manager (formally titled as 'Tasking Manager')
• (Remote, Armchair, or Mapathon editing) I suggest this section gets merged with the HOT Tasking Manager section. Right now there is even text that is being duplicated between both of these sections. Instead I suggest that a new section gets created that just focuses on events and Mapathon that will be ordered at the bottom of the list.
• The 'Tracing roads, buildings, water and landuse' is long and the text can get cut off easily, recommend changing it to something like 'HOT tracing guides'
• Recommend changing title of bottom nav bar section. Maybe something like "Additional Guides Relevant to Humanitarian Mapping"

[Nick-Tallguy]

@d3netxer I agree with most of your suggestions. Unfortunately I don't have the skills to carry out most of the updates required, and probably not the time. I'm not against any of these & have thought a few similar thoughts. It needs bringing to the attention of the HOT Training Working Group, discussing and then attempting to carry out the update - I could help to an extent, time permitting, while keeping the existing layout working correctly and adding the translations from transifex as they come in.

Bear in mind there can be problems with the display of some languages - Persian proved to be a challenge (right to left flow of the text gave my text editor - gedit - a nervous breakdown!) - see http://learnosm.org/fa/ and have a check through some of the other modules in that language. I currently have to remove bullet points and numbered lists as they display in a very strange way!

I have a 'staging site' at https://github.com/Nick-Tallguy/Nick-Tallguy.github.io on which I place any potential updates for others to consider - what you are suggesting could be demonstrated there. I would be happy to give you access to that so that you could present potential alterations.

Regards & keep up the good work please!

Nick

[d3netxer]

I would look forward to these suggestions and other that have been brought before to be discussed by the HOT Training Working Group.

At some point later this season or in the Spring I think I can probably contribute to some of the changes, and I could either stage changes on your staging site or a personal fork.

Thanks @Nick-Tallguy

[jmarlena]

Hey @d3nexter! These look great! I think I would change the red box color because it's distracting and move the search bar above these boxes. It would be awesome if you could do this. 😄

[d3netxer]

I like the idea of moving the search bar on top. I didn't really like the mock-up I made, it reminds me too much of the Microsoft Windows logo. I started designing something with Hexagons : )

[d3netxer]

Also, in the last sentence of the description paragraph " If you are interested in running an OpenStreetMap workshop, check out the LearnOSM trainer resources."

I think there should be a link to the LearnOSM resources (I'm not sure where that is) or maybe better yet, why not link to TeachOSM?

[althio]

@d3netxer
The hexagons are nice!
Do you think they could behave gracefully under different window and screen sizes? eg. change size or even position? (known sometimes as Responsive Web Design, maybe other names around)

I don't want to put a burden on your design, just thinking what it would look like on mobile.

[d3netxer]

@althio yes, these hexagons will be responsive! I was thinking among those same lines

[DemonioCZ]

Hi, sometimes I look at the page on my phone and thats bad. This need UI improvment. Do you plan changes in this way?

[michael63-osm]

Well, currently the few of us who maintain this site do not belong to the generation which is fluent in mobile devices...

I will have a look but cannot promise changes in the near future as I first have to familiarize myself with the options the framework offers us. Furthermore we will see a new release of the Tasking Manager soon. This requires substantial documentation work and I hope you will understand that this has higher priority.

[jmarlena]

Hey @michael63-osm! Is there an issue somewhere that describes the documentation needs and plans in place for the new Tasking Manager? 🤔 I'd like to follow along asyncly if possible.

[michael63-osm]

Hi @jmarlena,

thank you for offering to help us. There is a preview for the upcoming release 4 of the Tasking Manager but it is not yet clear to me how stable the user interface and workflow are at this stage. I am in contact with the developers but am reluctant to spend any effort on documentation which we might have to scrap after a redesign of the software.

As soon as the developers declare the state as final (apart from some minor fixes) I would reach out to the few people who volunteered to help update the documentation (which to a large extent will be a rewrite). I would ask you to wait for further information because I am not currently aware of the timeline. It might make things easier for me if you could send me a mail ([email protected]) so that I could include your address to my distribution list for the TM4 documentation. I could also forward a mail which I wrote some time ago detailing the flow for this activity.

Best Regards
Michael