[Design] File List UI review proposal

[ggdiez]

Hi guys I going to show you this design to change the UI of the iOS file list.

Chan chan!!!!

This is the new File List view.!!!

I will try to explain that interface and the changes with the current one:

• 1.- I have removed the transparencies in the Navigation Bar and in the TabBar. Now I use the solid ownCloud color in the Navigation Bar and a grey background color in the tab bar.

• 2.- New Icons in the tab bar. A lot of time using the current icons, some times the interfaces needs some new to appear refreshed.
  2.1 I use an archive instead of a file to represent the files section
  2.2 I use a cloud with a up arrow instead of the circle arrow, I think that that new icon represent better the uploads section.
  2.3 New icon for public links section. I have used that but I can use the previous one.
  2.3 New settings button, very similar to the previous one.

• 3.- Font Family. For this design I have used “Source Sans Pro” is very clear for Mobile and Web interfaces. I use only with two types: “Semi-Bold” and “Regular” styles.
  This is the link of this font -> https://github.com/adobe-fonts/source-sans-pro

• 4.- Search bar. Yes I know that for the moment this feature is not implemented yet, but I hope that will be implemented in a near future. ;) Search bar order button. Is where will appear the menu of order actions when the user taps on it.
  [WONT'FIX here] Keep up to date in the search issue

• 5.- Item cell. Now the cell are more height to represent better the information and state of the file or folder.

• • 5.1 File Type icon. I am using a new file type icons from “Material Design”, we can continue using the preview type icons, works fine for me, but I have wanted use others in order to present to the users a totally new interface.
• • 5.2 Name of the file in one line using the semibold style of the font.
• • 5.3 Subtitle of the file more or less like now but with changes.
    In the first part of the subtitle we will continue presenting the modify time of the item and the size in case of files.
    In case of folder will appear the number of files inside of the folder.
• • 5.4 Besides of that when a file or folder are in a download process in the second part of the subtitles will appear the percentage of the download process. [WON'T FIX HERE, will be consider in other US]

• • 5.5 Synchronized state icons. That icons appear over the type file icon and only appear once at time. I think that with one it’s enough taking as example the icons that appear in the current iOS app.

    5.5.1. Green Arrow. it means a file downloaded
    
    5.5.2. Fuchsia Mobile. it means a file available offline
    
    5.5.3. Grey Arrow. it means a file downloaded with a new version available
    
    5.5.4. Grey Mobile. it means a file available offline with a new version available
    
    5.5.5. Blue circle arrows. it means that the item are in a download/upload process.
    

• • 5.6. Share state icons. That icons appear in the other side of the cell and only should be appear one at time in order that the user watch easily what is the way that item is shared.

    5.6.1. Blue circle with a guy. it means that the item is shared with users.
    
    5.6.2 Blue circle with a link. it means that the item is shared by link.
    
    5.6.3. Blue circle with a shared icon. it means that the item is shared with you for other user.
    

• • 5.7 Cell help. Sometimes happens that the user can be confused with some persistence of shared states, so I have added a little cell help. When the user tap in a persistence/shared icon a blue line appear only during 2 seconds describing that state. Obviously the tap space should be higher that the size of the icon. [WIP] @pablocarmu

• • 5.8 Swipe menus. I have removed the preview left side and I have added new left and right sides menus only with one action each one.
    I thought in the two more useful action for the user: Available offline and Share, Do you agree with me? Maybe not :(
    In this swipe menu we will use a third party library written in Swift that support the swipe in two events: The user tap over the action; the user complete the swipe movement of the cell.
    This is the library -> https://github.com/SwipeCellKit/SwipeCellKit
• • • 5.8.1 Left swipe menu. Available offline

• • • 5.8.2 Right swipe menu. Share

• • • 5.8.3 Full swipe to perform action without tap (left and right).
• • 5.9 File Actions button. I have removed the right arrow of the cells because all the user known that if appear a list of items in the screen you only have to tap on it to enter in the details.
    Instead of right arrow I have added “down arrow button” to present the list of actions that you can do with that item. As you can see in the image I show first the “Share” and the “Available offline” the be consistent.
• • • 5.9.1 Basic behaviour (iPhone portrait).
• • • 5.9.2 Add vertical scroll when the device is in landscape.
• • • 5.9.3 Center the action sheet in iPad.
      

• 6. Replace "available offline" icon in the preview of files (iPhone, iPad) with new ones

In this design I have borrowed some ideas of Dropbox and Box but not of OneDrive, other are own.

What do you think about this proposal for the iOS UI?

cc @michaelstingl @nasli @pablocarmu @davivel

[michaelstingl]

@ggdiez Awesome, there are many things I really like! 👍

Please also think about long file- and foldernames. Does #129 still work? I also remember we also decreased font size for long names, which I didn't like aesthetically, but it did the job.

[michaelstingl]

File Type icons are in a flat-style now. Tab bar icons are still in a line-style. @ggdiez Could you imagine using more flat/filled icons for the tab bar too?

[michaelstingl]

We need to not only prepare for search, we also need to prepare for multi-select actions. /cc @pablocarmu

[michaelstingl]

One thing I was thinking for a long time, is about extending the tab bar for new features like favorites, tags, list of offline items etc. This is what I found in the app from German TV news:

[davivel]

Please also think about long file- and foldernames.

I don't know of any good solution for this. In the end, there will be an effective limit for names. We shouldn't just use unlimited space to show a name in each row of the list.

File Type icons are in a flat-style now.

Should we change the icons, or should we keep the current icons, that are the same as in the web UI? They strongly contribute to the feeling of "same platform".

we also need to prepare for multi-select actions.

I think there is another issue incoming for that :) .

One thing I was thinking for a long time, is about extending the tab bar for new features like favorites, tags, list of offline items etc. This is what I found in the app from German TV news:

I really like that :) . What do you thinkg @ggdiez , @nasli , @pablocarmu ? Do you know if this can be done with iOS framework, or would need a separate library?

[michaelstingl]

They strongly contribute to the feeling of "same platform".

👍

[ggdiez]

@michaelstingl thanks for your feedback.

1. Related with long names. We can use the feature to decrease the font size to the minimum size in order that the interface does not seem wrong aesthetically. Anyway if the user tap in the options button of the cell, in the menu should be appear the full name of the file.

2. Maybe with a flat icons in the TabBar the style appears better. I going to check others icons for the tab bar. ;)

