Let's talk about UI

[aronovgj]

Not sure if this would be more appropriate in the dev section. Anyway:

For quite a long time UIs have not been making any sense to me. It started with Windows 8, then forums, websites, Gnome, Unity, Androids material design and, last but not least, ownCloud (it started with ownCloud and nothing has changed with Nextcloud until now). They all waste a ginormous amount of space on all kinds of screens and increase the amount of clicks to achieve any goal.

In ownCloud/Nextcloud UI-wise the change that sucked the most was the menu. That was before I got to know ownCloud though:

The menu is on the left and takes way too much space of your screen, due to the icons which are way too big. Now, instead of making the icons smaller, making the ownCloud logo smaller and putting the icons into the blue area on the top, where there is more than enough space, ownCloud decided to move all these icons away, behind a menu button, requiring the user to do two clicks, instead of one. Two clicks instead of one is not a matter of taste. It is actually twice as many clicks. Although it could be solved differently. This was a bad solution which was made even worse.
I know, you are screaming right now that there is an app for that. Sure. The question is why that app even exists. I think it shouldn’t. Direct Menu is the third highest rated app in the store. I’m sure this is not only because it is well coded but because that hidden menu actually sucks.

Just look how many icons you could fit in that black bar: one click less. Same goes for the menu on the right. It could also fit into that black bar. The Icons for users, admins etc. are distinctive enough to leave out the describing text. Even if not, I think it would be enough space for icons and text. Why wouldn’t you want a logout button in the top right corner? That’s intuitive. That’s how your banks UI looks like. That’s how your mail interface looks like. Thats how almost any account you log in to looks like. That’s not how the Amazon UI looks like. And that drives me crazy too

This is probably the best example for wasting space on screens:
It fits 4(!) apps on one screen, leaving more than 2/3 of the screen white, without offering really much of information.

More on white space? Sure:

The navigation bar on the left side is never full. Most of the time more than half of it is unused. And yet someone thought, it was a good idea to hide further settings behind a wheel which I often don’t even notice. Why not just show what is in there? And why is there a trash bin next to the settings? I think trash bin should be an app.
Let’s stay with the side bar. The buttons are pretty big. I still miss them too often. I am pretty sure this is because they are not separated from each other by lines, like for example the files in the files app.

Oh, the files app… let’s rant about that one for a bit:

Yep, definitely not enough space for 4 icons. Better do two clicks instead of one. That not only makes it a little tedious when you work a lot with Nextcloud but it also makes it harder to understand for some people. I don’t want to explain to my mom again and again that she has to click the three dots and then download…

Let me finish off by saying that Nextcloud is awesome. I’d be interested in arguments for and against what I said above and whether anyone feels the same way about the UI. I am aware that some of the things I criticized are made in order to be usable with other devices besides desktops. And I am aware that there will be a new store soon for Nextcloud. I just hope that this will be better in the regards I mentioned.

[stratacast]

I especially agree with the last one. The hidden options for downloads, details, etc. has confused the crap out of my family, who I would call “users”. They had no idea at all where to find the download option

[nickvergessen]

I agree with file-list and menu point and was also always annoyed by “more clicking”.

But let’s see what @jan our Design-Lead has to say about this.

[JasonBayton]

I think they started prioritising a mobile-first approach so many sites are moving towards, because on mobile you wouldn’t get close to having all icons, options and so on displayed on the page:

Not much whitespace there.

And then that begs the question, would you want to teach users two interfaces: desktop and mobile?

Extra clicks/taps are unnecessary on desktop, sure, but they are required on mobile. At least the UI is consistent and people only need to learn one interface, which is why I don’t mind it.

Also worth noting that design is probably supposed to work from 600*400 all the way up to 8K - some clients are going to get more out of the design than others

[tflidd]

On my mobile I normally use the mobile app and rarely the webinterface. Why optimize it for mobile use when it is primarily used on the desktop? Could you perhaps hide additional options in this 3dot-menu only when there is not enough space?

[JasonBayton]

@tflidd

On my mobile I normally use the mobile app and rarely the webinterface.

I do the opposite, different strokes for different folks.

[aronovgj]

@JasonBayton

And then that begs the question, would you want to teach users two interfaces: desktop and mobile?

If the buttons are directly accessible, you don’t have to learn that you have to click on the dots first.

How about a hybrid solution? If the screen is too small, hide the icons that don’t fit onto the screen (and only those icons). That way some icons would still be accessible directly.

@JasonBayton

I do the opposite, different strokes for different folks.

I assume that is because the web interface is more powerful than a mobile app. That would mean that the mobile app has to get more powerful.

[JasonBayton]

@aronovgj

I assume that is because the web interface is more powerful than a mobile app. That would mean that the mobile app has to get more powerful.

Not at all, I just don’t want to learn another interface

Aside from auto backup my use case just doesn’t require regularly interacting with the app, and as I’m usually in chrome anyway I just switch back to the tab.

