Are You Building or Revising Your Site?

If you are working on a Web site within the Division of Student Affairs, I can help.

I am tasked with providing support and guidance to the offices in student services, with regard to Web site design, so that our sites are functional and usable. I also provide editorial support, particularly in terms of information design. While your site's content belongs to your office, I should be involved in planning the design of that information, so that it is navigable for your visitors.

Please talk to me when you have developed your content, but well before setting up new folders or pages. Your structure, and the type of folders you create in the CMS, will affect functionality and navigation down the road. You may be able to take advantage of helpful features that will make your site easier to edit later on.

— Regards, Li Gardiner, x4855

Planning  |  Building  |  Testing  |  Maintenance  |  Revision

PHASE 1

Planning Your Web Site / Organizing Your Content

You are now in the business of publishing. Your site will tell a story, and each section or page will be a chapter in that story. You can also think of it as a manual, with a "Getting Started" section, step-by-step instructions, help topics, and resources. In either case, creating a visible and appropriate sequence will be critical. Once you develop your content, the site structure will follow, just as a movie follows a script. And your content will depend entirely on your audience and your goals for their experience.

1) Describe your target audience.

• Who are they? Do they fall into more than one category? Write a few short profiles.
• Do you know what they want? Make a list. Is it the same as what you plan to offer?
• Will any of your visitors have limitations? (Recently, there has been renewed concern expressed by CUNY that all publications be made accessible to students with disabilities. I can provide some guidance in that area, and direct you to helpful resources.)

2) Determine the goals and objectives for your site, including any actions that you want your visitor to take. Your goals will determine the Content — the information that must be provided to your visitor in order to achieve the goal. A Web site is a big puzzle. The pieces can't be crafted, especially by different contributors, without knowing what the final picture should be, or they won't even fit together. What do you want your visitor to do?

• Learn something? How will you determine if they are successful?
• Do you want them to take an action? Or more than one? Write scenarios.
• Do you want their feedback? How will they provide it?

3) Write an Outline for Your Content. This will be the map for your site. Your site structure will depend entirely on your content — the hierarchy of information, the way your information is divided and grouped, and the types of information you include. No matter now small your site is, your content needs to be well-written and edited; navigable and sequential; and help your visitors find out what they need to know. It would be a pity if you enthusiastically built a framework without regard to content, that later has to be deconstructed and re-built in order for it to be usable.

Your Outline must have a clear hierarchy, with divisions or grouping of topics and sub-topics, because that will guide your writing. Your top-level "section" or "chapter" headings will become your Global Navigation links!

4) Fill in the Outline. Write short, interesting and informative paragraphs. Research related visuals (copyright-free) where necessary to illustrate your point. Direct your conversation TO the student, rather than referring to "the student" in the third person. Avoid using the passive voice ("If the following requirements are met by the student, then success may be achieved . . ."). That tone is the opposite of engaging. Even where there is little content, whatever there IS needs to be well-written and ruthlessly edited. Be brief but complete. Provide explanations, descriptions, or any step-by-step instructions required to access services, programs, information or external resources.

Different sections or chapters in your narrative text will become different pages or sub-sites of the whole site. These pieces will determine the number and structure of sub-folders and pages within them, and therefore your secondary and tertiary navigation.

5) Create a Site Map, based on your Outline. You can use a large sheet of paper to create a site map, by sticking Post-Its on it to represent your pages. Choose a different color to represent each major topic. The major topics are generally the same as your global navigation links.

If you use a software application to create your site map, choose one that is simple to use, and allows you to create a very large map. Do not make copies of your map file, especially if you are working with a team, to avoid confusion. Keep the file on a common server. If you back it up, work only on the original.

6) Describe the user experience from entry to exit
Looking at your Site Map, create a scenario that details a typical user interaction for each section of the site and for each activity.

• How are they likely to find your site? Through a search engine? A gateway page? Do you know? Find out.
• What expectations will they have of your site. Is there any description of your site on the page or search engine they come from? Will different visitors have different expectations?
• What will they see on your landing page? Will they know where they are?
• Where will they go next? How can you interest them in exploring further?
• Will they find what they are looking for?
• Can they get the same information elsewhere? Remember — a Web site is not a classroom. A visitor is not obligated to sit and listen. They can leave. And they do.
• What kind of experience to do you want them to have when using your site? Write scenarios describing an ideal visit. Are these scenarios realistic, based on your Site Map?

