Thursday, June 2, 2016

Maximize Convenience and Customization for Your App's Home Screen with Cards

The Home screen is crucial for your mobile app's success. It's the first thing people see when they use the app. Making a good first impression sets the tone for their entire experience.

If they see old information or a blank screen, then they might assume the app has nothing relevant to them and delete it.

So how can you avoid this without spending too much time doing maintenance? With the newest option in your toolkit - the Cards home screen!

Cards combines the convenience of the What's New home screen's automatically updated content feed with the endless customization options of the Slideshow home screen.

Activating the Cards Home Screen

Turning it on is easy.  Go to Mobile >> Tabs, and look for "Home: Cards" in the Type column.  Enable the Display checkbox for that item.

Activate and manage the Cards option in the Tabs area.
Click on image for a closer look.
To manage your Cards tab, click on the link in the Text column.

Once the tab is set up, users will be able to scroll through a list of all available Cards that link through to your content.


Header Image

Examples of Header Images.
Click on image for a closer look.
The first feature of your new Cards tab is an optional Header Image.  This banner image can be whatever you like. Just make sure it isn't too tall that it eats up all of a phone's real estate. We recommend a 3:1 width to height ratio.

Some popular examples are:
  • A photo of your ensemble, performance venue, or building exterior
  • The logo and branding of your organization.
  • A major sponsor (Note: It will not link to their website)


Content Cards

Without having to do any extra work, this tab will automatically create Cards for your active At-The-Venue Experiences and for your upcoming Event listings.  There will also be Cards that highlight the most recent Music, Video, or Buzz content. If there is no content for any of these, then that Card won't display. Everything is taken care of for you.

Access specific content or view all.
Click on image for a closer look.


However, you still have the power to do more.  You can drag-and-drop them to rearrange their order. Managing them lets you customize their label or decide if you wish to hide it. You can even add Custom Cards to supplement what your new home screen has to offer.


Custom Cards

Custom Cards in action.
Click on image for a closer look.
Custom Cards are very similar to Slideshow Slides, just smaller (and in some ways better!). Instead of a full screen graphic, all you need is another 3:1 banner.

You will be able to add a Headline and Description to give your users an idea of what content they will access through the Card.  This should just be a short paragraph at most. You will want to have multiple Cards visible on the screen at the same time to retain the Cards feel.

The Action Text should be a short phrase that tells users what you want them to do. "Tap Here", "Read More", "Learn", etc.  Then, provide an In-App URL to another tab or content item, or even an external URL. The entire Custom Card will act as one large, easy-to-tap button that links the user to that content.

This gives you the power to do whatever you want. Link to another Custom Tab with parking information, highlight a specific Music Album, link to your most popular Social Media platform, or highlight a Season Sponsor. 

One other big change from the Slideshow Slides is that in addition to being scheduled, you can leave the date fields blank to have the card always display.

Additional Resources

Video: Managing the Cards Home Screen
Video: Adding Custom Cards to Your App's Home Screen
Partner Example: Pittsburgh Symphony Orchestra (for best results, view on a mobile device)

No comments: