Intro Help guide, new wizard to guide the user through the app features

[supportreq]

With the Material Design almost in place, we should really have an intro screen which introduces the features of our OwnCloud App something what dropbox or box or even Google Drive does..

@AndyScherzinger what are your thoughts??

---

TASKS

• [GIT] Rebase legacy PR
• [DEV] Choose features to include and the order in which they should appear.
• [DESIGN] Design some mockups.
• [DEV] Create new resources for the steps.
• [DEV] Check old code and apply the changes needed.
• [DEV] Include flag to enable or disable it.
• [DEV] Code review
• [QA] Design test plan @jesmrec
• [QA] Execute test plan @jesmrec
• [GIT] Merge branch

[AndyScherzinger]

Do you mean like a dialog with a view pager on the very first time start up the app?

[supportreq]

yes

[supportreq]

I just checked the iOS app has it.. @rperezb can we have it in android as well

[AndyScherzinger]

Can someone provide some screenshots from the iOS app, to get a better picture of how this is intended to work and what kind of information should be shown?

[supportreq]

I will it to you in sometime

[supportreq]

It's an amazing animation where the owncloud logo shifts from one screen to another as an animation..

[AndyScherzinger]

Nice! Are the corresponding image resources available somewhere?

[AndyScherzinger]

iOS files for this can be found here: https://github.com/owncloud/ios/tree/develop/Owncloud%20iOs%20Client/SupportingFiles/Images/HelpGuide

[tobiasKaminsky]

This should occur on the very first time or everytime an account should be added?
(preferring the first one: only on first installation)

[AndyScherzinger]

I would also pledge for one time only on very first launch of the app and also for no animations except the sliding itself

[rperezb]

Hey guides, on iOS we call it the help guide, this is shown the very first time the app is open (not per account basis)

I rename this issue to help guide

The splash screen is shown everytime the app is open and it´s an static image, the one used on iOS is: https://github.com/owncloud/ios/blob/develop/Owncloud%20iOs%20Client/SupportingFiles/Images/ImageBranding/Branding/Default-Portrait%402x~ipad.png

[supportreq]

@AndyScherzinger @tobiasKaminsky in case you guys can implement this will be awesome!!

[tobiasKaminsky]

We first need the approval of @jancborchardt @masensio or @davivel

[jancborchardt]

Yes, however this should be condensed down to fewer steps. 6 steps is too much and will annoy people on first startup. @nasli @rperezb where is the related iOS issue?

[rperezb]

@jancborchardt on iOS there are 6 slides too, @supportreq pasted them #1104 (comment)

[jancborchardt]

@rperezb I know, however I said in a past issue that 6 are too many. I can’t remember now which, that’s why I’m asking @nasli if she remembers where I said that.

[nasli]

@jancborchardt, here it is owncloud/ios-legacy#404 and also related on desktop owncloud/client#3711

We added a skip button as you suggested if someone does not want to see the slides, and we agreed to keep the 6 slides.

But, take the advantage now that has not yet started development and redesign it with any improvement ;)

[supportreq]

@tobiasKaminsky you working on this?

[tobiasKaminsky]

No.
The artwork and what the images should display is something I cannot do very well, so this should be up to @jancborchardt.
When the images are ready @AndyScherzinger @LukeOwncloud @przybylski or me can do the intro slideshow.

[AndyScherzinger]

I think the images are already there, see link to the ios repo. Imho we would need them in the different resolutions or at least in xxhdp since scaling down isn't so bad as having Android scaling up... Support it in the native resolution for all the sizes is probably a bad idea since it will at a lot ob KBs to the APK.

Besides that we would also need a video to have an idea about the animation that is mention (we I would probably drop for Android....)

And also a general design thing @jancborchardt the intro guide uses the pre oC 8.2 file type icons thus the intro screen images should get a refresh 😁

[supportreq]

@AndyScherzinger @tobiasKaminsky I can help with the images.. please advice the resolution, and the points that need to be covered..

[przybylski]

