Payment screens need to be optimized for Android tablets

RESOLVED FIXED

Status

P3
normal
RESOLVED FIXED
5 years ago
4 years ago

People

(Reporter: krupa.mozbugs, Assigned: scolville)

Tracking

({uiwanted})

uiwanted
Points:
---

Details

(Whiteboard: [cosmetic][qa-])

Attachments

(1 attachment)

(Reporter)

Description

5 years ago
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

Updated

5 years ago
Keywords: uiwanted
Priority: -- → P1

Updated

5 years ago
Assignee: nobody → mhanratty

Updated

5 years ago
Assignee: mhanratty → pwalmsley

Comment 1

5 years ago
Yikes, that IS scrunched and existential! On it.
Blocks: 837289
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.
s/Add/Added/
(Reporter)

Updated

5 years ago
Whiteboard: [cosmetic]

Updated

5 years ago
Blocks: 968380
No longer blocks: 837289, 909896

Updated

5 years ago
Priority: P1 → P3
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.
Assignee: scolville → pwalmsley

Comment 6

4 years ago
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.
Flags: needinfo?(pwalmsley)

Comment 8

4 years ago
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.
Flags: needinfo?(pwalmsley)
Assignee: pwalmsley → scolville
PR is here: https://github.com/mozilla/spartacus/pull/94
Status: NEW → ASSIGNED

Comment 10

4 years ago
Nice work, Stuart. That looks great!
https://github.com/mozilla/spartacus/commit/25bb93600fcb77fb769f6dbd13ad2a70eed961d4
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.