{"componentChunkName":"component---src-pages-experimental-create-flows-index-mdx","path":"/experimental/create-flows/","result":{"pageContext":{"frontmatter":{"title":"Create flows","description":"To create is to generate a new resource. Creating is distinct from adding, but the two are often confused. To add a resource is to include a resource that already exists."},"relativePagePath":"/experimental/create-flows/index.mdx","titleType":"prepend","MdxNode":{"id":"91c3bd4d-ec47-5be3-8440-7d53408e8788","children":[],"parent":"9f8f33a7-fe98-56c5-b2a5-824a83e668f7","internal":{"content":"---\ntitle: Create flows\ndescription: To create is to generate a new resource. Creating is distinct from adding, but the two are often confused. To add a resource is to include a resource that already exists.\n---\n\n<PageDescription>\n\nTo create is to generate a new resource. Creating is distinct from adding, but the two are often confused. To add a resource is to include a resource that already exists.\n\n</PageDescription>\n\n#### Status:\n\n[Experimental](/experimental/overview/)\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson), [Chloe Poulter](https://github.com/chloepoulterdesign)\n\n#### Options:\n\n<AnchorLinks>\n  <AnchorLink>Standard creation</AnchorLink>\n  <AnchorLink>Multistep creation</AnchorLink>\n  <AnchorLink>Anatomy</AnchorLink>\n  <AnchorLink>Pre-create</AnchorLink>\n</AnchorLinks>\n\n![Example of a create pattern](images/1.png)\n\n<Caption>Example of a creation pattern</Caption>\n\n## Standard creation\n\nStandard creation is used in simple creation tasks when no stepped guidance is needed and the input fields are directly related to each other.\n\n### Modal\n\nIf there are only one or two options to be made during a creation, use a small, standard modal overlaying the content where the creation was initiated. Avoid scrolling inside a modal.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a standard creation modal](images/2.png)\n\n<Caption>Example of a standard creation modal</Caption>\n\n</Column>\n</Row>\n\n### Side panel\n\nConsider using a side panel to take advantage of the added screen real estate and keep the user in the context of where they are working. You may choose to use either the slide in or slide over panels.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a side panel creation flow](images/3.png)\n\n<Caption>Example of a side panel creation flow</Caption>\n\n</Column>\n</Row>\n\n### Full page\n\nIf your creation flow consists of multiple fields and/or supporting imagery, consider the full page option to take full advantage of the screen’s available real estate.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a full-page creation flow](images/4.png)\n\n<Caption>Example of a full page creation flow</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of a full-page creation flow](images/5.png)\n\n<Caption>Example of a full-page creation flow</Caption>\n\n</Column>\n</Row>\n\n## Multistep creation\n\nIf the creation task is complex, consider whether breaking the process up into steps could help the user. Consider displaying related or dependant options together.\n\nMultistep creation follows the same principles as [Standard creation](#standard-creation), with the addition of steps.\n\n### Side panel\n\nConsider using a side panel to take advantage of the added screen real estate and keep the user in the context of where they are working. You may choose to use either the slide in or slide over panels.\n\n<Row>\n<Column colLg={8}>\n\n![Example of side panels in a multi-step creation flow](images/6.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of a side panel multi-step creation flow](images/7.png)\n\n<Caption>Example of a side panel multi-step creation flow</Caption>\n\n</Column>\n</Row>\n\n### Full-page multistep\n\nIf your creation flow consists of multiple fields and/or supporting imagery, consider the full page option to take full advantage of the screen’s available real estate.\n\n<Row>\n<Column colLg={8}>\n\n![Start of multistep creation flow](images/8.png)\n\n<Caption>Start of multistep creation flow</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Multistep creation flow with view all options toggle](images/9.png)\n\n<Caption>Multistep creation flow with view all options toggle</Caption>\n\n</Column>\n</Row>\n\n## Anatomy\n\n<AnchorLinks small>\n  <AnchorLink>Button position</AnchorLink>\n  <AnchorLink>Including an image or illustration</AnchorLink>\n  <AnchorLink>Show all available options toggle</AnchorLink>\n  <AnchorLink>Confirmation</AnchorLink>\n</AnchorLinks>\n\n### Button position\n\nOn a larger screen, buttons should always remain visible to the user.\n\nButtons should be located in the top right and should stick upon scrolling.\n\n<Row>\n<Column colLg={8}>\n\n<img\n  src=\"/images/10.gif\"\n  alt=\"Button position in context\"\n  title=\"Button position in context\"\n  style=\"padding:3rem\"\n/>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Button position in context](images/11.png)\n\n<Caption>Buttons should be located in the top right</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Button position in context when scrolling](images/12.png)\n\n<Caption>Buttons should stick upon scrolling.</Caption>\n\n</Column>\n</Row>\n\nWhen the full-page dialog is viewed in mobile, the buttons are positioned at the bottom of the screen.\n\n<Row>\n<Column colLg={8}>\n\n![Button position in context on mobile](images/13.png)\n\n<Caption>Example of full-page option on mobile</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={4} colLg={6}>\n<DoDontExample type=\"do\" caption=\"Buttons should stick upon scrolling so they are always visible.\">\n\n![Buttons should stick upon scrolling so they are always visible.](/images/14a.png)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={6}>\n<DoDontExample type=\"do\" caption=\"If an illustration or image is displayed, buttons should be displayed above the image.\">\n\n![If an illustration or image is displayed on the right, buttons should be displayed above the image.](/images/14b.png)\n\n</DoDontExample>\n</Column>\n</Row>\n\n### Including an image or illustration\n\nIf including a supporting image or illustration, place the image on the right-hand side.\n\n<Row>\n<Column colLg={8}>\n\n![Example of supporting image placement](images/15.png)\n\n<Caption>Example of supporting image placement</Caption>\n\n</Column>\n</Row>\n\n### Show all available options toggle\n\nThe toggle should be used to avoid overwhelming users, while still allowing users to access all options. It can be applied to the [side panel](#side-panel) and the [full page](#full-page) dialog.\n\nConsider having a minimal set of options visible by default, offering the ability to chose if the user wants to expose more options.\n\nIf the user switches to this mode, remember this for when they next perform the same task.\n\n<Row>\n<Column colMd={4} colLg={6}>\n\n![Show all options off](images/16.png)\n\n<Caption>Show all options off</Caption>\n\n</Column>\n\n<Column colMd={4} colLg={6}>\n\n![Show all options on](images/17.png)\n\n<Caption>Show all options on</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Show all options off](images/18.png)\n\n<Caption>Show all options off</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Show all options on](images/19.png)\n\n<Caption>Show all options on</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Show all options on and grouped](images/20.png)\n\n<Caption>Show all options on and grouped</Caption>\n\n</Column>\n</Row>\n\n### Confirmation\n\nA notification banner can be presented to visually confirm when any create action is a success.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a successful creation confirmation](images/27.png)\n\n<Caption>Example of a successful creation confirmation</Caption>\n\n</Column>\n</Row>\n\n## Pre-create\n\nA pre-create step occurs before the create flow starts. A common pre-create step is **Create from template**.\n\nA pre-create step is usually combined with a [full-page create flow](#full-page). It can also be used in combination with a [side panel create flow](#full-page). A pre-create step can be used in combination with a single-step or multistep create flow. A multistep flow starts after the pre-create step is complete.\n\nConsider reminding users of the option they choose in pre-create in the rest of the create flow.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a pre-create view](images/Precreate1.png)\n\n<Caption>Example of a pre-create view</Caption>\n\n</Column>\n</Row>\n\nAim to limit the number of pre-create options. If there is a very large number of options, pre-create options can be sorted into groups.\n\n<Row>\n<Column colLg={8}>\n\n![Example of pre-create with groups of tiles](images/Precreate2.png)\n\n<Caption>Example of pre-create with groups of tiles</Caption>\n\n</Column>\n</Row>\n\nIf necessary, a dropdown selection box or similar component can be required before the pre-create options.\n\n<Row>\n<Column colLg={8}>\n\n![Example of pre-create with a dropdown input](images/Precreate3.png)\n\n<Caption>Example of pre-create with a dropdown input</Caption>\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"8558acb59c587665ffc38afe36416128","counter":1623,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Create flows","description":"To create is to generate a new resource. Creating is distinct from adding, but the two are often confused. To add a resource is to include a resource that already exists."},"exports":{},"rawBody":"---\ntitle: Create flows\ndescription: To create is to generate a new resource. Creating is distinct from adding, but the two are often confused. To add a resource is to include a resource that already exists.\n---\n\n<PageDescription>\n\nTo create is to generate a new resource. Creating is distinct from adding, but the two are often confused. To add a resource is to include a resource that already exists.\n\n</PageDescription>\n\n#### Status:\n\n[Experimental](/experimental/overview/)\n\n#### Maintainers:\n\n[Vikki Paterson](https://github.com/vikkipaterson), [Chloe Poulter](https://github.com/chloepoulterdesign)\n\n#### Options:\n\n<AnchorLinks>\n  <AnchorLink>Standard creation</AnchorLink>\n  <AnchorLink>Multistep creation</AnchorLink>\n  <AnchorLink>Anatomy</AnchorLink>\n  <AnchorLink>Pre-create</AnchorLink>\n</AnchorLinks>\n\n![Example of a create pattern](images/1.png)\n\n<Caption>Example of a creation pattern</Caption>\n\n## Standard creation\n\nStandard creation is used in simple creation tasks when no stepped guidance is needed and the input fields are directly related to each other.\n\n### Modal\n\nIf there are only one or two options to be made during a creation, use a small, standard modal overlaying the content where the creation was initiated. Avoid scrolling inside a modal.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a standard creation modal](images/2.png)\n\n<Caption>Example of a standard creation modal</Caption>\n\n</Column>\n</Row>\n\n### Side panel\n\nConsider using a side panel to take advantage of the added screen real estate and keep the user in the context of where they are working. You may choose to use either the slide in or slide over panels.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a side panel creation flow](images/3.png)\n\n<Caption>Example of a side panel creation flow</Caption>\n\n</Column>\n</Row>\n\n### Full page\n\nIf your creation flow consists of multiple fields and/or supporting imagery, consider the full page option to take full advantage of the screen’s available real estate.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a full-page creation flow](images/4.png)\n\n<Caption>Example of a full page creation flow</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of a full-page creation flow](images/5.png)\n\n<Caption>Example of a full-page creation flow</Caption>\n\n</Column>\n</Row>\n\n## Multistep creation\n\nIf the creation task is complex, consider whether breaking the process up into steps could help the user. Consider displaying related or dependant options together.\n\nMultistep creation follows the same principles as [Standard creation](#standard-creation), with the addition of steps.\n\n### Side panel\n\nConsider using a side panel to take advantage of the added screen real estate and keep the user in the context of where they are working. You may choose to use either the slide in or slide over panels.\n\n<Row>\n<Column colLg={8}>\n\n![Example of side panels in a multi-step creation flow](images/6.png)\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Example of a side panel multi-step creation flow](images/7.png)\n\n<Caption>Example of a side panel multi-step creation flow</Caption>\n\n</Column>\n</Row>\n\n### Full-page multistep\n\nIf your creation flow consists of multiple fields and/or supporting imagery, consider the full page option to take full advantage of the screen’s available real estate.\n\n<Row>\n<Column colLg={8}>\n\n![Start of multistep creation flow](images/8.png)\n\n<Caption>Start of multistep creation flow</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Multistep creation flow with view all options toggle](images/9.png)\n\n<Caption>Multistep creation flow with view all options toggle</Caption>\n\n</Column>\n</Row>\n\n## Anatomy\n\n<AnchorLinks small>\n  <AnchorLink>Button position</AnchorLink>\n  <AnchorLink>Including an image or illustration</AnchorLink>\n  <AnchorLink>Show all available options toggle</AnchorLink>\n  <AnchorLink>Confirmation</AnchorLink>\n</AnchorLinks>\n\n### Button position\n\nOn a larger screen, buttons should always remain visible to the user.\n\nButtons should be located in the top right and should stick upon scrolling.\n\n<Row>\n<Column colLg={8}>\n\n<img\n  src=\"/images/10.gif\"\n  alt=\"Button position in context\"\n  title=\"Button position in context\"\n  style=\"padding:3rem\"\n/>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Button position in context](images/11.png)\n\n<Caption>Buttons should be located in the top right</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Button position in context when scrolling](images/12.png)\n\n<Caption>Buttons should stick upon scrolling.</Caption>\n\n</Column>\n</Row>\n\nWhen the full-page dialog is viewed in mobile, the buttons are positioned at the bottom of the screen.\n\n<Row>\n<Column colLg={8}>\n\n![Button position in context on mobile](images/13.png)\n\n<Caption>Example of full-page option on mobile</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={4} colLg={6}>\n<DoDontExample type=\"do\" caption=\"Buttons should stick upon scrolling so they are always visible.\">\n\n![Buttons should stick upon scrolling so they are always visible.](/images/14a.png)\n\n</DoDontExample>\n</Column>\n<Column colMd={4} colLg={6}>\n<DoDontExample type=\"do\" caption=\"If an illustration or image is displayed, buttons should be displayed above the image.\">\n\n![If an illustration or image is displayed on the right, buttons should be displayed above the image.](/images/14b.png)\n\n</DoDontExample>\n</Column>\n</Row>\n\n### Including an image or illustration\n\nIf including a supporting image or illustration, place the image on the right-hand side.\n\n<Row>\n<Column colLg={8}>\n\n![Example of supporting image placement](images/15.png)\n\n<Caption>Example of supporting image placement</Caption>\n\n</Column>\n</Row>\n\n### Show all available options toggle\n\nThe toggle should be used to avoid overwhelming users, while still allowing users to access all options. It can be applied to the [side panel](#side-panel) and the [full page](#full-page) dialog.\n\nConsider having a minimal set of options visible by default, offering the ability to chose if the user wants to expose more options.\n\nIf the user switches to this mode, remember this for when they next perform the same task.\n\n<Row>\n<Column colMd={4} colLg={6}>\n\n![Show all options off](images/16.png)\n\n<Caption>Show all options off</Caption>\n\n</Column>\n\n<Column colMd={4} colLg={6}>\n\n![Show all options on](images/17.png)\n\n<Caption>Show all options on</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Show all options off](images/18.png)\n\n<Caption>Show all options off</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Show all options on](images/19.png)\n\n<Caption>Show all options on</Caption>\n\n</Column>\n</Row>\n\n<Row>\n<Column colLg={8}>\n\n![Show all options on and grouped](images/20.png)\n\n<Caption>Show all options on and grouped</Caption>\n\n</Column>\n</Row>\n\n### Confirmation\n\nA notification banner can be presented to visually confirm when any create action is a success.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a successful creation confirmation](images/27.png)\n\n<Caption>Example of a successful creation confirmation</Caption>\n\n</Column>\n</Row>\n\n## Pre-create\n\nA pre-create step occurs before the create flow starts. A common pre-create step is **Create from template**.\n\nA pre-create step is usually combined with a [full-page create flow](#full-page). It can also be used in combination with a [side panel create flow](#full-page). A pre-create step can be used in combination with a single-step or multistep create flow. A multistep flow starts after the pre-create step is complete.\n\nConsider reminding users of the option they choose in pre-create in the rest of the create flow.\n\n<Row>\n<Column colLg={8}>\n\n![Example of a pre-create view](images/Precreate1.png)\n\n<Caption>Example of a pre-create view</Caption>\n\n</Column>\n</Row>\n\nAim to limit the number of pre-create options. If there is a very large number of options, pre-create options can be sorted into groups.\n\n<Row>\n<Column colLg={8}>\n\n![Example of pre-create with groups of tiles](images/Precreate2.png)\n\n<Caption>Example of pre-create with groups of tiles</Caption>\n\n</Column>\n</Row>\n\nIf necessary, a dropdown selection box or similar component can be required before the pre-create options.\n\n<Row>\n<Column colLg={8}>\n\n![Example of pre-create with a dropdown input](images/Precreate3.png)\n\n<Caption>Example of pre-create with a dropdown input</Caption>\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/experimental/create-flows/index.mdx"}}}}