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.

[saagarjha]

Yes, usually that sort of stuff comes for free if you use system controls.

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

Apple’s Human Interface Guidelines are a suggestion, not a requirement. Regardless, it’s usually a good idea to follow them. In this case, however, the inset style has had a long history of being used for regular width table views, often in a split view, as it consumes a bit of horizontal space to add a bit of flair to the result. However, it’s been overused in compact width layouts since it’s been added as API in iOS 13, and I’m just sick of seeing truncated detail text all the time…at the moment it’s not a huge deal as I don’t see VM names getting very long but it’s something to keep in mind as it’ll prevent the addition on it later.

As far as I am aware, the details of modal and push presentation have not changed for many years.

[saagarjha]

A couple of comments on the macOS design: if you want to show that a text field is editable, just make it editable. Users can click on it and change it if they wish. I’d suggest putting the “new VM” toolbar item to the left of the divider (and possibly picking an icon that doesn’t mean “compose”). You may wish to constrain the width of the window to prevent controls that look a bit goofy stretched out super wide.

[brunocastello]

Apple’s Human Interface Guidelines are a suggestion, not a requirement. Regardless, it’s usually a good idea to follow them.

Yes, but Apple often blocks apps that do not follow certain aspects. My company had the mobile version of our app (not designed by me at that point) blocked from the App Store because it didn’t follow some of these “suggested” standards. But anyway, we all agree that its a good idea to follow them.

[js-john]

I like this design concept. It is pretty and easy to use. 😄

[brunocastello]

@osy86 right, then on friday/saturday I will find some time to re-watch the WWDC videos and read the guidelines again before even designing something. My head is mostly on my actual work Moodle project for my employer, so I have to re-read again to "switch a toggle" on my head :P

Anyway, designing a concept for an Apple iOS/macOS app is a first for me (I design mostly websites) and also a good opportunity to test another app I've downloaded recently for vector/prototype drawing, "Vectornator" for both iOS and macOS, and it's free! I'll test on my iPad Pro, to develop a workflow for it (also a good test for my iPad as a work device). If all goes well, I can bode a farewell to (censored) expensive Adobe apps at home. Although Adobe XD for macOS is free (until now).

[brunocastello]

@osy86 There you go, still WIP. I've ran into a number of issues with their iOS 14 UI Kit being only available for Sketch and Photoshop, so I had to use my Mac and XD (thankfully XD can import from Sketch files, although certain aspects like positioning aren't properly imported), and this is why I could only come with iPhone version so far. iPad and MacOS will follow later, right now I'm heading to sleep some hours before the F1 Austrian Grand Prix.

Apparently their iOS 14 UI Kit files are still kinda incomplete (?) but I based myself on their WWDC videos examples and some youtube videos of users demoing/testing iOS 14 on iPhone and iPad.

I made a few changes from your concept - first I brought the Edit button so users can sort the list of VMs the way they like it to be; So I had to move the Create VM (+) button to left. If you want to add more actions to this screen, according to their WWDC videos on "Designing For iPad" they say it's better to create a dropdown on right for more actions, using the ellipsis circle icon (You will also be better served of icons if you download the SF Symbol Icons 2.0 Beta, I downloaded it too).

The list of VMs follow the same concept used in sidebars for many standard iOS 14 apps such as Calendars app. If you tap the More icon (...) you'll get a dropdown with more actions for your VM. If you tap the VM, then it will run.

Next I designed the settings pretty much the same way you did so you are on right track there, just needed to update to iOS 14 layout. Watch the WWDC videos for more on this subject (sidebars, toolbars, controls, actions...).

You can see that I added an Edit info for settings, I thought that it would be good to put not only the name and custom icon, but also VM description and VM type (Windows, Linux, Mac...). VMware Fusion provides that kind of info for each VM and it's useful for me to use their Description field for things like write down the product key used for each operating system.

Later I will try to bring the iPadOS version, and the macOS version too (that one is 90% the same thing you get on iPad for iOS 14/macOS Big Sur, so it should be quickly done).

Right, it's a nap time for me. ZzzZzZZzz...

[osy]

So I had to move the Create VM (+) button to left.

I think common usage paradigm puts the new/add button on the top or bottom right. I think most popular apps like notes, tweetbot, reeder, etc does it.

If you tap the More icon (...) you'll get a dropdown with more actions for your VM. If you tap the VM, then it will run.

How will this work on iPad where it’s expected that the item you select will change the detail view? If the behavior of iPhone and iPad differ it confuses the user.

[brunocastello]

I think common usage paradigm puts the new/add button on the top or bottom right. I think most popular apps like notes, tweetbot, reeder, etc does it.