Hybrid is fine, but some users will still wonder about the dots if they use the mobile interface, and considering NC is also an enterprise solution in which managed devices may not be allowed to install apps, could be a lot of users.

Best of both worlds all the same.

[jan]

Hey there @aronovgj. As Nextcloud is very focused on providing very good and simple design, we take feedback in this area to heart. I’m very happy that often people mention how nice and simple to use Nextcloud is. And I’m even happier when the design is not mentioned at all, since that means that it’s in the background, serving the content and use, as intended.

Let me see if I can clarify our decisions:

@aronovgj

For quite a long time UIs have not been making any sense to me. It started with Windows 8, then forums, websites, Gnome, Unity, Androids material design and, last but not least, ownCloud (it started with ownCloud and nothing has changed with Nextcloud until now). They all waste a ginormous amount of space on all kinds of screens and increase the amount of clicks to achieve any goal.

This is because computing, simply put, moves from the obscure realm of experts and tinkerers to everyday people. The amount of space is called whitespace and it’s important for humans to distinguish which parts of a software belong together. If you want to read more about this, I recommend reading about the Gestalt laws of grouping.

@aronovgj

Now, instead of making the icons smaller, making the ownCloud logo smaller and putting the icons into the blue area on the top, where there is more than enough space, ownCloud decided to move all these icons away, behind a menu button, requiring the user to do two clicks, instead of one. Two clicks instead of one is not a matter of taste. It is actually twice as many clicks. Although it could be solved differently. This was a bad solution which was made even worse.

I’ll first start by saying that this is something I’ve been thinking about. Like showing the 3 most used apps and hiding the rest in the menu like now. This would also aid findability a lot. On mobile we can still scale it down to what exists now. What do you think about that?

Some reasons it’s the way as it is now is to accomodate the many screen sizes there are, and also because this pattern is used by Google and iCloud which are well-known and used. Sure a software can put every available option directly in the interface, but that ends up where unfortunately a lot of open source projects are – with a design that is hard to navigate, bombards people with everything all at once and does not respect their time.

@aronovgj

Same goes for the menu on the right. It could also fit into that black bar. The Icons for users, admins etc. are distinctive enough to leave out the describing text. Even if not, I think it would be enough space for icons and text. Why wouldn’t you want a logout button in the top right corner? That’s intuitive. That’s how your banks UI looks like. That’s how your mail interface looks like. Thats how almost any account you log in to looks like. That’s not how the Amazon UI looks like. And that drives me crazy too

Again, of course we could put everything up there. But there’s a pretty simple reason we do not: Most of the functions there are not used all the time or very rarely. It costs mental power to process things which are not useful to your immediate task, just like having advertisements on a website or a neon sign in the city. It’s distracting. And focus is one of the most important things – we should not disturb it, but aid it.

@aronovgj

This is probably the best example for wasting space on screens:It fits 4(!) apps on one screen, leaving more than 2/3 of the screen white, without offering really much of information.

You are completely right. The apps management is something we want to and should really redesign. Simply using multiple columns would already improve it a lot. Are you up to help or know anyone with CSS skills who wants to jump in? Remember we are an open community.

@aronovgj

The navigation bar on the left side is never full. Most of the time more than half of it is unused. And yet someone thought, it was a good idea to hide further settings behind a wheel which I often don’t even notice. Why not just show what is in there?

Again, because these things are deliberately put there when they are only of use once or a few times, compared to the navigation entries which are used on a daily basis. The WebDAV link is likely used once/twice, if at all (cause you have the syncing apps). Or hidden files, you might never want to show them. It is not necessary to show these options all the time.

@aronovgj

And why is there a trash bin next to the settings? I think trash bin should be an app.

Because it belongs to Files. It’s a filter on the Files you have. It absolutely is not an app. Calendar and Contacts and Mail are not Files, it’s completely different things. I agree it’s a bit confusing because Gallery is an app and it shows files, but that’s something @oparoz and me have been talking about – we need a proper grid view for the Files app instead.

@aronovgj

Let’s stay with the side bar. The buttons are pretty big. I still miss them too often. I am pretty sure this is because they are not separated from each other by lines, like for example the files in the files app.

I’m not entirely sure what you mean here. That’s what the whitespace is for. Additional lines in the Files app are there because it can be very wide. It’s not needed in the sidebar.

@aronovgj

Yep, definitely not enough space for 4 icons. Better do two clicks instead of one. That not only makes it a little tedious when you work a lot with Nextcloud but it also makes it harder to understand for some people. I don’t want to explain to my mom again and again that she has to click the three dots and then download.

Initially we did have all the actions always displayed. It was a mess. Again, most of the things like rename and delete you don’t need a lot, unlike for example sharing which you might use more often. It’s true, we could ponder displaying a second action next to the share action. But displaying all of them also necessitates displaying the labels to be able to distinguish. And that would be incredibly large and distracting. And we need to maintain all this because it needs to scale down on all kinds of screen sizes.