Today in the morning, i put together something super super super super super super super hacky to get some initial look and feel, this is what i did:
https://drive.google.com/file/d/0B--v4KNhT4mVSThJcFV2WUVqeHc/view?usp=sharing

[nasli]

@przybylski look nice! Better in an ownCloud Server ;)

We will start including all the resources in svg files into the iOS project within new release.

Until then, you can get it from here https://s3.owncloud.com/owncloud/index.php/s/KCaxDdBUxG91bau

The IntroGuide.svg file includes all icons organized in separete layers for an easy way to edit them, I use Inskcape to create it, enjoy!

[supportreq]

@przybylski check https://github.com/federicoiosue/Omni-Notes intro guide.. it is simple but looks very powerful.. and it's parent library : https://github.com/PaoloRotolo/AppIntro

[przybylski]

very interesting, I wonder what will @jancborchardt say

[supportreq]

Check the demo app they have some amazing design : https://play.google.com/store/apps/details?id=paolorotolo.github.com.appintroexample

[AndyScherzinger]

Well, this depends on several things:

• Move to compile target Marshmallow (Android 6 - v23) #1220 needs to be merged first since the lib you mentioned is targeting 23 for compile and thus due to dependencies ownCloud have also have to else the build would be failing (so this work has already been done)
• question is if we want to introduce more dependencies and libraries for the singular use case of an intro or if if don't just implent it using a view pager like @przybylski did. Anything is is imho basically a styling thing. As soon as Material FAB with speed dial implementation #1100 gets merge one could also simple add the fab on the bottom left (or anywhere else) as shown in the demo of this lib :)

Don't get me wrong on the lib, the example sure does look nice, but from a technical pov I would leave that.

[tobiasKaminsky]

@przybylski
What is needed to get this running in beta?
As I said earlier this would be great for every new release to show the recent big changes.
For instance I would like to test it with the new feature "pinch zoom" #1402.

[przybylski]

@tobiasKaminsky now on whatsNew branch in FeatureList.java file you can add features to be shown in beta. I haven't tested it but it should work ;) I'll fix it if needed. One thing to notice is in setup.xml there is a bool flag which indicates are we in beta or not

[tobiasKaminsky]

@przybylski I have checked out this branch and with a clean install I first get the intro screen prior to the server login. But after the server login I also get the whatsNew screens.
I think the first appearance is the correct.

[przybylski]

@tobiasKaminsky yes, i know about this bug I haven't yet investigated it

[tobiasKaminsky]

This would be the introduction of the pinchZoom feature.
But maybe the images are a little bit to small?

I really like this feature and hope it will also be used for every official release to show the 2-3 main changes.

[tobiasKaminsky]

It would be great if the featureItem would move while swiping, just like it is done in the ImageAdapter.

[jancborchardt]

@tobiasKaminsky the intro should not feature these detail actions. In fact it’s too long as it is and I would like it to ideally be just 3 slides. (As mentioned in the iOS issue about it before.) Only the really important stuff. Like Sync, Share, Instant Upload.

[przybylski]

@jancborchardt those basic features (instant upload, sync & share) will be presented on first install.
Additional features will be shown only on upgrade.

[jancborchardt]

Ok, but still I think this is only warranted for big features. And the screenshot above shows 6 dots / slides. ;)

[AndyScherzinger]

@jancborchardt btw the original screenshots of the iOS app has 6 dots too 😉

[jancborchardt]

In fact it’s too long as it is and I would like it to ideally be just 3 slides. (As mentioned in the iOS issue about it before.)

;)

[davigonz]

Taking into account the current status of the app, I would use 5 different steps for this wizard following this order:

Edited: including here some mockups I am designing

1. Manage all your files

2. Share your files

3. Multiaccount

4. Camera uploads

5. Video streaming

Would you include, delete or change the order @michaelstingl , @jesmrec ?

[jesmrec]

Order is fine for me. 5 are a good number, so a longer wizard will make users to skip it.

[jesmrec]

About 1.

I miss the word Sync, Syncing, or Keep on sync anywhere.

About 3.

