logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • Ant Design
    • Introduction
    • Design Values
    • Cases
  • Global Styles
    • Colors
    • Layout
    • Font
    • Icons
    • Dark Mode
    • Shadow
  • Design Patterns
    • Overview
    • Global Rules
      • Feedback
      • Navigation
      • Data Entry
      • Data Display
      • Copywriting
      • Data format
      • Button
      • Data List
    • Principles
      • Proximity
      • Alignment
      • Contrast
      • Repetition
      • Make it Direct
      • Stay on the Page
      • Keep it Lightweight
      • Provide an Invitation
      • Use Transition
      • React Immediately
    • Template Document
      • Visualization Page
      • Detail Page
  • Design Patterns (Research)
    • Overview
    • Template Document
      • Form Page
      • Workbench
      • List Page
      • Result Page
      • Exception Page
    • Global Rules
      • Navigation
      • Message and Feedback
      • Empty Status
  • Visualization
  • Motion
  • Illustrations
Static Invitations
Dynamic Invitations

Provide an Invitation

contributors
  • Keep it LightweightUse Transition

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    A common problem with many of these rich interactions (e.g. Drag and Drop, Inline Editing, and Contextual Tools) is their lack of discoverability. Providing an invitation to the user is one of the keys to successful interactive interfaces.

    Invitations are the prompts and cues that lead users through an interaction. They often include just-in-time tips or visual affordances that hint at what will happen next in the interface.

    Signifiers are signals, communication devices. These signs tell you about the possible actions; what to do, and where to do it. Signifiers are often visible, audible or tangible, from the Design of Everyday Things.

    Affordances are the relationships (read: possible actions) between an object and an entity (most often a person). The presence of an affordance is determined by the properties of the object and of the abilities of the entity who's interacting with the object, from the Design of Everyday Things.


    Static Invitations

    By providing cues for interaction directly on the page we can statically indicate to the user the expected interface behavior. Static Invitations provide cues directly on the page.


    example of Text Invitation
    Preview
    example of Text Invitation
    example of Blank Slate Invitation
    Preview
    example of Blank Slate Invitation
    example of Unfinished Invitation
    Preview
    example of Unfinished Invitation

    Call to Action Invitations are generally provided as static instructions on the page. But visually they can be provided in many different ways such as Text Invitation, Blank Slate Invitation and Unfinished Invitation.


    example 1 of Tour Invitation
    Preview
    example 1 of Tour Invitation
    A few of tour points are provided when the user first logs in. Clicking the 'Got It' button leads the user to the next tour step.

    Tour invitation can be a nice way to explain design changes to a web application, especially for a well-designed interface. But providing tours will not solve the real problems an interface may have during interaction.

    Note that make Tour Invitations short and simple, easy to exit, and clear to restart.



    Dynamic Invitations

    Dynamic Invitations engage users at the point of the interaction and guide them through the next step of interaction.


    example 1 of Hover Invitation
    Preview
    example 1 of Hover Invitation
    During mouse hover on the whole card, the clickable parts turn to blue hypertext.
    example 2 of Hover Invitation
    Preview
    example 2 of Hover Invitation
    During mouse hover, the button of "Select this Template" appears.

    Hover Invitation: Provide an invitation during mouse hover.


    example of Inference Invitation
    Preview
    example of Inference Invitation
    The system predicts that the user's interest in an article extends to a type of articles, and it provides an invitation after the user click "like".

    Inference Invitation: Use visual inferences during interaction to cue users as to what the system has inferred about their intent.


    example of More Content Invitation
    Preview
    example of More Content Invitation
    Use the left or right arrows to switch more content around Modal.

    More Content Invitation: Indicate that there is more content on the page.