I thought about that, but then I saw the default iOS 14 Calendars app. It has many main actions on left, and other apps below have the Edit button on right. Note that Photos has add album on the bottom left; It is a problem if you have too many albums, you'd have to scroll down. Other third party apps like tweetbot and Gmail have a big button on right bottom and it would actually work, but how it translates to iPadOS and macOS versions is not clear to me.

If you tap the More icon (...) you'll get a dropdown with more actions for your VM. If you tap the VM, then it will run.

How will this work on iPad where it’s expected that the item you select will change the detail view? If the behavior of iPhone and iPad differ it confuses the user.

Check the iOS 14 Mail App - I did it similar to the VIP tab because I thought it is how it works for Mail (I have no devices with the betas running to test). One tap should bring the VIP mail, other on info icon should bring the info about the VIP mails tab; apparently it is how I thought it works there... but I can see your concern, then in this case you can do just one tap, and it should just bring the dropdown with the actions for that VM - and the Run button is already there so I had covered this case.

The difference from that design to iPad is that on iPad as you single tap the VM name, it brings the detail view on right and on that detail view area, right top, you will have the actions for that VM. Kinda like VMware Fusion designed it (and remember that VMware Fusion works differently; one click brings the detail, two clicks actually run the VMware machine).

[brunocastello]

I'm also waiting for the VMware Fusion Tech Preview version to be released, so I can see if they are already updating it to Big Sur UI redesign. But knowing VMware, I don't think they will; they show more "love" for other versions of their product than they do for Fusion.

[brunocastello]

@osy86 I changed the top buttons the way you mentioned and I also modified the design a bit more to try and get some consistency across devices. I based the design in a mix of iOS 14's Files app, Messages app and Calendars app. Also got some screens inspirations from VMware and Virtualbox to fill in the content area. For iPad VM screen, I added a description area where the users can take note of something important related to the VM (serials, keys, user accounts...)

I hope you like it. macOS is next in my list. Now, nap time again... ZzzZZzzzzZzzz...

iPad

iPhone

[brunocastello]

Wow, that was hard work. I had no UI Kit for macOS Big Sur, just for Catalina. So I had to build the screens from scratch, designing over existing screenshots of Finder and Mail apps. That is also the reason why I did not design a Settings screen for macOS - But unless I am wrong and any other app has a better view, I believe you can follow the exact same design used for System Preferences window on Big Sur (Screenshot attached from the Dark Mode version of System Prefs). I've also added SF Symbols icons to Settings, that can help to design the Big Sur version later; I was a bit lazy to change the colours for each icon, so I'll leave it up to the dev to choose his preferred colours for each. I think I'm finished. Bear in mind that I probably did not follow the typography correctly (the UI Kits are for Catalina and the WWDC videos showed very different typography sizes, but I think that when you build the screens on Xcode, then Xcode will automatically show you the correct typography sizes for everything when it's the case.

@osy86 : Note, I used the standard blue color as the accent color for the iOS/iPadOS version, but as I can see from their WWDC video, you can choose any other color you want from the standard options available. I'm curious though; what "UTM" means? If you wish, I can help later with the branding too.

Right, there you go, macOS versions, updates to Settings screen on iOS and a screenshot of macOS System Prefs for you to use as a baseline for the macOS version:

iPhone and iPad new Settings

macOS

macOS Big Sur System Preferences for reference:

I'm on America/Sao Paulo timezone (Rio de Janeiro, Brazil) so it's nap time for me again...

[brunocastello]

As soon as VMware releases the Fusion Tech Preview, I will do a VM with Big Sur beta and install Xcode 12 beta on it, I want to learn SwiftUI too. I want to do more than just web design in the future, but never had time to do that so I have to find time for that too.

[osy]

Thank you for your help. I will definitely incorporate your design into 2.0. A few comments:

1. I don't like the screenshot to the left of the icon. I was going to include a way for the user to pick from a list of OS icons as well as import their own. In that case, we need a nice "default" icon. Right now I'm using the SF symbol "desktopcomputer" but it could be improved.
2. Don't know if I want to continue putting a big circle play button on top of the screenshot. But I'll have to see with a few different screenshots.
3. I had some different icons chosen for the settings in the latest commit we mostly had the same ideas but I like the blue background and your QEMU icon. I think Share should be "person.crop.circle" since it's more like "shared drive" not "share this image".

Do you have any design source files I can use? I'm not sure if you used Sketch or Xcode storyboards or whatever. I have to convert it to SwiftUI and a lot of stuff isn't possible yet.

[brunocastello]

Thank you for your help. I will definitely incorporate your design into 2.0. A few comments:

