Skip to content
Snippets Groups Projects

Hamburger menu

    • Closed Issue created by Kallisti @kzKallisti
    • manage wallets
    • apps
    • coins (addresses)
    • settings

    Remove bottom nav

    Hamburger menu icon on top left

    Slides out drawer with options

    Edited
    To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information

    Child items ...

    • Activity

    • Kallisti changed milestone to %v1.0.9 - iOS Release / UI Update

      changed milestone to %v1.0.9 - iOS Release / UI Update

    • Kallisti closed

      closed

    • Kallisti reopened

      reopened

    • Kallisti changed the description

      changed the description

    • Jeremy
      Jeremy @Jeremy ·
      Maintainer

      Hamburger menu on top left is FAR less accesible to the user's thumb when using a phone one handed. I can see the idea, but I'd strongly consider other solutions, for instance I quite like the 3 tab bottom nav bar (Cash send/receive, apps, settings) or possibly even just 2 if settings is made an app. Or the bottom nav bar could be a swipeable list of different options, I think there's lots of options.

      Moving to a top left hamburger makes it far less accessible to those areas, although I can see the idea of maybe making the basic send/receive use case as simple and focussed as possible. Nav bar which lets you switch off the apps tab does that though I think.

    • Kallisti
      Kallisti @kzKallisti ·
      Author Owner

      I agree on the accessibility aspect, but I'm not sure if there's a better solution. Here's what I'm seeing:

      1. Bottom nav looks ugly on iOS and on Androids that still have the classic 3 button bar. (It looks fine on my Samsung phone that changes the classic button bar into 3 thin lines instead, giving more of a "full screen effect"). This might actually be mitigable if we force full screen mode though.

      2. I originally was going to put the "address list" button in the middle of the invoice and cycle address buttons, it looked pretty good in pre-release versions. But now I'm having second thoughts after seeing some screenshots on tiny screens (#37 (closed)). The button would have navigated to another page for address management (I will probably roll coin control into this view), which is unlike the other two buttons on the page that have more local effects.

      3. Someone made a good point that "settings" is not actually a commonly used button, so giving it a whole dedicated nav tab doesn't necessarily make sense. Adding 1 additional tap by hiding it in a hamburger menu is acceptable imo. It also let us sensibly rename "Wallet Settings" to "Manage Wallets".

      4. Not sure how else we want to build the "quick wallet switcher" functionality (#88 (closed)). Maybe we change the text "Available Balance" to the wallet's name, and then make that text clickable to spawn a modal that lets you select a wallet or something?

      5. Is "everything" an app (address list, help, wallets, settings, etc) or just integrations? (CashID, Flipstarter, Roadmap, etc)

      6. Rationale: the one-handedness isn't much of an issue for the items that I'd like to put in this menu, as they're "secondary" features that are only used occasionally, so making them accessible by 2 taps instead of 1 is acceptable imo.

      Overall, it seems that it's sensible to put "top level navigation" elements into a menu bottom nav like this. The "Apps" view would still contain all of the "extensions" where the hamburger menu only exists on the home wallet page and only deals with features specific to the wallet page/global wallet options.

      Edit: with this in mind it would also possibly allow us to move the send/receive tabs to a bottom nav which MIGHT be better? (my gut is kinda leaning toward don't do this though)

      Edited by Kallisti
    • Kallisti
      Kallisti @kzKallisti ·
      Author Owner

      Recording this user feedback for posterity:

      Arthur, [6/4/23 8:15 AM] I noticed that it's instantly to move from the send tab to the receive tab, but not the other way around. It's probably because the send tab needs to load the transaction history. I don't have a long history at all but the delay is still noticeable, although not critical for now.

      So my first radical suggestion would be to move the transaction history to a separate place, preferably a tab on the bottom of the screen near the home tab. In this tab one could also display the graph with the wallet balance in the future.

      Arthur, [6/4/23 8:15 AM] Furthermore, the send tab seems to be a bit cluttered with the transaction history. If send has a separate clean page, where one can paste/scan the address and enter the amount both in BCH/sats and the local currency without having to switch, I think it would be easier to use. Though one does not have to paste the address and the amount on one screen and do it in two stages as it is now.

      Arthur, [6/4/23 8:15 AM] A suggestion here (on the send screen) would be to remove the on-display keyboard since it's not very intuitive and just use the standard iOS/Android numbers keyboard for entering the amounts both in BCH and in the local currency, which would convert the amounts to each other instantly and automatically. For example, take a look at how this screen is done in the mobile Ledger Live app.

      Arthur, [6/4/23 8:16 AM] My second radical suggestion would be to remove the send tab at the top to make the UI easier to use with one hand. Instead we would have one home (or wallet) screen with the QR-code to receive funds, and a button at the bottom of that screen (near the quick scan button) to send funds, which would open a separate screen with the send functionality by pressing the send button. This button would be more accessible when using a phone with one hand than pressing the send tab at the top.

      Arthur, [6/4/23 8:16 AM] We would also get back some screen space since we would only have one tab on the home screen and wouldn't need to change them. We could use this space for displaying the name of the current wallet at the very top of the screen and add the functionality to quickly change between wallets. For example, with a slide down menu.

      Arthur, [6/4/23 8:16 AM] It also adds the possibility to add a settings button to the top right corner near the displayed wallet name. It's placed more intuitively there and we don't need it at the bottom since it's not used very often.

      Edited by Kallisti
    • Kallisti
      Kallisti @kzKallisti ·
      Author Owner

      Some arguments against hamburger menus: https://uxdesign.cc/3-design-patterns-for-navigation-that-are-better-than-hamburger-menus-a8df64ee1d6e

      https://www.nngroup.com/articles/hamburger-menus/

    • Kallisti
      Kallisti @kzKallisti ·
      Author Owner

      Bottom nav:

      • Wallet
      • Apps
      • Settings

      Wallet local nav: Send/Receive

      Make a tx history button in top left corner (Available Balance component)?

      Coin Control/Address list same interface? Originally had "address list" button on receive page, but coin control probably makes more sense on send?

      Coin control could possibly be related to #123

      Edited by Kallisti
    • Kallisti
      Kallisti @kzKallisti ·
      Author Owner

      https://www.smashingmagazine.com/2019/08/bottom-navigation-pattern-mobile-web-pages/

      The real solution is to keep bottom nav, and if necessary (i.e. too many top-level nav buttons), add a "more" button that spawns a bottom-up drawer menu.

      Edited by Kallisti
    • Kallisti closed

      closed

    • Kallisti removed milestone %v1.0.9 - iOS Release / UI Update

      removed milestone %v1.0.9 - iOS Release / UI Update

    • Kallisti mentioned in issue #130 (closed)

      mentioned in issue #130 (closed)

    • Kallisti mentioned in issue #151 (closed)

      mentioned in issue #151 (closed)

    Please register or sign in to reply