Web Pages: Content & Design

As a technical writer, your duties may range from writing copy to be posted online to actually designing a web page or website. No matter what the scope of the technical writing project is, you need to create user-friendly content and user-friendly design.

Initial Usability Testing

Usability testing always occurs at the end of web page development. However, starting to test a site before it is built will help avoid some problems before you put a lot of effort into the site. You may want to use focus groups for initial usability testing or, if you do not have access to a focus group, share your ideas with people who might be potential users and ask for their insight. Find out what people expect from your site. Users may need something different than what you were preparing to create. Potential users can give you additional ideas; for example, you can find out what words best resonate with your audience. Testing is key to building a web page. If you can, get input from potential users so you’ll have a better site from the start.

User-Friendly Content

People read differently online than they do when they read print materials—web users typically scan for  information. In a study of online reading behavior, “How Little Do Users Read?,” Jakob Nielsen found that “on the average webpage, users have time to read at most 28% of the words during an average visit; 20% is more likely.”[1] So it’s your job to create content that readers can find quickly and understand easily. There are two aspects to user-friendly content: 1) the content itself, and 2) the language used to present that content.

Content

Developing usable online content requires a strategic approach. Content not only includes the words on the page but also the images and multimedia that are used. It’s important to understand how what you are creating fits into the overall content strategy of the web page or web site, what the content life cycle entails, and who is involved in the process.

Your first step in developing information is always research. You need to consult to determine the content strategy for the web page. Who is the intended audience? What’s the intended purpose of the web page? To inform? To persuade? To sell? What particular concept should be emphasized, the one idea that the organization wants all users who visit the web page to understand? Consulting about key words that users might use as search terms is one way of identifying important concepts. Determine the stakeholders involved with the web page. You may need to consult with various departments in the organization in order to get a sense of the information that’s needed to meet the page’s purpose.

You also need to ask about the web page’s upkeep. Who will maintain the content after you create it—you or others? How often will the content be reviewed and updated? Maintenance, review, and updating are important aspects that let you know whether you should put time-sensitive information on the page.

And, you need to consult about the page’s style. Should you rely more heavily or more equally on images or language in order to present content that addresses the web page’s purpose and audience? For example, The Sierra Club’s main page relies on photographs and headings that offer main concepts, while the U.S. Environmental Protection Agency places more language and links on its main page. Each approach is consistent with its organization’s purpose and content strategy.

People come to your website with a specific task in mind. When developing your site’s content, keep your users’ tasks in mind and write to ensure you are helping them accomplish those tasks. If your website doesn’t help them complete that task, they’ll leave. Conduct market research, perform a task analysis and analyze metrics to better understand what users are looking to accomplish. Knowing your users’ top tasks can help you identify:

  • Content to feature on your homepage or landing pages
  • Page headers and sub headers
  • A logical structure to each page’s content

Make sure to read usability.gov’s pages on Task Analysis and Web Analytics Basics for fuller information on the important process of task analysis.

Overall, each piece of content should:

  • Reflect the organization’s goals and user’s needs. You can discover your user’s needs through conducting market research, user research, and analyzing web metrics.
  • Understand how users think and speak about a subject. Content should ideally be created and structured based on user testing. Doing this will also help you with search engine optimization (SEO).
  • Be useful. Each piece of content should have a purpose; omit needless content.
  • Be factual and ethical. Information should be valid and should not intentionally mislead or in any way skew the facts being presented.
  • Be up to date. When new information becomes available, update your content or archive it.

Language

User-friendly content also depends on the language in which that content is presented. When writing for the web, use plain language to allows users to find what they need, understand what they have found, and then use it to meet their needs. Language should also be actionable, findable, and shareable.

  • Use the words your users use. By using keywords that your users use, you will help them understand the copy and will help optimize your page for search engines.
  • Use pronouns. The user is “you.” The organization or government agency is “we.” This creates cleaner sentence structure and more approachable content.
  • Use active voice. Present the “actor” performing the action, e.g., “The board proposed the regulation,” not “The regulation was proposed by the board.”
  • Use short sentences and paragraphs. The ideal standard is no more than 20 words per sentence, five sentences per paragraph. Use dashes instead of semi-colons or, better yet, break the sentence into two. It’s OK to start a sentence with “and,” “but,” or “or” if it makes things clear and brief.
  • Use bullets and numbered lists. Don’t limit using a list to just long lists. One sentence with two bullets is easier to read than three sentences.
  • Use clear headlines and subheads. Questions, especially those with pronouns, are particularly effective.

