Sharing Design/Polish review

[kwonye]

Before merging into develop, Sharing feature should be reviewed by @mattmiklic @hugobaeta @aerych @nbradbury.

[kwonye]

Note to self: Remove all magic numbers/strings/etc

[kwonye]

@nbradbury @mattmiklic @hugobaeta @aerych Sharing functionality is all set! Now we just need the design pass.

Please check out feature/sharing-design-review for where it's at currently, thanks in advance :)

[folletto]

Heya! I'm not sure if I have time to review this, but a question that might be useful for any designer to review this: how do I test it? ;)

[kwonye]

@folletto good point 😉

Whoever's interested, feel free to ping me on Slack and I'll send over the apk to install to your device :)

[folletto]

Ok did a run of testing, here some screenshots:

A. Share screen with list and Manage button (above)

B. Connect action screen (empty state)

C. Connect action screen (with one item already)

D. Manage button goes into a settings area

E. Everything else happens in a webview

[folletto]

Minimum changes I'd consider required for shipping:

1. Change the "MANAGE" button to be styled. The simple fix would just to color it white, however I have the impression we don't use that kind of buttons in WordPress Android, so a different solution would be ideal.
2. The "CONNECT", "CONNECT OTHER ACCOUNT" and "DISCONNECT" buttons should be styled matching the "MANAGE" button too.
3. Change the icons to match iOS (or Calypso Web) ones.

I'll try to get a design refresh too, but otherwise, the above are a stepping stone up. :)

[folletto]

Here's i2 of the design, aligned with Material Design standards. For reference check the settings panel on Android, and the Material Design page with the Settings pattern.

Notes:

1. I recognize the Android app doesn't follow precisely yet the Material Design standards. The above does, which is why the Manage screen is different from the other pages in the WordPress Android app.
2. I decided to use smaller cards in the actual screens to add them. This is because it conveys better the meaning of blocks that can be swapped in or out.
3. The icons are either Gridicons or Social Logos.
4. The color of the switch has been darkened to match better the color palette, and have more contrast.
5. I'm not entirely sure "Disconnect" follows the Material standards. Also, on iOS that's an additional settings page, which will solve the ambiguity on Android too. We can revisit that later.

I'd like the review of some other designer, however, I already think the above is more aligned and if possible we should ship it. I recognize it's not MVP tho, so I can't make a call about it.

[kwonye]

@folletto wow looks amazing, thank you! I'll ping you again when it's ready!

[jasmussen]

I'm not entirely sure "Disconnect" follows the Material standards. Also, on iOS that's an additional settings page, which will solve the ambiguity on Android too. We can revisit that later.

Looks great to me!