Make your visitors' experience and journey the best that it can be
Reading and searching for information on the web is different to reading it in a printed document or book—therefore information has to be written and presented differently. We don't sit down and read a website page-by-page, front to back as we would a book. We search, scan, and hit the back button until we find what we are looking for.
Tips to make your page web-ready and web-readable
Every page is a landing page
Remember that you can potentially get to any web page from a search engine or link from another site; not all users will start at the Otago home page or your department home page and work from there. Every page needs to be able to stand alone.
F-writing: Structure your page the way that people will read it
Studies show that people scan web pages in an F-shaped pattern, hunting for headlines, key words and links. It is important to structure your pages in this way.
The focus of your page will be the headline and the left-hand margin; therefore it is important to front-load your headlines, sub-headlines and paragraphs.
Readers don't want to dig for information—they want it on a silver platter.
Be concise and to the point
Forget about unnecessary introductions, background or history and get straight to the point.
Strip away any fillers or fluff in your writing and target the language you use to your intended audience. Will new students understand all the terms on your page? Would their mum? You don't want to scare people away with too many words or unnecessarily difficult language.
One page per topic or idea
Try not to jumble up too many points on one page. Organise your ideas so that each idea/topic has its own page. This will keep the writing focused and will make it easier for users to find information.
Use headings and subheadings
This is one of the best things you can do to make your page scannable.
Think of your headings as lighthouses. They should guide your reader through the content of your page.
Your headings should be front-loaded with the important keywords closest to the left-hand margin, and long enough to give a reader the gist of the following paragraph.
An easy way to test your heading is to see if it makes sense out of context. Imagine it is a link on another page—would the reader know exactly what they were getting if they clicked on it?
Examples of bad headings
- Staff
- Undergraduates
- 2024
- Papers
Examples of good headings
- Our people in Marketing Services
- History undergraduate papers for BA
- Geography PhD Candidates for 2024
- What topics are covered by Zoology papers?
Don't be afraid of writing long headings. Less isn't more.
Introductory paragraph
This paragraph, like the main heading (H1), gives meaning to the page and its content. According to NN/g "the intro text has the same purpose for an interior page as the homepage does for the entire site ..."
Make your links effective: avoid link spatter
Link spatter is when links are sprinkled all over the page, one word here, one phrase there. These sorts of links are distracting to the reader and make your content difficult to read. Link spatter makes it difficult for users to know:
- What to click/tap on
- What may be behind a link
- Why it's even there
Choose links carefully and strategically. If a link is not central to the subject or if the information can be easily found in a web search, there is little point in linking. Link text should be short and concise for non-visual users. The description should allow users to distinguish one link from other links on the page and helps the user to decide whether to follow the link.
Single words ("publication", "study", "research") are too easy to miss. Link text of five words or so works well and tells the user what to expect and what the destination is. There should be no surprises when the link is visited.
Another benefit of informative link text is that if the URL doesn't work there is enough information that will simplify the search for the lost content, users will know what to look for.
Good links:
- Use bulleted lists
- To increase visibility
- Provide a positive user experience
- Increase accessibility for users with disabilities
- Are written like headings
- Run down the left-hand margin
- Let the reader know exactly where the link will take them, eg:
✗ Bad: Click here
✗ Bad: Read more
✗ Bad: Not letting the reader know it is a PDF or going to another website altogether
✓ Good: University of Melbourne Physics programme website
✓ Good: Linguistics Undergraduate Handbook 2024 [PDF, 200KB]
✓ Good: PhD scholarships at Otago: full list
Hide your URLs
Having long, complicated URLs visible on the page is messy. More importantly though, URLs don't always give users a clear idea of what kind of content they link to. Links should always be written out in text format, effectively "hiding" the URL in the link.
Good example:
Bad example:
- Learn how to create links at http://www.otago.ac.nz/webservices/resources/writers/otago021049.html#URL
Conventions: Do things the way users expect
Underlining
Save underlining text for link text only. Many users will be confused when they try to click on it and nothing happens.
Blue font
Blue font usually indicates that the word is a link. As with underlining above, use blue for link text only