MapComplete
MapComplete copied to clipboard
pietervdvn
UX/UI overhaul
PlayzinhoAgro did a tremendous job to design some wireframes, see https://design.penpot.app/#/view/1e585af0-561d-11ec-a5ae-e949c75b760d?page-id=f18e0370-56b8-11ec-a8d9-a526d8d1757b&index=0&share-id=cd4422f0-6f0f-11ec-8da6-c2b142838c8b
This marks the transition from 'a bunch of interactive webmaps' to 'a proper application with links and extra information'.
This is mainly implemented through adding a top bar, offering the 'login'-button, backlink to the index, about-mapcompletepage ...
Furthermore, there are a ton of details to work out.
First of all, there are two modes to use MapComplete: as standalone website/(web)app or embedded as an iframe. In the latter case, this would imply the sidebar is not available. In this case, legally and practical required items must still be available (privacy policy, copyright notice, login button). However, the 'more maps' etc... can be hidden.
Excuse my ignorance, but what does "embedded as an iframe" look like? I could try to do
This is when the entire website is embedded in another website. An example can be seen here:
In this case, having a MapComplete top bar or a mapcomplete menu is not acceptable, as for this 'client', only cyclofix matters.
Note that in this case, no 'helptext' appears, which is why the 'copyright button' is there in the lower left corner as the welcome-message is disabled in this view.
At last, editing is disabled there (by setting an URL parameter). This means that all the login-buttons and edit buttons are hidden as well.
Pretty much, but not always. In some cases, an embedded version with editing capabilities might be setup (e.g. within a tasking manager).
TBH, IMO the UI would benefit most from a cleanup; more than from a complete overhaul.
Is there a list of UX issues, that the new design should solve? I suggest to create that first to guide design, UX and decisions.
My view
IMO #552 is the big change needed from a UX and Design point of view. And for the other components it's more of a tweak and cleanup. Here is my quick list:
First use experience:
https://mapcomplete.osm.be/hailhydrant.html?language=en&welcome-control-toggle=true#welcome
Improvements:
- Dont show the map, yet
- Fokus on explaining
- Most of the tabs are not important in this state, but the headline, text and tutorial can get more room to become clearer
- and on the next user step, which is finding a good location to map
- Show the search box, tell the user to search for a place that she knows well (or use the locate-me-button)
Login
- The flow that guides users to create and account / log in can be improved. Maybe this should be part of the Welcome-Screen (above, first-use-experience); maybe the map-screen needs to handle this better
- It needs more explanation and motivation IMO
Map (logged in)
https://mapcomplete.osm.be/hailhydrant.html?z=15&lat=52.47409&lon=13.4456&language=en#node/599873093
Improvements:
- The user box (top right) should be cleaned up visually and maybe some features removed (did not look into details)
- Make the search box an icon; we are on the right place already, thanks to the new welcome screen (above)
- Consolidate the panels and other icons on the map. This needs a bit of testing. I would test to have the user box on the right and all the other icons on the left (Similar: umap).
Technical view:
We already have TailwindCSS in use, which makes it really nice to improve such design things. However, the custom fronted architecture makes it quite hard to iterate on designs / implement design changes. One part of that are the empty span/divs that are added by the custom framework. But one part is, that the components don't have a template system.
It's hard to estimate how big improvements on this front are. Would it be possible to build small parts of the UI in React (Preact, …), like the User-Component (Top Right)? Or are maybe WebComponents something that would integrate well with the framework (https://css-tricks.com/an-introduction-to-web-components/)? Or something custom?
In general, IMO two things are a precondition for changing the design in a meaningful way
- Introducing a template system that allows building and styling components, so that frontend work can happen more independent from the logic of the app and one can change html-/css-structures more quickly
- Refactor the framework to add less/no empty span/divs, so that TailwindCSS can actually style child elements
This is when the entire website is embedded in another website. An example can be seen here:
In this case, having a MapComplete top bar or a mapcomplete menu is not acceptable, as for this 'client', only cyclofix matters.
Note that in this case, no 'helptext' appears, which is why the 'copyright button' is there in the lower left corner as the welcome-message is disabled in this view.
At last, editing is disabled there (by setting an URL parameter). This means that all the login-buttons and edit buttons are hidden as well.
I created a draft that we can use
I think we should adapt it to each theme
the custom fronted architecture makes it quite hard to iterate on designs / implement design changes.
I also think that's why this is a difficult issue.
It's hard to estimate how big improvements on this front are. Would it be possible to build small parts of the UI in React (Preact, …), like the User-Component (Top Right)? Or are maybe WebComponents something that would integrate well with the framework (https://css-tricks.com/an-introduction-to-web-components/)? Or something custom? In general, IMO two things are a precondition for changing the design in a meaningful way Introducing a template system that allows building and styling components, so that frontend work can happen more independent from the logic of the app and one can change html-/css-structures more quickly Refactor the framework to add less/no empty span/divs, so that TailwindCSS can actually style child elements
To increase the usability of mapcomplete, -in my opinion- this issue should be higher on the list.
- Are there any concrete steps we can take to make this happen?
(please don't abandon this issue)
Another important question here is: how is the onboarding-flow handled? Should this be improved? Can we ask the OSM.org-maintainers to smoothen this a bit?
Hello, I'm discovering MapComplete and I'm loving the idea. I don't get how I could have not known about it earlier. Anyway, the first thing I thought was indeed that the UI needs a refresh, to make it more modern, pro and appealing. The UX itself is mainly OK imo but of course there is always room for improvements. I am a front-end dev and I have next Monday & Tuesday free so I could maybe hack on MapComplete and see what I could do.
I see that you are using Tailwind, which is a good CSS framework. Personally, I don't use CSS frameworks anymore, because I think that with flexboxes and CSS grid, we have natively everything we need now (with polyfills we could even support IE 10-11 if we want). I see there also is a discussion about a JS framework in https://github.com/pietervdvn/MapComplete/issues/1142#issuecomment-1368124949 which would allow to have markup and style separated in components. That's obviously a good practice which can ease the development, but it isn't a must have and as said in the video during the State of the Map conference, pragmatism is more important than perfection. So I wouldn't jump straight into it.
I will see next Monday if I can quickly make a suggestion about how the website could look, probably vanilla CSS is enough to improve the look & feel. To be very fast at drafting it I will work with the Stylus addon so I don't have to understand the codebase, and share the result here. Then we can discuss if / what we want to implement, and how we do it.
Cheers,
With the new MapLibre port getting merged in, this issue is not as relevant anymore.