UTM 2.0 Design Concept #408
Comments
osy
added
enhancement
|
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? |
|
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. |
|
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. |
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)
Please do! I have no design experience and this is my first time trying out SwiftUI.
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. |
|
When it is done. |
@brunocastello you do know that UTM is never reaching the App Store? |
|
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. 🤷🏻♂️ |
|
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. |
|
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
|
|
Yeah where it currently says “placeholder” I plan to expand it. |
|
Yes, usually that sort of stuff comes for free if you use system controls.
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. |
|
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. |
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. |
|
I like this design concept. It is pretty and easy to use. 😄 |
|
@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). |
|
@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... |
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.
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. |
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.
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).
|
|
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. |
|
@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 |
|
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... |
|
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. |
|
Thank you for your help. I will definitely incorporate your design into 2.0. A few comments:
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. |
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. |
|
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. |
|
I put together a couple icons in Photoshop. Is this the kind of design we're looking for? If so, I'll finish the rest and do a pull request. Icons
|
|
Constructive criticism: those don’t fit the style of SF Symbols icons. Having iOS-icon like borders on everything feels tacky and reminds me of old 2000s era designs. |
|
Well, although these icons were good art (btw it's missing W98), they don't really have to be SF Symbols icons style, nothing in Apples guidelines says it, so we actually we have a bit of more room to be creative there; but I agree that they look tacky. A few posts above you can see how VMware Fusion does it - a generic paper like icon with vmware icon inside. I doubt that they will do something different for Big Sur, most probably VMware will retain the same design; they don't tend to change it as much as Virtualbox does. My game plan was different: try and design without borders limiting their area so they don't look like new Big Sur icons. I wasn't even going to design a Windows icon for each version, just a generic one based on BootCamp icon for all versions. I'm not really a fan of Big Sur icons, but I understand that they wanted more consistency across platforms (because iPad apps will now be able to run on Big Sur in Apple Silicon Macs). |
|
Are we thinking something like this? |
|
The use of gradients and the labeling don’t look “Apple” to me. I’m not a designer so I can only give you my impressions as a user. |
|
If you need ideas of what an "iOS-like" icon looks like, scroll through Settings or the Watch app. You're looking for something flat, clean, and that works in small sizes–usually that means minimal text. |
|
I'm no designer but I think that with some modifications (mainly color changes and maybe background colors) I think they could work |
I agree, and I think the issue of the gradients is only amplified by the fact that the icons will be so small. I tried removing the gradient and it does look better: We have 3 options here. We can either use a Windows logo template with the version in the corner, use 1 Windows logo (I would advise against this since people distinguish between icons faster than text), or use the logo from that version, like how 10 and 8 would use the flat logo and 7 would use the wave logo, 2000/95 would use the flag logo, etc. This last option might confuse users who have versions with similar icons but would also have the advantage of quicker distinction. I personally like the version with the number in the corner but that's subjective. |
|
Personally as a user I agree that the different icons should be used instead of text in such small areas like the ones that the icons are going to be used in |
I can agree with that. I think that's the design we should go with, considering how small the icons will be. Perhaps we could aid distinction by a user setting a color theme to a VM if they want? That might work, but it could also potentially look terrible. We'll just have to see how it'll be implemented. |
|
Yea, I think users should be able to add a color to a VM, similar to colored tags in Finder. Maybe coloring the logo or the play button or a small colored bullet next to the name of the VM |
|
In UTM these icons will always have a text (VM name) next to them so I am not against a generic icon for them. Windows does not update as much as linux distros, so if we do a different icon for each Windows version we'd have to do one for every popular linux distro. And for any new linux distro. I don't think that, if I were the developer, I'd be arsed to do a new icon for each linux distro. No need for a version number icon when we have icons + VM name on sidebar and also architecture type as subtitle. For example, this is how Apple's BootCamp icon for windows was used: It's timeless, generic and enough to distinguish between other operating systems on UTM. "One size fits all" when using a particular characteristic present in all Windows icons from every generation - the windows glass. @ThatsNiceGuy : According to Apple guidelines, the users cannot assign a different color to each machines like the tags in Finder. They can only choose an accent color that will be the same for all icons. EDIT: It is not only in their guidelines, it was also mentioned in their WWDC 2020 videos when they introduced the new UI for developers. |
|
Do note that that Windows icon is quite old and likely would not pass HI review today (not that I hate it or anything, I think it looks nice. It's just not what I think what Apple would do today.) I'm curious about the guidelines about logo tinting–where does it say that users can't do that? There is certainly API for this… |
|
Virtualbox and VMware icons on their sidebar for each VM both would pass their review, I am not so sure about Virtualbox ones since they're not on App Store but Parallels and VMware are. This is what Parallels has been doing: I'm pretty sure Parallels uses the older one for Win 9x - Win 7 machines. I don't remember if it has a different one for Windows 3.x - I never tried that because Parallels do not offer SB16 sound emulation, and anyway, Windows 3.1 should use the MSDOS icon because its considered a GUI for MSDOS not an operating system like Windows 95. EDIT 2: Just found how it used to be for Windows 3.x on Parallels: |
https://developer.apple.com/design/human-interface-guidelines/macos/overview/whats-new-in-macos/ See "App Accent Colors". There's a catch, though:
osy would've to assign a fixed color to each OS icon in his app, but it's only one color, so the Windows icon has to be either fixed blue accent or the default Big Sur accent color chosen by the user, not all four original colors from MS icons. He could use the Parallels-style icons though, if he decided not to care about the Apple's HI guidelines to be on App Store. I haven't found anything in their guidelines against that, he'd have to send the app to them and wait to see what would be their response on that matter. But considering that these sidebar icons for the OSes would be quite small, the SF Icons glyph style is a better choice. So IMHO there are two options: a) go generic (bootcamp icon, linux penguin icon, apple icon, and a question mark icon for other OS), with the advantage that you'd never have to submit an update for a new Windows, linux distro or apple OS icon; b) go specific (windows style icons for each era - 3x, 9x, 7, 8-10; different icons for popular linux distros and an apple icon for macOS/OSX), but then osy would've to do a new icon for each new OS in the future. |
|
Latest macOS screenshots
Latest iOS screenshots
|
|
It's looking really, really good!! Keep improving the tiny details. I'm sure you're like me in this aspect. I don't know you, but I'm very obsessive with details - it happens when someone works as a web designer like I do. On a side note, it's a pity that the dev of 3dfx/glide passthrough patch for QEMU has dropped macOS support. Meh. Win 9x/XP VMs would benefit so much of this for retrogaming, since QEMU is faster than PCem and DOSBox, both of which have an emulated 3Dfx card. Anyway, UTM is looking very promising! I'm for sure going to give it a good use as a linux VM for web development in the future. |
|
Looks good. Some minor comments from my side:
I would put the + button pinned to the right edge of the left pane, since 1. it's only relevant to that part and 2. it's nudging the title out of its usual spot. Also, perhaps consider wrapping to a second line on the details text. One thing which you might wish to consider is a three-pane layout: VM list on the left, preview in the center, settings on the right. This would "fix" the problem you have with the attributes being really wide
Consider making this less wide in general, and making the controls not take up the entire horizontal space as well. Also, some padding on the top would be nice.
Consider using a full-width table view cell, since you're wasting space on margins when you have content that is truncating.
Consider collapsing the navigation bar title on the second level. And maybe bring back the separators?
Here too. See how Settings does it. |
Many pretty good suggestions, but.. macOS: I only strongly disagree with a three panel layout. Just go with wrapping the attribs below each, like you suggested, it's a better option. Most of the best macOS apps are just two panel layouts, it's good because it keeps things simple. The users are used to reading from top to bottom (screenshot + details) and also is clear to them that these are the details for that machine. Putting them on a left panel just makes it confusing for them and creates empty space for the center area. Check the WWDC 2020 videos about designing for iOS14/macOS11, they have a video about usage of the space in a window, which is interesting. Also, going with a two panel layout just keeps it consistent between macOS and iPadOS layouts, so the user also gets the things on the same place between the two devices. iOS: Unfortunately I think he cannot do these things, because it is the new UI language for iOS 14. You're still thinking about iOS 13, try the iOS 14 beta and you will see the changes. |
Right panel. Take a look at how Xcode's layout works.
I have watched them ;)
Right, that's actually what I'm designing for–on macOS three-column layouts make sense because of the increased space, while they don't work as well on iPad. I'm trying to play to each platform's strengths.
I'm on the beta, which things aren't in line with the new visual design? To be honest, I didn't really see much change between the two, so I'm not sure which parts you're talking about… |
Yes, but it only works for certain developers, but not for consumers and users. Myself don't use a third panel when developing a web site with Coda or an app UI on XCode. I find the third panel just makes things too cluttered and confusing for the users. You have to make it easier for the users, remember UTM is an UI interface to make it easier to use QEMU since its based on it, because QEMU alone is insanely complicated. The goal here is to make it simple and easier, not too much advanced/confusing on basic layouts before showing advanced ones. Like I said before, keeping screenshot + machine details to read from top to bottom is what users are used to (refer to VMware Fusion and - to some extent - Virtualbox). The goal here is to get some users from these apps since ARM Macs will not have x86 virtualization and UTM emulation is now their best option. I can give another example - my dad is 60 yrs old and still a developer, and he is constantly complaining about hidden third panels or about not finding something he needs in a app, only to find out it was in a third panel. I had to tell him where it was... repeatedly.
I know, but they (apple) recommend to keep it consistent across platforms. And I can understand why they recommend it, when the user jumps between iPad/Mac back and forth, he needs to know the things are on the same place as he is used to. To me it makes sense.
The suggestion for full width table cell views. I'm not against them, but I am yet to see a list on iOS 14 with the old iOS 13 full width table cells, and I haven't seen any, only on outdated apps that weren't updated for iOS 14. The settings app is not using them on iPadOS. So I thought "if iOS own UI is not using them, then we shouldn't use them unless stated on Apple's HIG that we can." |
I would as well but I think it's a SwiftUI bug/limitation.
The control layout is determined by SwiftUI's defaults and I haven't had a chance to fine tune them yet. Maybe if I have time I'll look into it. For the padding on top it's a limitation of doing NSTabViewController inside a modal sheet. I'm holding out for hopes that Apple will provide us with a proper implementation of TabView with the settings toolbar layout for SwiftUI in the future.
Not sure if it's possible in SwiftUI. This is what it gives me for
That's also the default for SwiftUI. I think Apple wants it this way so I'll keep it for now. Anyways my overall philosophy is to not really touch manual layout options (sizes, colours, positions, etc) and just pass my intentions to SwiftUI and let Apple's defaults do the work. This hopefully makes the code more maintainable for the future. In the very least, a real designer can come in and implement custom sets of modifiers and just apply them all at once. |
I looked around and apparently this is a known bug that may get fixed at some point, but yeah until then there's not much I think you can do.
Fair enough, just wanted to point them out. Not saying it's something you have to fix right now!
Hopefully.
Perhaps I'll file a bug against that, it only really makes sense to do that on iPad and perhaps wider iPhones; as @brunocastello has mentioned, since there is enough horizontal space there.
I figured as such; I'll try to ask Apple what the intention is here. Perhaps they just haven't gotten around to doing this yet. |
|
for the NSTabViewController limitation issue, I think it is because the modal sheet is missing the title, as seen in this image from Apple's HIG? The screen below is a modal from the Apple Mail app. Another option to circumvent the issue could be doing it Parallels Desktop style, same as seen in below screen from macOS Settings window: |
|
It would but I assume that the usual difficulty in polyfilling APIs would apply. |
|
I think the design is a little cramped, especially in the settings menus. It might be the test devices being too small, but I think 2-5 pixels of padding might help with that. |
|
Can you explain with a screenshot what you mean? |
and others
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:
This is a work in progress and feedback is appreciated.
(Thanks to #334 for some ideas)
iPhone
iPad
macOS
The text was updated successfully, but these errors were encountered: