Update Text/Icon/Behavior of "Sync button" area

[ninavizz]

Problem

Per discussions with team, the manual sync button will go away and instead become replaced by an icon to indicate network connectivity.

Per discussions between Nina/Erik, the button may visibly demonstrate an opacity-pulse animation (eg: heartbeat). Text options dependent on plausibility of what system knows at what point in decryption/download/db-sync stuff.

Solution

• Icon w/ simulated heartbeat pulse was presented and accepted in last UX meeting of 2019.
  • Erik remains concerned that visible heartbeat pulse could get obnoxious every 30-secs.
  • Nina to remain mindful to keep heartbeat exceptionally subtle.
    • Workflow w/ Client is not akin to a messaging client, in that semi-synchronous communication is not expected, whereas with Signal it is—so Nina remains of the belief that communicating to users that syncs are happening, albeit super subtly, is important... because the behavioral interaction between userS just is not Signal.
• Thus far the below is what's been straw-man'd between Nina/Erik on messaging.
  

[ninavizz]

Note: Need to include text for when user first logs in and lots of things dump into the Client. May (will likely) be the same as regular/planned states, but use-case needs to be considered.

[ninavizz]

Zeplin spex

• New icon has been posted to the Content Inventory issue.
• Prioritized (for implementation) states:
  • p1 · When there is no activity to demonstrate and the network connection is solid, this is the updated screen.
  • p4 · When a sync is happening but nothing is downloading and nothing on the client will change, this is the s00per subtle animation TBD
  • p3 · When a download is happening and there is text to show, this is the spec TBD
  • p2 · When the network connection has dropped outright, this is the updated screen that reflects what has been discussed.

[eloquence]

We discussed this at the UX review today. Our focus initially will be on implementing p1 and p2 above, i.e., just making the icon change and handling the failure state.

@ninavizz will deliver an animation for p3 and p4. Because it's already treated as a single operation, we may add the animation for p4 first, but we agreed that p3 ("new stuff is being downloaded") is likely more important to the user than p4 ("I'm asking the server if there's anything new").

[ninavizz]

GIF artwork for indicating connection activity

• All artwork is ripped at 400%, with a 100% sizing of 20x24.
  • This was done to budget for pixel density things in end-user monitors, so the GIFs do not look sucky.
• P1: Static, single-frame GIF connectivity-ind-static
• P4: Animated GIF that should ONLY PLAY ONCE connectivity-ind-metasync
  • GIF was created w/ single-play specified w/in file; pls echo this in code, so that each time a sync initiates this plays only once. Otherwise, my fear is that this thing will just be animating more than 50% of the time, which wd not be good. Doing it this way, my expectation is that it'll do the subtle 'lil heartbeat thing once every 30sec as the user can see it.
• P3: Animated GIF that will LOOP INFINITELY connectivity-ind-downloading2
  • GIF was created w/ infinite-loop specified w/in file, so that throughout the duration of this "state" it is subtly pulsing. So, so very subtly pulsing.
  • Text to the right of the icon should display saying something to the effect of Retrieving updates...
• P2: Static, single-frame GIF to replace existing vector art, so we don't get weirdness w/ GIF-to-SVG

ALL ART IN #17

[ninavizz]

Closing, as I think the UX part of this is done (and I'm very bored at a carwash with my laptop).

[ninavizz]

^ Informal team review happened on all of the above, yesterday, btw—hence "Closing" vs putting in "For Review" on Project thingy.