Improve UX/UI to the dashboard

[Espina2]

Hi guys,
I have worked some several hours in something I want to share and see if we can improve the design and the UX of the dashboard. I don't pretend to complete redesign and the idea is that we can divide the good ideas and implement them incrementally.

http://presentator.io/pt-br/M2qtF#v1-s1

Points that Where I focus:

Clear actions - Download and principal actions are now visible and don't need to be discovered, much more easy to select items and download multiple items.

Clear Navigation Between apps - This is an improvement to Julius app, I think that only the icons is not clear enough and can be difficult to understand when having similar icons, so icon more label can fix the problem.

Drag and Drop - Drag and drop feature more prominent.

I still think that are some things that need to be improved, but I want to know if I should continue or if not a good ideia to post this kind of "work".

@nextcloud/designers @jancborchardt @eppfel @juliushaertl

[schiessle]

Looks quite nice. Without going into details I like the overall idea and direction. Looks fresh and light. Also the Grid-view could more or less replace the gallery, right?

[Espina2]

@schiessle, jos told me that you are thinking in merge the gallery app in the core, so I made this with that in consideration.

[nickvergessen]

Drag and drop placeholder 👍
Share access list 👍
Grid/list view with better icon 👍
Notification count on the header 👍
Better availability of actions in the sidebar 👍

---

Kill sidebar icons 👎 (too much back and forth)
Moving notifications into the drop down 👎 (it has no view, just the dropdown, so either you have to nest them or its going to cause a lot of work again...)

---

❔ I have the fear that the general layout change (header and content) cause a lot of work for apps and also might require a special "mobile" design afterwards.

[Espina2]

@nickvergessen

Kill sidebar icons 👎 (too much back and forth)

• Still working on that, and I prefer the icons too. :)

Moving notifications into the drop down 👎

(it has no view, just the dropdown, so either you have to nest them or it's going to cause a lot of work again...)

Right now we only have the notifications icon we have notifications right?

❔ I have the fear that the general layout change (header and content) cause a lot of work for apps and also might require a special "mobile" design afterwards.

• It can be true, but this is a prototype, if you take a closer look, almost all the things are in the same place, it doesn't change the workflow and the position of things.

This is 16H hours work, it's normal that still need some work, but it's a good start, so people can think about, and give some feedback. If we see that is not realistic I will not put more effort on this, if we think that this can be done, I will put some more hours. :)

[MariusBluem]

Right now we only have the notifications icon we have notifications right?

Yes. A behavior which hopefully changes in the future: nextcloud/notifications#2

[oparoz]

Also the Grid-view could more or less replace the gallery, right?

Nope. They are complementary, both are needed by some people.

[Espina2]

@oparoz

I think that the list view doesn't need the pictures thumbnails.

[oparoz]

I think that the list view doesn't need the pictures thumbnails.

Maybe. It can always be introduced later if need be.

[Spartachetto]

@Espina2 I do not know if this is the right issue to raise this point, yet I will try and you can say "no, thanks"!

I advocated for some feedback on personal data (see for example #2143 ).
If you deem it interesting and related, I could make some other proposals.

Just let me know and thank you for all your work!

[Espina2]

I think it is better to discuss that in another place. The main focus here is to improve the UX/UI, and not to implement new features. I will glad to help but not in here. :)

So what I can help to make this happen?

[karlitschek]

There some interesting ideas in this. And the overall look is definitely nice and fresh. Of course there are a lot of details to discuss. For example that fact that this probably break all existing apps by changing the styles and structure of the page too much. The questions where all the stuff of the current right sidebar goes and other details like that the search is using a lot of space even when not uses..... Overall there is a lot of whitespace and big text and folder. This is wasting space but looks nice too of course. Would love to hear the opinion of @jancborchardt here

[jancborchardt]

I have to say I am really skeptical here. In short, there is too much space used for interface elements and too little for actual content. It looks very crowded and quite confusing.

