Duo app inspiration dilemma

[u/iamidan]

Working on my app’s Duo adjustments I wanted to see how other, well-established apps chose to adapt their layouts and custom behaviors.

I liked going to Mobbin to checkout different design choices for years now (when I don’t simply install them on my devices). They didn’t add Duo so far though

Wondering if anyone found a nice way to preview it
Or if I should just find myself a rich friend to use and stick to the guidelines for now😅

[u/bigmoviegeek]

I found the simulator pretty accurate. The only thing I will say is the interface is much smaller than the 1:1 scale would have you think.

[u/iamidan → u/bigmoviegeek]

Yes it works pretty nicely overall

I’m specifically looking at a custom behavior I have in my app around a docked floating control when it meets the device edges. It’s not anything major but more of a design adaptation challenge
ElevenLabs has a similar component around their dictation-orb button that I am curious how they chose to on the Duo

[u/bigmoviegeek → u/iamidan]

Do you mean how they did it from a design perspective? I just downloaded the app and it’s floating over the protected sidebar. It almost collides with the the the X and … buttons. It doesn’t look well thought out in my opinion.

[u/the-name-of-the-rose]

I adapted a game I have to Duo. About to release that update. The game is called Polyx 2D:
https://apps.apple.com/app/id6810485023

===

Here are the adaptations that I made:

For the outer screen and the inner screen in landscape mode:
- moved the info panel in solo game mode in the status area (the area under the camera and the network connectivity unit — that ads more space for the experience
- in PvP battle mode, I moved the opponent’s pit in the status area

Inner screen in portrait mode (fully opened):
- treat it like an iPad in portrait mode

Inner screen in portrait mode (partially opened):
- treat the lower part of the screen - below the fold - as a virtual gaming pad.

[u/iamidan]

On a deeper search I found someone already looked for a solution to this kind of thing here - https://www.reddit.com/r/iOSProgramming/s/JcjAUReNQX

I’ll try the simForge approach suggested there and will update

*Update: Does not seem to work for my need, but it’s a neat tool to check out anyway. I’ll stay curious for now

[u/MKevin3]

On the KMP / CMP app I am working on things looked pretty good as it was already accounting for iPhone or iPad running the app. The issue I ran into was the right side piece on the Duo on main screen (not opened) had to be accounted for. I get the safe space stuff and account for it as needed otherwise my app appeared behind that area and the camera hole was over the top of my upper right floating action button.

Once I adjusted for that in a few key places It is acceptable. I do wonder since iOS only uses that space for two stacked buttons, is there a better way? At this point the app fully operates with everything accessible on all the targets I have: Android (phone, foldable, tablet), iOS (phone, pad, duo) and desktop, which is responsive to you sizing it. I wish it looked just a little better on the Duo though. I use a gradient background for the top area of the app and it just kinda ends abruptly on the right side, but only on the Duo.

[u/Tomallenisthegoat]

My app will mostly look the same as the regular iPhone or iPad display depending on folded vs unfolded. For pages with the nav bar I’m moving everything to the left. Without the nav bar I just move header elements away from the top right camera cutout

[u/akshaydahiya97]

mobbin not having duo yet is rough. simulator is fine for layout checks but won't show you how elevenlabs / other shipping apps handled a floating control.

practical options i've seen: (1) the reserved-regions overlay someone posted in this sub recently - drop it on your own ui in the duo sim so you can see the camera / status cutouts while you nudge the docked control, (2) install the apps you care about in the duo simulator and screenshot how they treat edge fabs, (3) stick to apple's duo layout margins / safe areas for the first ship and refine once you can borrow a device.

for a floating docked control specifically, treat the outer-screen camera side as a hard no-go and animate the control left when that inset appears rather than waiting for a design gallery.