UTM 2.0 Design Concept

[osy]

Update 9/8/20: Check out this post for the latest design.

For UTM 2.0, we will be completely re-implementing the GUI in SwiftUI. The only exception will be the actual VM view because we use a lot of features that cannot be replicated in SwiftUI easily (gesture handlers, custom toolbar, custom keyboard, etc). For the rest of the UI, code will be shared across all platforms.

In addition to the UI overhaul, there are other design elements that needs to be changed:

• Creating a disk drive requires too many steps and is more complicated than it needs to be. We also don't provide a good way to change boot order. Also we wish to support removable disks.
• Settings that would commonly change (shared directory, removable drives, etc) should be exposed front and center without requiring the user to dig deep into settings.
• Less used/advanced settings should be hidden by default
• The Systems page is too filed, we'll refactor it into System and QEMU settings

This is a work in progress and feedback is appreciated.

(Thanks to #334 for some ideas)

iPhone

iPad

macOS

[snslpa]

Beautiful, great job. One one more thing if possible, can you change the RAM memory slider with green, orange/yellow, red color adapting it depending on the system RAM?

[brunocastello]

Some great designs here indeed. I see room for improvement. Being an UI/UX designer, I might have some ideas for you. I will try to find time to put a pen on them next days. I was watching the WWDC videos about designing for iPad and macOS this week.

[saagarjha]

I'm a bit old-school but for the VM list I think it might also be worth considering a table view cell with a info icon to access settings, depending which action you think is used more:

Tapping on the Ⓘ to bring up a modal makes more sense as well, as tapping on a table view cell usually causes navigation to occur.

Also, I am not a fan of the inset list style in the compact layout. I think it's overused and needlessly discriminates against those with less-wide devices, like iPhone SE or iPhone 6s/7/8 in zoomed mode.

[brunocastello]

I'm a bit old-school but for the VM list I think it might also be worth considering a table view cell with a info icon to access settings, depending which action you think is used more:

Tapping on the Ⓘ to bring up a modal makes more sense as well, as tapping on a table view cell usually causes navigation to occur.

Also, I am not a fan of the inset list style in the compact layout. I think it's overused and needlessly discriminates against those with less-wide devices, like iPhone SE or iPhone 6s/7/8 in zoomed mode.

Unless he doesnt want to be on App Store, he has to follow the strict Apple Human Interface Guidelines. While I personally believe that following them is better for a more pleasant UI experience on iOS and macOS, its strictly the developers choice to do so, but hey thats just me. They have a new Guideline for the macOS 11 and iOS 14. Whether it has problems for older devices, it may have been Apple’s choice to do so. They also have new guidelines on how and when to use the menus and modals.

Current UTM iPad look is very good, and just need small tweaks to update to iOS 14. I’d suggest to watch the WWDC 2020 video on how to design for iPad (I think this video was in tuesday or thursday WWDC 2020 event day) and since macOS and iPadOS app designs will share almost the same look from macOS Big Sur onwards, you can see that apps like Calendar and Files are betting on a sidebar look and organization for content.

[osy]

Beautiful, great job. One one more thing if possible, can you change the RAM memory slider with green, orange/yellow, red color adapting it depending on the system RAM?

Would love to but I can't find out how to do it in SwiftUI (without adding 1000 lines of code hacking together a custom slider)

Some great designs here indeed. I see room for improvement. Being an UI/UX designer, I might have some ideas for you. I will try to find time to put a pen on them next days.

Please do! I have no design experience and this is my first time trying out SwiftUI.

Also, I am not a fan of the inset list style in the compact layout. I think it's overused and needlessly discriminates against those with less-wide devices, like iPhone SE or iPhone 6s/7/8 in zoomed mode.

Good point. SwiftUI defaults to this when using Form {} so I made it consistent by making everything look that way. I'll play around with the other list styles.

[osy]

When it is done.

[ThatStella7922]

Unless he doesnt want to be on App Store, he has to follow the strict Apple Human Interface Guidelines.

@brunocastello you do know that UTM is never reaching the App Store?
Apple would never approve an app designed for running virtual machines on iOS.

[brunocastello]

In case you haven’t noted, he also wants to do a macOS version. In this context, my argument is still valid. Apple allows iDOS2 on App Store, which is an app designed to emulate DOS, pretty much the same thing.

But, even if he decided not to be on App Store, it is still recommended to follow their guidelines, and as an UI/UX designer, I strongly recommend that for a more seamless experience across the devices. There’s a reason why Apple does human interface guidelines for their apps - even Microsoft has one. They’re not just to look pretty. 🤷🏻‍♂️

[osy]

If Parallels is in the Mac App Store, I don't see why UTM can't be. And I agree that it's good to follow guidelines.

[obbcth]

In the front page of iPad and macOS, it would be good to add some items: UTM manual, sample VMs page, spice guest tool download page, or somewhat disk image creation page

As vmware did, showing items with icons would be great.

[osy]

Yeah where it currently says “placeholder” I plan to expand it.