[UX] Navigationbar Button for Uploading

[hosy]

The “Dot” button has for me an unclear meaningfulness. At the moment it has only two entries for uploading files or photos.
In my opinion we should use a “Plus” button, because the user will so easier see what this action will do.

---

Documented with GitShot

---

[michaelstingl]

👍 for "Plus" button.

But we'll also need need an UI element to start selection of multiple files. (see #79)

For insipration: The iOS Files app just has the word "Select" on the top right.

[wuenschedesign]

Here is a preliminary layout of the list view. (Please do not consider Footer Navigation, which will be discussed in #164.)

[michaelstingl]

I played a little bit with prototyping in Figma

Here you can try it:
https://www.figma.com/proto/bQmS1FDEEuqeBR8K4mAfcBPD/ownCloud-iOS-12?node-id=64%3A1210&viewport=-65%2C340%2C0.835061&scaling=min-zoom

[jesmrec]

@michaelstingl you can open a new issue with the content of the menu when the '+' is clicked. The UX issue of changing the button is already developed in #206 and ready to merge.

[hosy]

I have also tried a draft how we can implement the '+' button and a multi selection with corresponding actions in the toolbar.
We have the space for the '+' button and it is leaned against Apples Files-App, also if there is the add folder button instead. A other solution would be to put the button on the right side.
Furthermore I moved the file icon and the file name, file date more on the left side, to be aligned with the '+' button and get more space for longer file names.

[jesmrec]

@hosy, i guess that @mneuwert will appreciate here -> #79 as well

[jesmrec]

IMHO, '+' button fits better in the top right corner, and the Select can be placed just on its left. The point here (from a design point of view) is that the bookmark name takes a long place when it is empty. But this is a different discussion

[hosy]

@jesmrec I think the left place should be reserved for the Back title.

[jesmrec]

Back is on the top left of the screen. But in the top right you can put both Select and +.

[hosy]

Maybe to much elements on this place, bcause we have the place below.

[jesmrec]

a draft with the option would be helpful ;)

[michaelstingl]

I really like the concept in #198 (comment) 👍

Back is on the top left of the screen. But in the top right you can put both Select and +.

I don't like mixing a word-like button and a icon-like button side by side and the support for longer file names sounds very useful.

@jesmrec Do you see any disadvantages? @wuenschedesign What do you think?

[wuenschedesign]

My current drafts on this topic so far. To be discussed. (The footer is just demo here and not referring to real functions)

Overview List	List in Select Mode	All Selected

[wuenschedesign]

I really like the concept in #198 (comment) 👍

Back is on the top left of the screen. But in the top right you can put both Select and +.

I don't like mixing a word-like button and a icon-like button side by side and the support for longer file names sounds very useful.

@jesmrec Do you see any disadvantages? @wuenschedesign What do you think?

I don’t recommend multiple actions on the top right along with a centered title in the navigation bar as it reduces dramatically the space for the title. iOS just offers multiple actions with navigation bars that don’t contain titles (e. g. calendar)

[michaelstingl]

(The footer is just demo here and not referring to real functions)

Please discuss the footer bar (tab bar) in #164 and the toolbar for multi-selection in #79 .

@wuenschedesign In the left draft in #198 (comment) you're mixing tab bar and toolbar which doesn't make sense.

[wuenschedesign]

(The footer is just demo here and not referring to real functions)

Please discuss the footer bar (tab bar) in #164 and the toolbar for multi-selection in #79 .

@wuenschedesign In the left draft in #198 (comment) you're mixing tab bar and toolbar which doesn't make sense.

I didn’t work yet on the tab bar. it’s just a: here could be your tab bar.

[michaelstingl]

Can the "Plus" button upload images and files AND create a new folder?

[wuenschedesign]

Can the "Plus" button upload images and files AND create a new folder?

You mean uploading files and for those files creating a new folder at exactly that time?

[michaelstingl]

You mean uploading files and for those files creating a new folder at exactly that time?

no.

More like in #198 (comment) , where the "Plus" button opens a menu, with all three options. This adds an additional step for the use to create a new folder. No idea if this makes UX worse. But I'd guess users will upload images and files more often than create new folders.

[wuenschedesign]

You mean uploading files and for those files creating a new folder at exactly that time?

no.

More like in #198 (comment) , where the "Plus" button opens a menu, with all three options. This adds an additional step for the use to create a new folder. No idea if this makes UX worse. But I'd guess users will upload images and files more often than create new folders.

I would definitely go for a solution with just one Add (+) Icon that can operate different functions like you proposed above. (Upload file, Upload images, create folder)

[michaelstingl]

I would definitely go for a solution with just one Add (+) Icon that can operate different functions like you proposed above. (Upload file, Upload images, create folder)

Cool, thanks for four your feedback 👍

[michaelstingl]

I opened a new issue for the discussed improvements:
#252