Editing for the Web

1. Editing for the Web Dr. Lam TECM 5195 Some Content from Princeton University

2. Agenda • How do users read on the web? • Guidelines for editing writing on the web • What is information architecture? • What makes websites un(usable)?

3. What’s so different about the web?

4. What’s going on here?

5. How do uses read on the web? • Let’s start with an experiment

6. Empirical Results Users don’t read on the web, they scan. As such, you editing for the web should introduce: • Headings • Bulleted lists • One idea per paragraph • Inverted Pyramid • Cut, cut, cut

7. Editing Guideline 1: Use meaningful headers • Make headers and sub-headers meaningful, not cute • Break up content and introduce headers if they aren’t there • Make headers visually distinct from body text • Use headers as a call to action

8. Exercise #1- Insert Headers Physical Exercise The hardest part of an exercise routine is getting started. Once you've established a regular pattern of exercise, you'll find yourself following it. So, how do you get started? Well, first of all, consult your doctor. Your doctor can recommend the specific kinds of exercise for your own individual needs. Generally, however, these guidelines should get you going. First of all, exercise will only become a habit if it's fun! Pick something you will enjoy doing. If you like being with a group of people, try a team sport like basketball or soccer. You don't have to be a super athlete. Anyone can exercise. Social activities like dancing and mall-walking are also good. If you're more of a loner, try bicycling or swimming. Don't kid yourself. Be honest about what you realistically think you can do. If you have always hated to climb stairs, step aerobics probably isn't for you. Maybe a walk around the neighborhood would be more pleasant. Many people today are walking toward fitness. Consider your current state of physical fitness. If you haven't exercised in years, you'll definitely want to start with some modest activities. As you get adjusted, you can increase your activity. Consider your schedule. Are you a morning person? Then plan to exercise in the morning. If you're addicted to your snooze button, plan to exercise in the evening. Start with just a small block of time, maybe fifteen minutes. As you get into your routine, you probably won't mind increasing to twenty, and then thirty, minutes. In order to be effective, you'll need to repeat your exercise routine 3 or 4 times per week. Will you exercise at home or at a fitness center? Selecting a fitness center can be a challenge, but you may find the community support motivational. Will you need any special equipment? The variety of exercise equipment available for purchase today can be overwhelming. Be sure to buy the proper equipment. Finally, take it easy. Make sure that you exercise intelligently and cautiously. Follow some guidelines for beginners. Exercise should improve your health, not risk it. If you're still making excuses, at least try some of the Healthy Heart Tips for today. These simple, realistic activities can become the first step toward a healthier tomorrow.

9. Editing Guideline 2: Make use of bulleted lists • Almost everything on a website is a bulleted list • Think about how a reader will “use” the information • Rewrite/edit content to fulfill this need

10. Exercise #2 • Take previous text and introduce bulleted lists when appropriate

11. Editing Guideline #3- One idea per paragraph • Introduce one controlling idea per paragraph (or section) • Break up long, complicated paragraphs or text into a series of paragraphs or sections

12. Exercise #3 • Edit to make sure there is one and only one controlling idea per section

13. Editing Guideline #4: Use inverted pyramid • Greenland Ice Melting Master than Expected • The Greenland ice sheet is melting faster than expected, according to a new study by U of A and published in Hyrdological Processes. • Study results indicate the ice sheet may be responsible for nearly 25 percent of global sea rise in the past 13 years.

14. Exercise #4 • Edit for inverted pyramid

15. Editing Guideline #5: Cut, Cut, Cut • Make text as concise as possible • How? • Now do it for the final edit

16. What does an architect do? Starting the ProjectThe architect talks to the client about expectations, project requirements and budget. This information forms the design brief.Design PhaseThe architect analyses the design brief and the building site conditions, and determines the best location and orientation. The architect then develops ideas through rough plans, sketches and models. These ideas are brought together into concept design drawings.Design development, documentation & building approvalsThe architect compares the concept design drawings with the design brief and develops the technical detail for the project with the project team. Detailed drawings and specifications are prepared for the builder. The drawings are lodged to obtain local authority building approval. The method of engaging a builder for the project is determined.ConstructionThe architect works with the builder and other project team members to ensure that the project is constructed in accordance with the drawings and specification. After constructionProjects have a warranty period called the defects liability period. It is the architect’s responsibility to follow up any relevant issues or outstanding work with the client and the builder. *From Australian Institute of Architects

17. House Metaphor

18. Blueprints

19. What is information architecture? Information architecture (IA) refers to the structure or organization of your website. It describes the ways in which the different pages of your site relate to one another and ensures information is organized in a consistent and predictable way on each page. • assessing existing and needed content, • organizing the pages, • providing clues to help use the site efficiently, and • developing navigational structure.

20. What will an IA specialist do? • Create site maps and wireframe sketches to pass on to designers and developers • IA specialists are both content specialists and design specialists because they consider what information (content) is appropriate AND how to disseminate that information to the end user.

