Menu
Menu Sheet Overlay
Search
Search Sheet

Mobify Native App Feature Considerations

During any native app project, there are a number of assets that are required to submit your build to the app store. As a starting point, Astro provides a number of native features and plugins. Before the build begins, it's a good idea to understand the pre-built Astro Components and how they can be customized.

Astro Components

http://astro.mobify.com/latest/api-reference/

Alert View

ios alert view
iOS alert w/ one button
android alert view
Android alert w/ one button
iOS two button alert view
Android alert w/ two button
Android two button alert view
Android alert w/ two button

Description

The alert view plugin allows you to create a simple one or two button modal that blocks input to the rest of the screen. Alert views are useful when you want to display a popup to the user with an Ok and/or Cancel button.

Purpose

  • To display a small amount of information to a user.
  • To confirm or cancel a user-initiated function.

Customizations

  • Remove either the title or sub text.
  • Change button names.
  • (Android) Button color.

Usage Tips

  • The alert view can be used to replace a text-only web popup or tooltip, making the app feel more native.

Documentation

See Astro Docs

Counter Badge

Counter badge

Description

The counter badge plugin allows you to overlay an icon with a rounded badge in it’s top right-hand corner. The badge defaults to having a red background with white text. The badge number can contain an integer of zero or greater. By default, the badge is not shown when the number is set to zero.

Purpose

  • To display a visual count of the number of items in a list.

Customizations

  • Change background color.
  • Change text color.

Usage Tips

  • Most commonly used in the header bar to indicate # of items in cart.
  • Can also be used to show notifications, messages, or total number of items in any list.

Documentation

See Astro Docs

Default Loading Spinner

iOS Spinner Animation ![Android Spinner Animation](design.418a.gif)
<figcaption>iOS (left), Android (right)</figcaption>

Description

The DefaultLoaderPlugin uses a system-provided progress indicator to show that loading is happening.

Purpose

  • To indicate that the page is loading.

Customizations

  • Change Loader color to a specified HEX value.
  • (iOS only) Change background color to a specified HEX value.

Usage Tips

  • Only really necessary when you are loading new web views (in the future, hopefully this can be replaced by page skeletons).
  • As a general rule, should only be used for actions that take 2-10 seconds (any longer can become very frustrating for the user).
  • Using the system default loader can create the perception that the device/system is to blame for performance issues, rather than the app itself. Read more.
  • In some cases, it may be more appropriate to have a loading animation on a button (i.e. when tapping “Add To Cart”), rather than the full-page loader.

Documentation

See Astro Docs

Drawer Plugin

Drawer interaction example

Description

The drawer plugin allows you to add left and right fly-out views.

Purpose

  • Displays a fly-out menu/navigation or other relevant page upon tapping a specified icon.

Customizations

  • The contents of the drawer can hold either a web view or any other custom native plugin. In the case of a web view, contents can be customized completely.

Usage Tips

  • Often used for global navigation (hamburger menu), or Shopping Cart.
  • Not recommended to use a hamburger menu navigation in conjunction with a tab bar navigation.

Documentation

See Astro Docs

Header Bar

iOS and Android header bar example

Description

The header bar plugin allows you to add icons in the left, center, and right positions.

Purpose

  • A staple component in every app.
  • Orients the users and provides a place for navigation and other actions.

Customizations

  • Background color.
  • (Android) Add/Remove drop shadow.
  • (iOS) Add/Remove border (border color is medium grey by default and can’t be modified).
  • (iOS) Set background as opaque/translucent.
  • (iOS) Show/hide text that appears beside the back icon.
  • Choose up to 3 icons (1 on left hand side, 2 on the right hand side).
  • Replace title text with image (logo).

Usage Tips

  • Only recommended to replace the page title text with a logo on the homescreen (not globally).
  • Icons in the header bar can change depending on context. For instance, you may choose to add a Share icon on the PDP, but remove it on all other pages.

Documentation

See Astro Docs

List Select (Action Sheet)

Example of list select with Cancel
List Select w/ Cancel
Example of list select without Cancel
List Select w/o Cancel

