work on DD53

1 files changed, 290 insertions, 11 deletions

diff --git a/design-documents/053-wallet-ui.rst b/design-documents/053-wallet-ui.rst
index d32eb8b8..8a2fb37d 100644
--- a/design-documents/053-wallet-ui.rst
+++ b/design-documents/053-wallet-ui.rst
@@ -54,6 +54,13 @@ should be minimal to achieve the objective in the description.
   that elements should be easy to find following directions like "close to X" or
   "at the start/end of the screen".
 
+* **Issues**. Issues we identified that need to be addressed in some implementation(s).
+  This is in particular about inconsistencies and bad design choices made on some
+  platforms.
+
+* **Adoption**. Things that one version does particularly
+  nice that we might want other implementations to adopt.
+
 * **Screenshots**. Should be provided for all wallet implementations and kept
   up to date, to ensure that they can be used to aid in UI/UX and QA
   discussions.
@@ -68,7 +75,7 @@ included with the difference with the main definition.
 Part of the screens that are reused shoud also be defined in this document as screen.
 
 Common definition:
- * navigation between screen should not happen if the user didn't take any action
+ * navigation between screens should not happen if the user didn't take any action
 
 
 Proposed Solutions
@@ -76,7 +83,7 @@ Proposed Solutions
 
 List of all screens with the defined properties.
 
-.. _balance-list-ref:
+.. _cta-balance-list-ref:
 
 balance-list
 ------------
@@ -95,11 +102,55 @@ Info
   * Outgoing amount (money pending to leave).
   * Currency scope information (see :doc:`035-regional-currencies`).
 
+Layout
+^^^^^^
+
+* There SHOULD be a menu or button from where the QR code entry / scan
+  functionality is reachable (:ref:`cta-url-entry-ref`)
+* There SHOULD be a menu or button from where the settings screen (:ref:`cta-settings-ref`)
+  is reachable, unless settings are handled differently
+  on the platform.
+* In developer mode, there MAY be a menu or button
+  from where the developer tools (:ref:`cta-devtools-ref`)
+  are reachable. Alternatively, developer tools COULD
+  also only be reachable via settings.
+
+
+Issues
+^^^^^^
+
+* WebEx (minor): Inconsistent to aldready have
+  the "add" and "send" buttons on this page.
+* WebEx (image): Screenshot does not show any
+  pending transactions.
+* Android (text): Uses "Exchange:" which is
+  not user-facing terminology. Should only show the URLs.
+* Android (minor): Screenshot shows only a "pending"
+  badge, which seems redundant given "+10 KUDOS inbound"
+  (too much information?)
+* iOS (major): Way too much detail shown, way too
+  much explanation text, too many operations
+  (send money, request payment, spend test money!!!!)
+* iOS (major): overly complex menu with balances and
+  banking; we are NOT a banking app, banking is IMO
+  confusing. Settings icon could be on top left, then
+  it would be more uniform, I would get rid of banking
+  'tab' entirely!
+* iOS (text): bad icon for "pending outgoing", the
+  "minus" sign does not give me good associations here
+
+Adoption
+^^^^^^^^
+
+* iOS: transaction history visualization with red/green
+  bars after currency is nice.
+
+
 Actions
 ^^^^^^^
 
 * **View transactions**. Clicking on a balance item should take you to the
-  transaction list (:ref:`transaction-list-ref`) associated with that balance.
+  transaction list (:ref:`cta-transaction-list-ref`) associated with that balance.
 
 Screenshots
 ^^^^^^^^^^^
@@ -117,7 +168,7 @@ Screenshots
 +-----------+----------------------------------------------------------------+
 
 
-.. _transaction-list-ref:
+.. _cta-transaction-list-ref:
 
 transaction-list
 ----------------
@@ -177,6 +228,77 @@ Actions
   way, performing a deletion should always show a confirmation menu before
   doing the actual deletion.
 