21. Site Map

22. Wireframe

23. Editing for IA

24. Why do I need information architecture? • Well-organized site helps users find information quickly • Intuitive design will save time and money (by removing need for massive redesign projects) • If you use a CMS to manage the site, the client can add content appropriately instead of arbitrarily

25. How do I create great information architecture? • Define key stakeholder’s goals • Identify your users’ goals and expectations • Defining your site’s content areas • Organizing the content areas • Creating the site map • Outlining your navigational structure • Labeling your content areas • Creating wireframes

26. Step 1: Define Key Stakeholder’s Goals • A Key stakeholder is the client. They outline overall objectives, set the tone of the site, and give approval at various stages. • Who are the principal audiences with whom your key stakeholders want to communicate? Be specific. • Ask them to prioritize these audiences in the following way: • Primary: The audiences that will be your site’s main focus. You will optimize the site for them. • Secondary: Audiences that are important, but not critical. • What are the key stakeholders’ expectations in creating or redesigning this site? • Examples: making the site more intuitive/easier to use, explaining what you do, explaining the services you offer, gathering visitor feedback, attracting or serving new audiences, reducing the number of phoned-in requests for assistance, boosting the number of applications from target groups or regions, increasing attendance at events, building a sense of community. • What specific functional requirements do the key stakeholders want included in this site? • Examples: including a search tool, providing self-service options, having downloadable PDFs or interactive forms, having an events calendar, enabling people to sign up for events or apply online, having an intranet for internal communications purposes.

27. Sample Illustration of target audiences and key stakeholder’s goals

28. Step 2: Identifying your users’ goals and expectations • Ultimate goal of IA: Anticipate user’s needs • Conduct interviews with a wide variety of users • If you can’t conduct interviews, answer key questions about your users

29. Sample Illustration of a User Data Sheet

30. Step 3: Defining your site’s content areas • Helps develop navigational structure (and not the other way around) • Analyze the content you already have. Decide what to keep, revise, or remove • List all the content areas users will want to find on your site

31. Content Area Brainstorming Page 14 of IA handout. In groups of 3-4: • Facilitator writes out stakeholder goals and target audience on white board • User data sheets are made available to team • Each member chooses a data sheet • Every member gets a sheet of paper and writes down 3 important questions of that user. • Give the questions to the person to your right • Add 3 more questions (continue until you’re out of unique questions) • Facilitator will combine questions that are the essentially the same. • Reword questions into 1-3 word content area headings. • E.g., Who do I contact to sign up for this program?  Contact Info • E.g., What does this company do?  Mission Statement

32. Step 4: Organizing the Content Areas • Write each of your content areas from the brainstorming activity in Step 3 on separate sticky notes. • Sort the sticky notes with similar subjects into groups. These groups will form the basis for your site’s main navigation. • Keep the number of groups to a minimum. Generally, navigational items are more easily scanned and remembered when they are kept to six or fewer. • Give each of these groups a temporary name. You will refine these names later. • Place the sticky notes together in their groups on a big sheet of paper (see the illustration “Sample of content groupings” on the following page). • Take out any duplicate items so that you don’t end up with two pages that contain the same information. If multiple sections need the same information, choose a location for the information to exist and link to it when necessary. • Items that you would like to appear on every page of your site can be placed in a footer or a toolbar. If content areas can be placed on the same Web page, combine them and come up with a new name for the subject of this page. For example, “Program Overview” and “Our Mission” can probably be combined into one page titled, “Who We Are.” • Now, see if the subjects within each main grouping can be combined into subcategories (see the illustration “Sample of subcategory grouping” on the following page). Create temporary names for any subcategories.

33. Sample of content groupings

34. Step 5: Creating the site map • Site maps are visual representations of the content areas • Not every page will have a child, but every all pages has a parent

35. Site Map

36. Step 6: Outlining your navigational structure • Take site map and draw a navigation bar • Navigational items should NEVER point to 1) other sites and 2) non-HTML files (like pdf, doc, etc.) • Links to other sites and documents should be placed in your central content area or a “related links” section. • Analogy: textbook TOC

37. Navigation guidelines • Vertical navigation- If your navigation links is small (less than 20), left or right column navigation might be appropriate • Horizontal navigation- If your navigational links is more than 20, you might need to put main navigation in horizontal and sub navigation on each page in a column. • Adding audience navigation – If site is very large (100 or more pages), consider adding navigation for key audiences.

38. Navigation Sketch

39. Step 7: Labeling the content areas • Accurate and meaningful labels are essential • Users click words, so the words need to make sense • Test your wording • Labels shouldn’t be more than 3 words long

40. Refining content area labels

41. Step 8: Creating the Wireframes • A wireframe is a sketch or blueprint that closely represents how the areas of a page will be organized. • This is the deliverable to hand off to a professional designer (designer will develop a mockup)

42. Wireframe to Mockup