Whole UI and UX redesign (ownCloud app for Android 3.0?) [WIP]

[davigonz]

Changes under the hood are necessary but...

Mobile devices and Android itself are evolving very fast, with larger screens, new user interface patterns, new ways to interact with options... and the ownCloud app for Android is lagging behind in this aspect. I would say that there's at least three key topics to address on this matter:

• The app has the same aspect as many old apps that implemented the material design when it was released for the first time.
• Many options are mainly concentrated at the top of the screen, so with the big size of current devices is harder to reach that part of the screen with just one hand.
• Some primary options are a bit hidden, such as files searching, files sorting and switching between grid or list view.

Following this approach, I've started to work on some new UI / UX concepts for the ownCloud app for Android.

1. Filelist

Old filelist	New filelist

New filelist	New filelist (dark)

• Changes (from top to bottom):
  • New search bar, automatically shown without pressing lens icon.
  • Sort alphabetically, by date or size just above the files, along with a small arrow to make the sorting ascending or descending.
  • Grid or list view above the files as well.
  • Three dots for every file, in the same row. Tapping this three dots icon will open a bottom menu with the same options that were before in the three dots icon at the top of the view (more difficult to reach with one hand)
  • New bottom navigation bar to move between Files, Uploads, Av. offline and Shared by link options, more accessible for the users. These 4 options will no longer appear in the side menu.

Note: all the new views will have their respective dark theme versions, related to https://github.com/owncloud/android/issues/2512

2. Sidemenu

Old sidemenu	New sidemenu

New sidemenu	New sidemenu (dark)

• Changes:

  • Account management removed from side menu.
  • Files, Uploads, Av. offline and Shared by link will no longer appear either, just Settings, Feedback and Help options as well as user quota.

3. Account management

Old account handling	New account handling

More views...

All opinions and suggestions are welcome

Issues related with redesign

1402

CC / @michaelstingl @jesmrec @abelgardep @ChrisEdS

[ChrisEdS]

I like the FileList approach. Very friendly and clean.

[jesmrec]

also interesting for @wuenschedesign

[michaelstingl]

❤️ it!

• New bottom navigation bar to move between Files, Uploads, Av. offline and Shared by link options, more accessible for the users. These 4 options will no longer appear in the side menu, there will be just Account switching, Settings, Feedback and Help options.

Did you consider adapting the "Quick Access" screen from the new iOS app?

[davigonz]

Did you consider adapting the "Quick Access" screen from the new iOS app?

Not yet, but maybe is a good option too, in the middle of the bottom bar or something like that, I will think about it, thanks for the suggestion

[abelgardep]

This is an amazing first step ❤️

If we start using the bottom navigation, I would remove the drawer menu by the way in order to avoid having a drawer with just 3 options. This way, bottom navigation bar would have Files, Uploads, Quick Access and Settings. Feedback and Help options would be moved to Settings. Account switching would be moved to the right of top search bar as Gmail or Drive apps.

[davigonz]

If we start using the bottom navigation, I would remove the drawer menu by the way in order to avoid having a drawer with just 3 options. This way, bottom navigation bar would have Files, Uploads, Quick Access and Settings. Feedback and Help options would be moved to Settings. Account switching would be moved to the right of top search bar as Gmail or Drive apps.

Yes, I like this approach as well, I will update the designs.

[michaelstingl]

Please also consider…

• Android best practices for accessibility
• RTL support (Good read: https://blog.prototypr.io/working-with-arabic-in-ux-2c74383fc463)

[NiceFeather]

There should need at least a Product Manager, who is responsible for some product UI design solutions, that was produced by prototyping tools like Axure, Mockplus, and more something...