• The layout misses visual hierarchy. The breadcrumb is the most prominent part, why? It feels imbalanced.
• There is a lot of whitespace (they grey-ish background) which separates parts in a strange way.
• The width of an app entry would be decided by the length of the text, which is completely arbitrary and will also change depending on language. We shouldn’t do that.
• The icons of the navigation entries were removed, why that?
• The »Create new« button is not very prominent and to the side.
• For what reason has the »size« column been moved to the left?
• How do I now open a file or folder and how will people know the difference where to click for opening and where for getting the actions? There is no indicator for how to open the sidebar.
• Where’s the Favorite function?
• There absolutely need to be picture thumbnails in the file list view. Any thumbnail is more helpful to identify a picture or to orient yourself in the list than a nondescript image-filetype icon and the usual IMG_20170423.jpg name.
• The Notifications are inside the users menu? How will that look?
• What about the Contacts menu Contacts menu #3233?
• There is a quite large amount of space and text dedicated to the search, while at the same time it’s not very recognizable as a search bar.
• How will this look on mobile / responsive-layout-wise?
• The current layout corresponds a lot with the mobile apps for Android and iOS, for good reasons of making it very easy to use cross-platform / cross-interface. Throwing this away would be quite confusing.
• And yes, as @karlitschek said this will necessitate adjusting of existing apps.

There are some good parts:

• The list of pictures of people the folder has been shared with. Let's put that instead of the "Shared" text in each row. And in the breadcrumb for when you are in a folder.
• That the checkboxes are always visible. I’m happy for proposals which balance this with the space available while also having the favorites function accessible.
• The drag & drop notice. Assuming it will vanish after the first time you do it, and it should have a close-x function.
• The proper view switcher Grid/List is great - maybe works icon-only for reducing visual noise of a not-often-used element. Of course we need a proper grid view also ;) see Add a thumbnail/grid view to the Files app #6

I would really prefer if we can break any design improvement down to small, manageable steps, which are well specified and can be tested. If we just change everything from one release to the next with no particular reason than for the sake of it, then we will confuse and turn off users.

So please @Espina2 don’t be discouraged by my comment. I mentioned it in the past already that we should take on things step by step, and that continues to be the way we have to work if we want to have changes testable and see if it’s really an improvement. :)

[karlitschek]

Yes. As @jancborchardt said I think the best approach is to break this down into smaller manageable parts. A lot of good ideas. Please don't be discouraged :-)

[jancborchardt]

By the way @Espina2 I just remembered this very relevant article by Facebook Design: https://medium.com/facebook-design/questions-to-ask-as-a-new-designer-on-the-team-7e3ace0c787f

Hope this helps understand our process and why we need to iterate in small steps. We are not as big as Facebook of course, but nevertheless millions of people use our software. :)

[Espina2]

@jancborchardt I will try to reply to all your points.

The layout misses visual hierarchy. The breadcrumb is the most prominent part, why? It feels imbalanced.

For me the layout doesn't feel unbalanced, in you can see for all the people that comment that for them it doesn't feel to. The breadcrumb being prominent help's a lot that you don't get lost and you clearly see where you are. It's the most important thing in an interface, know where you are.

There is a lot of whitespace (they grey-ish background) which separates parts in a strange way.
Why is this bad?

And why you is it strange? I like it.

The width of an app entry would be decided by the length of the text, which is completely arbitrary and will also change depending on the language. We shouldn’t do that.

So you are saying that having only one icon, that can be the same is a better solution that has an icon with a label... There are several studies that are not, just one for your consideration. https://uxdesign.cc/do-icons-need-labels-6cb4f4282c00

The icons of the navigation entries were removed, why that?
I already said on top that I should put them back. :)

The »Create new« button is not very prominent and to the side.
This is not true.

We perceive prominent by color, contrast and shappe, and we "read" a web page in Z. If you can abstract from the "content" you clearly see that is very prominent, and one point that we are looking at first. (example Image)

For what reason has the »size« column been moved to the left?
The idea is something similar to the app get info on a mac. You know what you selecting, and it will change with the items you have selected.

How do I now open a file or folder and how will people know the difference where to click for opening and where for getting the actions? There is no indicator for how to open the sidebar.

They don't need to click anywhere to see the actions, they will always be there. And this fixes the problem of discovery to where is the actions, and remove steps for actually, you download share, etc, etc.

Where’s the Favorite function?
This is something I missed. But I think it's very easy to find a solution.

The Notifications are inside the user's menu? How will that look?
I don't have an answer for that now, but it's very easy to.