1. I don't like the screenshot to the left of the icon. I was going to include a way for the user to pick from a list of OS icons as well as import their own. In that case, we need a nice "default" icon. Right now I'm using the SF symbol "desktopcomputer" but it could be improved.
2. Don't know if I want to continue putting a big circle play button on top of the screenshot. But I'll have to see with a few different screenshots.
3. I had some different icons chosen for the settings in the latest commit we mostly had the same ideas but I like the blue background and your QEMU icon. I think Share should be "person.crop.circle" since it's more like "shared drive" not "share this image".

Do you have any design source files I can use? I'm not sure if you used Sketch or Xcode storyboards or whatever. I have to convert it to SwiftUI and a lot of stuff isn't possible yet.

1. That's OK, this one is up to your personal taste. I personally find it easier not to include an icon for each OS because then you'd have to search for all icons on Google and give them a treat to look nice on it. I like the screenshot option because that way I do not need to search for an icon.

2. Play with it, experiment, test and choose your style from there. Most apps for virtualization do as I designed, hence why I did it. Again, it's you who have the last word here, I accept that.

3. Yeah. For QEMU I used the box package because here for Moodle we use that for SCORM packages activities so that made sense for me. You're right about the share icon though; I just had a hard time to find it so I used that icon instead.

About the design source files, I can send them to you for sure! I used Adobe XD, though. Don't worry, Adobe XD is free on their site; You can use it to convert to Sketch, I don't have Sketch but I advise against because the conversion will probably be messy (I converted the Sketch UI kits for iOS to XD and they were a bit messy). I'd have used Xcode storyboards if I had managed to install the Xcode 12 beta without messing my Xcode 11 (11 is still needed for my work so I didn't want to mess with it, hence why I did the post above about virtualization of Big Sur).

How can I send the XD file to you? Do you have an email I can send it? It's around 34 MB and hopefully no linked components from other artboards. I could put it on WeTransfer and send you a link, but WeTransfer free account keeps the file there for seven days only.

[osy]

I don't think you have any special assets so I can probably work from the screenshots for now if it's too big to attach on github.

[brunocastello]

OK. Let me know if you need it anytime. I'm glad I could help; I believe UTM will be a great option for the future ARM Macs once they are released; because I think VMware and Parallels will have a huge work ahead to bring x86 virtualization to them, while QEMU is just emulation and is a bit slower, but ARM Macs performance can change this game. And once you release 2.0, I will include these design screens on my portfolio, it will be nice to have the first app project design on my portfolio, where I just have web portals and Moodle LMS projects so far.

Off Topic: btw, any news on sound support for next release? 😜 j/k.

[osy]

Also, how do you envision the preferences look for macOS? It can't be like iPad because popover sheets aren't in the design language of macOS. I originally thought of a second window with the tab view from my original post but then decided to merge it with the main window since I had a lot of empty space. But if the screenshot is going to use that space, I may move back to the two-window design. But I'm also wondering what's better from a usability perspective: is the screenshot important enough to warrant a new window for settings which can be more visual clutter.

EDIT:

any news on sound support for next release

I think sound works but you need the OS to support the QEMU sound card. It works in my Debian VM.

[brunocastello]

Also, how do you envision the preferences look for macOS? It can't be like iPad because popover sheets aren't in the design language of macOS. I originally thought of a second window with the tab view from my original post but then decided to merge it with the main window since I had a lot of empty space. But if the screenshot is going to use that space, I may move back to the two-window design. But I'm also wondering what's better from a usability perspective: is the screenshot important enough to warrant a new window for settings which can be more visual clutter.

Yeah, it can't be like iPadOS because it's not the macOS design language. I agree. But from what I saw on WWDC, and they have very little images showing that concept, they tend to use a second window for settings. VMware Fusion and Parallels actually work that way on Catalina; I posted above a screen of Big Sur System Preferences i've found on the web, although in dark mode, that could actually be a good baseline for you. However I will continue doing some research on it and as soon as I can get Big Sur running on VMware Tech Preview, then I can have a clear idea of what Apple does have for this.

Here you see how Parallels Desktop works on Catalina:

And here how VMware Fusion works on Catalina:

VMware does it all on the same second window. Pretty much like how Big Sur System Preferences also work.

My personal vote is for the second window to have settings, because I believe we have too much content for just a single window app. If you do like Big Sur System Preferences, you will be fine.

[brunocastello]

Hi @osy86, I decided to do a Settings pane when I saw this page, in "Windows and Views" section: https://developer.apple.com/design/human-interface-guidelines/macos/overview/whats-new-in-macos/