+Layout
+^^^^^^
+
+* The specific currency for which transactions are shown
+  SHOULD be prominent (title bar, menu bar)
+* There needs to be a way to go "back" to the
+  balance list (:ref:`cta-balance-list-ref`) **if**
+  we have more than a single currency in use. This
+  can be some (optional) "back" button or some
+  "home" button or some "balances" menu entry.
+* There should be a menu or button from where the QR code entry / scan
+  functionality is reachable (:ref:`cta-url-entry-ref`)
+* There COULD be a menu or button from where the settings screen (:ref:`cta-settings-ref`)
+  is reachable. The settings screen MUST be reachable
+  **if** there is no way to get to the balance list screen
+  because we only have a single currency.
+* In developer mode, there MAY be a menu or button
+  from where the developer tools (:ref:`cta-devtools-ref`)
+  are reachable. Alternatively, developer tools COULD
+  also only be reachable via settings.
+
+
+Issues
+^^^^^^
+
+* WebEx (text): Iconography (T), (W) is not as
+  nice as iconography in on Android.
+* WebEx (text): Button is labeled as "Add",
+  while above says to use "Receive" which is
+  a better dual with "Send".
+* WebEx (image): Screenshot does not show any
+  pending transactions.
+* WebEx (nit): Android has different order of
+  items on top (send+receive, then balance).
+  This places the balance on top of the other
+  amounts, which is nicer.
+* Android (text): Iconography (same icon for push
+  payments and debit and POS) and again same icon
+  for invoice and withdraw) is sub-optimal. Should
+  pick unique icons for each type of operation.
+* iOS (text): Iconography (+ / -) is also not
+  expressive and redundant with the colors.
+* iOS (text): Sign of the operation (+ / -) should
+  be just before the amount (see Android), not
+  all the way on the left as an icon. Also can
+  probably be more sublte?
+* iOS (text): currency symbol in front of every
+  amount value is highly redundant; would be better
+  to list the currency once in the title (see Android)
+* iOS (minor): lacks search button (see Android)
+* WebEx (minor): lacks search button (see Android)
+* iOS (minor): has top/buttom scroll buttons not present
+  in other UIs (likely too much, better to have search!)
+* WebEx (minor): unclear how to do bulk-deletion;
+  other platforms make it easy to select multiple
+  rows. Maybe have some checkboxes and then a
+  "delete selected" button at the bottom?
+* iOS (critical): the buttons to send/receive funds
+  are not even shown in the screenshot, likely because
+  of balances vs. banking distinction, which should
+  also be removed.
+* All (critical): we do not seem to have
+  screenshots of what happens after picking
+  select funds or receive funds!
+
+
+Adoption
+^^^^^^^^
+
+
+
 Screenshots
 ^^^^^^^^^^^
 
@@ -219,19 +341,41 @@ Actions
 ^^^^^^^
 
 * **change service provider**: updates fees shown (after returning from exchange selection screen)
-* **review and confirm ToS**: advance to the :ref:`accept-tos-ref` screen
+* **review and confirm ToS**: advance to the :ref:`cta-accept-tos-ref` screen
 * **back**: user will be redirected to previous screen
 
 .. attention::
   User should be able to play with the amount, not possible in the current design
 
+Issues
+^^^^^^
+
+* All(critical): This is an extremely lazy screen,
+  and it probably should be completely revamped.
+  We should allow the user to change the exchange
+  **and** to enter the amount to withdraw
+  **unless** a fixed amount (or exchange) were
+  given when we were triggered.
+  Editing the exchange should go to another screen
+  (for now, with a simple URL entry bar, in the
+  future with exchange comparisson and whatever);
+  the fees should already be shown on this screen
+  for the selected exchange.
+* All(critical): We should probably unify this screen
+  with cta-withdraw-confirm and cta-withdraw,
+  with the only difference
+  being that one variant has "View Terms of Service"
+  while the other has a "Withdraw $AMOUNT" button.
+* iOS(image): no screenshot available
+
+
 Screenshots
 ^^^^^^^^^^^
 
 +-----------+-----------------------------------------------------------------+
 | Platform  | Screenshot                                                      |
 +===========+=================================================================+