Connect to all your clouds is a bit confusing, so it sounds to "external storage" like the core feature. I'd use: Connect to all your ownClouds or Connect to all your servers, Manage many accounts or something similar.

[michaelstingl]

@ChrisEdS Please review and provide feedback

[pmaier1]

Looks very nice so far but I have to ask about the intention/benefit. Should this be a feature overview to make the user aware of the nice features to captivate to explore those? Or does a user maybe know about the features from e.g. the app description on the appstore and actually needs some guidance on how to use them? How do I upload/move/copy/rename/delete a file? How can I share with another ownCloud user? Oh, I can generate links to files? And there's an option to forward them to mail or my favorite IM? How does the app integrate with Android features? What do I need to do for that the app uploads pictures/videos that I take? How to keep files/folders in sync?

[davigonz]

@pmaier1 Thanks for your feedback, this is an introduction to all the features included in the Android app, more visual and accessible than the description provided in Google PlayStore, we have a similar introduction in the iOS app as well.

This intro is going to appear not only after first install but in updates, to show the new features added in that specific update, so that our users are aware about the potential of the app and about new stuff just included in the app.

About the detailed explanation for each feature, is something to be included in our Android manual.

[davigonz]

@jesmrec

I miss the word Sync, Syncing, or Keep on sync anywhere.

iOS wizard has a specific step with the message "Your private files synced anywhere" but it doesn't include Video streaming step. Including those words would be great but I don't know where exactly 😕

Connect to all your clouds is a bit confusing, so it sounds to "external storage" like the core feature. I'd use: Connect to all your ownClouds or Connect to all your servers, Manage many accounts or something similar.

What about a mix between two of your suggestions, "Connect to all your ownCloud servers"?

[jesmrec]

iOS wizard has a specific step with the message "Your private files synced anywhere" but it doesn't include Video streaming step. Including those words would be great but I don't know where exactly

An option: in 1. , changing the title for Manage all your synced files. It is not direct, but at least we are telling the users that they can sync + manage.

What about a mix between two of your suggestions, "Connect to all your ownCloud servers"?

sounds good!

[pmaier1]

Sorry, but I don't see much benefit in a firstrun/update wizard that tells the user that they can manage and share files, stream videos, do camera uploads but does not tell them how. Don't get me wrong - it looks nice - but how would it help the user?

In current state this is not more than a very high-level feature list that the user needs to dismiss 5 times.
While this is of course better than nothing as an average user I would want to get answers to the questions in #1104 (comment). Asking users to read a manual for an app sounds like 1996 :D

[jesmrec]

The welcome wizard is a way to welcome new uses to the app. Of course, those who download the app know what is it for, but, perhaps, not all of them know that the app handles with videostreaming, for example. The welcome wizard is a feature included in the iOS app from long ago, and it is a simple way to introduce basic features that you can skip with a simple click if not interested in. Many apps of all kinds use a welcome wizard and i think this is not something not-valuable.

If the user needs further information about the app, in settings view we have a Help section that points to a web where different options are suggested (this has to be reviewed).

[davigonz]

Sorry, but I don't see much benefit in a firstrun/update wizard that tells the user that they can manage and share files, stream videos, do camera uploads but does not tell them how. Don't get me wrong - it looks nice - but how would it help the user?

This is a pretty well-known feature in many mobile apps, the user needs an overview with the app features to know at a glance what the app is able to do.

While this is of course better than nothing as an average user I would want to get answers to the questions in #1104 (comment). Asking users to read a manual for an app sounds like 1996 :D

If the user needs further information about the app, in settings view we have a Help section that points to a web where different options are suggested (this has to be reviewed).

I agree with you @pmaier1 that we would need a better approach to answer the questions in #1104 (comment).

As @jesmrec says, we have a Help section in Android app which is basically a webview with the info contained in https://owncloud.com/mobile/help but in my opinion, the optimal solution would be to point Helpsection to https://doc.owncloud.org/android/android_app.html , which contains the answers to #1104 (comment) questions and is responsible so it will be adapted properly to a mobile device screen.