[FEATURE REQUEST] New search bar

[abelgardep]

Continuation of #2742

First mock up:

ACs:

• New search bar will be automatically shown without pressing lens icon (root)
• Lens icon is gone (root)
• Searching means filtering: only in the current folder (same behaviour as current)
• ownCloud word in the hint must be brandable
• If folder is not root, same UI (lens and name of the folder)
• If folder is empty, bar is disabled (N2H)
• Extended top bar at first and then a regular bar. Extended top bar will show the oC icon on the top
• Search bar in all tabs but in uploads
• Refresh account must be removed from three-dot-menu on the file list to account manager (check if it does not hurt)
• In pickers/share with oC view, Toolbar will show the ownCloud label, the lens, but the avatar

Figma Mockup
https://www.figma.com/file/EVQQcpITjVPiF4yT3eWKuf/Android-Proposals?node-id=0%3A1

TASKS

• Research (if needed)
• Create branch new_design/search_bar
• Development tasks
  • Implement new toolbar design
  • Connect new toolbar search view with current listeners
  • Move refresh account option to account management
  • Check icons color in account management view
  • Show avatar in root toolbar
  • Use new design in root view and old one in rest of the app
• Code review and apply changes requested
• Design test plan
• QA
• Merge branch new_design/search_bar into master

PR

• App
• Library (if needed)

[abelgardep]

AC to discuss:

1. Hint root folder -> Search in app_name (brandable)
2. Hint other folders -> Search in folder_name
3. What happens with uploads toolbar (search is not available there at the moment)?
4. What happens with Av offline and shared by link toolbar?

[michaelstingl]

@abelgardep examples in other apps you’d recommend to look at?

[abelgardep]

@abelgardep examples in other apps you’d recommend to look at?

You can check some google apps: Drive, GPlay, Gmail for example.

[jesmrec]

1. Hint root folder -> Search in app_name (brandable)

We have to be careful with this. Search in app_name can lead to confusion, because you are not searching on the whole account, only filtering the current folder.

3. What happens with uploads toolbar (search is not available there at the moment)?
4. What happens with Av offline and shared by link toolbar?

Filtering these lists could be an option. But, i think we should also check further options.

[CarolinaCst]

Additional changes to the proposal:

1. Add the Logo just above the Search bar

[jesmrec]

Thanks @CarolinaCst!!

I'm not sure how it will look like with the logo above, because the size (height) of the upper toolbar will increase. In devices with large screen could be fine, but in smaller screens the action side (file list) could be reduced a lot.

If you think that showing the logo is important, how about showing it just below the searching bar, in between sorting dropdown and grid/list selector? just an idea.

[michaelstingl]

1. Add the Logo just above the Search bar

@CarolinaCst could you post examples from other apps?

[CarolinaCst]

I) Top App Bars Documentation

The Top or Regular Top Bar: displays information, provides content and shows actions related on the screen. It's used for branding, screen titles, navigation and actions.

a)Properties:

• Inside the Container the elements place are optional depending the purpose of the App.

• Upon scrolling the top bar can remain in place, could hide and reveals again.

• There are two bar heights varieties for mobile: regular and prominent or extended top bar.
  Prominent top app bars can be used for longer titles, imagery or to provide a stronger presence to the top app bar.

b) Measurements:

• Regular Top App Bar has a 56dp while an Extended Top App Bar could have a 128 dp.

Sources:
App bars: Top: Material Design (Review 26.10.20): https://material.io/components/app-bars-top and
https://material.io/develop/android/components/app-bars-top
Mobile UX Design: User-Friendly Search: Nick Babich, 2016 (Review 26.10.20): https://uxplanet.org/mobile-ux-design-user-friendly-search-51e5f78f5a1e
How To Design Search For Your Mobile App: Suzanne Scacca, 2019 (Review 26.10.20): https://www.smashingmagazine.com/2019/01/design-search-mobile-app/

According to these preview sources:

II) Proposal

a) First: Extended Top App Bar and then a Regular Top App Bar

• An Extended Top App Bar will be shown at first instance. It will contain the search bar and below it the ownCloud logo.

• While scrolling the bar will transforms to a Regular Top Bar with the Search bar with the Wording: Search in ownCloud. The logo will consequently disappear independently if users scroll up again.

• Here are the mockups:

III) Second Proposal:

1. Google Drive

• They use microinteractions in their Regular Top Bar to show their Logo. After this action the Regular Top Bar is displace.

• Upon scrolling the search bar disappears and appears again.
  

• Microinteraction is useful to save time and space.

2. Dropbox

• The lens icon is located in a Regular Top Bar. Users need to click on the icon so the Search bar will be shown.

• Users need to click on the Lens icon for the Search bar to appear. It is shown in another layout.

• Only the Lens icon is shown on the Regular Top Bar.

3. GMX Cloud

• The same process like in Dropbox. The lens icon is located in a Regular Top Bar. Users need to click on the icon so the Search bar will be shown.

• By clicking on the Lens Icon the Search bar will appears on another Layout.

IV) Figma Mockup

https://www.figma.com/file/EVQQcpITjVPiF4yT3eWKuf/Android-Proposals?node-id=0%3A1

V) Conclusions:

• An Extended Top Bar is an option to include the ownCloud logo just at first sight. Then it will remain as a Regular Top Bar.

• Another option is Microinteractions, it may save space and time. Showing at the beginning the ownCloud Logo and then a Regular Top Bar.

• In order to smooth the Searching action, Drive provide a List divided by File types and Date modification. The idea of File types will be useful for our users as well.
  Example
  

• Add Recent Searches like in Dropbox: users may search for the same files
  

• However the Icon used in YouTube is better:

[CarolinaCst]

