search

w3c / webpayments

The document repo for the Web Payments Working Group
https://github.com/w3c/webpayments/wiki
Other
256 stars 62 forks source link

Visual Identity for Web Payments #250

Closed ianbjacobs closed 3 years ago

ianbjacobs commented 6 years ago

Last year in a Merchant Adoption Task Force [1] we began to look into the topic of a visual identity for use with Payment Request API and related specs. This culminated in the presentation of a draft identity at TPAC 2017 [2], but that effort did not gain traction.

I am creating this issue for tracking purposes, as we are now renewing this effort, starting with the design brief we created previously [3]. Many thanks to @rvm4 and @agektmr for their help with this.

@agektmr has created https://webpayments.slack.com/ for additional discussions.

Ian

[1] https://github.com/w3c/webpayments/wiki/Adoption2017 [2] https://www.w3.org/2017/11/07-wpwg-minutes.html#item07 [3] https://github.com/w3c/webpayments/wiki/Brand

agektmr commented 6 years ago

Thank @ianbjacobs for starting this issue.

Let me first copy and paste the original email I've sent to the public payment wg list.

I'm Eiji, a developer advocate at Google working on the open web focusing on payments and identity from Tokyo Japan.

As Payment Handler is becoming a good shape and being shipped on Chrome , I think it's good time to determine web payments' official logo. I heard there were efforts to create one in the past but didn't come to a conclusion.

I'd like to hear your opinion on

Luckily, Ian has already come up with set of expectations to the logo https://github.com/w3c/webpayments/wiki/Brand

Let's follow that. And on top of what he suggested, I think:

I'm thinking if we can use the logo for

If there are enough interest, I'd like to determine how we should move things forward. Let first tell us what you think.

Thanks.

P.S. There's a Web Payments slack and some of us have been discussing about this for sometime. Please feel free to join. https://join.slack.com/t/webpayments/shared_invite/enQtMjQyNDI4Mjg4NjQ2LWIyYjAyMDE1MGM1YTNiYjM4NzI4OThhYzlhZjk2M2RmMDQyODk1ZWY4MzQ2ZGMxZTY0MmMxOWYzNzY3YzNlMDg

agektmr commented 6 years ago

Let me summarize responses I've got so far that show interest:

I think it was a total coincidence that people took action on creating a logo almost at the same time.

I really want to make this process as transparent and open as possible and consolidating the conversation here would be great.

My proposal for further (super rough) actions would be:

  1. Ask a designer to supervise this effort from professional point of view. I think FB's designer can take this as they've already started hiring process for this purpose.
  2. Make agreement on how we determine the final product. (who's eligible for proposals, who's eligible for a vote, what are criteria for the logo, etc)
  3. Call for logo proposals
  4. Vote on candidates.

Let me know what you think.

marcoscaceres commented 6 years ago

In the mean time... good read of things to avoid: https://uxplanet.org/the-sad-state-of-payment-buttons-4d5cef3b9578

agektmr commented 6 years ago

Hi all, thanks for your interest in Web Payments visual identity.

So far I haven't got any objections about the rough plan for my previous comment. Let us move forward with breaking down the plan further:

What do we want as a result? Let's follow what's already been discussed and summarized here.

I've been kind of implying, but I'd like to explicitly propose to make this logo about "Web Payments" rather than "Payment Request" specifically. The idea is that payment handlers can use the logo as a badge to indicate that their service is compatible with Web Payments / Payment Request.

Please comment if you have any opinions on this.

Timeline

Feel free to comment if there's anything missing.

marcoscaceres commented 6 years ago

Cc’ing Mozilla folks that are interested in being part of the discussion: @sharonbautista, @e-pang, @jeanygong, and @chsiang.

