See also: https://confluence.csgicorp.com/display/Ascendon/Zero+States

Welcome

Starting point for any Module landing page of Invision that doesn't have content

HTML

<div class="t-content u-sizeFull">

    <strong>Alignment</strong>
    <p class="u-mt0">Unless specified, content for a Welcome Screen is horizontally and vertically center aligned.</p>

    <strong>Icon</strong>
    <p class="u-mt0">The icon used for a Welcome Screen is always the icon that represents the Module section the user is in.</p>

    <strong>Title Message</strong>
    <p class="u-mt0">A Welcome screen is very simple, "Welcome to [insert Module name]"</p>

    <strong>Additional Information Message</strong>
    <p class="u-mt0">Like the Title Message, unless specified, there should be an additional line of text instructing the users, e.g., "You do not have a [insert data type]."</p>

    <strong>Call to Action</strong>
    <p class="u-mt0">Like the Title Message, the call to action has a broad message that can be used is multiple situations, e.g., "Search or create one to begin".</p>

    <div class="c-callToAction u-sizeFull">
        <inv-icon class="c-callToAction-logo" glyph="'logo_customer_care'"></inv-icon>
        <div class="c-callToAction-label">Welcome to Invision Customer Care</div>
        <div class="c-callToAction-label c-callToAction-label--secondary u-size1of2 u-wide-size1of3">You do not have a customer loaded.  Search or create a customer to begin.</div>
    </div>

</div>

No Object Exists (NOE)

When there is absolutely nothing to be displayed on the page. No data has been created by the user, or by any other user

HTML

<div class="t-content u-sizeFull">

    <strong>Alignment</strong>
    <p class="u-mt0">Unless specified, content for NOE Zero States are horizontally and vertically center aligned. This includes icons and call to actions.</p>

    <strong>Icon</strong>
    <p class="u-mt0">Each page a user visits has an assigned icon (or avatar). When displaying a NOE Zero State, use the page’s assigned icon. This is used as a way to explain to the user which section they are in. For secondary pages that do not have associated icons, use the page parent's icon.</p>
    <em>Example:</em>
    <ul class="">
        <li>$ Revenue</li>
        <li>Active Subscriptions</li>
        <li>Coupon Code Inventory</li>
        <li>Coupon Redemptions</li>
    </ul>
    <p class="u-mt0">The Revenue icon is ($), so Active Subscriptions, Coupon Code Inventory, etc., would also use the ($) if they had NOE Zero States.</p>

    <strong>Title Message</strong>
    <p class="u-mt0">To keep things flexible we came up with a broad message that can be used across all modules: "There are no [insert term of information being requested] to display"</p>
    <p class="u-mt0">Adjust plural articles as needed.</p>

    <strong>Call to Action</strong>
    <p class="u-mt0">Like the Title Message, the call to action has a broad message that can be used is multiple situations: "Start by creating one now"</p>
    <p class="u-mt0">In instances where you have two options for a user, you would simply add a pipe (|) between the two options, and have both on the same line (allow for line wrapping as necessary).</p>

    <div class="c-callToAction u-flexItemGrow">
        <inv-icon class="c-callToAction-logo" glyph="'products-lg'"></inv-icon>
        <div class="c-callToAction-label">There are no products to display</div>
        <a class="c-callToAction-label c-callToAction-label--link" href="#">Start New Order</a>
    </div>

</div>

Filter

Applied when the user has exhausted their search screening. The specific filters of the search request return no values

HTML

<div class="t-content u-sizeFull" ng-controller="ZeroStateExampleController as $ctrl">

    <strong>Alignment</strong>
    <p class="u-mt0">Unless specified, content for a Filter Zero State is horizontally and vertically center aligned. This includes icons and call to actions</p>

    <strong>Icon</strong>
    <p class="u-mv0">The icon used in this event is the 'loc-search-cross' icon.</p>
    <inv-icon class="u-mt0 u-mb++" glyph="'loc-search-cross'"></inv-icon>

    <strong>Title Message</strong>
    <p class="u-mt0">Unless specified, the title message will always be, "No Data Found".</p>

    <strong>Additional Information Message</strong>
    <p class="u-mt0">Like the Title Message, unless specified, there should be an additional line of text instructing the user: "Adjust your filters to see available data."</p>

    <div class="c-callToAction u-sizeFull">
        <inv-icon class="c-callToAction-logo" glyph="'loc-search-cross'"></inv-icon>
        <div class="c-callToAction-label" ng-bind="$ctrl.coreLocaleKeys.ZERO_STATE.NO_DATA | i18n"></div>
        <div class="c-callToAction-label c-callToAction-label--secondary" ng-bind="$ctrl.coreLocaleKeys.ZERO_STATE.NO_DATA_ADJUST_FILTERS | i18n"></div>
    </div>

</div>

Sub Content Areas (SCA)

Used in layouts where multiple, disparate areas of content exist and one or more of those areas is empty

HTML

<div class="t-content u-sizeFull" ng-controller="ZeroStateExampleController as $ctrl">

    <strong>Alignment</strong>
    <p class="u-mt0">Unless specified, content for an SCA Zero State is horizontally and vertically center aligned. This includes call to actions</p>

    <strong>Icon</strong>
    <p class="u-mv0">Because these sections tend to be limited on space we don’t include icon representation.</p>

    <strong>Title Message</strong>
    <p class="u-mt0">SCAs can either display filter control actions to be taken, or they can simply return no data information.</p>
    <p class="u-mt0">Filter Control Action: "No data found. Adjust your filters to see available data."</p>
    <p class="u-mt0">No Object Exists: "There are no [insert term of information being requested] to display"</p>

    <strong>Call to Action</strong>
    <p class="u-mt0">If a user’s zero state is caused by the user filtering of data, there wouldn be no call to action. They would simply be presented with instructions to alter their filters to see available data. If there is no data to display and the user has the ability to change this states by taking action, then the call to action would be, “Create one now”. This brief statement should cover a wide range of actions.</p>
    <p class="u-mt0">In instances where you have two options for a user, you would simply add a pipe (|) between the two options, and have both on the same line (allow for line wrapping as necessary).</p>

    <div class="c-callToAction u-sizeFull">
        <div class="c-callToAction-label" ng-bind="::$ctrl.coreLocaleKeys.ZERO_STATE.NO_DATA | i18n"></div>
        <div class="c-callToAction-label c-callToAction-label--secondary" ng-bind="::$ctrl.coreLocaleKeys.ZERO_STATE.NO_DATA_ADJUST_FILTERS | i18n"></div>
    </div>

</div>

Tertiary Content Areas (TCA)

Used in instances where no data exists within a sub-section of content, such as a fieldset grouping

HTML

<div class="t-content u-sizeFull">

    <strong>Alignment</strong>
    <p class="u-mt0">Unless specified, content for TCA Zero States are left justified. This includes call to actions. TCAs follow the alignment of co-exisiting text, form labels, headers, sub-headers, and dividing headers.</p>

    <strong>Icon</strong>
    <p class="u-mv0">Icons are not used.</p>

    <strong>Title Message</strong>
    <p class="u-mt0">TCA’s message alerts are very broad: "There is no [insert term of information being requested] to display".</p>

    <strong>Call to Action</strong>
    <p class="u-mt0">"Create one now"</p>

    <div>
        <span>There are no remarks to display.</span>
    </div>

</div>