0

I'm building an extention for ipyleaflet (the python binding of the famous Leaflet maps). I'm adding the possibility for users to add "menus" and "buttons" directly on the map to create semi-autonomous applications. For that puropose I would like to display fullscreened menus.

This how they look currently:

currently they close as the normal one (click again on the btn that opens the dialog), but when dealing with large menus, I'm not sure users will understand. Is there ay standard or natural way of doing it ?

5
  • It's hard to tell what's going on in that animation. Can you slow it down and/or list the steps? It first looks like the folder icon in the lower right corner is clicked which brings up a big, empty white box... Feb 26, 2023 at 20:43
  • From comment in answer: "...respecting...UNFAO map applications...". What does UNFAO recommend? — And, do you have a link to UNFAO? Feb 26, 2023 at 21:03
  • it's not a recomandation, it's just the way we build map applications. As the people already using our tools are trained on this framework, I cannot afford to change it (they would be looking everywhere for the btns). UNFAO is the UN agency I work for (fao.org/home/en) and this is the lib I work on: github.com/12rambau/sepal_ui Feb 26, 2023 at 21:10
  • How familiar with the app is your typical user? Feb 26, 2023 at 21:16
  • daily/weekly user Feb 26, 2023 at 21:17

2 Answers 2

0

...click again on the btn that opens the dialog...

In that case, one way to indicate how to close—keep the opener button activated—in this case the [?] button.

Opened:

opened

 

Closed:

closed

6
  • do you think making the "active" state standing out more would help ? Feb 26, 2023 at 21:12
  • '...making the "active" state standing out more...' What are you thinking different from changing the white background to gray? Feb 26, 2023 at 21:15
  • I was thinking about using my "primary" color (blue in this theme) Feb 26, 2023 at 21:18
  • Do you use blue in other controls to indicate an active state? If so, then yes. In other words, do you have a standard "active state" design specification? That way people can learn it in one location and transfer that knowledge everywhere else. AKA consistency. Feb 26, 2023 at 21:25
  • I like the simplified version of the 80/20 rule here—use as little intrusion as possible to achieve a high degree of user support. Feb 26, 2023 at 21:28
5

If you allow me, I think the biggest problem with your application is not that the user doesn't understand from where to close a window that occupies the entire screen, in fact you are using a Mac and you clearly have the solution in the application window itself:

enter image description here

I think the biggest problem is that you make the user dizzy using the four corners with interactive buttons appearing and disappearing.

Bottom left corner: enter image description here

Top right corner: enter image description here

Top left corner: enter image description here

Bottom right corner: enter image description here

Before looking for another element to make the user understand a functionality, you should visually organize the tools that you already have in use. Making the user travel around all four corners of the screen by clicking is not only tedious but also makes the application much less intuitive to even figure out something as simple as how to close a window.

5
  • and violates Fitts Law
    – colmcq
    Feb 26, 2023 at 12:50
  • I'm actually respecting the framework of UNFAO map applications where actions are sementically packed in corners. top right is about the map (layers, zoom) top left is interaction with displayed data (value inspector, band combination ...), bottom-right is data creation process and finally bottom right is anything else. so you have very small travel to make from one action to another. Feb 26, 2023 at 16:47
  • I was afraid of the "x" corner icon but if it's the only way then that the path I must walk Feb 26, 2023 at 16:49
  • "...afraid of the "x" corner icon..." What are your objections to having an "x" closer in the top right (or left) of the fullscreen dialog? Feb 26, 2023 at 21:19
  • 1
    I upvoted your suggestion as it seems to be the natural choice. Nonetheless as all the other Dialog (not displayed in fullscreen) doesn't have one, I'll try to remain consistent and follow the solution proposed by @bloodyKnuckles Feb 26, 2023 at 22:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.