Default UI/UX is mixing metaphors between the main screen and settings

Docking Station
1

I have a suggestion for the UX of the dock.

Currently, the default behavior of the rotational knob (i.e. the encoder) as it pertains to the home screen is when you spin it clockwise, it selects the item below the highlighted entry. The issue is, that feels backwards because you’re mixing UI/UX metaphors. While you have added the ability to reverse the direction, even that is somewhat confusing UI/UX-wise for the same reason.

I’ll explain in more detail.

Specifically, in the settings list (which ironically isn’t affected by that new setting), it works as expected. You are moving the selection up and down accordingly. You roll it up, it goes up. You roll it down, it goes down. This feels natural.

However, on the ‘home’ screen, the reason why the default feels backwards is you’re currently treating the knob as if it’s moving the screen contents up and down, which makes sense, except you’re also showing a ‘selection border’ implying you’re moving the selection up and down, just like in settings. Except unlike there, not only does the selection border not move–which already feels awkward–but when you’re thinking it should move up to select the previous item, instead it appears to move down to the next item, because what you’re actually doing is moving the screen contents up behind the selection border, not the selection border itself.

And that’s the disconnect! You’re mixing metaphors. You’re showing a selection border, but you’re acting on the screen contents behind it. Even with the new setting which does address the ‘wrong direction’ feeling, it will still never feel ‘natural’ since the visual of what you’re seeing is always in dissonance with what you’re actually interacting with.

The good news is it’s easy to address, depending on which you prefer… moving the selection border or moving the screen contents.

Starting with the former, moving the selection border… just make it work like settings! You literally move the selection border up or down. If it reaches the top or bottom and you keep scrolling, then just like in settings, new items come into view shifting out old ones. But if you’re just moving between the three items already on screen, then only the selection border moves between them, not the screen contents itself.

The ‘selection-based design language’ works best for non-animated screens since what’s ‘jumping’ is just the selection moving to the previous or next item. It’s a highlight. It actually feels weird when you try and animate a selection because a ‘selection’ is not a ‘thing’ per se. It’s a decoration of another thing… the selected item. That’s why animating selection indicators feels weird, and isn’t usually done (except maybe fading, but almost never moving.)

The second approach to address the dissonance is to move the screen contents themselves, again, what you’re currently doing, but with more intuitive/consistent visuals.

First, you need to remove the selection border because if you see a selection border, you think you’re acting on it, not the contents behind it. This does mean you would have to indicate which is the current item a different way. Maybe an arrow/triangle off to the side, or maybe making the focused item larger than the non-focused ones showing which one is active.

Better yet, this would be a perfect place to add animations as again, you’re moving the screen contents up and down, which feels natural when animated. That’s what made the iPhone so revolutionary. Push the screen up and it animates up. Pull it down and it animates down. Here, you’re just using the knob instead of touch.

More importantly, jumping (i.e. non-animated) works better for selection-based interaction (which is why it feels normal in settings), but it does not work when moving screen contents. Try it yourself on your computer… disable ‘smooth scrolling’ in your browser and you’ll see just how uncomfortable it feels.

In contrast, animating the screen just ‘makes sense’. Roll the knob up, the screen slides up. Roll it down, the screen slides down. No selection ring needed (as mentioned, if there was one, users will again think that’s what they’re interacting with, not the screen contents.)

Anyway, just some friendly feedback from someone who loves UI/UX and who does this kind of thing for a living. Hope it helps, or at least gives you some food for thought.

2

Hello,

Our encoder rotation logic is:

  • For apps with selection boxes (such as settings): The selection box is scrolled, so scroll the encoder counterclockwise and you will see the selection box moving down.

  • For apps that are only used for display and cannot be selected (such as calendars): The entire background is scrolled, so scroll the encoder counterclockwise and you will see the previous month.

  • For the selection of the corresponding app, different scrolling processing is performed according to the setting direction

Your suggestions have been fed back to our engineers, and they will discuss this further. (Regarding the addition of scrolling effects, due to processor limitations, the display effect is not good, so this effect has not been added to the released functions.)

Thank you again for your detailed suggestions!

3

Precisely! In something like Calendar, that makes complete sense since there isn’t a “selection” as you said. The screen’s visible contents are what you’re acting on. That feels natural.

The other logic you mentioned with a selection, (like the Settings app) also works as one would expect… you’re acting on the selection, not the contents of the screen. There too it feels natural.

However, in the app selector screen (what I call the home screen), you’re mixing both of those metaphors… it’s showing a focus border/selection rectangle (akin to the ‘selection box’ in Settings), but you’re acting on the screen contents (like Calendar.) That’s the disconnect.

That’s why I’m suggesting for that screen you remove the focus border and indicate the current item in a different way. An arrow to the side, shrinking the items above/below, or heck… even dimming those other items. But as long as a user sees a ‘selection indicator’ either in box-, highlight- or frame-form, they’re going to think they’re acting on that, not the contents of the screen.

Anyway, just one dude’s opinion so feel free to treat it as just that. As they say, opinions are like a**holes… everyone’s got one! :wink: I just really love your product and want it to ‘feel’ as good as it looks, hence my taking the time to write these. (It’s also why I bought two!)

4

Hello,

Thanks for your detailed feedback! :wink:Your comments on interface consistency are very valuable and enough to make our engineers think about designing and developing features. We understand that the current selection indicator on the app selection screen may cause some confusion, and your suggestions, such as using arrows, shrinking the upper/lower items, or dimming other items, all sound like good directions for improvement.

Thank you very much for your enthusiasm and support for the product! If you have more suggestions or ideas, please feel free to share them. Your feedback is very important to us!

If you have any questions about the use of the product, please feel free to contact us.