The right way to add a ✓ mark to a selected setting

I build my on watch settings menu with regard to the User Experience guidelines. If I have a selection for an option in a submenu, I print the active selection in the parent menu as a sublabel, so far so good. However when I go to the options for that setting, the current selection using setFocus only differs cause it is in the center of the screen when the screen popsup. When the user is browsing in the options, it's no longer clear what the current selection is. So I thought about adding a ✓ checkmark in front of the option. It shows up as a questionmark on the simulator. So how can I be sure to make it work on all my selected devices? Is the only solution to make all submenu's with a graphic option? Or can it be safe to add some kind of extended character? In the past there is refered to complete charactersets available in the User Experience guide, but currently it's not, or I can't find it in it.

So given the current situation what would be the best solution?

  • Use WatchUi.ToggleMenuItem instead, and you don't need to visualize it yourself, as the toggle is already visualizing the on/off state. 

  • This is not about an on/off state, but for settings where you can choice one option from a list of options.

  • However when I go to the options for that setting, the current selection using setFocus only differs cause it is in the center of the screen when the screen popsup. When the user is browsing in the options, it's no longer clear what the current selection is

    That kinda depends on the device tbh. Older MIP devices (like FR935/FR945) will simply show the currently focused menu item in the center of the screen with no other hints, as you said. Newer MIP devices (FR955) will show a vertical line to the left of the currently focused item.

    AMOLED devices like FR965 will highlight the item with a gradient. e.g.

  • However when I go to the options for that setting, the current selection using setFocus only differs cause it is in the center of the screen when the screen popsup. When the user is browsing in the options, it's no longer clear what the current selection is. So I thought about adding a ✓ checkmark in front of the option. It shows up as a questionmark on the simulator.

    If I understand you correctly, you want to mark the menu item that was initially selected and keep that marking visible even after the user scrolls. So it's not about which item is currently "focused" in the menu, but about indicating the one that was previously selected and therefore initially focused when the menu opened.

    Which menu type are you using exactly - Menu, Menu2, or CustomMenu?

    If you're using Menu2, what kind of MenuItem are you using? One option might be to switch to an IconMenuItem and use an icon to indicate the previously selected item. For example, you could use the system checkmark icon:

    https://developer.garmin.com/connect-iq/api-docs/Toybox/WatchUi/IconMenuItem.html
    https://developer.garmin.com/connect-iq/personality-library/iconography/

    Depending on your interaction flow, CheckBoxMenuItem or even CheckBoxMenu might also be suitable:

    https://developer.garmin.com/connect-iq/api-docs/Toybox/WatchUi/CheckboxMenuItem.html
    https://developer.garmin.com/connect-iq/api-docs/Toybox/WatchUi/CheckboxMenu.html

    Of course, adding a marker like a checkmark directly to the label is also an option. But if the simulator shows it as a question mark, it's likely the device will too. I've recently tried using some arrow characters and encountered the same issue - they showed up as question marks. In the end, I used a bitmap instead, which worked well. In my case I'm using CustomMenu, so adding a bitmap icon was straightforward.

  • Imo (with regard to the simulator) it highlights the item that will be selected, not the currently selected.

  • I have decided to leave it as it is standard to work this way. However I am still curious on how to use special characters properly :).

  • I encountered the same question: what characters are available in which font (though my initial goal was to be able to find the biggest (possibly _NUMBER_) font that I can use to display a string in a datafield). I ended up collecting the list of the characters from each devices' each font. You can find it here: https://github.com/flocsy/garmin-dev-tools/tree/main/font-analyzer/chars

    Unfortunately you might not be able to decide 100% because you might not know which font the system uses for the menu.

    What I would do, especially if I wanted to support older devices is to use some ASCII character (or maybe only use it for the older devices). I mean even "<" or ">" or even just "*" can be OK

  • Imo (with regard to the simulator) it highlights the item that will be selected, not the currently selected.

    Yeah I think there are some issues with Menu2 focus in the sim, although the real devices seem to work properly.

    I guess my point was more that at least on modern Garmin devices, it's easier for users to tell which menu item is focused (either due to vertical line or gradient highlight), compared to the really old devices where it literally just was a matter of which item is in the middle, as you said. Garmin actually has improved its UI quite a bit over the years, to its credit.

    And I also want to say that many native settings menus work like yours (with no checkbox):

    - the sublabel of a menu item indicates the currently selected option

    - when you select (press START on) that menu item, it opens another menu with a list of options, the currently selected option is focused, and the list is scrolled so it's visible

    So what you're doing (without a checkbox) would be no different than what Garmin does natively.

    It is nice that you want to make it even more clear to the user by adding a checkbox. I think a CheckboxMenu might work for that - you would just have to write code to ensure only one checkbox can be checked at a time.

    However I am still curious on how to use special characters properly :).

    This is such a thorny question haha.

    There's some devices where number fonts don't even support the space character...