Opened on 12/15/2016 at 01:41:53 PM
Closed on 08/16/2017 at 03:53:02 PM
Last modified on 09/12/2017 at 05:58:02 PM
#4737 closed change (fixed)
[UI] Redesign bottom bar
| Reported by: | mario | Assignee: | |
|---|---|---|---|
| Priority: | P2 | Milestone: | Adblock-Browser-for-iOS-2.0.0 |
| Module: | Adblock-Browser-for-iOS | Keywords: | |
| Cc: | Blocked By: | ||
| Blocking: | #4706 | Platform: | Adblock Browser for iOS |
| Ready: | no | Confidential: | no |
| Tester: | Unknown | Verified working: | yes |
| Review URL(s): | |||
Description (last modified by mario)
Background
This issue is part of ABB's redesign as described under #4706.
Existing logic/UI which is not covered within this issue stays in place as it is.
What to change
Apply the new design to ABB's bottom bar as shown in this mockup and this style guide
UI
- Remove the settings icon
- Move the tabs icon to the third position as shown in this mockup
- Add a ghost mode icon to the fourth position as shown in this mockup
- Move the favourite icon to the fifth position as shown in this mockup
Logic
- If the tabs icon is clicked, follow up on #4743 and #4744
- If the ghost mode icon is clicked, follow up on #4745
- If the favourite icon is clicked, follow up on #4741
Attachments
Style Guides
Assets
Mockups (as shown in description)
Attachments (3)
Change History (17)
Changed on 12/15/2016 at 01:49:01 PM by mario
Changed on 12/15/2016 at 01:55:59 PM by mario
comment:5 Changed on 12/15/2016 at 01:57:39 PM by mario
- Blocking 4706 added
Changed on 12/16/2016 at 11:36:29 AM by mario
comment:8 Changed on 01/18/2017 at 01:11:34 PM by mario
- Priority changed from Unknown to P2
comment:10 Changed on 06/06/2017 at 08:06:24 PM by jand
- Resolution set to fixed
- Status changed from new to closed
comment:11 Changed on 07/10/2017 at 07:52:04 AM by mario
- Milestone set to Adblock-Browser-for-iOS-next
comment:12 Changed on 08/09/2017 at 05:24:05 PM by tpregueiro
- Resolution fixed deleted
- Status changed from closed to reopened
comment:13 Changed on 08/16/2017 at 03:53:02 PM by jand
- Resolution set to fixed
- Status changed from reopened to closed
comment:14 Changed on 09/12/2017 at 05:58:02 PM by traynard
- Verified working set
Note: See
TracTickets for help on using
tickets.
@2x.png.html){kind=link}
@2x.png){kind=link}
Problem 1:
The touch area on the individual icons on the tap bar is super small, making it hard to get it right.
Proposed solution: increase the size of the touch area.
Problem 2:
Right now, the navigation model is very strict, example: if user goes to bookmarks view, they can only leave that view when they tap on the bookmarks icon at the bottom. Same goes for the Tabs view, you click on the tabs icon, and then the only way to leave that view is by clicking on the same Tabs icon.
Proposed Solution: for both the Tabs view and the Bookmarks view, clicking anywhere outside of the corresponding view, choose execute the corresponding action if any, or should simply close the view, and take users back to where they were previously.
e.g.: User is visiting site A; if the user taps on the Tabs icon, the Tabs view will open; when the Tabs view is open, if the user touches/taps on the bookmarks icon on the bottom bar, the Tabs view should close, and the Bookmarks should open
e.g. 2: User is visiting site A; if the user taps on the Tabs icon, the Tabs view will open; when the Tabs view is open, if the user touches/taps on the back button, the Tabs view should close, and the user should be taken to whatever site she was visiting before landing on site A.