I've also updated the Sharing icon using the one you asked for. There are the screens:

[osy]

I like the macOS settings but is it possible in swiftui? If not I may have to write a new package...

[brunocastello]

No idea, but it should be. It's how it's designed on their Human Interface Guidelines page.

I really like the way I designed it too, because it should be easier for the users. But in case you can't, theres an alternative, as shown in their documentation there as well:

In this second concept you just remove the arrows, home icon, search, align the title to the center and remove the footer content. Try the concept I designed first and let me know if it's possible.

[osy]

That’s an outdated proof of concept that doesn’t have any working code. The latest design will be different as presented above.

[osy]

This is a development thread. Please refrain from commenting if you don’t have any feedback about the design.

[itselijahciali]

One thing I'd like to add is making it more simple for the end-user. People on the dev team might know what each argument might mean, but not everybody does. I had an interesting idea, what if we created a sister app that was a streamlined way to run something like Windows. It would download the .ISO from the website, create snapshots automatically for crash prevention, and automatically set up the configuration. Perhaps we could make a partition-like system where it shows how much space is free on the device and you could make a file that was that size?

[osy]

Template support in #336 should make configuration easier. Aside from that there’s not going to be an automatic installer like Parallels Desktop because that’s too much work. You can always download and share prebuilt VMs.

[brunocastello]

QEMU has support for snapshots, but I have never used it nor know how it works. I know how it works on VMware though. I don't think it works this way on QEMU (so osy86 correct me if I am wrong).

And I was going to suggest templates too but @osy86 beat me at it above. But I was thinking how it works: Imagine if I open UTM, theres the big button on main page "Create New Machine". Then a new window pops up with the System Settings tab open. I select an OS and "automagically" based on my OS selection the machine configuration changes from any preset/template the app has defined as default. Is it how the templates are supposed to work?

[osy]

QEMU snapshots is currently supported. That’s what happens when you pause and resume. And there’s an option to take a snapshot before crashing. So I don’t know what they were talking about there.

Yeah I haven’t thought it through yet as it’s a much lower priority feature but you have preconfigured settings and a way to quickly change ram/hdd size. It might also let you automatically download the ISO.

[brunocastello]

I wouldn't think about automatic ISO download either. You will have some extra work to make a curated list of mirrors to download them. You have to ask yourself if its worth it when you have prebuilt VMs to share and download.

[obbcth]

I think putting a circle play button on thumbnail doesn't necessary. The osy's design looks better. Also it would be great if there's more colors in the settings tab. All blue colors look strict.

There's two options to make new VM: first one is typical, and second one is advanced. (I see the typical one is not designed yet) So, the page design like Adding new card in Apple Pay or Airpods Pro NC Test would be great. https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/onboarding/

Second and third one

[brunocastello]

I think putting a circle play button on thumbnail doesn't necessary. The osy's design looks better.

My understanding is that the play icon is there to indicate machine status (on, off, paused). But since the message below the machine name also does it, then yes, the play icon can be safely removed.

Some people will prefer the screenshots and some will prefer the icons. I don't like the OS icons idea (but that's just me, my opinion). Therefore I have a suggestion: How about letting the user to choose between auto generated thumbnails or icons when he's editing or creating a VM? That way everyone will be happy.

Also it would be great if there's more colors in the settings tab. All blue colors look strict.

I agree, I just left it all blue because 1) I wanted to get the screens done quickly and 2) it's osy's decision, not mine, to choose a color for each setting.

There's two options to make new VM: first one is typical, and second one is advanced. (I see the typical one is not designed yet)

That does not make any sense. There's only one route to make a VM and it's not "advanced" (it will only be "advanced" if you decide to change something while on machine creation), because https://github.com/utmapp/UTM/issues/408#issuecomment-655774559 will take care of it for them.

The onboarding experience is only for newcomers and first time users, and it is used only one time when running an app for the first time. I doubt that the UTM audience has never done any OS virtualization before using the app.

[osy]

Another comment on the screen. So right now it only takes a screenshot if you pause/resume a VM. So there won’t always be a screen to use. Also sometimes the screen isn’t useful: like if you have Firefox open to google the screenshot is just of google. And if you scale it down to a tiny icon, it probably won’t look like anything.

[brunocastello]

Right, I can see and agree with your argument (thumbnail is too tiny to see something) but if one has two VMs running the same OS for different purposes, the same icon for them won't make it easy to differentiate them straight away.

Plus the extra work to customize the icons for each VM...

For iPadOS and macOS version I can agree that the thumbnail is not necessary because the content area has a bigger screenshot. But since iPhone iOS does not have that, the thumbnail could be used there. You can get a button alongside the others that you have for the toolbar on top while running the VM... just to grab a screenshot of that VM to use as a thumbnail.