Remember that developing web copy in plain language in the federal government is the law. There’s a Checklist for Plain Language on the Web along with some federal department style guides offer information about the government’s plain language standard.

User-Friendly Design

Design deals with the layout and placement of information on the page. Good design is crucial to creating an effective web page, since you need to anticipate and guide how users will read.  Users generally scan and navigate a web page in all different directions, not necessarily left to right or top to bottom. There are a few design basics to keep in mind as you’re developing content, basics that will help you when you consider your content’s placement on the page:

  • Chunk your content. Chunking makes your content more scannable by breaking it into manageable sections.
  • Front-load the important information. Use the journalism model of the “inverted pyramid.” Start with the content that is most important to your audience, and then provide additional details.
  • Use images, diagrams, or multimedia to visually represent ideas in the content and to direct users’ eyes to important information.

Once you have content, consider how to place it on the page. Wireframing, creating a mock-up, and testing your page on different devices will help you create user-friendly design.

Wireframing

Figuring out the page design is called “wireframing.” The following video explains one person’s process of wireframing—in this case, seeing the process illustrates the process more than about it (and that’s the kind of decision you need to make about web page content and how it’s presented).

Note that while a lot of specialized software exists, you can create a wireframe in Word or simply by drawing. The important thing is to optimize the placement of content on the page to address both your purpose and your users’ needs.

As you start considering how to place your content, keep in mind that tasks (what the user has come to the page looking for) that are most important and/or most commonly sought should be the main focal points of the page. The least important information, usually consisting of contacts, site map, terms of use, etc., usually goes at the bottom, because if some users need that information, they’ll specifically search for it.

Consider as well whether you want columns in which to place content, or text across the page. Many web pages use columns of some sort based on readability studies such as Design Guidelines for Web Readability that say to “avoid horizontal scrolling.”[2] Whether or not you use columns, don’t create content that consists of large blocks of text extending the width of the screen. Offer succinct content in small units.

Also remember that you’ll need to create spaces in your wireframe for headings, navigation, images, and media as well as text. Wireframing is useful because the basic layout helps you see white space as well as content placement; you can determine if you have enough white space to emphasize and separate information. An overriding concept is to keep the design as clean, simple, and easy to use as possible.

Mock-up

Once you have your basic design, you can do a mock-up of the page, which includes the actual content, colors, and type fonts, to see if they present the information to effectively address your purpose and your audience’s needs. At the mock-up stage, consider the design message or brand, the image the organization wants to portray to the reader. When creating the look of the web page you must use logos, colors, fonts, and images that support the personality of the organization. After you complete your mock-up, move to the actual web page creation.

Web Page Test

Once you’ve created your page, test the design on many different browsers and devices to deal with any design issues. Professional web design firms run their sites through an intense quality assurance phase. If this is not a feasible task, you can make your site available on private test sites. Web pages will appear different depending on the environment in which they are viewed. The overall idea of this final phase of user-friendly design is to make sure that the information is being presented clearly and there are not any overt problems.

Final Usability Testing

Once you think you have user-friendly content and design, move into usability testing with as many potential users as you have available.  Again, you may want to use focus groups or observation strategies. Refer to the page on Usability for fuller information.

Colorado State University’s WAC Clearinghouse has a page on Writing for the Web which contains a discussion, illustrations, and links relating to web page content and design.
[1] Nielsen, Jakob. “How Little Do Users Read?” Nn/g Nielsen Norman Group Website, May 5, 2008. https://www.nngroup.com/articles/how-little-do-users-read/

[2]
Miniukovich, Aliaksei., De Angeli, A., Sulpizio, S., and Venuti,P. “Design Guides for Web Readability.” Proceedings of the Designing Interactive Systems (DIS) Conference, June 10-14, 2014. https://www.researchgate.net/publication/317420534_Design_Guidelines_for_Web_Readability