Description

The list select plugin allows you to present a list of two or more options to the user with an optional Cancel button. The input to the rest of the UI will be blocked until the list select is dismissed, either by cancelling or selecting an option.

Purpose

  • Allows the user to initiate tasks.
  • Can be used to request confirmation before performing a potentially destructive operation.

Customizations

  • (iOS) Cancel button may be made red.
  • (Android) Set color of dismiss button.

Usage Tips

  • Items that are permanent or potentially destructive should be displayed in red.

Documentation

See Astro Docs

Modal View

Example of Modal View

Description

The modal view plugin allows you to create a modal with a plugin’s view. A modal view is useful when you want to display content to the user that blocks interaction with the main screen.

Purpose

  • Displays a view that will not disrupt the stacked navigation below it.
  • Creates a focussed state for a user to complete a particular task.

Customizations

  • Add an icon or text to close the modal.
  • The contents of the modal (underneath the header bar) can hold either a web view or any other custom native plugin. In the case of a web view, contents can be customized completely.

Usage Tips

  • When using a web view inside the body of the modal, consider that the entire page will need to be loaded in. Even if you are hiding most elements, this can have a huge impact on performance when loading larger pages.
    • e.g. Loading a filter menu on a PLP. (The entire PLP will need to be loaded into the modal before hiding certain elements). In cases like this, it is better to use a web-based modal and hide the tab and header bar as the modal slides onto the screen.
  • Provide an obvious and safe way to exit the modal. Use text instead of an icon, that clearly communicates the outcome that will take place by dismissing the modal view (e.g. Save, Close, Cancel, etc.)
  • Keep modal tasks simple and focussed.

Documentation

See Astro Docs

Prompt View Plugin

iOS promt view plugin ![Android prompt view plugin](images/design.444.png)

Description

The prompt view plugin allows you to show a popup that asks the user for text input. The popup will block input to the rest of the screen and there is a Cancel and customizable Submit button, both of which close the popup. The Submit button can only be pressed if some text has been entered, otherwise the button is disabled.

Purpose

  • Allows users to input and submit text or feedback.

Customizations

  • All text labels (text only, not styling).

Usage Tips

  • Can be used to submit feedback on the app (i.e. as an extension of the Review Plugin).
  • Can be used as a contact form.

Documentation

See Astro Docs

Review Plugin

User is prompted for their experience
how is your experience screen
Negative Track
provide negative feedback screen
Positive Track
provide positive information screen
If user selected “Other”
Enter your feedback screen
Thank you for your feedback screen
Enter your feedback with options screen

Description

The review plugin displays a modal, allowing you to gather data from users on their experience using your app by reviewing it in the app store.

As users are interacting with your app, there is the possibility for them to attain points. Points can be issued arbitrarily. For example, when a user purchases a product, or favorites an item, they will collect X number of points. When a user accumulates a specified number of points, they are presented with the review modal.

Purpose

  • Allows users to input and submit feedback.

Customizations

  • All text labels (text only, not styling).
  • Set the point threshold and number of points given for each action.
  • Replace emojis with another icon OR text.

Usage Tips

  • The review plugin can be blocked from certain pages that would disrupt the purchase flow. For instance, it is a good idea to block the plugin during the checkout flow. In this case, the plugin would be presented to the user at the next point when they are on an “eligible” page.

Documentation

See Astro Docs

Search Bar

iOS Inactive state example ![Android Inactive state example](images/design.416.png)
Inactive state, iOS (left) and Android (right)
iOS Active state example ![Android Active state example](images/design.441.png)
Active state, iOS (left) and Android (right)

Description

The search bar plugin allows you to display a native search bar and receive events when the user interacts with it.

Purpose

  • Allows users to search for products, items or terms within the app.

Customizations

  • Set background colour of search bar’s container.

