Easy-digital-downloads: Checkout inconsistencies

Created on 5 Sep 2018  路  10Comments  路  Source: easydigitaldownloads/easy-digital-downloads

I've noticed a number of inconsistencies at checkout that we can improve. Listed below are some of the issues I've spotted and examples.

Legends

Some legends are sentence case, some are title case. E.g.

Create an account (optional)

vs

Personal Info
Billing Details
Select Payment Method
Name on the Card

Placeholders

Some placeholders are sentence case, some are title case. E.g.

Email address
Confirm password
Card number
Your username or email address
Enter discount

vs

First Name
Last Name
Zip / Postal Code

Links

Some links at checkout have a period after the link, some don't. E.g.

Have a discount code? Click to enter it
Already have an account? Login

vs

Need to create an account? Register or checkout as a guest.

Error notices

Some error notices have a period at the end, some don't. E.g.

Error: There is an error with the Amazon Payments configuration.

vs

Error: You must register or login to complete your purchase

Slashes

Some words in labels and placeholders contain spaces before and after slashes, some don't. E.g.

Billing State / Province
Billing Zip / Postal Code
Zip / Postal Code

vs

Expiration (MM/YY)


Suggestions:

Legends, placeholders (and any labels)

I propose we always use sentence case, where only the first word of the sentence is capitalized. Many sites I've seen use sentence case. It's easier on the eyes and looks friendlier. This looks strange: Name on the Card.

Links

I propose we do not include periods after links.

Slashes

I propose we remove any spaces from before and after slashes.

Many people wonder whether to use a space before and after slashes in a sentence. The answer is typically no on both fronts. Spaces before slashes should be avoided. The only time it鈥檚 acceptable to use a space after a slash is when breaking up lines of a poem, song, or play.

Source: https://www.grammarly.com/blog/slash/

Amazon is a good example which demonstrates no spaces before and after slashes, Sentence case for labels, placeholders and legends:

screen shot 2018-09-05 at 6 12 52 pm


@easydigitaldownloads/core-team If we agree on the above I'll put together a PR. We'll need to go over our payment gateways also.

component-checkout type-feature

Most helpful comment

I think the word coupon should be changed to discount here:

screen shot 2018-09-19 at 7 12 55 pm

Instead of:

Enter a coupon code if you have one.

We change it to:

Enter a discount code if you have one.

Seems inconsistent to use coupon when the label and placeholder both say "discount".

I searched the EDD codebase and we only mention coupon one other time in a help tip. In this instance I think it's fine:

If a coupon or discount was used during the checkout process.

All 10 comments

We should also make sure we're consistent with our login and registration shortcode forms, and any other UI we provide.

Since these are possibly places where people have customized the output via remove_action etc, we should get them in 3.0 if we can. It's a pretty small update but that way as we are possibly releasing quite a few updates to templates on a major version jump, some of these types of changes are expected.

Good point, I'll submit a PR against 3.0 馃憤

I agree with all points here. 馃憤

I think the word coupon should be changed to discount here:

screen shot 2018-09-19 at 7 12 55 pm

Instead of:

Enter a coupon code if you have one.

We change it to:

Enter a discount code if you have one.

Seems inconsistent to use coupon when the label and placeholder both say "discount".

I searched the EDD codebase and we only mention coupon one other time in a help tip. In this instance I think it's fine:

If a coupon or discount was used during the checkout process.

I agree with @amdrew's Coupon to Discount suggestion.

The button text on our checkout login form should be Log in, not Login:

screen shot 2018-09-19 at 8 54 30 pm

We've correctly named the button with the [edd_login] shortcode:

screen shot 2018-09-19 at 8 54 20 pm

And also with the existing text: Already have an account? Log in

Found a bit of history with the coupon text as mentioned above.

@sunnyratilal has the same thought here: https://github.com/easydigitaldownloads/easy-digital-downloads/issues/949#issuecomment-14244259

Perhaps change Enter a coupon code... to Enter a discount code...?

@pippinsplugins then said:

"coupon" seemed more standard to me. I know it's different from what EDD itself refers to them as, but the customer's don't know that.

I think we should still aim for consistency, otherwise we might as well put Coupon for the label, placeholder _and_ description.

If we really find our customers don't know what a discount is, how about an admin setting to change it? Unsure of other countries, but in NZ it's more commonly referred to as a discount. A filter at the very least would allow the store owner to change it based on what is more used by their site visitors.

Just a random thought about the terminology: that conversation happened over 5 years ago. With the rise of social media advertising, I would _assume_ customers are a _lot_ more familiar with "discount code" at this point. It's everywhere these days.

This is speculation.

@pippinsplugins Made a few more small tweaks to review (see updated PR).

Removed the period from "This is a secure SSL encrypted payment."

No labels or legends use a period so this text seems inconsistent. Only the field descriptions use periods.

_Before_

screen shot 2018-11-08 at 1 26 02 pm

_After_

screen shot 2018-11-08 at 1 27 05 pm

Removed space on each side of slash in HTML

Removed the space on either side of the slash which appears between the expiration inputs.

<span class="exp-divider"> / </span>

to

<span class="exp-divider">/</span>

Any extra space (if needed) should be applied to the exp-divider class. Visually there are no changes. Before _and_ after:

screen shot 2018-11-08 at 1 31 05 pm

Added a period to some error messages

Nearly all error messages at checkout include a period at the end of the sentence except a few. I've added a period to these error messages so they are consistent.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

JJJ picture JJJ  路  5Comments

SDavisMedia picture SDavisMedia  路  3Comments

davidsherlock picture davidsherlock  路  4Comments

michaelbeil picture michaelbeil  路  5Comments

mindctrl picture mindctrl  路  4Comments