From Mozilla’s perspective, there are essentially 3 options for the working group that we would like to discuss:

  1. Do nothing: encourage merchants to show the credit card network icons to stand for “basic card” payments. Allow merchants to rely on granular canMakePayment() to detect what payment handlers are installed (e.g., to detect “Basic Card”, “Apple Pay”, “Android Pay”, etc.) - and allow display of those specific icons.
  2. Create a “Web Payment” icon: when pressed, presents the payment handler options: Basic-Card, and whatever else may be installed.
  3. Create browser-specific icon: like Apple Pay does via CSS - so could be, “Pay with Firefox”, “Pay with Chrome”, etc for “Basic Card”.

Each has their pros and cons - and happy to discuss those in detail.

If we choose options 1 or 2, what should the icon do?

User: know what to expect when they activate the button. It should be accessible. Merchant: can distinguish web payments from their standard flow and put it places that make the most sense to their business.

User agent and merchant should be able to customize to a degree so only the meaningful UI is displayed. Additionally, the button should be responsive/adaptive to layout.

An example would be social buttons – users know what to expect after clicking the button, websites choose the placement and design that makes the most sense, and they’re not overwhelming.

There might need to be a lot of educating users if we create a new button.

What should it NOT do?

webpayments commented 6 years ago

Je suis absent(e) du bureau jusqu'au 06/08/2018

Please kindly note my absence for the period mentioned above. You can reach Béatrice Cocozza at +33 1 40 15 58 50

Remarque : ceci est une réponse automatique à votre message "Re: [w3c/webpayments] Visual Identity for Web Payments (#250)" envoyé le 16/07/2018 22:03:28.

C'est la seule notification que vous recevrez pendant l'absence de cette personne.

Ce message et toutes les pièces jointes sont confidentiels et établis à l'intention exclusive de ses destinataires. Toute utilisation ou diffusion non autorisée est interdite. Tout message électronique est susceptible d'altération. Le Groupement des Cartes Bancaires "CB" décline toute responsabilité au titre de ce message s'il a été altéré, déformé ou falsifié.

This message and any attachments are confidential and intended solely for the addressees. Any unauthorised use or dissemination is prohibited. E-mails are susceptible to alteration. Groupement des Cartes bancaires "CB" shall not be liable for the message if altered, changed or falsified.

ianbjacobs commented 6 years ago

@marcoscaceres, @stpeter, @agektmr, and @rvm4, this topic will be on the WG's 26 July agenda [1]. Ian

[1] https://github.com/w3c/webpayments/wiki/Agenda-20180726

webpayments commented 6 years ago

Je suis absent(e) du bureau jusqu'au 06/08/2018

Please kindly note my absence for the period mentioned above. You can reach Béatrice Cocozza at +33 1 40 15 58 50

Remarque : ceci est une réponse automatique à votre message "Re: [w3c/webpayments] Visual Identity for Web Payments (#250)" envoyé le 24/07/2018 0:07:30.

C'est la seule notification que vous recevrez pendant l'absence de cette personne.

Ce message et toutes les pièces jointes sont confidentiels et établis à l'intention exclusive de ses destinataires. Toute utilisation ou diffusion non autorisée est interdite. Tout message électronique est susceptible d'altération. Le Groupement des Cartes Bancaires "CB" décline toute responsabilité au titre de ce message s'il a été altéré, déformé ou falsifié.

This message and any attachments are confidential and intended solely for the addressees. Any unauthorised use or dissemination is prohibited. E-mails are susceptible to alteration. Groupement des Cartes bancaires "CB" shall not be liable for the message if altered, changed or falsified.

marcoscaceres commented 6 years ago

Please see Mozilla's discussion points that I posted above: https://github.com/w3c/webpayments/issues/250#issuecomment-405364182

We would like to see what we proposed there discussed.

ianbjacobs commented 6 years ago

Hi all,

The visual identity task force had a call on 2 August: https://www.w3.org/2018/08/02-wpwg-visual-minutes

I'd like to welcome @FoxnBunny to the project; he will begin work on a design brief. That work will be informed by this GitHub thread and the calls.

