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

beva 9 days ago

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?

Michael 9 days ago

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

beva 8 days ago in reply to Michael

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

FlowState 8 days ago

beva said:
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.

the-ninth 8 days ago

beva said:
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.

beva 8 days ago in reply to FlowState

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

beva 8 days ago

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 :).

flocsy🤠 8 days ago

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

FlowState 7 days ago in reply to beva

beva said:
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.

beva said:
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...