609.16 KB, application/pdf
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
Yikes, that IS scrunched and existential! On it.
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.
Assignee: pwalmsley → scolville
I've taken this bug so I can provide some screen-shots of the existing spartacus pages when viewed on an android tablet.
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
Assignee: scolville → pwalmsley
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?
(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.
Created attachment 8456496 [details] 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.
Assignee: pwalmsley → scolville
PR is here: https://github.com/mozilla/spartacus/pull/94
Status: NEW → ASSIGNED
Nice work, Stuart. That looks great!
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Whiteboard: [cosmetic] → [cosmetic][qa-]
You need to log in before you can comment on or make changes to this bug.