Usage Tips

  • In most cases, it is best to provide a focused search experience. There are numerous ways of achieving this, for example: putting the search in a modal, fading out and blocking the background when the search field is focussed, having a dedicated search tab, etc.
  • If possible, include auto-suggest to improve the user experience
  • Aim for a consistent native experience when using this plugin. Refer to the search bars on the App Store (iOS) and Google Play Store (Android) for guidance.

Documentation

See Astro Docs

Segmented Controls

iOS segmented controller example ![Android segmented controller example](images/design.456.png)
iOS (left) and Android (right)

Description

The segmented plugin allows you to add a segmented bar (a.k.a. mutually exclusive radio buttons) and set unique events for each segment to send when it is selected. This bar usually appears directly below the header bar. Within the control, all segments are equal in width.

Purpose

  • While a tab bar is used for globally switching between discrete sections of your app; the segmented control can be used for locally switching between different perspectives of a single view.

Customizations

  • Set background color of the segmented control.
  • Set highlight color of the segmented control
    • In Android, this means the text color and underline of the selected item.
  • (Android) Set text color of unselected items.

Usage Tips

  • Can be used as a filtering system for content, when there are only a few filters to choose from.
  • Limit the number of segments to improve usability, as wider segments are easier to tap.

Documentation

See Astro Docs

Sharing Plugin

iOS Share panel example ![Android Share panel example](images/design.451.png)

Description

The sharing plugin allows you to share data from your app with other apps on the device.

Purpose

  • To share specific data from your app with other apps including email, and social media.

Customizations

  • (Optional) Choose a message to share.

Usage Tips

  • Often used on product detail pages to share a specific product with others.
  • The apps displayed in the share plugin will vary depending on what apps are installed on the users’ device.

Documentation

See Astro Docs

Tab Bar Plugin

iOS Tab Bar example ![Android Tab Bar example](images/tabbar-android.png)
<figcaption>iOS (left) and Android (right)</figcaption>

Description

The tab bar plugin allows you to add a bar with customizable items and to get notified when an item is selected. The tab bar appears at the bottom of an app screen and has a fixed position.

Purpose

  • Used as a primary navigation for the app.
  • Provides the ability to quickly switch between different sections of the app.

Customizations

  • Set inactive and active colour of tabs (icons and labels).
  • Choose icons for each tab.
  • Set background color.
  • (iOS) Set the tab bar as opaque or translucent.
  • (Android) Show/hide border on top of the tab bar.

Usage Tips

  • Use a tab bar strictly for navigation, to organize information at the app level.
  • Don’t disable or remove a tab when its function is unavailable. Instead, explain why the content of the tab is unavailable inside of the tab itself.
  • Include essential tabs only
  • As a general rule, aim for between 3–5 tabs. If there are more than five tabs, the fifth will become a “More” tab and contain the remainder of the tabs.
  • Try to avoid overlap between the different tabs. Each tab’s purpose should be clear and distinct. For instance, you shouldn’t be able to perform the same action in multiple tabs, as it can create confusion.

Documentation

See Astro Docs

