Buttons

How to make your buttons work for you

Buttons might not seem like the most exciting thing in the world, but by gum are they important. They’re the main way of actually communicating to your users on the storefront and letting them know what they can do. They’re your calls to action. Urging and enabling your users to buy, download, read and subscribe.

We’ve put plenty of thought, research and love into our buttons. So while there aren’t a huge number of options for configuring the location and appearance of these buttons, we’re confident that our current setup will work for you, and work well. You can, of course, specify the exact wording used on each button. For design reasons we recommend restricting these words to being no longer than 12 characters.

Buttons can change to represent user states, so that you’re only giving users the options that are relevant to them.

The various buttons a user might encounter on the Pugpig storefront are

1. Read. Pretty straightforward, this enables users to read an issue that’s on their device. For this to appear a user needs to be signed in, have access to, and have downloaded the issue.
2. Download (Icon). The precursor to the read button. This shows to users when they’re logged in and have access to the edition, either because it’s free or they’ve already purchased it. Tapping it will, as one might expect, download it to the device whence it will become ready for reading.
3. Buy. This button can say Buy or your preferred wording or it can show the price of the issue. Tapping it will bring up the purchase dialog, which is usually the native iOS or Android dialog. We try to show the user a buy button as soon as possible in the user journey so that even though a user might not want to purchase an issue immediately, they know where they can do it should they decide to later.
4. Subscribe. Again sticking with the theme of buttons that are very clear in what they do, the subscribe button immediately brings up the subscription options dialog, allowing users to quickly and easily subscribe.
5. Log In The button for magically tying-in 3rd party subscription systems. Users tapping this will be presented with an in-app login screen which will authenticate against your system and, if the user has access, seamlessly download the issue.
6. Update. Sometimes, post-publishing, you’ll need to update an edition, this can be useful for correcting errors or improving content. Once this has been processed, the primary button will change to Update. Tapping this button downloads and applies the necessary changes. For this to affect a user, they’d have to be signed in with an active subscription and have the issue downloaded to their device

User states and their flows

Users aren’t just a number, they’re a database entry too! Depending on how your app is set up there are a number of situations a user could find themselves in, and it’s good to understand each of these states and what options these users will have.

The main point of delineation is whether your content is free or paid (or perhaps a mix of the two). Totally free apps have it much simpler as there is essentially only one user state. This user doesn’t need to sign in and has access to all content. You may choose to have a free subscription in order to require users to sign in, but the use cases for this are limited.

When your content is paid, users are immediately separated into two groups: signed in or not. Users who aren’t signed in can be allowed to preview your content and read free issues if there are any. If they want to read a full issue, you can give them the options of buying single issues or becoming a subscriber.

Users who are signed in are then split depending on whether they have an active subscription or not. Users whose subscription has lapsed, but are still signed in to the app will have varying levels of access depending on how your subscriptions work.

Users who are signed in and have an active subscription are the happiest users of all. They’ve got access to all of the content their subscription allows for and can download and read it to their heart’s content. We love these users.

Other interactions

We’ve also built a more subtle interaction into our interface which utilises the long press, something that is native across both iOS and Android.

This interaction provides a quick way for users to see all the options available for that edition. These commonly include purchase, download or delete, and sign-in (which will download the edition if their signed-in state gives them access).  Again, only the relevant options will be shown to the user.