@marcoscaceres, we touched on some of the issues you raised in your comments above.

One of the main points we are hearing is that users are surprised by this new browser UX, and so the task force is thinking about different ways to mitigate the surprise. Some ideas:

I would like to continue the conversation at the next call of whether and how to evoke simultaneously:

Ian

marcoscaceres commented 6 years ago

It was suggested on the call that users may be more familiar with "Firefox" or "Chrome" etc. than they are with the concept of "browser." And so branding "Pay with Browser" or similar may not be effective.

Things like this need actual user research - we should probably try to validate any assumptions before continuing.

webpayments commented 6 years ago

All, a few considerations from a retailer point of view.

I am sure you all realize better than anyone the real estate on a merchant website is quite precious and it is critical to reduce distraction vs. add to it in the commerce flow. So, I am hopeful this type of logo/message would be optional for the merchant to implement which is no different than the option to implement this spec at all.

Regarding the benefit of visual identify, I do respect visual cues can be valuable in certain cases but unless the consumer understands the meaning behind a visual cue, it isn’t effective. Using a consistent logo or symbol representing a consistent message followed by each recognized browser name would be possibly effective. The symbol followed by a recognized browser name such as Chrome, etc. would help with some brand recognition that the consumer might actually pay attention to and offer consistency across browsers which could gain quicker consumer recognition. By comparison, I think of the contactless symbol ))). That by itself on a merchant terminal initially was meaningless mainly because it wasn’t connect to a payment network brand name AND there was initially limited acceptance and issuance. In Australia or Europe it may be more recognizable now but that is likely because the issuance and acceptance has reached a significant level. Without that, consumers don’t know what it means.

All that being said, it is unclear to me what message you are trying to send to the consumer via the symbol or logo. Payment? Security? Safety? Convenience? All of the above? Other? The symbol/logo or visual representation needs to express what message you are trying to convey and should resonate with consumers. I agree there is no doubt consumer research is required for something like this. Without that, it will be difficult to prove its effectiveness which I think will be required for a merchant to opt-in to display it.

Just my two cents.

Laura

From: Marcos Cáceres notifications@github.com Reply-To: w3c/webpayments reply@reply.github.com Date: Thursday, August 9, 2018 at 12:07 AM To: w3c/webpayments webpayments@noreply.github.com Cc: webpayments public-payments-wg@w3.org, Comment comment@noreply.github.com Subject: Re: [w3c/webpayments] Visual Identity for Web Payments (#250) Resent-From: public-payments-wg@w3.org Resent-Date: Thursday, August 9, 2018 at 12:07 AM

It was suggested on the call that users may be more familiar with "Firefox" or "Chrome" etc. than they are with the concept of "browser." And so branding "Pay with Browser" or similar may not be effective.

Things like this need actual user research - we should probably try to validate any assumptions before continuing.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/w3c/webpayments/issues/250#issuecomment-411647169, or mute the threadhttps://github.com/notifications/unsubscribe-auth/APFrHPsc0jOibJKH5ELxaBSPfwmltHI9ks5uO9FwgaJpZM4U7oUb.

ianbjacobs commented 6 years ago

Hi Laura,

Thank you very much for the feedback, and also the cautionary tale of the contactless logo.

To me the most prominent theme that has emerged from discussion so far involves the balance between "site identity" and "browser identity". I think there are related topics under this theme:

1) Should the sheet include some merchant branding (like a favicon) so that the user feels confident that the experience is being initiated by the merchant? 
2) Should the button / identity include some browser branding (or at least imagery associated with the Web or the browser) so that the user recognizes that this experience is not "part of the page" but rather is rooted in the browser (and will be similarly available on other sites)?

I suggest we include in our discussions the sheet as well as the button/logo.

ianbjacobs commented 3 years ago

We concluded (long ago) that a new visual identity was not the way to go, so closing this issue.