Org Chart

On this page:

Basic Info | Example | Tutorial | Edit Head of Unit | Edit Unit Contact Info | Edit Biography Page | Accessibility Info | Screenshots

Basic Info

Within the Organization Chart section of pages, units can update their department information, add key people in their office, and create biographies for key people. The Key Person component, Org Chart template, and Biography template are only available in this section of pages.

The Key Person component identifies a key person from the unit displayed and allows the person to provide an image and contact information. Clicking the component leads a user to the person's biography page.

Example

Please note that in these examples the employee name incorrectly appears as a Header 2. The Key Person component will display an employee name in a bold variation of the normal paragraph font.

Tutorial

1. Navigate to and open your page.
   
2. Add the Key Person component.
3. A new Key Person component without content will appear on the page as a placeholder.
   
4. To edit the component:
   1. Select the component and choose the Configure icon on the far left; or
   2. Double-click on the component.
5. In the Details tab, enter in the following information:
   1. For Full Name, enter in the full name of the Key Person. (required)
   2.  For Designation Title, enter in the Key Person's University title. (required)
   3. For Phone Number, enter in the Key Person's University phone number. If the individual does not wish to have their phone number published, add in the unit's main phone number.
   4. For Email Address, enter in the Key Person's email address. If the individual does not wish to have their personal email address published, add in the unit's departmental alias address. If the unit does not have a departmental alias, you may request one by writing to: aliases@nyu.edu
   5. For Link, enter a link to the individual's profile page. If it is a CMS page, make sure to use the pathfinder tool by selecting the Checkbox icon on the right of the field.
6. Select the Image tab to insert an optional image to be used with your Key Person component.
   1. Locate an image from the left-hand Side Panel under Assets. Drag and drop it into the specified spot within the edit window.
   2. A crop is required for all images used in this promo.
      
      1. Images will crop at a 4:3 ratio and will resize accordingly due to the mobile friendly nature of the website, but will never display larger than 280 pixels wide x 210 pixels high.
      2. If uploading a pre-cropped photo for your Key Person component, we recommend creating it at the maximum display size of 280 pixels x 210 pixels.
      3. If your photo is not pre-cropped, we recommend using photos that are not too zoomed in so that you can apply the required 4:3 ratio crop without cutting off any key details.
         
   3. Alternative text in the Alt text field is required. If there is no image added, please place a space in the Alt text field. 
7. Select the Done (checkmark) icon on the top right to save changes.

^ Back to top

Edit Head of Unit

The Head of Unit is displayed within the Org Chart for the department they report to as well as within their own unit's page. On their unit's page, their information is displayed in two places (in a colored band at the top of page and on the right-hand side of the page) and must be updated in both places.

1. Navigate to your unit's Org Chart page.
2. Edit the required page properties. To open Page Properties:
   1. Select the page in Site Admin mode and select  "Properties (p)" from the Action Bar; or
   2. Open the page you want to modify, select the "Page Information" icon on the top left and select "Open Properties".
3. In the OrgChart Properties tab of the Page Properties edit window there is field marked Head of Unit.
4. Update the full name and title as necessary. Ex: Jane Doe, Director of Housing
   
5. If you would like to not display the Head of Unit, select the checkbox marked Hide Head of Unit?
6. To save: 
   1. Select Save & Close to exit the current page or
   2. Select the dropdown, then select Save to save changes and stay in the current view. 
7. Towards the right-hand side of the page is a Key Personnel component underneath a Head of Unit header. Update with the correct employee information.
   1. Note: If the Head of Unit Key Person component isn't appearing on the right-hand side of your page, it's most likely hidden. You can unhide this by following Step 5 and unchecking the appropriate box.

^ Back to top

Edit Unit Contact Info

Built into every Org Chart page is a Contact Us component that departments can use to provide office contact details.

1. Towards the right-hand side of the page is a Contact Us component underneath the Head of Unit column.
2. Add your department contact information.

^ Back to top

Edit Biography Page

New Biography pages are added as child pages of the unit those employees are in. Biography pages are not linked to any components or fields on the Org Chart template, so an employee's title and other information need to be added separately in their Biography page.

1. From the Site Admin console, navigate to your unit's Organizational Chart page.
2. Click or touch once on your unit's Org Chart page so its child pages appear.
3. Add a new child page. Make sure to select the Personnel Bio template.
4. Enter the name of the individual in the required Title field. Select Create on the top right corner.
5. Select the newly created bio page to edit.
6. Edit employee title, photo, and key details.
   1. In the page, select the Page Information icon on the top left. Then select Page Properties.
      
   2. In the Basic tab of the Page Properties edit window there are three fields that can be edited:
      1. Designation Title
      2. Phone Number
      3. Email Address
         
   3. In the Image tab of the Page Properties edit window you can add an optional employee photo.
      1. Locate the image you'd like to use by selecting the Image icon above "Drop an asset here" and using the pathfinder tool. Note: Images will never appear larger than 450 pixels wide by 338 pixels high. We suggest a resolution of 72 DPI.
      2. Insert the required alternative text.
   4. Select Save & Close to save and exit the current view. Alternatively, select the right dropdown icon and select Save to save changes and stay in Page Properties.
7. Add the Rich Text component to the main section of the template and edit to include an employee bio.
   
8. Towards the right-hand side of the page is a Links component that can be updated with related links. This component functions similar to the Shortcuts component.

^ Back to top

Accessibility Info

Headings

• Your page title is considered an H1 heading, so your first heading should be an H2.
• When nesting headings, remember not to skip levels when creating sub-sections. For example, you can go from an H2 to an H3 but not an H2 to an H4.
• Don't use the heading format solely for aesthetic purposes. If you want to call out an important point, consider making that sentence bold or applying the callout text style instead of incorrectly applying a heading format.
  

Linked Text

• Screen readers are unable to provide context to a link beyond the linked text — which means multiple "click here" links on a page all appear to be the same.
• When linking a file, provide the file type and size as part of the linked text. For example, NYU Identity Style Guide (PDF: 367 KB).

Learn more about text and accessibility at NYU.

Using Images

• Screen readers are not able to read text displayed within an image.
• Images with text are difficult to read on smaller screens and can appear pixelated when magnified.
• Logotypes (logos with text) are okay to use with alt text.
• When selecting an image, make sure it's something that can complement your text content rather than replace it.
  

Alternative Text

• When writing your alt text, be concise and consider the purpose your image plays in the context of your content.
• Because of character limits on different screen reader software, try to keep your alt text less than 140 characters.
• If an image is purely decorative, enter a space in the alt text field to mark it null.

Infographics

• Infographics must include a full text description, located in the main body of your page or within an Expandable component.
• Note in your alt text where site visitors can locate the full text description.
  
• Some colors are inaccessible to users with color blindness, so do not rely on color alone to convey messages in graphics.

Learn more about images and accessibility at NYU.

^ Back to top

Screenshots

^ Back to top