[top]

PHASE 2

Building Your Web site:

1) Create Sub-Folders, based on your Site Map, within your parent folder. These must correspond to your Section or Chapter headings. The name of each new folder will automatically appear as a link in your Global Navigation. Be consistent with the length and capitalization of page titles.

2) Create New Pages. These must correspond to the sub-headings within each Section or Chapter. The title of each page will appear in your Secondary Navigation, or in sub-menus of the Global Navigation.

3) Insert and Format Your Text. The information within each page must also be navigable and show a clear hierarchy — headings, subheadings, captions, quotes and so on. Provide visual milestones to help visitors find what they need.

• Do NOT use underlines on any text, unless that text is hyperlinked. That is what the underline will mean to your visitors.
• Do NOT use asterisks (*) for any reason except to indicate a footnote.*

4) Create Internal Links or Anchors. Any information that is instructional must be sequential, with simple steps that follow each other, either on the page, or from page to page.

• If you have a lot of text on one page, covering a number of sub-topics, then please provide Anchors at the top of the page so your visitor can jump quickly to the information they need. Also provide a "top" anchor after each section so they can get back to the index. (If you feel that this page is already too long, imagine how difficult it would be to navigate witout anchors.)
• If text for a large topic is split among pages in a sub-folder, then provide Links within that text to the other pages, whenever you direct them to go there.
• Do NOT say "click on the link at left in the navigation" Don't make your visitor search for the next step.

5) Information Design: Determine whether related information (graphs, examples, quotes, lists, tables, captions) needs to accompany the body of text. How will each type of text be differentiated? Through Callouts? Alert Boxes? Sidebars? Determine whether lists need to be bulleted, or numbered, or split into table cells.

6) Images: Determine how much of your information must be VISUAL, especially when explaining abstract information. Visual information may include an illustration or photo (which could be mapped in DreamWeaver), a video (which will require a YouTube account and code to display in the page), a Slide Show (which will require Photoshop), or graphs and charts (which could be created in Illustrator and organized in a Table.

Don't add images and videos to your site, without having a specific reason. Attractive visuals will not keep a visitor interested if you do not provide the information they need. (Unless you give them a video of panda cubs. In that case, they are staying for the wrong reason!)

• What function will each visual have, in terms of conveying additional information OR illustrating the text?
• How will visuals be tied to related information? Embedded in the text? With a caption? In a table next to related paragraphs? In a photo gallery?

These decisions may dictate the number of Image Repositories and how they are organized.

7) Interactivity and Multimedia: Determine whether accessing any information or performing any actions will require specialized interactivity, and how that will be accomplished.

8) Downloads: Determine whether downloadable or printable documents and forms will be required. Any information online should be useful, but brief. If you provide additional information or instruction in a downloadable document, you may be able to keep the online text to essential information. These additional files will determine the number of File Repositories and how they are organized.

9) Will you need expert help? For example, if your forms are intended to be filled out online, they may require a MachForm instance, and must be requested from ICIT. If they are constructed in Hobson's Retain, you will need assistance from the Office of Student Communications. If you want to include specialized interactivity, you will need advice from ICIT, and perhaps programming help. Any downloadable documents must be made accessible to text reading software such as JAWS. This will require assistance from the Office of AccessAbility, or Access and Technology Center.

[top]

PHASE 3

Testing, Deployment, Promotion, Assessment

1) User Testing

• How will you manage user testing? Who are the testers? What guidelines will you provide?
• If user testing in a group setting, where will it be done? One of the ICIT labs might be ideal.
  
• Who will make corrections?
  

2) When you are ready for your Web site to go live, you will need to have approval from the Office of Communications.

• Have you discussed your new site with the Director of Communications?

3) Determine how you will market and promote your site.