@aronovgj

Let me finish off by saying that Nextcloud is awesome. I’d be interested in arguments for and against what I said above and whether anyone feels the same way about the UI. I am aware that some of the things I criticized are made in order to be usable with other devices besides desktops. And I am aware that there will be a new store soon for Nextcloud. I just hope that this will be better in the regards I mentioned.

Thanks a lot! I hope I could explain it a bit, and we try to always be very descriptive and transparent when doing design changes. And good points with the apps management and app menu – as said this is potentially planned but we need help! Yours maybe?

[aronovgj]

@jan

If you want to read more about this, I recommend reading about the Gestalt laws of grouping.

I know those. I probably went to the same university and heard the same lectures by the same prof as you did
I just feel that the way these laws are applied nowadays is too extreme.

@jan

I’ll first start by saying that this is something I’ve been thinking about. Like showing the 3 most used apps and hiding the rest in the menu like now.

That is exactly what I meant:

@aronovgj

How about a hybrid solution? If the screen is too small, hide the icons that don’t fit onto the screen (and only those icons). That way some icons would still be accessible directly.

I would like that.

@jan

Sure a software can put every available option directly in the interface, but that ends up where unfortunately a lot of open source projects are – with a design that is hard to navigate, bombards people with everything all at once and does not respect their time.

I don’t feel like there is too much stuff that would be displayed if all was shown at once. It is only details, rename, download and delete. I am one of those people who actually like being “bombarded” by information but I understand why this is not a good thing for everyone.

@jan

Are you up to help or know anyone with CSS skills who wants to jump in?

Sorry, no experience in CSS.

@jan

Remember we are an open community.

Thats why I thought it makes sense to post that in the first place.

@jan

Again, because these things are deliberately put there when they are only of use once or a few times, compared to the navigation entries which are used on a daily basis

Wouldn’t you say that at least apps are also used on a daily basis? I’d say there are quite a few elements that are used frequently and still are hidden behind expandable menus. I may be OCD but I constantly use the admin menu.

@jan

Because it belongs to Files. It’s a filter on the Files you have. It absolutely is not an app. Calendar and Contacts and Mail are not Files, it’s completely different things. I agree it’s a bit confusing because Gallery is an app and it shows files, but that’s something @oparoz and me have been talking about – we need a proper grid view for the Files app instead.

Sure. The actual point was that the position of the button is weird. Settings and trash bin don’t seem like they both belong there. I’d have put trash bin there if there was no settings button and the other way around. But here settings and trash bin seem so be connected somehow. Gestalt laws

@jan

I’m not entirely sure what you mean here. That’s what the whitespace is for. Additional lines in the Files app are there because it can be very wide. It’s not needed in the sidebar.

Ok that makes sense. However, I for some reason tend to click somewhere in the middle between the buttons where the white space is. If I knew exactly where the buttons borders are, I think I’d be more accurate. Maybe not lines but shadows of some sort to distinguish the buttons. Fitt’s law breaks, for example when you don’t know where the buttons start and end. Then you either may want to be extremely precise and try to hit the actual text in the button (slowing down mouse movement) or you tend to be sloppy, like me, and tend to miss the button completely (sacrificing precision). You basically have log(2D/W) with D being the distance and W being the target width and you don’t know W.

[jan]

By the way @aronovgj you might be happy to hear that with the upcoming Nextcloud 12, the direct menu way of showing the icons up top is the standard way we show apps.

Big thanks to @juliushaertl for this!

[aronovgj]

I am indeed happy to hear that

[Allan_Larsen]

I did not read all the comments here… there is a lot… first off Nextcloud has been great love it…
i would like to make a recommendation. and that is i use Nextcloud on my Microsoft Surface Pro it works good but not great… its not touch screen friendly… App’s i use most, Deck, Calendar, Contacts. I am always mobile so having the touchscreen is awesome but i cant scroll very easily or sometimes not at all. i end up moving things around instead… i dont know if this will be on your top tings to look at but it would be nice if it was touch screen friendly.

thanks for all that you are doing

[stefan-niedermann]

Dear @Allan_Larsen

hello and welcome to the Support-Forum.

To improve the overall experience you should open new issues for each problem you find in the corresponding GitHub repositories, where development takes place:

• Deck: https://github.com/nextcloud/deck/issues/new/choose
• Calendar: https://github.com/nextcloud/calendar/issues/new/choose
• Contacts: https://github.com/nextcloud/contacts/issues/new/choose

I am especially aware of a few recent improvements at least for the Deck app, e. g. “Make columns scroll independend” and “Horizontal scrolling” which might be related to your mentioned problems.

Also have a look at nextcloud.com/design to find information about how you can contribute to the future of the Nextcloud UX.

The developers usually do not read in this forum.