💡 User Interface Rationale#

Similar to Chrome to Reduce Learning Curve#

• Many users say, "Oh, it's just Chrome." But it's not!
  • Uses the same public browser engine as Desktop Chrome and its UI assets.
  • Entirely different architecture: 64-bit, ported desktop engine with desktop features like extensions, casting, multi-window support, and zero tracking.
• I respect Chrome's quality, its 90%+ market share, and the hard work by my former colleagues.

Location Bar at the Top#

Buttons#

• Extension Button: Works the same as in Desktop Chrome.
• Tab Switch Icon:
  • We changed it because:
    • A static icon allows HuBrowser to cache the entire top bar for better performance.
    • Rendering the icon dynamically with tab counts is overly complex and impacts performance.
    • Tab counts can add unnecessary mental pressure without providing useful information.
    • Allows users to focus on content rather than the number of tabs.
    • HuBrowser's desktop-grade memory management allows as many tabs as desired, with automatic tab caching.
    • Users need not feel pressured by having many tabs open.
    • The number of tabs can be gauged roughly by looking at the tab bar or exactly by tapping the tab switch.
    • The dynamic tab count icon was original to Chrome, but many have copied it unnecessarily.
• Menu: Simplified for small screens.
  • Top Section: For page actions.
  • Bottom Section: For destinations.

Why Not Put the Location Bar at the Bottom?#

• Placing the location bar at the bottom would cause the bottom bar to render twice every time the keyboard pops up, negating render cache benefits.
• A long location bar is mainly for display and would waste precious bottom screen space better used for user actions.

Why Not More Buttons?#

• A longer location bar is important for displaying URLs and search queries.
  • Helps prevent fraud by showing the full domain, avoiding misleading URLs where hubrowser.com.hugle.com might appear as hubrowser.com.
• Top buttons are harder to press on small screens.

Tab Bar at the Bottom#

• The bottom bar is ideal for actions.
• Since the bottom bar needs to re-render when the keyboard pops up, it's better to place frequently changing elements here.
• Tab Icons: Perfect for easy tab switching.
• New Tab Page and Quick Search Button: Highly useful.
• Parrot Assistant Button: Symmetrical counterpart to the menu button in UI position and functionality.
  • The menu button offers layered, predefined options following industry conventions.
  • The Parrot Assistant provides a dynamic and personalized experience:
    • Control media playback, compare prices when shopping, invoke page-aware AI, etc.

Mobile Back Button#

• Why does HuBrowser's back button open the last closed tab?
  • In other apps, the back button is usually used to go back to the previous page. Sometimes it closes the current page, and sometimes it closes the app. This inconsistency can confuse users.
  • The back button is large and at the bottom, making it easy to accidentally press. You might accidentally press it while watching a video, filling out a form, making a payment, typing, or playing a game. If it takes you back to the previous page, you would have to start over, which can be frustrating 😂.
  • It allows you to easily reopen previously closed pages.
  • Going back to the previous page can be achieved through swipe gestures, which are just as convenient and less prone to accidental presses.

Wrap Up#

• Both the top and bottom bars are designed as one bar with three buttons, providing symmetry and consistency.
• Space is efficiently utilized without making buttons feel cramped.
• It's a perfect balance! 😊