Microcopy

• Make your titles front-loaded: use as many keywords as possible at the beginning of the title.
• Find out what the public calls your content by using search tools to look up keywords. Avoid internal names.
• Avoid the document type in titles (e.g. how to… instead of guidance).
• Avoid dates unless they make the title unique (e.g. Annual report 2025).
• Structure your titles and headings well to improve accessibility; you may watch this video on why you should use the correct heading structure in your content.

Main heading (H1)

• The main heading (H1) is the title visible in the page header. It is the only heading styled as an H1.
• An H1 should describe what the page is about.
• Include one or more keywords (other keywords can be included in subheadings and in the introduction) and use 70 characters at most.
• Check your H1 makes sense by itself and among sibling pages.

 

Subheadings (H2, H3, etc.)

• Use subheadings (H2, H3, etc.) for any new block of content to let users scan the page.
• Avoid skipping heading levels (e.g. from H2 to H4).
• Have some content between heading levels unless it is clear how the lower one follows the higher one.
• Use heading styles from the graphic charter; screen readers will not recognise other styles (e.g. bold text) as headers.
• Make sure that important CTAs are under a related heading (e.g. Apply button under Apply to a bachelor’s programme heading).
• Avoid:
  • Questions: it is difficult to put important information first and users want answers, not questions.
  • Technical terms unless you have already explained them.
  • Introduction as your first subheading: give the most important information and avoid being generic.

• Summarise the content of the page for users to check if they are on the right page.
• Use as few words from the title as possible, and include keywords that you have not used in the title.
• Avoid to mention the content type (e.g. this conference is about…).
• Keep the introduction short (one or two short paragraphs).

Page title (meta title)

• The page title is a meta tag which appears in the Search Engine Results Page (SERP) and in the browser tab.
• A page title should encourage users to click through.
• Include the main keywords and use 60 characters at most (search engines will hide further characters with ellipses).
• Align the page title with the meta description (see below).
• Check your page title makes sense by itself and in search results.
• Include the name of the institution: add “ • UniDistance Suisse” or “ • FernUni Schweiz” at the end of the title.

 

Summary (meta description)

• The summary is the meta description which appears in the Search Engine Results Page (SERP). It has the same goal as the introduction (let users understand whether the page has the information they need).
• Use 160 characters at most (search engines will hide further characters with ellipses).
• End a summary with a period to help people who use assistive technology like screen readers.

• Use sentences with 25 words at most. If they are longer, split them to make them clearer.
• Use 75 characters per line at most. The template controls this length.
• Use headings and give rhythm to your page body to make it easier to scan.

 

Paragraphs

• Use short paragraphs (one or two sentences) in introductions.
• Use long paragraphs (three to five sentences) for other sections.
  • Avoid repeating the introduction or summary in the first paragraph.
  • If your paragraph has more than seven sentences, split it in two paragraphs.
  • If you have several short paragraphs in the body, group them in a list.

 

Callouts

• Use callouts to:
  • Highlight key information.
  • Make temporary announcements.
  • Give extra information (e.g. material for further reading).
  • Report quotes (e.g. testimonials).
• Use different graphic styles for different kinds of callouts.
• Make callouts brief and easy to scan thanks to visual elements (e.g. icons) and good formatting (e.g. subheading, bold text).

• Use the right sidebar differently depending on the page type:
  • Service page: contact.
  • Event, article or job: similar items.
  • About page: related items.
• Add a subheading to each block.
• Keep the sidebar structure coherent across the whole website (e.g. a contact block always starts with the name of the service, then lists a mail address, a phone number, etc.)

• Provide CTAs in context, when they are useful.
  • CTAs are redundant on cards (see below).
• Provide as many CTAs as pertinent, but avoid repeating the same CTA on the same page unless necessary.

 

CTA labels

• Make CTAs descriptive and include relevant terms (not Click here or More) so they make sense in isolation, because users may use them to scan the page.
• Be consistent with language used elsewhere: match CTA labels with other page elements (in particular with headings) and with language used in other pages.
• Keep CTA labels short (ideally three to five words), but most importantly make them clear. If your label is too short (one or two words), it is potentially difficult to understand, so make it more descriptive.
• Avoid using the same label for CTAs that take to different places.
• If you have more than one CTA on a page to the same place, use identical or similar labels.

 

CTA destinations

• If your CTA takes users to other content (on the same page or on a different one), use the title or heading of that content for the CTA label.
  • If the name of the content is specific enough, avoid any additional verbs (e.g. How to enroll, not Discover how to enroll).
• If your CTA takes users to a page where they can start a task, start your label with a verb (in English and Swiss French).
  • If your CTA is within its context (e.g. registration to an information webinar in the webinar page), the verb can suffice (e.g. Register). If your CTA is out of context (e.g. registration to an information webinar in a programme page), complete it with specific information (e.g. Register for information webinar). You may leave articles out.
  • In English: use the imperative form.
  • In Swiss French and Swiss German: use the infinitive form.
• If your CTA takes users to a page in a different language, add the information in the label (e.g. student grants in the Canton of Vaud (French only)).
• If your CTA takes users to a document, add the information in the label (e.g. study programme in psychology (PDF)).
• If your CTA takes users to a different website, add Bootstrap’s icon to show it is an external link.

 

Types of CTAs

Links as CTAs

• Use links in the page body; never use them in titles and headings.
• Avoid spelling out URLs, but when you need to, leave off the http://www.

 

Buttons as CTAs

• Use buttons for the main CTAs.
• Keep the link between the title and the button that belong to the same block.
• Use different graphic styles for primary and secondary buttons.
• You may use icons in a button.
• Keep your labels short (2–3 words) and ensure they reflect the action they lead to.
• Use the infinitive form for your labels.

 

Cards 

• Use cards to list similar items (e.g. team members, related articles, etc.) in the page body or in the sidebar.
• Add a heading to a group of cards.
• In the card, show information that differentiates one item from the other and encourages users to go further. For example:
  • Event: title, date, place.
  • Article: title, publication date, author.
  • Job: title, publication date.
  • Member: name, role.
  • Testimony: name, profession and/or studies, short quote.
• Add tags to let users scan through items easily (at least one indicating the related faculty or service).
• Use images only if they add value (no stock images).
• Use clear icons.
• You can send users to one destination only (the whole card is clickable—you cannot add any further links or buttons). If need be, considering creating a second card or transforming your card in a different element.
• Avoid mixing different kinds of items (e.g. jobs with news).

• Use lists to let users scan through similar items.
• List seven items at most: longer lists are difficult to scan; split them and add subheadings or short introductory paragraphs.
• Avoid repetitions: if listed items all start with the same words, move the latter to the introductory paragraph.

Note that some of the following instructions might not be applicable in Odoo forms.

• Use form titles to clearly and quickly explain the purpose of the form.
• If needed, add an introductory paragraph.
• Only request needed information.
• Make sure the final button is coherent with the form title.
• In case of long forms (including more than seven fields), group similar fields in sections with subheadings.

 

Form fields

• Use the label above the box to state what kind of information users should give (e.g. First name and surname).
• The field box may be empty or show placeholder text that gives an example of the information users should give or instructions (e.g. 200 characters at most).
• Indicate which fields are compulsory.