• Will you reach out only to your target audience, or to the entire hunter community?
• List any other Web pages, such as gateway pages, that should post a link to your site
• Contact offices or programs that should post a link to your site.
• If you email an announcement, how can you best reach your target audience? Who will manage that?
• Decide whether you will use social media to direct visitors to your site. Who will manage that?
• Will you promote your site via printed materials, such as a brochure, poster or post card?
• Will you hold an Open House, or arrange a presentation?
  

4) Assessment: How will you assess the effectiveness of your site? In terms of meeting your objectives? In terms of student engagement?

• Have you included a way to measure traffic? What is being measured, exactly?
• Do you invite feedback?
• Have you provided a mechanism for feedback? How does it work?
• How will you respond to feedback? Who will respond? How often?

[top]

PHASE 4

Site Maintenance and Content Updates

• How often will your site be reviewed?
• Who will manage your site's functionality, going forward? That includes periodically checking all links to external resources, links from other sites, hiding temporary or seasonal information when not needed, checking site traffic stats, et cetera. Your site manager may need to build new pages, create new links and anchors, and insert or swap out images and files.
• Who will manage your site's content, going forward? That includes updating information on policies and procedures as soon as they change. It also includes ensuring that hours, appointments, event and program dates, staff and contact information are current.

[top]

PHASE 5

Revising or Re-designing Your Site

Is there a problem with your current site? Are visitors leaving as soon as they arrive? Do they complain about the information you offer? Or your navigation? Do you know why?

• Does your information send them to another site for the answers they seek? (If that was your intention, then your site may be meeting your goals.)
• Is your information what they expected to find? Find out how they arrived at your site in the first place, and what their expectations were. For example, if they expected to find information about core requirements, is your site the best place to start? And if it is, do you provide really helpful information about core requirements?
• Is your content badly written? Is it pedantic? Is it confusing? Does it refer to the student in the third person, or use a passive voice? How can you solve these problems?
• Is important information buried in a river of introductory text? Can you get to the point?
• Does important information require more than two clicks to locate? Are the navigation links unclear? Do people know where a link will take them? Do you tell them clearly?

Do You Intend to Add a Lot of New Text or Images? Before You Do . . .

• Don't be in a rush to put up new content without reference to user feedback or testing. It may not improve your site. For example:
• Making your site appear more interesting by adding lots of images can be self-defeating, because Images alone don't convey much concrete information. Images also slow the download of your pages, and take up too much visible area on mobile devices. 
• Adding more explanatory or introductory text on a confusing topic may only slow comprehension. Does it need a complete re-write? Do you have a writing resource?
• NEVER copy text from other sources and paste it in your pages. If the source material is changed, you will not know, and you will be providing the wrong information. This is especially true of policies and procedures on the CUNY or government Web sites. (If the information is not in the public domain, you are also violating the author's copyright.)
• It is ALWAYS better to link to the original source, and make the link open a new window so that your visitors don't leave your page and become lost.
• If you plan to upload a large amount of new content, please let me know so I can take a look at how it is visually organized and linked with other pages and files.

Do You Intend to Move, Delete or Rename Pages? Before You Do . . .

• Find out who has already linked to your site! If your file names and URLs change, then everyone who has already linked to your site, or bookmarked your site, will be lost, probably forever. I can help you find out.
• If you plan to reorganize the site structure — the sequence and grouping of pages and links — print all your pages first. Then tape your printed pages on a wall, or lay them out on a big table, and move them into logical groups. Alternatively, you can use a large sheet of paper to create a site map, by adding Post-Its to represent your pages. Choose a different color to represent each major topic. The major topics are generally the same as your global navigation links.

Do You Intend to Substantially Reorganize Existing CONTENT? Before You Do . . .

• Do NOT edit large amounts of text in the CMS. It is frustratingly slow, and you can permanently lose large amounts of information while copying and pasting.
• You should print out all the pages that you plan to edit. Read them thoroughly and mark up the hard copy! Cross-out redundant or duplicated text and substitute with links to the source text whenever possible. Circle broken links.

[top]

*This is a footnote, and the only reason to use an asterisk. A footnote can appear at the bottom of a section of text, or at the bottom of the page, if it's not too far to travel. [back to topic]