-| WebEx     | .. image:: ../screenshots/cta-withdraw-review-firefox-latest.png|
+| WebEx     | .. image:: ../screenshots/cta-withdraw-review-chrome-latest.png |
 +-----------+-----------------------------------------------------------------+
 | Android   | .. image:: ../screenshots/cta-withdraw-review-android-latest.png|
 |           |    :width: 30%                                                  |
@@ -268,12 +412,39 @@ Actions
 ^^^^^^^
 
 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
-* **review and confirm ToS**: if the current selected exchange has a version  of ToS that the user didn't yet accepted, use the :ref:`accept-tos-ref` screen
+* **review and confirm ToS**: if the current selected exchange has a version  of ToS that the user didn't yet accepted, use the :ref:`cta-accept-tos-ref` screen
 * **cancel**: user will be redirected to ``balance``
 
 .. attention::
   User should be able to play with the amount, not possible in the current design
 
+Issues
+^^^^^^
+
+* All(screenshots): the flow here diverges completely betwen the different platforms (very bad).
+* Android(major): there really should not be a "check fees" button here, the fees should just be dynamically calculated and shown immediately. Note that the dialog shown here is thus closer to what we might make the future main
+  withdraw review (:ref:`cta-withdraw-review`) dialog.
+
+
+Adoption
+^^^^^^^^
+
+* We should probably keep the "specify the origin
+  of the money" from Firefox as a dialog after
+  "Receive funds" is selected in the
+  transaction list (:ref:`cta-transaction-list-ref`),
+  but without the amount entry. Keep it simple,
+  mostly binary choice: withdraw, invoice, or back.
+* The iOS dialog is reasonably close to the future
+  withdraw review (:ref:`cta-withdraw-review`) dialog,
+  allowing amount entry, shows fees, and final "confirm"
+  button (I guess: "review ToS" should be an alternative
+  button label). Eventually, we'll want an "edit" (pen)
+  icon next to the exchange URL, and
+  if context has fixed the amount or exchange, the
+  respective buttons should be hidden.
+
+
 Screenshots
 ^^^^^^^^^^^
 
@@ -318,6 +489,16 @@ Actions
 * **confirm withdraw**: advances to next screen
 * **back**: user will be redirected to previous screen
 
+Issues
+^^^^^^
+
+* All: This dialog should be merged with
+  the future main
+  withdraw review (:ref:`cta-withdraw-review`) dialog
+  where the amount and exchange could be edited (if
+  permitted by trigger event) and the fees are dynamically
+  shown. No point in yet another dialog.
+
 
 Screenshots
 ^^^^^^^^^^^
@@ -357,6 +538,36 @@ Actions
 * **menu**: go back to the main balances list (operation continues in background)
 * **automatic**: screen changes to "cta-withdraw-done" upon completion
 
