[Discussion] Idea for a new "app-drawer" more suitable for a watch

[Timo Könnecke]

I don't find the app drawer concept suitable for a watch.
Its operation requires constant eye contact. Is imo not precise in reaching a certain app. Favourite app positions are hard to memorize in a longer list. In the worst case needs repeated finger re-placement on the screen to scroll through.
We have lost a feature on smartwatches we where used to have back in the Casio days.
Blind operation aided by haptic feedback.
Though we can not bring back hardware buttons, maybe we can give our brain and fingers a new easy to memorize pattern that allows for some blind operation on touch-screens of defined size.
Like, starting up an app even before making full eye contact with the watch while bringing it into readable distance.

Pseudo algorithmic:

1. User does a swipe up from the bottom of the screen to the full top 12 o’clock position and keeps holding the finger on the screen.

2. Instead of bringing up the stock app-drawer, only the watchface fades out during that swipe up across the screen and makes place for the first app starter icon to fade in below the finger.

3. From this 12 o’clock position, still holding the finger on screen, user continues to do a circular swipe along the outer edge of the (ideally round) screen. Either in left or right direction according to left- right handed.

4. With every ¼ rotation of the swipe around the screen, the next app „locks“ into start position. A short vibration of the watch could confirm every ¼ rotation additionally.

5. The corresponding app gets started as soon as the user lifts up the finger from the screen.

6. The order of the apps should be configurable, so that users can sort their favourites in the first 4 quarter turns since those are best memorable.

7. As hinted by @jrtberlin, the ¼ rotation lock paradigm to select apps could easily be used on „crowns“ some smartwatch models are equipped with.

Pros

• Reduce the overall complexity of the UI
• Have an app-drawer system that is unique to the use-case and closer to a traditional watch experience
• App selection takes place on one screen, giving the impression the apps being core features rather then 3rd party add on
• One continuous finger movement in defined environment removes necessity for eye contact.
• Finger positions to start an app are fixed and thus easy to memorize.
• ¼ turns around a circle are easy to haptically memorize
• haptic feedback from vibration helps with memorizing
• 4 favourite apps are sufficient for most users, further apps are still accessible with more ¼ turns.
• „Finger hiding the screen content“ issue is removed for the memorized app-starters

Cons

• „Finger hiding the screen content“ issue is present for app-starters the user has not memorized for blind operation/upstart. The user would still need to look at the screen for which app-starter is currently selected, which is partly covered by the finger. Could be mitigated by making the current selected app-starter the only item on the screen and as big as possible.

Graphical representation

Is to be discussed but for a proof of concept i suppose it would be enough to just take the current app-icons and replace them (fade-over in place) in the centre of the screen with every locked quarter rotation.
Fancy could be some line of bubbles filled with the app-starters following the finger movement and some visual aid representing the finger position in relation to the next ¼ lock state.

Implementation

I am carrying this idea since almost 3 years now and gave up on ever pulling this off myself.
The most basic hints and bits of code would be very appreciated.

Main questions for me:
a) How to even replace the current app drawer
b) How to register a ¼ arc swipe rotation
c) How to register a continuous swipe with direction change
d) How to assign the app-starters to corresponding n ¼ rotations

[Florent Revest]

One limitation I can think of with this UX is that it is potentially hard to discover. We'd need to make sure that the "crown" is visible to make it obvious that once the user has scrolled up they can now swipe around the screen

Regarding your questions:
a) you'd need to modify asteroid-launcher, specifically the AppLauncher Item https://github.com/AsteroidOS/asteroid-launcher/tree/master/qml/applauncher However that requires rebuilding asteroid-launcher and for that I think you need to rebuild asteroid which is a bit involved. Maybe it's possible to only use the Asteroid SDK to rebuild asteroid-launcher but I actually never tried
b) intuitively, I think I would go for a MouseArea and handle the gesture detection myself out of the finger coordinates:

MouseArea {
    anchors.fill: parent
    onPressed: console.log("pressed")
    onReleased: console.log("released")
    onPositionChanged: console.log("position changed " + mouseX + " " + mouseY)
}

With a bit of trigonometry you can extract the angle of the (mouseX, mouseY) point with regards to the center of the screen (Dims.w(0.5), Dims.h(0.5)). From a quick look, I think atan2 https://en.wikipedia.org/wiki/Atan2 can be used on (mouseX-Dims.w(0.5), mouseY-Dims.h(0.5)). Then, based on the angle, you can select one item.
Also this reminded me of this https://github.com/qwazix/qmltimepicker/blob/master/qml/nemo/CircularSlider.qml maybe you'd want to play around with that Item.
c) kinda answered in b). onPositionChanged should help :)
d) if I understand correctly, you're asking how to get the angle of an app in a list of app. If you have an array of N apps, want to start at the top (90° from the x axis) and use 90 degrees per app (1/4 rotation), then the nth app will be at the ((n%4) - 1) * -90 degrees

[Timo Könnecke]

Thank you very much!
Will absolutely read into and ask again soon :D

d) Is even simpler. There will be a settings item/app needed to sort installed apps by user preference. This selection will likely be stored in a list. How do i now assign app x to n 1/4 rotations.
But reading that again it seems trivial so i just answered myself just by reading again :D
The main task is to try register n at all. And that i will try simply in qmlscene until i have something to show.
Thanks again!

[Timo Könnecke]

One limitation I can think of with this UX is that it is potentially hard to discover. We'd need to make sure that the "crown" is visible to make it obvious that once the user has scrolled up they can now swipe around the screen

The main thing the user has to understand is to not flinch or let the swipe go as used now to open the app-drawer.
Once the "Dial" is triggered by holding the swipe, i hope to be able to give enough visual aid to only let the first attempt fail and make it intuitive to learn.
Adding the gesture to the tutorial should be enough.
Else i shall be condemned to answer each "The new app-dial does not work!1!!" complaint b GuestXXX on matrix myself :D

[Timo Könnecke]

agenda.mp4

Quick mockup with no visual help or eye-candy at all. Just to show the basic principle of how the gesture could work.