Upload/add button style and discoverability

[jancborchardt]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.
The upload button in Files is not super present, and looks old compared to our other buttons.

Describe the solution you'd like
We should upgrade it to the secondary NcButton from the components. And a simple text "Add" next to the "+" in the upload button would be good.

Additional context
Current:

Proposed:

[ishaan730]

Hi @jancborchardt, Another potential design solution could be, changing the current secondary button to a primary button with a dropdown icon can be a good choice here for current user pain points. This approach can improve the discoverability of the upload function and make it easier for users to access other related features.

Here are a few reasons why this approach could be effective:

Improving Discoverability: Making the "New" button a primary button can make it more noticeable to users, as primary buttons are typically used for high-priority actions. This can help users quickly identify the upload feature and encourage them to use it.

Contextual Menu: By adding a dropdown icon to the "New" button, you can provide users with access to a contextual menu that allows them to select the type of file or folder they want to upload. This can make the process of uploading files more intuitive, as users can select the appropriate option based on their needs.

Supporting Other Actions: The contextual menu will also provide access to other related features, such as creating a new folder or document. This can make it easier for users to navigate the app and perform other tasks related to file management.

I believe changing the secondary button to a primary button with a dropdown icon can improve the discoverability of the upload function and provide users with additional context and options. This can ultimately lead to a more streamlined and efficient file management experience for our users.

---

Additionally, I wanted to share another thought regarding the placement of the "New" button. As I observed in some of our other apps, we have been keeping the main primary action button under the top navigation menu. Therefore, it might be a good idea to follow the same placement for all our apps, including the file app.

By keeping the "New" button in a consistent location across all our apps, we can provide a more uniform experience for users, which can help them quickly find and use the upload function. This can ultimately improve the overall usability of our apps and create a more cohesive brand experience.

I would love to hear your thoughts or feedback you may have. Thank you!

[jancborchardt]

@ishaan730 hi :) a few points:

• You mention "current user pain points", can you explain what you mean by that?
• What do you think of making the button tetiary style instead of so present?
• The button being a contextual menu, how do you contrast that to the current implementation?
• A worry about the placement of the button in the navigation was always that it's not readily available on mobile or small screens.

What do you think?

On a separate note, the app icons in the header bar are quite off – which instance are you on? :)

[ishaan730]

Hey @jancborchardt , Thank you for compiling these points. Allow me to share my thoughts on this :)

You mention "current user pain points", can you explain what you mean by that?

In the context of the solution provided, the term "current user pain points" refers to the difficulties or challenges that users currently face while trying to upload files or button discoverability in the app. The proposed solution aims to address these pain points by making the upload function more discoverable and easier to access.

What do you think of making the button tertiary style instead of so present?

Making the button tertiary style instead of a prominent primary button is a valid design option, but it may not be the best choice for improving the discoverability of the upload function. Primary buttons are typically used for high-priority actions, so making the "New" button a primary button can draw more attention to it and make it easier for users to find.

The button being a contextual menu, how do you contrast that to the current implementation?

The current implementation of the button may not be as effective as the proposed solution, as it may not be as noticeable or easy to use for users. By changing the button to a primary button with a dropdown icon, users can more easily access the upload function and other related features. The dropdown menu can provide context and options that were not available in the previous implementation, making the process of uploading files more intuitive and streamlined.

A worry about the placement of the button in the navigation was always that it's not readily available on mobile or small screens.

The concern about the placement of the button on mobile or small screens is valid, and it's important to consider the usability of the app on different devices. However, by keeping the placement of the "New" button consistent across all our apps, we can provide a more uniform experience for users and help them quickly find and use the upload function, regardless of the device they are using. Additionally, we can optimize the design and layout of the button for mobile devices to ensure that it is easily accessible and usable on small screens.

On a separate note, the app icons in the header bar are quite off – which instance are you on? :)

As for the app icons, Please forgive my rough quick mockup as this is just in my local file :)

[lhsazevedo]

Hi! Would be a reasonable approach to proceed with the original task and move @ishaan730's great proposal to a new issue?
That way we can improve the product for users right away, while the proposal is matured and discussed with the attention it deserves.

EDIT:
@jancborchardt I see that this part of the files app wasn't fully migrated to Vue just yet. Should we wait for it?

[jancborchardt]

@lhsazevedo yes, absolutely the original proposal still stands and makes sense as it is a very small but nice improvement. If you like, feel free to submit a pull request for it. :)