Opened on 10/07/2015 at 02:26:16 PM
Last modified on 10/08/2019 at 05:45:14 PM
#3175 reopened change
Change app workflow
Reported by: | sven | Assignee: | ashephard |
---|---|---|---|
Priority: | P2 | Milestone: | Adblock-Plus-for-iOS-next |
Module: | Adblock-Plus-for-iOS/macOS | Keywords: | salsita 2015q4 |
Cc: | fhd, mario, lisabielik, jeen | Blocked By: | |
Blocking: | Platform: | iOS | |
Ready: | no | Confidential: | no |
Tester: | Unknown | Verified working: | no |
Review URL(s): |
https://github.com/adblockplus/adblockplussafariios/pull/12 |
Description (last modified by mario)
Background
There are several problems, when activating the content blocker. Therefore, we decided to improve the user workflow.
The workflow changes mainly aim at the following issues:
- When the app is started and ABP isn't activated in the iOS Settings, show a notification, that locks the rest of the app. The notification states, that the user needs to enable ABP in the Settings before he can proceed. "Locking" the app by a notification prevents users from assuming, that ABP works by only starting the app (and not reading the information as currently shown).
- Show a direct link to the iOS Settings in order to make it easier for the user to find where to enable ABP
What to change
The new workflow is put into five steps.
Step 1
The Acceptable Ads introduction will be displayed in a modal dialog.
Headline: You're in control
Text: Annoying ads are always blocked, while nonintrusive ads are displayed by default. You can change this setting at any time in:
Acceptable Ads → Allow some nonintrusive ads
After that, there is a (standard iOS) blue button with the label "Got it". Clicking this button will lead you to step 2.
Step 2
The user will see a notification overlay, which prevents the user to use/see the main app. The notification is a combination of what we currently showing in our second on-boarding slide and the main screen. The headline of the notification overlay, which is designed like a default iOS notification, is:
Headline: "Before you proceed, turn on Adblock Plus in your Safari settings"
Text:
- Go to Settings → Safari → Content Blockers.
- Turn on Adblock Plus.
After that there is a visual separator (little 2px dots) and another label which says "Watch how-to video" (color: standard blue). When clicking this label, the how-to video opens and behave like it currently does.
Step 3
The user needs to activate Adblock Plus in the Safari settings. Step 2 will be visible in the app as long as the activation is not done. If Adblock Plus is activated and ABP for iOS is opened again, another screen will appear which tells, that the activation was successfully and that there is some progress to configure the filter lists.
Wording:
Text: “You’ve activated Adblock Plus in Safari”
(dotted separator)
Headline: Configuring filter lists
(spinner/progress indicator)
Text: This can take some second
Step 4
After the configuration is done, there will be one last screen which will tell the user, that Adblock Plus for Safari is now ready to use, or, if there were connection problems, that the user needs to manually update the filterlists.
Wording (if everything went well):
Headline: “Adblock Plus is installed”
Text: “Adblock Plus is activated in Safari and all filter lists are up to date. You can use Safari without annoying ads now.”
Button: “Finish”
Wording (if there was a problem, while updating the filter lists):
Headline: Filter lists are not up to date
Text: “There was no internet connection while trying to update the filter lists. Please update the filter lists manually in the settings. It’s possible, that you still see some ads in Safari, because of the outdated filter lists.”
Button: “Finish”
After clicking “Finish” the main app will appear.
Step 5
The main app is basically the current settings page but with little visual adjustments. Please ignore and omit the "Feedback" menu item as of now. The functionality will be described in a separate issue. The ad for Adblock Browser is not part of the visuals, but it should be part of the main app. The ad should be placed on the bottom of the main app, means that a user needs to scroll to see it, if there are too many menu items.
- Exception: If the user disables ABP for iOS in the Safari Settings afterwards, the modal notification from Step 1 is shown again (if possible).
Screenshots:
Style Guides
(Please note that the screenshots above don't use the exact same style as described in this style guide. Please apply this style guide to the content for each notification.)
Images
Attachments (25)
Change History (102)
Changed on 10/07/2015 at 02:52:01 PM by sven
Changed on 10/07/2015 at 02:52:07 PM by sven
Changed on 10/07/2015 at 02:52:11 PM by sven
comment:2 Changed on 10/07/2015 at 03:10:10 PM by sven
- Cc fhd added
comment:4 Changed on 10/07/2015 at 03:13:08 PM by mario
- Cc mario added
Changed on 10/07/2015 at 03:35:03 PM by sven
Changed on 10/07/2015 at 04:17:06 PM by sven
Changed on 10/07/2015 at 04:17:18 PM by sven
Changed on 10/07/2015 at 04:17:37 PM by sven
Changed on 10/07/2015 at 04:24:58 PM by sven
Changed on 10/07/2015 at 04:25:11 PM by sven
comment:8 Changed on 10/08/2015 at 03:40:37 PM by lisabielik
Please see Ticket_3175.png for text changes.
Changed on 10/08/2015 at 03:41:00 PM by lisabielik
comment:9 follow-ups: ↓ 14 ↓ 15 Changed on 10/09/2015 at 07:47:25 AM by vojtab
The "Feedback" menu item is out of scope for now as it is unclear what it should do. Please raise a separate ticket for Feedback feature.
comment:10 Changed on 10/09/2015 at 07:53:24 AM by vojtab
You want to show blocking "modal" popup (step 1) until ABP is enabled in content blocking settings in Safari. What should happen when user disables it again in Safari settings after some time & then open the Adblock Plus for iOS app? Do you want to fall back to blocking step 1 modal again? Or should normal settings page be shown from this point forward (= blocking modals steps 1 & 2 would be show always only once)?
comment:11 Changed on 10/09/2015 at 07:54:32 AM by vojtab
In case modal should not be shown again, do you want to display certain status icon etc. on main page (step 4) to indicate that ABP is disabled in Safari Settings?
comment:12 in reply to: ↑ 7 Changed on 10/09/2015 at 07:56:12 AM by mario
Replying to philll:
The background section does not give enough info about which issues the app had, thus it cannot be evaluated, if the suggested change solved those issues. Please be more explicit.
Last Wednesday we've discussed the most recent user feedback and concluded, that there are issues, that can be avoided by restructuring the app's layout and workflow:
- When the app is started and ABP isn't activated in the iOS Settings, show a notification, that locks the rest of the app. The notification states, that the user needs to enable ABP in the Settings before he can proceed. "Locking" the app by a notification prevents users from assuming, that ABP works by only starting the app (and not reading the information as currently shown).
- Show a confirmation-screen as soon as ABP is enabled and subsequently unlock the app.
- Show a direct link to the iOS Settings in order to make it easier for the user to find where to enable ABP
I'll add this to the background section.
comment:13 Changed on 10/09/2015 at 08:02:57 AM by mario
- Description modified (diff)
comment:14 in reply to: ↑ 9 Changed on 10/09/2015 at 08:10:53 AM by sven
Replying to vojtab:
"The "Feedback" menu item is out of scope for now as it is unclear what it should do. Please raise a separate ticket for Feedback feature."
Yes ignore that please.
"You want to show blocking "modal" popup (step 1) until ABP is enabled in content blocking settings in Safari. What should happen when user disables it again in Safari settings after some time & then open the Adblock Plus for iOS app? Do you want to fall back to blocking step 1 modal again? Or should normal settings page be shown from this point forward (= blocking modals steps 1 & 2 would be show always only once)?"
It would be optimal to check if a user disabled the setting, to show the lock screen again, but for a first implementation this is not necessary, but a nice to have.
comment:15 in reply to: ↑ 9 Changed on 10/09/2015 at 08:17:59 AM by mario
- Description modified (diff)
comment:16 Changed on 10/12/2015 at 10:15:57 AM by mario
- Keywords needs wording approvement removed
comment:17 Changed on 10/12/2015 at 11:21:40 AM by mario
- Keywords salsita added
Changed on 10/27/2015 at 12:42:53 PM by sven
comment:18 Changed on 10/27/2015 at 12:45:11 PM by sven
- Description modified (diff)
comment:19 Changed on 11/09/2015 at 02:55:05 PM by mario
- Keywords 2015q4 added
comment:20 Changed on 11/11/2015 at 03:36:01 PM by sven
- Description modified (diff)
comment:21 Changed on 11/13/2015 at 10:47:22 AM by mario
- Priority changed from Unknown to P2
Changed 2015q4-issues to P2
comment:22 Changed on 12/14/2015 at 01:57:59 PM by mario
- Ready set
comment:23 Changed on 01/05/2016 at 03:30:38 PM by sven
- "The ad should be placed on the bottom of the main app, means that a user needs to scroll to see it, if there are too many menu items.". At the moment it's sticky at the initial screem at the bottom
- Another thing that i saw is that the app conten is scrolled a bit while you see the overlay in the beginning. So if you see the overlay, which tells you to activate the content blocker first, you see the app content in the background, but a bit scrolled down.
comment:24 Changed on 01/05/2016 at 04:19:38 PM by philll
- Ready unset
Not ready. Most of the what to change section is rather background if at all and does neither give specific changes nor a description of the desired state.
Examples:
- "The new workflow is put into three steps." but there are four steps.
- I don't understand what "Step 4" refers to.
- "What needs to be done: Final wording" is neither a change nor a description and hints to unfinished requirements.
- The attachments are not referred to in the description
I also don't get what the last comment here refers to? If there's something important to the implementation, it should land in the description.
Please provide a clear and precise description of either changes that need to be done or (preferably) a complete description of the desired features. If using attachments, refer to them in the actual description, not as a lose list to be matched to the relevant points by the reader. If texts are required, include them in the description after having gotten approval from tech writing.
comment:25 Changed on 01/05/2016 at 04:54:31 PM by sven
"What needs to be done: Final wording" is neither a change nor a description and hints to unfinished requirements. -> correct. Don't know how you handle that, but the implementation can start without final wordings. So I'm fine, if the issue isn't set "Ready" as long it does mean that there is something missing, but you can already work on that. Please clarify that with mario.
"The attachments are not referred to in the description" - Not sure what you mean with "The attachments" b/c all relevant attachments are. There are more in the attachments, b/c they were uploaded in a time of a previous version of this ticket.
The last comment was made while we had the meeting today to not forget these two points. There are 3 steps that we implemented but 4 which are necessary for the user to activate adblock plus. Step 3 is just a user interaction. We could write that it's 4 steps, if this is confusing.
Changed on 01/19/2016 at 02:43:10 PM by sven
Changed on 01/19/2016 at 02:43:15 PM by sven
Changed on 01/19/2016 at 02:43:21 PM by sven
Changed on 01/19/2016 at 02:43:26 PM by sven
Changed on 01/19/2016 at 02:43:46 PM by sven
comment:26 Changed on 01/19/2016 at 02:48:02 PM by sven
- Description modified (diff)
comment:27 Changed on 01/19/2016 at 02:49:46 PM by sven
- Description modified (diff)
comment:28 Changed on 01/21/2016 at 12:28:05 PM by sven
- Description modified (diff)
Changed on 01/21/2016 at 01:14:01 PM by sven
Changed on 01/21/2016 at 01:14:06 PM by sven
Changed on 01/21/2016 at 01:14:12 PM by sven
Changed on 01/21/2016 at 01:14:17 PM by sven
Changed on 01/21/2016 at 01:18:11 PM by sven
comment:29 Changed on 01/21/2016 at 01:19:57 PM by sven
- Description modified (diff)
comment:30 Changed on 01/26/2016 at 09:22:14 AM by mario
- Ready set
comment:31 Changed on 02/10/2016 at 12:07:21 PM by sven
The workflow lgtm, but there are some minor visual things, which are not implemented such as described in that ticket:
- In step 2 in "Go to Safari settings → Content Blockers." Safari settings and Content Blockers should be displayed in bold.
- The font size is smaller than defined.
Changed on 03/02/2016 at 09:32:56 AM by mario
Notification Styleguide
comment:32 Changed on 03/02/2016 at 01:12:30 PM by mario
- Ready unset
comment:33 Changed on 03/16/2016 at 09:47:10 AM by mario
- Description modified (diff)
- Ready set
comment:34 Changed on 11/14/2016 at 02:43:05 PM by mario
As per step 2:
After that a (standard iOS) blue button with the label "Open iOS Settings".
This button will link to the general iOS settings (we're not able to link to the Safari -> Content Blockers menu. The reasons are iOS restrictions).
This is currently not reflected in the app.
How to reproduce
- Deactivate ABP in Safari's settings and uninstall ABP
- Install ABP for iOS 1.2.0
- Start ABP for iOS
- Tap the button "Open iOS Settings" when prompted
Observed behavior
Tapping the button "Open iOS Settings" opens ABB's Settings page
Expected behavior
Tapping the button "Open iOS Settings" opens the iOS Settings
comment:35 Changed on 11/14/2016 at 03:38:47 PM by pavelz
@mario not a bug, unfortunately. The feature of opening iOS settings through custom crafted URL was disabled in iOS10.
https://gist.github.com/phynet/471089a51b8f940f0fb4
http://stackoverflow.com/questions/8246070/ios-launching-settings-restrictions-url-scheme
http://stackoverflow.com/questions/5655674/opening-the-settings-app-from-another-app
The app does as much as it can: when opening that custom URL fails, it opens the only legally and publicly available URL, which is the app's settings itself. Now the question is, how to improve the UX:
- either do nothing, falling back to the previous waiting on the user to go to the Settings on his own
- or instruct the user to click "Settings>" in the app's settings page, which will take him to the Settings
comment:36 Changed on 11/18/2016 at 11:11:46 AM by pavelz
@mario while i was hunting the disappearance of #3241 from devbuild (configurable filter lists), i had a multiple opportunity to activate the filter in safari through both methods and i must say that method 2 is WAY MORE user friendly.
For method 1, one must leave the ABP app to reach settings from the main iOS screen. When Safari is found and settings changed, ABP app has to be found again manually in app listing.
For method 2, Settings "app" is entered directly from ABP app. Now since iOS9, there is a desperate attempt at Android's hardware back button - i.e. navigating to "previous" app. It's covering top left corner where signal strength is normally. It shows "Adblock Plus" all the time being in iOS Settings. So when the user switches the Safari blocker switch, he can appear directly back in the ABP onboarding with a single click!
It's so much better UX that i don't recommend method 1 at all anymore even at expense of needing to make a new tutorial video.
comment:37 Changed on 11/18/2016 at 12:50:41 PM by mario
@pavelz, Thanks for the feedback. We're currently looking into this.
Other than that, we just found an issue with the current preview:
How to reproduce
- Install ABP for iOS 1.2.1 preview devbuild
- Open ABP
- Navigate to step 3
Observed behaviour
The spinner icon is not displayed
Expected behaviour
The spinner icon is displayed as shown in this screenshot.
comment:38 Changed on 11/21/2016 at 12:44:33 PM by mario
- Description modified (diff)
- Ready unset
Changed on 11/21/2016 at 12:45:08 PM by mario
comment:39 Changed on 11/21/2016 at 12:56:40 PM by mario
- Cc lisabielik added
@pavelz, I've updated "Step 2" to reflect the fact, that we can't deep-link to the Settings app anymore. Please review the following changes:
- The headline of Step 2 has changed
- The text of Step 2 has changed
- We have removed the "Open iOS Settings" button
Our designers have figured, that deep-linking to the ABP settings might cause more confusion than requiring users to open the Settings app themselves. In order to avoid introducing another fail-state we've removed the button altogether instead of giving any choice of confirmation (like a "Go it!" button).
@lisabielik, could you please review the changed strings in "Step 2"?
The strings in question are:
- "Turn on Adblock Plus in your Safari settings first" to "Before you proceed, turn on Adblock Plus in your Safari settings"
- "Go to Safari settings -> Content Blockers." to "Go to Settings -> Safari -> Blockers."
comment:40 Changed on 11/21/2016 at 02:33:10 PM by lisabielik
@mario:
Before you proceed, turn on Adblock Plus in your Safari settings.
- Go to Settings -> Safari -> Blockers.
- Turn on Adblock Plus.
comment:41 Changed on 11/21/2016 at 02:41:09 PM by mario
- Description modified (diff)
@lisabielik, thanks a lot, I modified the description accordingly.
Regarding "Before you proceed, turn on Adblock Plus in your Safari settings.": We did not use punctuation in headlines in the introduction slides so far. Would you rather add punctuation to all headlines? This would concern the following headlines:
comment:42 Changed on 11/21/2016 at 02:44:43 PM by lisabielik
@mario:
No, sorry for the mistake...no punctuation in the headlines.
Thanks!
comment:43 Changed on 11/21/2016 at 02:45:55 PM by mario
- Description modified (diff)
Thanks, changed.
comment:44 Changed on 11/30/2016 at 03:13:53 PM by pavelz
- Cc vojtab removed
comment:45 Changed on 12/08/2016 at 09:16:51 AM by jand
@mario: Can you provide me image from Step 2?
comment:46 Changed on 12/08/2016 at 09:37:06 AM by mario
- Cc jeen added
@jeen, can you please attach the "(i)" symbol from Step 2 as an image? Alternatively feel free to invite me to Zeplin, if this project is online there.
Changed on 12/08/2016 at 11:58:35 AM by jeen
Alert icon
comment:47 Changed on 12/09/2016 at 11:24:57 AM by jand
- Status changed from new to reviewing
comment:48 Changed on 12/09/2016 at 12:56:10 PM by mario
- Ready set
- Review URL(s) modified (diff)
comment:49 Changed on 12/12/2016 at 01:59:34 PM by mario
- Description modified (diff)
comment:50 Changed on 12/14/2016 at 09:24:11 AM by pavelz
https://github.com/adblockplus/adblockplussafariios/pull/12
waiting for @fhd feedback
comment:51 Changed on 12/14/2016 at 09:33:15 AM by mario
@pavelz, we're holding back the review until the discussed changes in Slide 2 are implemented. See discussion on slack: Fonts on Slide 2 are too big. Please adjust fonts to match the style guide.
comment:52 Changed on 02/15/2017 at 09:33:44 AM by abpbot
A commit referencing this issue has landed:
Issue 3175 - Change app workflow
comment:53 Changed on 02/15/2017 at 09:42:24 AM by fhd
- Milestone set to Adblock-Plus-for-iOS-next
- Resolution set to fixed
- Status changed from reviewing to closed
Changed on 05/12/2017 at 02:05:49 PM by mario
comment:54 Changed on 05/12/2017 at 02:15:20 PM by mario
- Resolution fixed deleted
- Status changed from closed to reopened
We encountered inconsistencies in the style of the onboarding slides, which need to be addressed.
As per this comparison, numbered accordingly:
- The icon on slide 1 ("Before you proceed") is too big. Please adjust it to the same size as in slide 3 ("Updating filter list").
- The headlines on slide 1 ("Before you proceed") and slide 4 ("You're in control") do have a different style compared to slide 2 and 3. Please adjust the two headlines to match the style (size and boldness) of slide 2 and 3.
- The bottom spacing on slide 1 ("Before you proceed") is bigger than on slide 3 ("Updating filter list"). Please adjust the spacing on slide 1 to match the spacing on slide 3.
- The paragraph text on slide 1 ("Before you proceed") is bigger compared to slide 2 and 4. The paragraph text on slide 3 ("Updating filter list") is smaller than on slide 2 and 4. Please adjust the paragraph text on slide 1 and 3 to match the style/size of the paragraph text of slide 2 and 4.
Except for 1., the styles of all elements are described in this styleguide. Inconsistencies should be covered by the list above, however, please double check all elements on all onboarding slides to exactly match the style guide.
comment:55 follow-up: ↓ 66 Changed on 08/23/2017 at 09:16:44 AM by ashephard
- Owner set to ashephard
comment:56 Changed on 08/23/2017 at 11:05:08 AM by mario
- Cc jand pavelz removed
- Ready unset
Temporarily marking this issue as not ready as a discussion is going on about whether to introduce additional changes.
Will update asap.
comment:57 Changed on 09/20/2018 at 02:39:13 PM by umairaslam
spam
comment:58 Changed on 10/25/2018 at 10:12:15 AM by mujji
spam
comment:59 Changed on 12/08/2018 at 10:38:55 AM by Aaradhana Akshay
spam
comment:60 Changed on 12/22/2018 at 11:03:38 AM by Saranraj
spam
comment:61 Changed on 12/24/2018 at 10:22:23 AM by Saranraj
spam
comment:62 Changed on 12/26/2018 at 06:31:07 AM by onlineplants
spam
comment:63 Changed on 12/31/2018 at 07:26:23 AM by mdeepali071
spam
comment:64 Changed on 01/04/2019 at 01:11:13 PM by saleemsaif
spam
comment:65 Changed on 01/08/2019 at 09:20:00 AM by smleqbank
spam
comment:66 in reply to: ↑ 55 Changed on 01/15/2019 at 05:46:11 PM by amaria
spam
comment:67 Changed on 01/15/2019 at 05:46:55 PM by amaria
spam
comment:68 Changed on 02/21/2019 at 07:19:15 AM by JohnRicky
spam
comment:69 Changed on 02/25/2019 at 09:06:34 AM by saleemsaif
spam
comment:70 in reply to: ↑ description Changed on 03/21/2019 at 12:25:06 PM by haseebatvital
spam
comment:71 Changed on 04/09/2019 at 09:27:04 AM by zhongba
spam
comment:72 Changed on 05/20/2019 at 12:06:56 PM by zhongbachinese
spam
comment:73 Changed on 07/12/2019 at 10:16:10 AM by shiftcarrental3
spam
comment:74 Changed on 08/30/2019 at 10:43:08 AM by Elegantitservices
spam
comment:75 Changed on 09/13/2019 at 07:37:57 AM by Lcx666iixx
spam
comment:76 Changed on 09/23/2019 at 07:10:22 AM by Niyaz23
spam
comment:77 Changed on 09/29/2019 at 09:13:31 AM by impulsepp
spam
The background section does not give enough info about which issues the app had, thus it cannot be evaluated, if the suggested change solved those issues. Please be more explicit.