[osy]

Here's is my edits based on https://github.com/utmapp/UTM/issues/408#issuecomment-654023477

Comments:

• I'm using the iPhone SE as a reference size in order to accommodate the smallest screen size supported. For example, previous mockups I think had too much white space on this form factor.
• I went with your original placement of the + and Edit buttons. I've since looked at far more apps and realized that consistency of the Edit button placement is more important than the + button.
• Along with the first point, I've removed some of the padding and emphasized only the top and bottom padding.
• Contrary to my original mockup's intent, bigger text != more readable text. I also added the machine target name which should help people like me who has stuff like ArchLinux in both x86 and ARM.
• Stuck with default logo of the desktopcomputer SF Symbol for now. I don't really like it but don't have anything better right now.
• Following some of the discussion here, I decided to stay with putting the Play button right on each item for two reasons: 1) users are accustomed to tap list item -> go to next view. Also keeping the disclosure indicator for the same reason. I don't want to make "start vm" the default behaviour for tapping on an item. 2) I don't want to add the dots to open context menu either because it makes the most common task of launching a VM more than a single tap away from launching UTM. I did think the single triangle next to the indicator mark may seem confusing (is it pointing TO the indicator mark?) so I changed it to a triangle in a circle which also matches the style of the more common "i in a circle" design in other apps.

[brunocastello]

That's very good so far.

1) I haven't tried iOS 14 yet so I don't know how the list of machines should look like on iPhone. I have the iPhone X. I thought they didn't look like this (white boxes on grey background?) because when I see WhatsApp conversations list they look different - but then I am reminded that I am on iOS 13... yuck.

2) Let's see how the placement of these two buttons will work for the people. I think most people are used to tap on right side for more important actions, edit is only for editing the list order and deleting some stuff from the list. Well, that's what I thought when you said you were going to do the opposite before, I also thought I was wrong, hehehe. =P

3) and 4) I'd rather use the machine status (Powered On/Off/Paused) than the target name. People can always write the architecture on the name (like, eh, "Windows 10 x64" - VMware automatically does that if you don't change to a custom name).

5) Soon you will come to the dark side and adopt the thumbnails... just kidding. =P

6) Now you understand why I placed the icon over the thumbnails =P Well, let's try to work around this. How about placing it before the name this way (machine icon - play icon - name/architecture and indicator) ? This way when they tap on it, they won't mistakenly tap the wrong icon?

[osy]

I'd rather use the machine status (Powered On/Off/Paused) than the target name

There's a technical limitation of UTM that only lets you have one running VM at a time and that's unlikely to change (Apple won't let us use fork()). So once a VM is running you'll never get back to the list view again.

How about placing it before the name this way (machine icon - play icon - name/architecture and indicator) ?

I tried that and it didn't look "right" to me. I haven't seen any other app have a style of "icon - button - content - disclosure indictor" but I have seen "icon - content - info button - disclosure indictor"

[osy]

@brunocastello what is the corner radius and length/width value for your icons in the settings? I'm trying to draw the buttons with RoundedRectangle() and they look too curved or too rectangular.

EDIT: This is 32x32 points, corner radius 10, circular style

Btw the colors I choose are: blue = most important configuration, green = device configuration, yellow = sharing

[brunocastello]

I'd rather use the machine status (Powered On/Off/Paused) than the target name

There's a technical limitation of UTM that only lets you have one running VM at a time and that's unlikely to change (Apple won't let us use fork()). So once a VM is running you'll never get back to the list view again.

Ahhh, I didn't knew that. Then scrap the power status and place the architecture instead - but the power status can work this way on macOS version right?

How about placing it before the name this way (machine icon - play icon - name/architecture and indicator) ?

I tried that and it didn't look "right" to me. I haven't seen any other app have a style of "icon - button - content - disclosure indictor" but I have seen "icon - content - info button - disclosure indictor"

Yeah, but you are still incurring on the risk of tapping the wrong icon and getting an undesired action. Maybe just scrap the play icon as well because you are only running only one machine.

[brunocastello]

@brunocastello what is the corner radius and length/width value for your icons in the settings? I'm trying to draw the buttons with RoundedRectangle() and they look too curved or too rectangular.

Adobe XD says I was using 10 too. iOS/iPadOS 14 and macOS Big Sur designs are more curved than before. That's probably 10 pixels or 10 points.

[brunocastello]

Btw the colors I choose are: blue = most important configuration, green = device configuration, yellow = sharing

BRAZIL! 😜