3. I'm working in the multi-selection, when I finished I will update the issue.

4. Yes, we have to think how increase the menu in a feature to include more options, but I don't like that extend tab bar. I guess that extended tab bar is not native, it seems a hybrid app.

The main UI patterns for menus are TabBar and lateral menu. In my opinion TabBar is the best option because, the feature is only to one tap of the user. When there are to many options it's appropriate use lateral menu, but if you take attention to the best apps of the market like Facebook, Spotify, Dropbox, Box, Music, etc all of them apps use TabBar.

In the case of owncloud we can use the tab bar with one additional "more" tab where store the rest of options. I like the Facebook style to do that.

[ggdiez]

About TabBar with Flat or Line icons.

I going to show you some examples:

1. Flat icons in files view and Line icons in TabBar view.

TabBar detail:

2. Flat icons in the File list view and flat icons in TabBar

TabBar detail:

3. Taking into account the comment of @davivel here the example of the current icons with the TabBar line icons.

In my opinion I prefer the option 1, line icons are more used in TabBars that flat icons.

What do you think @michaelstingl @nasli @pablocarmu @davivel?

[michaelstingl]

In my opinion I prefer the option 1, line icons are more used in TabBars that flat icons.

👍 After seeing it, I agree. Thanks for showing it!

[michaelstingl]

@nasli @pablocarmu @ggdiez Have you considered using Collection Views instead of Table View Cells? Sounds very powerful for our use case.

[ggdiez]

Hello @michaelstingl
Yes I have considered Collection view but not for default File List view.

Table view is perfect for files list view because can manage a lot of number of files, has index, has swipe features and was created for that.

Collection view is very powerful but is something more global. If we decided to implement Collection view instead Table View we will lost implemented features like the index and swipe.

My idea is implement Collection View as Grid View when the number of images are bigger than files, like the 70 or 80 percent. Grid View without index and swipe features but showing the thumbnails of the images.

That's could be a new feature into the new design.

[davivel]

@ggdiez, @michaelstingl , one question.

In this proposal folders have only one icon, right?

In the current app folders can have several icons depending on their "Sharing-state". They can have an "angle-with-dots" or a link on the folder symbol. I think that the web UI has something similar too.

Should we get rid of the alternate folder icons, or should we translate the share states on them too? What do you think?

[nasli]

New tasks added to consider new "available offline" icon also in the preview off files.

[tomneedham]

Would love to see force touch on a file list item to bring up the action sheet, then drag and let got on the action ;) Just ideas. Awesome work!

[jesmrec]

Related with the operations to be performed over a file or folder, we can use the same order as the Android app:

Share
Sync / Download
Set / Unset as Av. offline
Open with (only files)
Send (only files)
Move
Rename
Remove

showing up the sharing and sync options, and below the changing and destructive options.

[nasli]

Blocked, we will resume after the release 3.7.1