+Issues
+^^^^^^
+
+* WebEx(text): wire transfer subject is last, should be first!
+* WebEx(text): Receiver name is not shown (except within payto URI); must be shown above IBAN!
+  and only a link shown (see iOS)
+* WebEx(text): PaytoURI should not be expanded on-screen
+  and only a link shown (see iOS)
+* All(text): if there is no fee, no point in showing
+  the amount **3** times. Maybe only show the amount
+  on top with the wire transfer details, and then at
+  the bottom show the fee ONCE *if* there is one?
+* Android(text): uses "exchange", which is verboten
+* iOS(text): receiver name is missing, MUST be before IBAN
+* Android(text): wire transfer subject is third, should be first
+* WebEx(screenshot): the screenshot does not show how to select an alternative bank (see: Netzbon). Would be nice to show that.
+* Android(screenshot): the screenshot does not show how to select an alternative bank (see: Netzbon). Would be nice to show that.
+
+
+
+Adoption
+^^^^^^^^
+
+* WebEx/Android(text): Probably best to take the full text of the 3 steps from iOS (but add receiver name in step 2!) to provide very precise instructions.
+* WebEx/Android(text): "Open in banking app" is likely unclear that this requires Payto://-support. Use the long text from iOS everywhere!
+* iOS(minor): the way to switch between different banks is not as clear as it was on WebEx. Proposal: use notebook tabs similar to how it is done on WebEx (IIRC?)
+* Android: transaction status is not shown ("pending" on all other platforms. This is actually *good*, as once we are no longer "pending" the wire transfer details will no longer be shown, so the entire screen will look different. So we can probably get rid of the "This transaction is not complete" and "Status: Pending" on WebEx/iOS as that is *always* the case when we give the user wire transfer instructions here!
+
+
+
 Screenshots
 ^^^^^^^^^^^
 
@@ -379,7 +590,7 @@ cta-withdraw-done
 -----------------
 
 This screen is used to show the user the information for a completed withdraw
-operation (bank-integrated or manual)
+operation (bank-integrated or manual).
 
 Info
 ^^^^
@@ -395,6 +606,30 @@ Actions
 
 * **delete**: deletes information about the withdrawal operation
 
+Issues
+^^^^^^
+
+* WebEx(text): not point in showing details if there are no fees.
+* iOS(text): not point in showing details if there are no fees.
+* Android(text): still talks about 'exchange'
+* Android(text): has the amount twice, useless without fees
+* iOS(text): status: Done is unnecessary, if we show this screen, it will always be 'done' (ok, theoretically in the middle of withdrawing, but the wire transfer will be done; but then maybe show 'incoming' but hide the status once really "done").
+* unclear: "Delete" vs. 'Delete from history" --- two
+  styles, two translations, gain?
+
+
+Adoption
+^^^^^^^^
+
+* We probably want to show a "pending" transaction if we
+  are still withdrawing (wire transfer did arrived, coins
+  are still being generated). That's a very brief time,
+  but we probably want to use a minor variation of this
+  dialog in that case.  Not sure it needs to be quite
+  as prominent as on iOS though...
+
+
+
 Screenshots
 ^^^^^^^^^^^
 
@@ -602,7 +837,7 @@ Actions
 ^^^^^^^
 
 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
-* **review and confirm ToS**: if the current selected exchange has a version  of ToS that the user didn't yet accepted, use the :ref:`accept-tos-ref` screen
+* **review and confirm ToS**: if the current selected exchange has a version  of ToS that the user didn't yet accepted, use the :ref:`cta-accept-tos-ref` screen
 * *cancel*: user will be redirected to ``balance``
 
 .. attention::
@@ -713,7 +948,7 @@ Actions
 ^^^^^^^
 
 * **confirm operation**: on success will be redirected to the ``transaction-details`` screen where the detail of the current transaction will be displayed
-* **review and confirm ToS**: if the current selected exchange has a version of ToS that the user didn't yet accepted, use the :ref:`accept-tos-ref` screen
+* **review and confirm ToS**: if the current selected exchange has a version of ToS that the user didn't yet accepted, use the :ref:`cta-accept-tos-ref` screen
 * **cancel**: user will be redirected to ``balance``
 
 .. _operation-table-details-ref:
@@ -745,7 +980,7 @@ Initial amount label by operation:
  * refund -> Refund
 
 
-.. _accept-tos-ref:
+.. _cta-accept-tos-ref:
 
 accept-tos
 ----------
@@ -784,6 +1019,50 @@ Screenshots
 |           |    :width: 30%                                                   |
 +-----------+------------------------------------------------------------------+
 
+.. _cta-settings-ref:
+
+settings
+--------
+
+Info
+^^^^
+
+Layout
+^^^^^^
+
+Actions
+^^^^^^^
+
+Issues
+^^^^^^
+
+Screenshots
+^^^^^^^^^^^
+
+
+.. _cta-devtools-ref:
+
+developer-tools
+---------------
+
+Info
+^^^^
+
+Layout
+^^^^^^
+
+Actions
+^^^^^^^
+
+Issues
+^^^^^^
+
+Screenshots
+^^^^^^^^^^^
+
+
+
+
 
 Q / A
 =====