With headings as your structure, paragraphs, ordered lists, unordered lists, data tables, images, etc., will flesh out your content. Text might have treatment like bold, italic, link, etc., to draw attention to key concepts and resources.
When greeted with a text-heavy page, users often skim in a "F" pattern: they'll read the first line or two, then skim (especially the left side) of lines lower on the page. Good design can help a) counteract this, and b) connect users quickly to the content they're looking for.
As with anything, you want to write with your audience in mind. We've previously talked about how they might be distracted, or stressed. Front-load important concepts and keep things straightforward. The less stress your content brings to their experience, the better they'll feel about what you're offering.
Here are a few key ideas for better writing on the web:
Finally, a very important one:
"When composing links, remember the 4 Ss. Write specific links that set sincere expectations and fulfill them, that are substantial enough to stand alone while remaining as succinct as possible." - from Nielsen/Norman Group, "Better Link Labels"
Want more? Check out "Antidotes for the F-Shaped Pattern" and "Legibility, Readability, and Comprehension" from the Nielsen/Norman Group.
Here are a few examples of link text and how it could be improved.
Note: an underline is used below to indicate which text would be linked in each example.
Original | Improved | Why is it better? |
---|---|---|
Click here to register. | Register now. | The link text describes the action (and encourages it). |
You'll find more at this link. | Find out more. | The link indicates what you'll find at the destination: more! |
Please check the Library events calendar for all the workshops being offered this semester. | Please check the events calendar to see workshops being offered this semester. |
This one is a bit of a trick: technically "workshops" (in the first example) could be right... especially if the link goes to a dedicated list of workshops. However, since we want the user to visit the events calendar, it's better to draw attention to that key action. (Extra credit: This is also slightly shorter, remembering that "Library" is probably conveyed by context! ) |
In addition to lacking clarity, very short links (like "here" or "link") are a very small target! They can be hard to hit if your hands are shaky, your device is small, or if you're inexperienced with a mouse.
As the average user skims a page, link text jumps out. Make sure it's meaningful!
Alt text is meant to replace the experience of the image, which is not always the same as describing it in a literal sense.
A few guidelines:
Here's an example:
Another example:
Want more examples? WebAIM has a examination of this under the heading "Context is Everything".
Large media files (like images and videos) can require a massive download in order to be experienced. In the spirit of Universal Design, make sure your media files are properly sized to avoid frustrating your user with slow download times, unnecessary data usage fees, or barriers because of spotty service.
Large images and videos hurt load time and require more from your users. The faster, more weightless you can make your media experience, the more likely they are to be able to experience it, and do so without additional stress or frustration!
Keep in mind image rights when you're identifying images, but there are two things that make this fairly easy:
Images bring a lot to content but they also pose challenges. Keep in mind the principles of Universal Design when choosing images.
You might consider:
In most cases, charts or graphs are in non-interactive image format. Your user needs alternate ways to experience this content if they can't view the image. Can your chart or graph be adequately described in alt text?
If not, could the content be put into a data table? Or could the image be kept sparse and described in full detail below (in a way that would be useful for all visitors)?
There's more information about charts, graphs, and data tables in the next section.