Mock-up Drafts

[Apophenia]

This draft was mainly inspired by ownCloud for Android, Google's Photos for Android, and Firefox OS's default Gallery app.

Initial Credential Screen

When the app is first opened, it immediately prompts the user for credentials. This landing page is nearly identical to the one in the ownCloud app for Android. (I added a label to an oC logo as a placeholder, but a specifically-designed logo could go here.)

The app stores the user's credentials. After the user logs in, the app will automatically send the user to the gallery screen whenever the app is opened (unless the user manually disconnects), so this screen won't be seen often.

Credential Status/"Disconnect" Screen

If the user returns to the credential screen from the main gallery screen of the app (by manually navigating to it), they will see this view instead.

Home Screen

The home screen includes:

1. A top bar that provides the user's current login information
   • The bar redirects to the credential status/"disconnect" screen when pressed
2. A second bar that denotes the current status of the selected photos in relation to photos that have already been updated
   • If there are photos selected that have not already been uploaded, pressing "upload selected" will allow the user to send them to the server. The view will automatically update to reflect the recent uploads.
   • If all of the photos selected already exist on the server, the status bar will say "up to date" and will not allow uploads
3. Quick-select buttons that allow selection of "new" photos (photos not present on the server), "all" photos (checks all boxes), or "none" (clears all check boxes)
4. A gallery view that allows the user to scroll through all photos and video present on the device
   • The user can manually select and deselect photos for upload by clicking on each check box
   • New photos and videos not present on the server are outlined in a contrasting color (could this be better signified another way, perhaps with already-uploaded photos dulled or dimmed in some way?)

I feel like the home screen is unnecessarily cluttered, and I'm not sure how to best handle selecting/deselecting when the units in question are so small.

Any thoughts? @cosenal @jancborchardt and @Ruchita20, I would love to hear your input.

[jancborchardt]

Log in screen:

• from the info on there it’s good! :)
• visual-design wise, best model it after the log in screen of the web app – that is, dark background and white logo. A dark blue cloud on white looks strange.

Home screen:

• the log in info doesn’t need to take up a whole bar, the username doesn’t need to be present all the time. Remember it’s a mobile app where the screen space needs to be used to put content forward. For going to the connection settings, a gear icon (for example on the right of the header bar) would suffice.
• as for signifying which pictures are on the server already – maybe use the same icons as the desktop client uses for the tray icon? So a green check for when it’s uploaded.

In general about functionality: Looking at the Bitcasa Camera Backup app (https://marketplace.firefox.com/app/bitcasa-1 ) it seems possible to have »automatic upload« (instant upload as it’s called in the Android app). It would be very good to have that as it’s much easier than needing to manually select the pictures.

[cosenal]

Thanks for the mock-ups, Lyndsey!

@jancborchardt: »automatic upload« is definitely in the todo list.

Because of that and possibly other features, there should also be a cog that leads to a Settings page. And, as in the Bitcasa Camera Backup app, the login/account information should be in that page too.

I would also add a toggle to switch from the Photos view to the Videos view.

[Apophenia]

@jancborchardt Yep! The APIs available to do that seem a little tricky, but if Bitcasa can do it, so can we.

@cosenal No problem! Do you think it's OK for the default view to include (mixed) photos and videos?

I'll update these with the suggestions.

[Apophenia]

Here's the login screen in blue.

[jancborchardt]

@Apophenia much better. :)

I think it’s good if the default view is mixed Photos and Videos. As long as the videos are clearly marked (eg. a play button on them, or something similar).
The important thing is that it’s sorted by newest up top.

[Apophenia]

Okay. Here's a second draft of what the home screen might look like, with a bar that allows filtering by photos/videos/all and the upload button moved to the bottom.

[jancborchardt]

@Apophenia nice! Some more suggestions:

• For more viewing space when scrolled down, I would put the »Photos/Videos/All« switcher as well as the selection bar below that into the scrollable container. You are likely to only use them once in the beginning, and they will probably just hinder you when scrolling down. And otherwise you have only very limited space to view the pictures on small screens.
• The selection should be preserved when using the »Photos/Videos/All« switcher. Otherwise you lose your selection when switching (accidentally or otherwise)
• »All« is probably better placed on the left, first in the list, instead of the right
• the »Upload button could reflect what will happen: »Upload 4 Photos (20 MB)«, for example.

[ferndot]

Great work @Apophenia! I have a few suggestions too:

• The select bar could be merged with the upload button. This would gain another line of screen space, and believe me, you'll need it =)
• The upload button could be turned into an icon to save horizontal space.

As for gestures:

• Edge drag left to right or right to left to switch between "All", "Photos", and "Videos."

[cosenal]

👍 to the edge drag gesture proposed by @joshua-s!

[ferndot]

Note: you might want to make it less edgy because of a feature coming up in FFOS ~1.4+. (Edge drag to switch between apps.) When I proposed the gesture, I forgot that it might interfere.

[cosenal]

@Apophenia If you have the source files of the mockups (.ep files in case you used Pencil), please consider uploading them to https://github.com/owncloud/design/

That repository doesn't look so active (cc @jancborchardt), but it's nevertheless cool as it contains the first mockups of the News app ;P https://github.com/owncloud/design/tree/master/News

[jancborchardt]

Yeah – the mockups should directly be in the relevant issues. But yes, it’s good to put the source files of mockups in that repository.