What about the Contacts menu #3233
I didn't know that this exists's, and what this does?

How will this look on mobile / responsive-layout-wise?
This will be the next steps.

The things that are not there, like responsive version and notifications, it will be my the next steps.

@jancborchardt Some things are not simple to break and find a better solution for what you already have, for example how you can have a clear action ( download, retc) re layout some parts.

For the article itself, it will always depend, it's not the first team where I am, and I already have had the same role as you have now in the past. So it will always depend. :)

And I don't feel discouraged I will always be happy to explain why I think is best and why I did what I did, and this type of feedback it will always bring a even better solution.

@karlitschek Like you said this look clean and fresh, and this will make you doesn't look like owncloud, its good for marketing, and for UX. Also the ideia is to break this in small steps from the beggining.

Lets try work togheter and came up with something fresh and better. :)

[eppfel]

There is a lot of whitespace (they grey-ish background) which separates parts in a strange way.

Why is this bad?
And why you is it strange? I like it.

I also feel, that a little more spacing here and there would help, to make it look less crammed.

The width of an app entry would be decided by the length of the text, which is completely arbitrary and will also change depending on the language. We shouldn’t do that.

So you are saying that having only one icon, that can be the same is a better solution that has an icon with a label...

---

Yes, it is a problem with the new menu and I thought about it as well...
Is there any data, about how many apps nextcloud installations have in general? I suspect it to be not that much. So if 80-90 % of nextcloud users would only ever see this:

@Espina2 idea could be a feasible solution.
And for the pros having 8 and more, there could be a user setting show only app icons. Relevant #4439

---

The »Create new« button is not very prominent and to the side.

This is not true.

I feel the create new should move closer to the file list. Next to the drag & drop notice? #4483

---

How do I now open a file or folder and how will people know the difference where to click for opening and where for getting the actions? There is no indicator for how to open the sidebar.

They don't need to click anywhere to see the actions, they will always be there. And this fixes the problem of discovery to where is the actions, and remove steps for actually, you download share, etc, etc.

I really like the idea of having the right-sidebar open at all times. When nothing is selected it corresponds to the current folder. This would really improve user performance and would be a neat quick improvement...

[jancborchardt]

One thing that we could think about is making the top bar a bit higher (we need to beware though because it’s hard-coded in lots of places) and putting the app names below the icon. Like on iOS in the tab bars of apps.

@karlitschek Like you said this look clean and fresh, and this will make you doesn't look like owncloud, its good for marketing, and for UX.

@Espina2 this is definitely not how we make design decisions. ;) As our homie Steve put it: »Design is not how it looks, but how it works.« – and we’re not breaking the seamless way it works just for a different look. ;)

Anyway – let’s break this up into small steps as mentioned above, and as @eppfel already started. The things we agree on you can also open separate issues about, so then we can discuss the rest afterwards. One big issue is never likely to get solved. :)

[Espina2]

One thing that we could think about is making the top bar a bit higher (we need to beware though because it’s hard-coded in lots of places) and putting the app names below the icon. Like on iOS in the tab bars of apps.

This will add more extraspace and if you have big names you will have the same problem.

this is definitely not how we make design decisions. ;) As our homie Steve put it: »Design is not how it looks, but how it works.« – and we’re not breaking the seamless way it works just for a different look. ;)

We can have the two things, it can work better and look better. They are friends not enemies. :)

Anyway – let’s break this up into small steps as mentioned above, and as @eppfel already started. The things we agree on you can also open separate issues about, so then we can discuss the rest afterwards. One big issue is never likely to get solved. :)

There are several things that I dont know how to improve them with the current design. Its better that you and @eppfel make that, because I dont even have time at the moment.

[nickvergessen]

@Espina2 whats the next step? :)

[Espina2]

@nickvergessen that question should be to @jancborchardt. I explain my points and came with a solution for most of the problems I identified, but I sadly think this will never see the light of the day.

And that is okay, but I can't fix most of the problems without changing things in the layout, so it must be another person do that work, look to what I did, and fix the problem in another way.

[jancborchardt]

As said above, the next steps are:

Anyway – let’s break this up into small steps as mentioned above, and as @eppfel already started. The things we agree on you can also open separate issues about, so then we can discuss the rest afterwards. One big issue is never likely to get solved. :)