Opened 10 months ago

Closed 2 months ago

Last modified 6 weeks ago

#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)

04a - Page (not focused search field)@2x.png (453.6 KB) - added by mario 10 months ago.
05 - Bookmarked Pages.png (75.9 KB) - added by mario 10 months ago.
Adblock Browser Assets.zip (235.1 KB) - added by mario 10 months ago.

Download all attachments as: .zip

Change History (17)

comment:1 Changed 10 months ago by mario

  • Description modified (diff)

comment:2 Changed 10 months ago by mario

  • Description modified (diff)

comment:3 Changed 10 months ago by mario

  • Description modified (diff)

Changed 10 months ago by mario

comment:4 Changed 10 months ago by mario

  • Description modified (diff)

comment:5 Changed 10 months ago by mario

  • Blocking 4706 added

comment:6 Changed 10 months ago by mario

  • Description modified (diff)

comment:7 Changed 10 months ago by mario

  • Description modified (diff)

Changed 10 months ago by mario

comment:8 Changed 9 months ago by mario

  • Priority changed from Unknown to P2

comment:9 Changed 7 months ago by mario

  • Description modified (diff)

comment:10 Changed 5 months ago by jand

  • Resolution set to fixed
  • Status changed from new to closed

comment:11 Changed 3 months ago by mario

  • Milestone set to Adblock-Browser-for-iOS-next

comment:12 Changed 2 months ago by tpregueiro

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

comment:13 Changed 2 months ago by jand

  • Resolution set to fixed
  • Status changed from reopened to closed

comment:14 Changed 6 weeks ago by traynard

  • Verified working set
Note: See TracTickets for help on using tickets.