windows-universal
windows-universal copied to clipboard
nextcloud
UI/UX design review and enhancements
This is the issue to provide and discuss some design enhancements.
There are some things in Windows (Mobile), you should be aware of. Windows Mobile differs from other mobile OS by the way it provides consistent look and feel across all apps, it shouldn't matter if it is a pre-installed or a custom one. Espacially if the app is a productive app, like this one. :smirk:
Microsoft itself has some notes about Design & UI here: https://developer.microsoft.com/en-us/windows/apps/design (Microsoft Design Language principles: https://www.microsoft.com/en-us/design/principles)
This will bring some limitations regarding the design of the app. Basically, every Windows Mobile app should use the same font, icons and the Windows theming. I will explain them now.
Font
The font you should use in Windows apps is called Segoe UI.
There's a list of available fonts and some notes over here: https://msdn.microsoft.com/en-us/windows/uwp/style/fonts
Icons
Windows provides a own icon set. It's called Segoe MDL2 icons.
- overview of the basic icons: http://modernicons.io/segoe-mdl2/cheatsheet/
- Microsoft notes about Segoe MDL2 Assets: https://msdn.microsoft.com/en-us/windows/uwp/style/segoe-ui-symbol-font
If you need to design additional icons (not included in the default icon set), please design them so they look coherent with the Segoe MDL2 icons. Please provide the new icons as SVG graphics.
Sizes
The sizes are defined in an device-independent unit called DIP (Device-independent pixel). As a rule of thumb, the defined sizes should always be dividable by 4. For example, the default CommandBar has a height of 48 DIP. You can read more about that here: https://msdn.microsoft.com/en-us/library/windows/desktop/ff684173(v=vs.85).aspx
Colors (theming)
Windows (Mobile) offers the user two different kinds of theming, a light theme (more or less white) and a dark theme (more or less black). The user can also choose a accent color. The nextcloud windows app should use these pre-defined colors.
Many apps are only using the company color on their splash screen. I've done this on the splash screen and the login screen.
Downloads
- Screenshots of the current Nextcloud app: NextcloudApp-Screenshots.zip
- Screenshots of default windows mobile apps: StandardApps-Screenshots.zip
I don't think we should use the accent color the user chooses. The nextcloud blue is a strong brand indicator and helps to realize in an instant, what app you are looking at. Offering bright/dark versions should be doable though. Other windows apps don't stick to the user-defined colors, either:
- https://superdevresources.com/10-windows-phone-apps-for-design-inspiration/
- https://www.pinterest.com/gjwinkel/windows-phone-ui-design/
Further the shades of grey (no pun intended) in the bright version make it look shallow. I propose adding contrast with the nextcloud blue for accentuation of some elements and getting rid of all but one (max. two) grey colors. Just compare the login screen to the rest of the screenshots and ask yourself what looks more appealing. And there is no black nextcloud logo, only white or blue.
I'm fine with Font, Icons, Sizes, because the overall look is already quite clean. The spacing between some texts / elements could be improved. I'll may add some example later...
accent color
Would be fine to me using the nextcloud blue as accent color as log as we make this configurable in the settings. So the user can decide if he wants to keep the nextcloud blue or if wants to use the system defined accent color. As standard we can set the nextcloud blue as accent color. Would this behavior be OK to you?
shades of grey
Wuld be OK for me. Can you provide some screens how this should look like?
nextcloud logo
It's OK for me to make it look like the accent color. If the user chooses to use the system accent color, do we want to fallback to black in case of the light theme?
accent color
Would be fine to me using the nextcloud blue as accent color as log as we make this configurable in the settings. So the user can decide if he wants to keep the nextcloud blue or if wants to use the system defined accent color. As standard we can set the nextcloud blue as accent color. Would this behavior be OK to you?
That sound like a good idea and is consistent with the theming option on the server.
shades of grey
Wuld be OK for me. Can you provide some screens how this should look like?
Very rough draft, but my first idea would be to use color extensively.
I also addressed horizontal spacing.
nextcloud logo
It's OK for me to make it look like the accent color. If the user chooses to use the system accent color, do we want to fallback to black in case of the light theme?
With my proposal, we would not need to. 😁
I want to get more opinions from @nextcloud/designers on this, before we get into more details
@Espina2 I read in the forums you have a Windows phone. Do you want to take shot at this? Because the way it is now, it looks nothing like nextcloud 😁
Yes, I instaled the app yesterday and I will take a look as soon as possible (maybe in the weekend).
I'd absolutely like to get involved in this discussion 😊
First of all, @SunboX, thanks for the very thorough set-up of this issue and for working on this “niche”-app in the first place!
@eppfel I really like your quick suggestions.
One thing, I would disagree with @SunboX on is sticking too much to Microsofts predefined Design modules. The best apps I've seen on Windows Phone are actually either completely different from the default styles or were published by Microsoft (or both). Consistency doesn't mean that we can't implement our own style 😉
This is just an idea: It could be really great to have a look at the Android app and iOS app and find out what their unique Design patterns are (besides the platform specific stuff) and then try to adapt them for the Windows app. I'd love to co-work on some mockups/visuals (maybe based on the current Design).
Me, as a Windows Mobile user really like those apps that stick to the default designs. I chose Windows Mobile cause of its consistent look and hate when there are apps with colorful LiveTiles or too much colors within the app. So please be careful
@ All Designers
I never saw a open source project like this with such enthusiastic designers. Please don't be upset with my explanations in the opening issue - please be creative!
Let's see what you come up with. I'm a Windows Mobile fan, and things in Windows Mobile are different than iOS or Android. So I may raise my hand - and I may want to discuss your designs. 😏 We are in a community here - and a social community is healthy, if no one is really happy with the solution. 😄
Please be creative in the first place! 😏
So I started design the application but I can't find the google Segoe UI font. Anyone knows where I can find it?
@Espina2 You can get the font for free from here: http://www.myfontfree.com/segoe-ui-myfontfreecom126f37416.htm
Segoe UI Symbol: http://www.myfontfree.com/segoeuisymbol-myfontfreecom126f132800.htm Segoe UI Emoji: http://www.myfontfree.com/segoeuiemoji-myfontfreecom126f132714.htm
So my ideia here is to use the initial circle spinner animate in the nextcloud logo, since they have the same shape. I can do the animation later.
I prefer the white version over the Nextcloud blue bg its looks a lot clean. I think that in a future version we can switch the logo for an illustration.
White on Blue is more inline with Nextcloud guidelines. Also, looking "cleaner" isn't necessarily better (also define what "cleaner" is according to you) since blue on white has a lot of contrast, yet gray on white lacks contrast, making it problematic accessibility wise.
I know what you are trying to say and I have no problem if the BG are blue. Like I said aesthetically I prefer the white version (because don't have color looks more clean because your eyes dont need to process the blue) its because of that, that looks more cleaner.
So if are going to "Nextcloud Guidelines"(that doesn't exist), we should have the background like the login in the server, that one more time I didn't like it to. But this are my opinion. :)
Just a few things to keep in mind:
- Many apps let the user choose which color scheme to use (dark/white/system default). Do we want to offer a similar option in the setting?
- If we let the user decide on the color scheme, we should not set a fixed color accent.
- In Nextcloud you can use theming in order to set another "Nextcloud accent" color. Is there something like an API to query this color? Maybe we can set NC's color as accent color for the app.
- Many apps let the user choose which color scheme to use (dark/white/system default). Do we want to offer a similar option in the setting?
I would create Settings groups like this:
Theme
- Nextcloud (default - white)
- Windows (black or white, as defined in the Windows settings)
Accent color
- Nextcloud brand color (default - blue)
- Nextcloud user color
- Windows (as defined in the Windows settings)
In Nextcloud you can use theming in order to set another "Nextcloud accent" color. Is there something like an API to query this color? Maybe we can set NC's color as accent color for the app
It's work in progress nextcloud/server#885, but color, name, and other attributes are already available since nextcloud/server#1272 and were also backported. But keep in mind, that this is installation-wise, not user-defined. So, with multiple accounts, the color of the app would switch, when switching the account, which I think is not the best idea.
And, yes, I'm for keeping the app aligned with Windows. For example, I would definitely offer a light and dark theme, that fits the user's phone configuration. But I am sure it will be possible to not break the windows guidelines and still offer a "Nextcloud" look. 😉
@eppfel your suggestions look great! :)
@Espina2 @elioqoshi for log in, the background should indeed be blue and not white. We use our logo white on blue if possible and this looks less bland for the log in. The background is not needed here.
@Espina2 Could you please make a white on blue version of the login screen? So I would implement it this way, if no one else comes up with another design. :smirk:
Did it here. If you want, I can give you access to the app. https://scene.zeplin.io/project/57bf54c24ff046f70c9b9694