How To Page

Content Type for Ordering the Steps in a Process

Summary

The How To content type is a page tailored specifically for ordering the steps in a process. It can be used to to provide guidance on common processes. 

Audience

Web Managers

Example

Digital Commons Support Help Topics, including the page you are currently viewing, are presented using the How To content type. 

How To Outline a Process with the How To Content Type

  • 1

    Planning and Considerations

    Desired Outcomes

    Your How To page should lead the follower in incremental steps towards completing a specific task. Before you begin building a How To page, be sure to identify and understand the desired outcome of the process. Consider these questions:

    • What are my website visitors trying to do?
      Example: Visitors want to apply for an agency program.
    • What do I want the website visitor to do?
      Example: I want visitors to submit a complete application by the deadline.
    • What kinds of problems tend to occur in this process?
      Example: Visitors fail to submit required documentation.

    Gather and Organize Information

    Understanding the desired outcome will help you gather the relevant information, contacts, links and resources necessary for a website visitor to successfully complete the process.

    After gathering this information, thoughtfully order the steps and chunk related information together. Large steps can be broken into multiple steps or subdivided to be more user-friendly. If you need help with the content of your process, help is available in these areas: 

    Accordion
    Tab/Accordion Items
    Message

    Write for your audience's needs in plain and direct language. Not sure where to begin? Use a tool to help simplify your writing, such as the Hemingway Editor, and consider our Writing for the Web training.

    Target audience of website visitors identified.

    Our team includes Digital Strategists who can help you learn who your website visitors are and why they visit your website. Consult us for help with understanding analytics, to arrange website usability testing, and to access our tools for Website Quality Assurance and Accessibility Monitoring. 

    A convoluted process needs improving.

    An outdated or inefficient process can be frustrating for you to describe and even more difficult for your website visitors to follow. NCDIT’s Process Improvement team can help you smooth out a convoluted process. 

  • 2

    Create a How To Page

    New Content Types are created using the Content menu in your toolbar. To create a new How To, navigate to: Content > Add Content > How To.

    Hand cursor selecting the How To content type from the add content menu.

    The Create How To page opens. Begin filling out the form. Fields marked with an asterisk (*) are required.

    Create How To content type form fields.
    • Title (*) - Enter the page name here. Include important keywords in the title to improve the search results. The optimal title length is less than 60 characters, including spaces. 
      Example: How To Page
       
    • Subtitle (optional) - The Subtitle appears below the Title. Use this field to give more specific information about the Title or subject. 
      Example: Content Type for Ordering the Steps in a Process
       
    • Summary - Briefly describe the contents of the How To. The Summary appears in search engine results with the link. Provide a Summary to enhance Search Engine Optimization (SEO). 
      Example: Help me create a How To page on the Digital Commons platform. 
      Note: When left blank, the Summary field uses an excerpt from the Page Content as the summary. 
       
    • Short Introduction - Enter a short description or overview of the topic, which will appear above the step-by-step instructions. 
      Example: "Summary- The How To content type is a page..."
    Example of how the Title, Subtitle, and Short Introduction appear on the How To content type.
    Placement of the Title, Subtitle, and Short Introduction on a published How To page. 
  • 3

    Add Steps

    Expand the Steps section. 

    Hand cursor ready to expand the Steps section of the How To content type.
    • Process Title (*) - Enter a title for the process explained by the Steps. Example: How to [Task].
    How To form field for the Process Title.

    Numbered Steps

    • Step Title - The Step Title displays in bold as the name of the numbered Step.
    • Step Details - Enter instructions for this step of the process in the Text Editor. Provide relevant links, resources, or images that will help the website visitor complete this step. Specify what must be collected or accomplished before moving on to the next Step. 
    Form field for a step within numbered steps for the How To content type.

    Step-Related Link (optional)

    To add a Step-Related Link, populate the fields for URL and Link Text. Step-Related Links appear at the bottom of the Step.

    • URL - Enter a web address.
    • Link Text - Enter text for the link.

    Accordion

    Add an Accordion, if desired. The Tabs/Accordion paragraph component is a useful for subdividing lengthy steps into smaller segments. (See Step 1 above for an example.)

    Hand cursor ready to select the Add Tabs/Accordion button.

    Add Step

    Select the Add Step button to add the next step in the process. Repeat the process described above in Steps 2-3, and continue adding steps until the process is completely outlined. 

    Hand cursor ready to select the Add Step button on the How To content type.
  • 4

    Contact Information

    Optional: Expand the Contact Information Section. 

    Expanded Contact Information area of the How To content type.
    • Contact Agency - Enter the name of the agency site visitors can contact.
    • Contact Website
      • URL - Enter a web address.
      • Link Text - Enter text for the link.
    • Contact Email - Enter an email address.
    • Contact Phone - Enter a phone number.
    • Contact Hours - Specify the contact hours.

    Contact Address

    If you do not need to provide a Contact Address, proceed to the Additional Information or Details section.

    If you do need to to provide a Contact Address, expand the Contact Address section:

    • Country - Select United States from the Country menu. New fields are now required. Provide the full address to generate Google Maps directions to the location:
      • Location Name - Enter a name for the location.
      • Street Address (*) - Enter a street address.
      • City  (*) - Enter the City name.
      • State  (*) - Select a State from the menu.
      • Zip Code  (*) - Enter a Zip Code.
    Contact address requires new fields if the country is set to United States.
  • 5

    Additional Information or Details

    Add additional information, if desired. Text entered here appears at the bottom of the How To page.

    Additional Information or Details field.
  • 6

    Related Information

    Resources provided in the Related Information Section appear near the top of the page next to Step 1 .

    If desired, expand the Related Information section.

    • Provide Related Links Files for the Steps.
    Form field for adding relating links to the How To content type.

    Related Links

    • URL - Enter a web address.
    • Link Text - Enter text for the link.
    • Click Add Another Item to post additional links

    Related Files

    • Click the Related File(s) button to upload a related file.
    Example: The Related Links are placed on the right side of the page beside Step 1 of your How To process.
    Example: The Related Links are placed on the right side of the page beside Step 1 of your How To process. 
  • 7

    Remove a Step

    To remove an existing Step, select the Remove button for that step and Confirm Removal. Example: Remove Step Titled "Add an Icon." 

    Hand cursor ready to select the Remove button for a step of the How To content type.
  • 8

    Reorder Steps

    A vertical number line is placed on a scene of a hot air balloon, sailboat, and scuba diver. Explanation in caption.
    Infographic: Lighter weights (negative numbers) float to the top. Heavier weights (positive numbers) sink to the bottom. 

    Steps can be rearranged either by drag-and-drop or by using row weights. 

    Row Weight Method

    • To Reorder Steps, click Show Row Weights (if not already selected).
    • Scroll down and choose a number from the weight menu. Select a number for each Step to determine the order in which they will display.
    • Long steps are reordered more easily with row weights. 

    Note: To bring an item closer to the top, assign it a lower number.  

    Hide vs Show row weights toggle link.
    Above: Show or Hide row weights with the toggle link at the top right of the Numbered Steps section. 

    Drag and Drop Method

    • Click Hide Row Weights (if not already selected).
    • Click and drag the handlebars to the left of the Step to move it up or down.
    A step of a How To content type is selected to be reordered by drag and drop.
    Example: This step, titled "Create a How To Page," is selected and ready to be dragged up or down to reorder the steps of the process.
  • 9

    Save

    Save often as you work on your content to avoid losing work due to timing out or navigating away from the page.

    Current State: Displays the current status of the Content Type and whether or not it is available to the public.

    Change to: The state you want the content to be in the next time you select the Save button.

    • Draft - All new content types are in Draft State by default. This state allows you to continually edit and save your work before it is made available to the public.
    • Needs Review - Editors may save as Needs Review when they are finished working and want a Publisher or Web Manager to publish the content.
    • Published - This content is available to the public. Only a Publisher or Web Manager can choose this state.
    • Unpublished - This content was available to the public at one time, but is not now. Only a Publisher or Web Manager can choose this state.

    Delete: Deleted Content Types cannot be recovered. If you may need this content again in the future, it is best to change the state to Unpublished.

    Change to Save as Published
    Save content as Published to make available to the public.