Icon Assets

  • Native elements (any icon that appears on the header bar, tab bar, or any other native component:
    • iOS
      • Save icons as a .pdf file @1x
    • Android
      • Android icons require five separate sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline.
      • Icons must be saved with identical filenames in the following folders according to resolution:
        • mdpi (1x)
        • hdpi (1.5x)
        • xhdpi (2x)
        • xxhdpi (3x)
        • xxxhdpi (4x)
      • See http://iconhandbook.co.uk/reference/chart/android/ for more details
  • Icons found in web views can be saved as .svg files and follow the same conventions as Mobify PWA apps.

App Icon

An icon, that will be displayed on the device’s homescreen, will need to be designed for your app. When working with brands, it is common for the app icon to be of that brands logo, but this should not be a limiting factor.

Your app icon should be:

Unique

  • Take a look at competitors’ icons and think of how you can differentiate yourself.
  • This will help your app stand out in the Apple App Store and Google Play Store.

Clear

  • Ideally, your icon should clearly and easily communicate your app’s purpose, if a brand allows for this.

Simple

  • Your icon must be readable and recognizable at smaller sizes.
  • Test your icon out at various sizes and leave out details and embellishment that get muddled at smaller sizes.

Creating your App Icon

Use the App Icon Sketch Template to create your icon and export it in all of the appropriate sizes.

We recommend creating two versions of the icon: the original icon and a beta icon. The beta icon will be used when your app is in progress; and the final icon will be used when you app launches.

App icon example ![Beta app icon example](images/design.462.png)

iOS

The App Store requires the following images (these will all be auto-generated using the above .sketch file):

Image Size File Name Used For
`512px × 512px` `iTunesArtwork` App list in iTunes
`1024px × 1024px` `iTunesArtwork@2x` App list in iTunes on devices with retina display
`120px × 120px` `Icon-60@2x.png` Homescreen on iPhone/iPod Touch with retina display
`180px × 180px` `Icon-60@3x.png` Homescreen on iPhone 6 Plus
`76px × 76px` `Icon-76.png` Homescreen on iPad
`152px × 152px` `Icon-76@2x.png` Homescreen on iPad with retina display
`40px × 40px` `Icon-Small-40.png` Spotlight
`80px × 80px` `Icon-Small-40@2x.png` Spotlight on devices with retina display
`120px × 120px` `Icon-Small-40@3x.png` Spotlight on iPhone 6 Plus
`29px × 29px` `Icon-Small.png` Settings
`58px × 58px` `Icon-Small@2x.png` Settings on devices with retina display
`87px × 87px` `Icon-Small@3x.png` Settings on iPhone 6 Plus

Your icon artwork should be taken to the edge of the artboard. Important! It will be automatically cropped with rounded corners by the App Store and device.

For more info on creating iOS icons:

Android

The Google Play Store requires the following images (these will all be autogenerated using the above .sketch file):

Image Size File name Used For
`48px × 48px` `ic_launcher_APP@MDPI.png` Launcher icon - mdpi (baseline) devices (1x)
`72px × 72px` `ic_launcher_APP@HDPI.png` Launcher icon - hdpi devices (1.5x)
`96px × 96px` `ic_launcher_APP@XHDPI.png` Launcher icon - xhdpi devices (2x)
`144px × 144px` `ic_launcher_APP@XXHDPI.png` Launcher icon - xxhdpi devices (3x)
`192px × 192px` `ic_launcher_APP@XXXHDPI.png` Launcher icon - xxxhdpi devices (4x)
`512px × 512px` `ic_launcher_APP.png` Google Play store

You should crop your icon to the desired shape, and may include a drop shadow. Important! The device will not crop the image for you.

You will also need to create a Feature Graphic. The feature graphic is displayed at the top of your Store Listing page in the Play Store app.

Image Size File name Used For
`1024px × 500px` No requirement Google Play Store feature graphic

For more info on creating Android icons:

App Screenshots

Screenshots of your app are required in order to submit your app to the App Store / Google Play Store. Screenshots should give the user an idea of what your app is about, and they should feature the main screens in your app.

iOS

Use the largest device size of your supported device family. For instance, for an iPhone app, use the iPhone 6S Plus or 7 Plus when taking the screenshots. If your app supports iPad, a separate set of screenshots will be required. You may submit up to four images.

iPhone Screenshot requirements are:

  • 72dpi, RGB colour space, no alpha transparency.
  • High-quality .jpg or .png image file format.
  • 1242px × 2208px for hi-res portrait.
  • 2208px × 1242px for hi-res landscape.

iPad Screenshot requirements are:

  • 72dpi, RGB colour space, no alpha transparency
  • High-quality .jpg or .png image file format
  • 2048px × 2732px for hi-res portrait
  • 2732px × 2048px for hi-res landscape

For more information, see the Apple Developer Guide

Android

You may include up to 8 screenshots for each supported device type. Two images are required as a minimum.

Requirements:

  • .jpg or 24-bit .png (no alpha transparency).
  • Minimum dimension: 320px.
  • Maximum dimension: 3840px.
  • The maximum dimension of your screenshot can’t be more than twice as long as the minimum dimension.

For more information, see the Google Developer Console