Mobile UI proposal

[ngocdh]

We started a discussion about mobile UI in #1765. While I love using the one window interface on desktop, I think mobile apps must have their own design because of small screens (except for tablets where the desktop design works fine).

So here's my POC for the mobile UI, please forgive my poor skills, but you should get the idea. I'm showing the element which I think is the most important and need most attention: the Mixer. Other screens (Connect, Chat, Settings, etc. should look similarly to current design).

What do you think?

[ann0see]

Yes. That would be a great starting point. Probably you'll need to do some stuff with QML I don't have any experience on QML, but I'm afraid that this involves a lot of restructuring of the source code. However, since you got the sound system on iOS working, I'm sure it's not impossible.

Tagging @jamulussoftware/designers here. They might have some ideas.

[gilgongo]

Good that this is getting some attention. Interesting too that you appear to have grouped "my controls" with your sider, and not have that slider as it currently is along with all the other participants. This was the subject of some discussion a while ago: does having your own fader in the "main mix" panel confuse things in relation to (for example) what "mute myself" does? A possible desktop re-configuration of that was:

But to return to your design: For handsets, the basic requirement for typical usability of interactive elements is that "hit areas" (the area that responds to a touch, as opposed to the "touch target" which is the area that looks interactive) need to be a minimum of 6mm on centre. Note also that best practice is to favour larger muscle movements for more important thumb interactions, which would mean setting faders sideways perhaps. But it's a bit hard to say at this stage.

[ngocdh]

See, the fader was among the others and that user still didn't understand its logic.

[dcorson-ticino-com]

Because you are not giving then the clue that it is the same.

[ngocdh]

Oh sorry I thought you said "heard".

I actually thought about putting the input gain control there. Now that you bring this up, I think we have a good reason to do it :)

[gilgongo]

I think, as @ngocdh implies, if someone says, "I have pushed the fader up all the way and the others still can't hear me any louder" then they have a somewhat bigger problem, because that indicates they think they think the faders act for all (eg "I have pushed the bassist's fader up all the way and the others still can't hear them any louder").

There was a reason why the input gain wasn't put into the main window, but I can't recall what that was now. I think @hoffie knows. (other than having two faders would of course be even more confusing)

[ngocdh]

There was a reason why the input gain wasn't put into the main window

If I recall correctly, the input gain is meant to be used once at initial setup only, not frequently. But I'd love to use it to reduce my volume in people's mix too, because it's not easy doing it at OS level, and it's just a few lines of code anyway.

[ngocdh]

Here's an updated POC with larger controls, and input gain as a dropdown box (like what we have now in Settings), not a fader to avoid the confusion.

[gilgongo]

6mm on centre would mean the "Grp | Mute | Solo" stack would be 18mm high, I think the most you'd be realistically able to get on most screens would be two rows with that layout, even without considering the fact that the pan controls would overlap with the fader at the top quite a lot.

I think a handset layout for thumb control to avoid interference would need to be more like this at about 375px perhaps:

[ngocdh]

That's really nice @gilgongo. You are the expert here. What did you use to create that POC?

[ngocdh]

I'm thinking that would also mean a complete rewrite of the UI for mobile without reusing existing (UI related) code?

[ngocdh]

@gilgongo like this? Sorry I don't speak pixel :(

[gilgongo]

Yes, something like that maybe so that the various touch targets are reasonably separated (but I'm sure it needs more thought). I've not actually verified that sketch for pixel accuracy - just estimated. And it would of course imply a complete UI re-write :-( The tool I used for the mockup is called Axure.

[ngocdh]

So here's my 1st attempt to write a mobile app using QML:
https://github.com/ngocdh/jamulus/tree/qml

The App is just a very simple Jamulus client which connects to a server given the address. In the mixerboard, there's only a "Practice Mode" button. Works on iOS, not yet on Android.

[ngocdh]

And my 5G :(

[ghost]

5GHz WiFi6 with the router's QoS set for the Jamulus device should be surprisingly good.

[dcorson-ticino-com]

My connection with a cable, note that if I use wifi, my jitter is similar to yours. I expect that with a cabled connection you will shave about 10ms from your overall delay.

Is that GSM 5G? How far are you from the sending antenna and how many walls does the signal have to go through?
Maybe GSM 4G is better ?
All these wireless connection, GSM and wifi, are also dependent on the number of other users using the frequency. Using the hot-spot I have noticed that the speed and delay is much better at 4AM than 4PM, just the number of people using their phones at different times of the day.

[dcorson-ticino-com]

5GHz WiFi6 with the router's QoS set for the Jamulus device should be surprisingly good.

Looking forward to hear more about it.

[ghost]

I can't test because the laptop is not WiFi6 and is only 2.4GHz. I do have a new and low cost TP-Link Archer AX20 WiFi 6 Router that significantly improved my ethernet (laptop: speedtest 25 -> 30 megabits/s) and wireless (iPhone: WiFi 6 @ 5GHz)

[mulyaj]

If I recall correctly, qml has more flexibility in the way of custom components. Since a rewrite of the code might happen, I'm curious if we could take an atomic design approach and build around a design system. It would allow us to get a more consistent aesthetic as well as address scalability in the design (additional features, new contributors, etc.)

[ngocdh]

Good idea.
When I was writing the POC, I didn't have (still don't) have a good understanding of the qml model, just assembling things so that it worked.

It would be great if someone could make that design happen.

[ann0see]

@mulyaj sorry for deleting your comment. I'm a bit worried about posting the clear link here. @ngocdh could you please E-Mail [email protected] to get a Discord/Matrix invite and discuss everything with @mulyaj?