967145 - Payment screens need to be optimized for Android tablets

Status: RESOLVED FIXED

(Marketplace Graveyard :: Consumer Pages, defect, P3)

Description

[krupa raj[:krupa]]

Samsung Galaxy tablet/Nightly

steps to reproduce:
1. Try to make a payment on any of your Android tablet
2. Notice the payment screens


observed behavior:
Screens are not optimized for tablet view. All the form fields are scrunched up in one corner and there's too much nothingness triggering an existential crisis in my mind ;)

Some screenshots are listed @ https://db.tt/WeQOkmJf

Comment 1

[Philip [:pwalm]]

Yikes, that IS scrunched and existential! On it.

Comment 2

[[e-mail]]

Add bug 837289 as dependent on this as it would be really useful to know what we need here so it can be implemented as Spartacus (the single page web-app front-end to webpay) is built out.

Comment 3

[[e-mail]]

s/Add/Added/

Comment 4

[[e-mail]]

I've taken this bug so I can provide some screen-shots of the existing spartacus pages when viewed on an android tablet.

Comment 5

[[e-mail]]

Here's the screenshots. Note: the white border is not visible on a device this is just because I captured the screenshots from the styleguide.

PIN ENTRY: https://www.evernote.com/shard/s8/sh/88e2c173-2ea9-4c3f-a7e1-bb1cb6ac298a/34d28d1f36828b7e7744c1a18bf517b2/deep/0/Styleguide.png

ERROR MESSAGE: https://www.evernote.com/shard/s8/sh/bf696dc2-baff-4d30-ac80-8b1f07058dea/0cb4a5b9ea56a06d79a3b50e48bd1733/deep/0/Styleguide.png

PIN LOCKED: https://www.evernote.com/shard/s8/sh/9f2f5130-f65e-426c-8e4e-8441e64137dc/8357b3f8ac19666e60af50766009c50b/deep/0/Styleguide.png

THROBBER: https://www.evernote.com/shard/s8/sh/e801491b-524a-4d4e-9816-05687137e9a2/99f4a2fd0c2710835eb5b013fee1e60d/deep/0/Styleguide.png

LOCKED: https://www.evernote.com/shard/s8/sh/c1fc8cb6-4d3f-4882-acbe-c8c103d13b90/7d66ce46716d1d6e5879f1f71ce9cabc/deep/0/Styleguide.png

Comment 6

[Philip [:pwalm]]

Hey Stuart,

The screenshots look pretty good, clear and concise. My only issues:

- They don't follow the Marketplace style guide. Are they supposed to? Or is this the "Trusted UI" style? (forgive my ignorance on this subject, I've only heard about bits and pieces of it)
- The buttons aligned hard left look a bit off, I'd either align right or center them.
- What is the difference between the light and dark screens?

More importantly, how can I help most effectively on this bug: Am I just tweaking layout? Or am I applying the Marketplace style guide conventions to this UI?

Comment 7

[[e-mail]]

 

(In reply to Philip from comment #6)
> Hey Stuart,
> 
> The screenshots look pretty good, clear and concise. My only issues:
> 
> - They don't follow the Marketplace style guide. Are they supposed to? Or is
> this the "Trusted UI" style? (forgive my ignorance on this subject, I've
> only heard about bits and pieces of it)
> - The buttons aligned hard left look a bit off, I'd either align right or
> center them.
> - What is the difference between the light and dark screens?
> 
> More importantly, how can I help most effectively on this bug: Am I just
> tweaking layout? Or am I applying the Marketplace style guide conventions to
> this UI?

Payments historically has been designed to be fairly close to Gaia styles so it probably wouldn't make sense to try and fit this to the marketplace style guide. 

AFAIK, we didn't/don't have any specific UX for tablets this is just a rough step in the direction of doing something different for tablets rather than keeping all the buttons at the bottom which as you know looks really strange. Hence why we probably want to tune this up further as it's very rough presently.

Maureen might have some thoughts already as she worked on the original payments UX.

A cue might be to look at what Gaia does on a tablet given that Gaia informed the trusted-ui styling more or less. Unfortunately I don't yet have a FFOS tablet so I don't know what this looks like.

The dark screens are generally error states. (These are similar to error messages in Gaia).

Lastly I don't see any hard left aligned buttons (do you mean right-aligned?). But if we want to do something different there it's no problem.

Comment 8

[Philip [:pwalm]]

Attachment: Android Payment Screens - Proposed Changes - Wireframe.pdf

Attached are some simple proposed changes for the Android payment screens: Increase padding around the edge of the screen (50px should do it), increase type size (20px for heading, 15px for body), single buttons aligned L, double buttons centered to screen. You can ignore the button styles, just used those because it's what I had handy.

Comment 9

[[e-mail]]

PR is here: https://github.com/mozilla/spartacus/pull/94

Comment 10

[Philip [:pwalm]]

Nice work, Stuart. That looks great!

Comment 11

[[e-mail]]

https://github.com/mozilla/spartacus/commit/25bb93600fcb77fb769f6dbd13ad2a70eed961d4