UX Review

[swedishfrenchpress]

I wanted to share some initial thoughts on the eNuts iOS app's UX. First and foremost, I'm genuinely impressed with what the team has accomplished – the design and overall UX are outstanding! My comments here are mainly from a UX perspective, with a few sprinklings of UI suggestions. Please feel free to weigh in! I'm eager to hear your thoughts, agreements, disagreements, or any corrections. It's not my intention to come off as the ultimate "expert" in UX. My observations are simply reflections from past experiences.Remember, design thrives on collaboration, and everyone's input is invaluable. Ideally, we'd test some of these designs with users and then shape our choices based on their insights.

Pin Setup

• The first screen users encounter is the 'Enter Pin' screen.
• Before initiating any action, it's crucial to provide context about eNuts: its purpose, the setup process, and its functionalities.
• This information is effectively presented in the three-screen onboarding flow.
• Will there be an option to restore an existing wallet?
• The user flow could be enhanced: Start with the 'Enter Pin' screen, followed by a 'Continue' button (or we could have a character count requirement that automatically goes to the confirmation screen once it's met) Then, present a screen for pin confirmation, concluding with another 'Continue' button.
• At present, the process relies on the check button positioned at the bottom right.
• A 'Pin Set Confirmation' screen should be introduced, offering details on the consequences of forgetting the pin and explaining available recovery options.

Onboarding guide

• Onboarding serves as an excellent method to introduce users to eNuts, explaining its functions, key details, and value proposition.
• We should prioritize presenting this information, assuming that it's a user's initial interaction with cashu / chuamian ecash. This info is very valuable
• Typically, mobile onboarding experiences leverage a “swipe right” interaction. It could be sensible to adopt this established convention.
• Currently, the user must navigate through onboarding by tapping on a 'Continue' button three times is not the most efficient method.
• Recommendation: Upon the user's first sign-in, display the onboarding content. Allow users to scroll through the three informative screens. To indicate the number of screens, three small dots should be visible at the bottom. Beneath these, the Call-to-Action (CTA) buttons like “Create New Wallet” or “Restore an Existing Wallet” should appear (if we decide to include the restore option).

Get started

• This is really good! I don’t have much feedback here other than the might be able to be optimized. Since adding a mint is required to start using we might want to emphasize that. Users are lazy and tend to skip optional steps.

Home screen

• The addition of a mint is essential for initial use, and this should be emphasized. Users often bypass optional steps, so making this clear is crucial.
• I'm keen to understand the rationale behind positioning "send", "mints", and "receive" at the top, as well as the inclusion of a QR icon that activates the camera and the presence of "wallet", "contact us", and "settings" in the navigation.
• With a total of 10 potential user actions on this screen, the cognitive load is considerable. Simplification might be beneficial.
• We should aim to understand user interaction with cashu more deeply to validate our layout and design decisions.
• From a UI perspective, the "send" button's disabled state seems inconsistent, especially since its border opacity matches the enabled buttons.
• Highlighting the 'understand current risks' segment is key.. Its current placement adjacent to the transaction history seems makes it feel less important
• A possible improvement would be to encase 'understand current risks' within a distinct border or box below the QR/camera icon. Upon selecting this message, the existing modal would appear. This rearrangement would declutter the top section, reserving it solely for action buttons.

Transaction history

• Margins on both the right and left sides should have some padding. This adjustment provides the design with breathing room.
• The date appears cut off and is being pressed against the bottom of the oval.
• Transaction History and Mint list looked great on Android, but slightly off-center on iPhone.

Mints

• If the sole action available to the user when adding a mint is to copy and paste a mint URL, it might be beneficial to eliminate the Flotation Action Button (FAB) that initiates the add mint process.
• An empty state at the top can be implemented with the placeholder text "paste mint URL here."
• Generally, FABs are advantageous when there are multiple actions available. If not, it's preferable to provide a clear Call-To-Action (CTA) button.
• Heidi feedback: Added new Mint—said Yes Receive eCash from it now. Decided not to so clicked Back. Went Grey. Server says App went to the background. On UI, cannot do anything. Had to exit out of app.

Receive

• Great design here! Couldn't review much further since testnut was down.
• Heidi feedback: Receive-> Paste and Redeem ECash (when nothing on clipboard)- if nothing on clipboard, continued to spin. Had to exit out. If anything is on clipboard but not valid, gives the correct message of Invalid token.
• Heidi feedback: Receive->Create Invoice. Timer for Payment Running, I did not realize I needed to press Check for Payment. I wonder if this should look more like a button? I Cancelled and saw the funds were there (that I had paid myself).
• Heidi feedback: I wonder if there should be a Back to Dashboard there instead of Cancel? Cancel doesn’t cancel the invoice if you already created it right? It just goes back to dashboard, right?

Contacts

• The current design is great. However, some tweaks could enhance its UI.
• For newcomers, it might be helpful to display the field for entering their npub immediately, complete with a placeholder instead of the plus.
• It’s convention to have action buttons on the right on input fields, i.e. plus, search glass, tag, etc..
• Search functionality would be key here
• QR code icon on the left takes me back to the home screen
• Allow users the flexibility to enter any NPub for sending, not restricting them solely to the profiles they follow. This promotes a more open and inclusive communication experience.

Misc

• It is a standard iOS convention to position the back settings on the left. This design is consistent across numerous apps, including default iOS apps like Photos and Settings.
• Heidi feedback: Pay with Your LN Wallet - what does it open by default? (Opened my TestFlight Bitkit and didn’t have enough there)
  ^^I think iOS opens by default the first app your installed that fits the use. It would be nice to be able to change the iOS settings to "always open bitcoin links with x app" but i don't think they allow it.

[KKA11010]

Thank you for the excellent review, @swedishfrenchpress !

Yes to the restore option. Its implementation will bring a slight change to the initial onboarding flow.

Setting up a PIN:

We aim to offer users flexibility with their PIN length. Currently, the PIN must be a minimum of 4 numbers and a maximum of 10. This prevents us from automating the PIN submission process. I recommend retaining the current check button placement on the bottom right. We can gather more user feedback once the app is released

Initial mint setup

Users are not obligated to add a mint before using the wallet. It's possible to receive Ecash without initially adding a mint. In such cases, users will be prompted to trust the mint associated with the received token. Upon confirmation, the mint will be automatically added to their list.

Contact list

I completely agree about the need for a search function. However, due to how we fetch contact metadata to minimize network traffic (contact metadata is only available once the contact is scrolled into the viewport), providing an accurate search function is challenging. We can implement a search feature, but users must understand that it will only work for contacts that have been within the viewport previously (User can follow between 1 and tens of thousands of profiles). To address this concern, I will add a 'Profiles Sent Ecash To' section, which will showcase frequently used contacts. Additionally, I will implement a 'Favorite' function that can be easily identified with a star icon and place these on the top of the list.

I will create GitHub issues for several points right away excluding those addressed by Heidi (already fixed):

• Bring "back" button to the left side of the nav #130
• Send Ecash to any npub #124
• Wrong redirect pressing QR icon in contacts screen #131
• Provide immediate input for entering an npub in the contacts screen. #132
• Add "paste" label in new mint input #133
• Padding issue in a flashlist row #126
• Emphatize the section "risks" in dashboard #134
• Inconsistent disabled send button in dashboard #135
• Search function, Recently used & Favorite nostr contacts #136
• Simplify the dashboard #137
• Scrollable onboarding screens #138
• Confirmation screen for "pin set" #139
• Seed phrase backup #140

[KKA11010]

Most of the proposals have been implemented or converted to issues. This can be closed now