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.
  • It's an 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 have 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.

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! 😊