I) What happened to the Toolbars: Uploads, Offline and Links?

• Drive stick to a visible Search bar in all the sections of the App.
  
  
  

• Dropbox and GMX Cloud don't lead with this point since they don't use a Footer. My recommendation is to stick to the idea of Google Drive.

[jesmrec]

My thoughts:

• Top bar: showing the extended bar and then the regular bar when scrolling down likes me the most. Google has different capacities, so it's a good reference but use cases are not all the same.

• Bottom bar: here we have different cases (@abelgardep correct me if i'm wrong):

  • Tabs "Files", "Av offline" and "Links": These tabs show the list of files, complete or filtered. The search bar could be another filter in case of a long list. This is OK
  • Tab "Uploads": this is different because it does not work with the list of files. Here, we could remove it (what should be place there instead?), or give it a different meaning (search in the list of uploads?but it is limited to only 30 items IIRC).

• Search by other criteria: Actually "searching" means "filtering" (only works in the current folder). Ftm, i think we will use the name to filter, other criteria depend on how capable is/will be the searching API that is not integrated yet. But is good to have the example as reference

• Recent searches: no strong opinion here, all ideas look good.

Thanks for the awesome ideas @CarolinaCst !

[CarolinaCst]

After the Meeting of 03.11.2020, here are the following agreements:

1. Search bar

• Extended top bar at first and then a regular bar

• Logo on top above the search bar

2. Figma Mockup
   https://www.figma.com/file/EVQQcpITjVPiF4yT3eWKuf/Android-Proposals?node-id=0%3A1

3. Footer

• Still in consideration with new arrangements

[jesmrec]

copying new ACs, mockups etc... to the first message on the top

[jesmrec]

About the uploads view

• We have to move all the stuff in the three-dot-menu somewhere to set there the avatar
• Search does not appear. A Textview with the title replaces the search bar

[jesmrec]

Some agreements after today's meeting:

• Uploads:

  • Show in the place of the Sort bar, a menu Options with all the actions to do: Clear X and Refresh. Icons with the options: trashbin for Clear options and another one for Retry

  • Let the Upload label as is. Replace the three-dot-menu with the avatar.

• Avatar at the right of the Search. It leads to the Manage accounts view

• Avatar only in the root folder. If folder is not root, back arrow + label with the name of the folder + Lens to search

• Refresh account must be removed from three-dot.menu on the file list. Different options:

  1. Move it to the manage account. Pending to check how it works from such view.
  2. Remove it temporally. Make it automatically in the future -> requires additional development in all stages

• In pickers view, Toolbar will show the ownCloud label, the lens, but the avatar (more ideas welcome)

• In "Share with oC" view, Toolbar will show the ownCloud label, but the avatar (more ideas welcome)

[CarolinaCst]

1. Search Bar

2. Uploads
   Options
   

3. Manage accounts
   

• Figma Mockups link:

https://www.figma.com/file/FGfiuKPrlLYzIrFL1mXsh9/Android-2?node-id=0%3A1

[jesmrec]

1. Search bar is OK from my side

2. Uploads/Options. I miss several options there, but i guess this is only a listing detail. In the Figma link, you set a chevron to show a dropdown list with different clearing options. I'd not go for that approach because the number of options to show is not too high to hide them directly. Of course, we can iterate and discuss to get better UX results.

3. Manage accounts OK from my side. Pending to know how feasible is syncing the account from that view.

[CarolinaCst]

Talking with @abelgardep we have made the following changes:

1. Search bar: hamburger menu and avatar will be inside as in the example from Drive.
   

2. No logo: for small devices including the ownCloud logo will be too much space so the new option is to remove it completely.
   

3. New Icon: new icon for Clear failed
   However the options and icons still need to be discuss to be clear with their functionality since at first glance are so repetitive.
   

4. Figma mockup link:
   https://www.figma.com/file/FGfiuKPrlLYzIrFL1mXsh9/Android-2?node-id=0%3A1

[jesmrec]

i like all. Awesome!

[CarolinaCst]

3. Uploads changes:

• On the "Failed" section users now have the option to "Clear" or "Retry" all the data and
  still have the possibility to delete every single file.

• On "Uploaded" users can clear all the files

• Figma link:
  https://www.figma.com/file/FGfiuKPrlLYzIrFL1mXsh9/Android-2?node-id=0%3A1

[CarolinaCst]

3. New Uploads improvements

• New CTA buttons
• Figma link:
  https://www.figma.com/file/FGfiuKPrlLYzIrFL1mXsh9/Android-2?node-id=0%3A1

[abelgardep]

Current status, two options at the moment. BTW, I need to add a lens icon.

White background	Keep background color

[michaelstingl]

BTW, I need to add a lens icon.

👍

@tbsbdr What is your preference? Left or right?

[jesmrec]

Right one seems to be more consistent with the current theme. White gap inside the toolbar is not nice, IMHO.

[michaelstingl]

Right one seems to be more consistent with the current theme.

Yes, right one is more appealing. 👍

Proposal from @diocas was, to make the input field more visible by highlighting it by ~20% or so. My proposal would be, to switch background to white when in search mode, but no idea if this is too fancy…

[tbsbdr]

Option 1 (preferred):
right one + icon does the job and is nice! 👍

Option 2:

switch background to white when in search mode (@michaelstingl )

e.g. box does it kinda this way - to me this appears to be visually disruptive, therefore wouldn't switch to white when in search mode. ❌

Option 3 (n2h):

highlighting it by ~20%

onedrive, dropbox and google drive do it this way. n2h imho. only do it if you have some time to spare 🌈

[michaelstingl]

@tbsbdr thanks for the feedback 👍 Excited to see it in action in the next reviews…